13 مكتبات JavaScript لإنشاء خرائط تفاعلية ومخصصة

سبق أن عرضنا مصمم خرائط Google و 10 أدوات أخرى لمساعدتك في إنشاء الخرائط. ومع ذلك ، إذا كنت تفضل استخدام مكتبات Javascript بدلاً من ذلك ، فهل حصلنا على المشاركة نيابة عنك. فيما يلي مكتبات JS التي يمكنك استخدامها لإظهار علامات خريطة خاصة أو رسم خطوط طريق مخصصة أو حتى إظهار مربع حوار عند المرور أو النقر فوق نقاط معينة من الخريطة.

قم بتخصيص خرائطك بالطريقة التي تريدها - يمكن تصميم بعضها باستخدام CSS - أو تخصيص خريطتك لتكون تفاعلية كما تريد. تم تضمين مصدر بيانات الخريطة والتبعيات وتراخيص كل مكتبة من أجل راحتك.

المزيد عن هونغكيات:

كيفية نمط خرائط جوجل
الحصول على موقع المستخدم مع HTML5 تحديد الموقع الجغرافي API
التصور البيانات: 20+ الأدوات والموارد المفيدة

GMaps

GMaps يجعل إضافة خرائط Google وتخصيصها نسيمًا. بصرف النظر عن إضافة خريطة ، يمكنك أيضًا إضافة أمرين إلى الخريطة ، مثل الخطوط المتعددة التي قد تكون مفيدة لرسم مسار ، عنصر تحكم قائمة خاص ، وحتى عناصر HTML.

GMaps متوافق مع البيانات المنسقة JSON والتي يمكنك استخدامها لدمج الخريطة الخاصة بك مع تطبيق معين ، مثل شخصيات قصص الابطال الخارقين.

مصدر بيانات الخريطة: خرائط جوجل
تبعيات: لا شيء
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

jHere

في 5 كيلوبايت ، يوضح لك أن الحجم لا يهم ؛ لا يزال بإمكانك إنشاء خريطة تفاعلية قوية مع عدد قليل من خيارات التخصيص. يشتق jHERE تصور الخريطة من خريطة HERE ، التي تعد واحدة من أكثر موفري الخرائط شهرة لنظام Windows Phone.

يمكن توسيع المكتبة مع وظائف جديدة ، وهناك عدد من الملحقات المطورة لهذه المكتبة بما في ذلك واحدة لإضافة الأشكال والطرق والعلامات المخصصة.

مصدر بيانات الخريطة: هنا خرائط
تبعيات: مسج أو ZeptoJS
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

Kartograph

Kartograph يتألف من ملفين ، Kartograph.ph لإنشاء الخريطة بتنسيق SVG ، و Kartograph.js لإضافة عناصر تفاعلية أعلى الخريطة. نظرًا لأن Kartograph.js مبنية على أعلى Raphael.js ، فستعمل الخريطة جيدًا حتى IE7. يمكنك إلقاء نظرة على عروض الخريطة التفاعلية لاكتشاف ما يمكن أن تفعله Kartograph.

مصدر بيانات الخريطة: كارتوغراف
تبعيات: Kartograph.py و Raphael و jQuery
رخصة: AGPL و LGPL

Mapael

مسج مابايل يسمح لك بإنشاء خرائط باستخدام تصوُّر أنيق للبيانات بالإضافة إلى التفاعل. يمكنك ، على سبيل المثال ، إنشاء خريطة وتعيين كل منطقة على الخريطة بألوان مختلفة استنادًا إلى المنطقة. يمكنك أيضًا إضافة تلميح الأدوات في المنطقة ، وكذلك معالجات الأحداث مثل انقر أو يحوم.

تم تصميم الخريطة مع وضع SEO في الاعتبار من خلال توفير محتوى بديل لروبوتات محرك البحث غير القادرة على الزحف إلى المحتوى الذي تم إنشاؤه بواسطة JavaScript.

مصدر بيانات الخريطة: Raphael.js
تبعيات: مسج
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

D3js

D3.js هي مكتبة جافا سكريبت شاملة ستجلب بياناتك إلى الحياة من خلال HTML و SVG و CSS. استخدام D3 متنوع للغاية بما في ذلك بناء خريطة تفاعلية للغاية. انظر هذه الخريطة الخاصة بالتنمية العالمية للبنك الدولي ، وسوف ترى إمكانيات ما يمكنك بنائه باستخدام D3.js.

مصدر بيانات الخريطة: D3.js
تبعيات: لا شيء
رخصة: غير محدد

DataMaps

إذا كان إنشاء خريطة باستخدام D3.js ساحقًا ، فيمكنك استخدامه DataMaps. DataMaps هي في الأساس مكون D3.js تم تطويره خصيصًا لإنشاء الخرائط. يرث الكثير من قدرة D3.js ، وبالتالي يمكنك بناء خرائط بسيطة أو مخصصة للغاية معها. هل ذكرت أن الخريطة تستجيب?

مصدر بيانات الخريطة: D3.js
تبعيات: D3.js و TopoJSON
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

GeoChart

GeoChart عبارة عن خريطة Google مبسطة تعرض المنطقة والعلامات والنص ، بدلاً من خريطة كاملة بتفاصيل دقيقة. يتم إنشاء الخريطة في SVG ، ويمكن تخصيصها بعدة طرق بما في ذلك تغيير ألوان المنطقة ، وإضافة النوافذ المنبثقة ، وعلامات الخريطة المخصصة.

مصدر بيانات الخريطة: خرائط جوجل
تبعيات: لا شيء
رخصة: اقرأ خرائط جوجل TOS

Maplace

Maplace, مكون إضافي مسج لإنشاء خريطة من خلال Google Maps API v3. Maplace يعمل في جميع المتصفحات ، بما في ذلك IE6. إذاً هذا هو مكون إضافي رائع يستحق انتباهك إذا كنت ترغب في إنشاء خريطة بأسهل طريقة ممكنة.

مصدر بيانات الخريطة: خرائط جوجل
تبعيات: مسج
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

فخم

Stately هي مكتبة JavaScript تم تطويرها لإنشاء خرائط الولايات المتحدة. المكتبة خفيفة الوزن إلى حد ما بالنظر إلى أنه يمكنك إضافة عناصر تفاعلية أعلى الخرائط التي تم إنشاؤها.

مصدر بيانات الخريطة: Stately / SVG
تبعيات: لا شيء
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

GeoComplete

GeoComplete هي مكتبة جافا سكريبت متميزة من تلقاء نفسها. ستضيف المكتبة حقل إدخال جنبًا إلى جنب مع الخريطة ، والتي ستظهر اقتراحات للمدن أو البلدان أو الدول أثناء الكتابة.

مصدر بيانات الخريطة: خرائط جوجل
تبعيات: مسج
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

أدوات الخريطة

توفر أدوات الخرائط واجهة برمجة تطبيقات بديهية لإضافة خرائط Google. وهو يدعم تحميل بيانات JSON ذات التنسيق الجغرافي مثل TopoJSON و GeoJSON لتقديم الخريطة. علاوةً على ذلك ، يمكنك إضافة علامات متحركة أعتقد أنها ستجعل الخريطة أكثر حيوية ، وإدراج محتوى HTML مع المتغيرات أو العناصر النائبة ala Handlebars.

مصدر بيانات الخريطة: خرائط جوجل
تبعيات: جيوجسون / توبوجسون
رخصة: رخصة معهد ماساتشوستس للتكنولوجيا

OpenLayers

OpenLayers هو إطار جافا سكريبت مفتوح المصدر عالي الأداء لإنشاء خرائط تفاعلية باستخدام خدمات رسم الخرائط المختلفة. يمكنك اختيار مصدر طبقة الخريطة باستخدام الطبقة المتجانبة أو طبقة المتجه من عدد من خدمات الخريطة.

أصبح OpenLayer جاهزًا للهاتف المحمول ، وهو مناسب لإنشاء الخرائط عبر الأجهزة والمتصفحات. يمكنك استخدام CSS لإلقاء نظرة مختلفة على خريطتك. لتنفيذ الخريطة على الويب باستخدام OpenLayers ، إليك برنامج تعليمي يساعدك.

مصدر بيانات الخريطة: خريطة الشارع المفتوح
تبعيات: لا شيء
رخصة: غير محدد

طبقه

أعطى المطورين طبقه الوظائف الأساسية للعمل بشكل مثالي ، والحفاظ على حجمها صغيرًا ، مما يجعلها مثالية للأجهزة المحمولة. لوظائف محددة ، ما عليك سوى تمديد Leaflet باستخدام المكونات الإضافية. يحتوي Leaflet على معظم ميزات الخريطة عبر الإنترنت التي تحتاجها: طبقات التجانب ، الإطارات المنبثقة ، علامات ، وطبقات المتجهات المجانية مثل polylines ، المضلعات ، الدوائر أو المستطيلات. لأنه يأتي مع تصاميم افتراضية لطيفة على الرغم من أنه يمكنك تخصيص النمط باستخدام CSS3 بسهولة.

يحتوي Leaflet على ميزات التفاعل الأكثر استخدامًا لمتصفحات الجوال وسطح المكتب.

مصدر بيانات الخريطة: خريطة الشارع المفتوح
تبعيات: لا شيء
رخصة: غير محدد