Leaflet.js هي مكتبة الخرائط الأكثر بساطة التي ستجدها على الإطلاق
خرائط جوجل هي بالتأكيد الأكثر شعبية خريطة القطعة القابلة للتضمين لمصممي الويب. لكن ماذا عن مضيفا ميزات مخصصة مثل تلميحات الأدوات وعلامات دبوس?
هذا هو المكان مثل مكتبة رهيبة Leaflet.js يساعد للطن.
هذا ال مشروع مفتوح المصدر مجاني تماما تم إنشاؤها في البداية بواسطة أحد اللاعبين في Mapbox المسمى Vladimir Agafonkin. منذ ذلك الحين ، نمت Leaflet لتشمل العشرات من المساهمين حول العالم.
انها كثيرا تحديث مع إصلاحات الشوائب والميزات الجديدة التي تحسن التنفيذ الشامل على أي موقع. هذا هو إلى حد بعيد مكتبة الخرائط المفضلة بسبب قوتها الهائلة وتصميمها الجمالي.
إنه يحتوي على العديد من الميزات التي لا يمكنني إدراجها جميعًا ، لكن هنا الأكثر إثارة للاهتمام:
- تسريع الأجهزة المحمولة
- علامات الدبوس ، تراكبات الشكل ، وتلميحات الأدوات
- التكبير مخصص بالغسل والرسوم المتحركة
- لا تبعيات JS
- دعم لجميع المتصفحات الرئيسية بما في ذلك IE7+
التنفيذ صعب بعض الشيء لأنك تحتاج إلى أدخل الإحداثيات و تحديد حجم الخريطة يجب أن يكون.
يمكن للمستخدمين دائما تصغير و عموم حولها, لذلك يمكن أن تتغير دائما الرأي. لكنه يعتمد أيضا على كيف تحدد الخريطة على الصفحة.
هناك ضخم صفحة التوثيق كاملة من المعلومات لكل جانب من جوانب Leaflet. للأسف ، إنها كثيفة جدًا لدرجة أنني لا أوصي فقط بالغطس فيها لأنه من المحتمل أن تضيع. بدلا من ذلك ، تحقق من صفحة المنشورات التعليمية والذي يتضمن أيضا دليل البدء السريع للمبتدئين.
سوف تتعلم كيف تضمين الخرائط ، وتغيير حجم / الموقف, وكيف إضافة الرسومات المخصصة في الأعلى, مثل الدوائر أو علامات دبوس.
هذا دليل مقدمة واحدة يمكن يعلمك كل ما تحتاجه لاستخدام Leaflet على مدونة أو موقع ويب للشركة أو أي مشروع قادم.
توجد أسباب كثيرة لاستخدام خرائط Google: إنها قوية وموثوقة ومجانية. لكن النشرة تأتي مع الكثير من الميزات خارج الصندوق وتحتاج فقط إلى أضف ملفات CSS / JS إلى صفحة الويب الخاصة بك للبدء. يمكنك أن تجد حتى نسخ استضافتها على الانترنت إذا كنت تفضل الذهاب في مسار CDN.
لا تدع الوثائق تخيفك. هناك الكثير الذي يمكنك تعلمه ولكن ليس كل الميزات ضرورية لإعداد النشرة الأساسية.
وهذا لا يتطلب الكثير إنشاء خريطة مذهلة من الصفر. نلقي نظرة خاطفة على هذا التجريبي Codepen خلق باستخدام Leaflet.js و Google Maps API.
