इंटरएक्टिव और कस्टमाइज़्ड मैप बनाने के लिए 13 जावास्क्रिप्ट लाइब्रेरीज़

हमने पहले मानचित्र बनाने में आपकी सहायता करने के लिए Google मानचित्र निर्माता और 10 अन्य उपकरण दिखाए थे। हालाँकि, यदि आप इसके बजाय जावास्क्रिप्ट पुस्तकालयों का उपयोग करना पसंद करते हैं, तो क्या हमें आपके लिए पद मिल गया है। यहां जेएस लाइब्रेरी हैं जिनका उपयोग आप विशेष मानचित्र मार्कर दिखाने के लिए कर सकते हैं, कस्टम मार्ग रेखाएँ खींच सकते हैं या यहां तक कि एक डायलॉग दिखा सकते हैं जब आप हॉवर करते हैं या मानचित्र के कुछ बिंदुओं पर क्लिक करते हैं.

अपने नक्शे को उस शैली में निजीकृत करें जो आप चाहते हैं - उनमें से कुछ को सीएसएस के साथ स्टाइल किया जा सकता है - या अपने मानचित्र को आप की तरह इंटरेक्टिव होने के लिए कस्टमाइज़ करें. आपकी सुविधा के लिए प्रत्येक पुस्तकालय के मानचित्र डेटा, निर्भरता और लाइसेंस का स्रोत शामिल किया गया है.

होंगकीट पर अधिक:

Google मैप्स को कैसे स्टाइल करें
HTML5 जियोलोकेशन एपीआई के साथ उपयोगकर्ता स्थान प्राप्त करना
डेटा विज़ुअलाइज़ेशन: 20+ उपयोगी उपकरण और संसाधन

GMaps

GMaps Google मानचित्र को एक हवा में जोड़ना और अनुकूलित करना बनाता है। एक नक्शा जोड़ने के अलावा, आप नक्शे में कुछ चीज़ें भी कर सकते हैं, जैसे कि पॉलीइन्स जो एक मार्ग, एक विशेष मेनू नियंत्रण और यहां तक कि HTML तत्वों को खींचने के लिए उपयोगी हो सकते हैं।.

GMaps JSON प्रारूपित डेटा के साथ संगत है जिसका उपयोग आप अपने मानचित्र को किसी विशेष एप्लिकेशन के साथ फोरस्क्यू की तरह एकीकृत कर सकते हैं.

मानचित्र डेटा स्रोत: गूगल नक़्शे
निर्भरता: कोई नहीं
लाइसेंस: एमआईटी लाइसेंस

jHere

5KB पर, JHERE आपको दिखाता है कि आकार कोई मायने नहीं रखता है; आप अभी भी मुट्ठी भर अनुकूलन विकल्पों के साथ एक शक्तिशाली इंटरैक्टिव मानचित्र बना सकते हैं। JHERE HERE मैप से मैप विज़ुअलाइज़ेशन प्राप्त करता है, जो विंडोज फोन के लिए सबसे लोकप्रिय मैप प्रदाताओं में से एक है.

लाइब्रेरी को नई कार्यक्षमता के साथ बढ़ाया जा सकता है, और इस लाइब्रेरी के लिए कुछ एक्सटेंशन विकसित किए गए हैं जिनमें एक आकृतियों, मार्गों और कस्टम मार्करों को जोड़ना शामिल है.

मानचित्र डेटा स्रोत: यहाँ मैप्स
निर्भरता: jQuery या ZeptoJS
लाइसेंस: एमआईटी लाइसेंस

Kartograph

Kartograph नक्शे के शीर्ष पर इंटरैक्टिव तत्वों को जोड़ने के लिए दो फाइलें, एसवीजी प्रारूप में मानचित्र उत्पन्न करने के लिए, और कारोग्राफ़ोग्राफ.जेएस शामिल हैं। चूंकि Kartograph.js को राफेल के शीर्ष पर बनाया गया है। इसलिए मानचित्र IE7 में अच्छी तरह से काम करेगा। आप इंटरेक्टिव मानचित्र डेमो पर एक नज़र डाल सकते हैं कि कार्टोग्राफ क्या कर सकता है.

मानचित्र डेटा स्रोत: कार्टोग्राफ
निर्भरता: कार्टोग्राफिक, राफेल और jQuery
लाइसेंस: एजीपीएल और एलजीपीएल

Mapael

jQuery के Mapael आपको सुरुचिपूर्ण डेटा विज़ुअलाइज़ेशन के साथ-साथ अन्तरक्रियाशीलता के साथ मानचित्र बनाने की अनुमति देता है। उदाहरण के लिए, आप एक नक्शा बना सकते हैं और क्षेत्र के आधार पर विभिन्न रंगों के साथ नक्शे पर प्रत्येक क्षेत्र को नामित कर सकते हैं। आप इस क्षेत्र पर टूलटिप, और साथ ही घटना संचालकों को भी जोड़ सकते हैं क्लिक या मंडराना.

नक्शा खोज इंजन रोबोट के लिए वैकल्पिक सामग्री प्रदान करके एसईओ के साथ बनाया गया है जो जावास्क्रिप्ट-उत्पन्न सामग्री को क्रॉल करने में सक्षम नहीं हैं.

मानचित्र डेटा स्रोत: राफेल.जेएस
निर्भरता: jQuery
लाइसेंस: एमआईटी लाइसेंस

D3js

D3.js एक व्यापक जावास्क्रिप्ट पुस्तकालय है जो HTML, SVG और CSS के माध्यम से आपके डेटा को जीवन में लाएगा। अत्यधिक इंटरेक्टिव मानचित्र बनाने के लिए डी 3 का उपयोग काफी विविध है। वर्ल्ड बैंक ग्लोबल डेवलपमेंट के इस नक्शे को देखें और आप डी 3 के साथ जो निर्माण कर सकते हैं उसकी संभावनाएं देखेंगे.

मानचित्र डेटा स्रोत: डी 3.जेएस
निर्भरता: कोई नहीं
लाइसेंस: अपरिभाषित

DataMaps

यदि D3.js के साथ एक नक्शा बनाना भारी है, तो आप उपयोग कर सकते हैं DataMaps. DataMaps अनिवार्य रूप से एक D3.js प्लगइन है जो विशेष रूप से नक्शे बनाने के लिए विकसित किया गया है। यह D3.js की क्षमता में से कई को विरासत में मिला है, इसलिए आप इसके साथ सरल या बहुत अनुकूलित नक्शे बना सकते हैं। क्या मैंने उल्लेख किया है कि नक्शा उत्तरदायी है?

मानचित्र डेटा स्रोत: डी 3.जेएस
निर्भरता: डी 3.जेएस और टोपोजोन
लाइसेंस: एमआईटी लाइसेंस

GeoChart

GeoChart एक सरल Google मानचित्र है जो छोटे विवरणों के पूर्ण-विकसित नक्शे के बजाय क्षेत्र, मार्कर और पाठ को प्रस्तुत करता है। नक्शा एसवीजी में उत्पन्न होता है, और कई मायनों में अनुकूलित किया जा सकता है जिसमें क्षेत्र के रंग बदलना, पॉपअप जोड़ना और कस्टम मानचित्र मार्कर शामिल हैं।.

मानचित्र डेटा स्रोत: गूगल नक़्शे
निर्भरता: कोई नहीं
लाइसेंस: Google मैप्स टीओएस पढ़ें

Maplace

Maplace, Google मैप्स एपीआई v3 के माध्यम से मानचित्र बनाने के लिए एक jQuery प्लगइन। IE6 सहित सभी ब्राउज़रों में मैपलैस काम करता है। तो यह आपके ध्यान में लायक एक और बढ़िया प्लगइन है यदि आप संभव सबसे आसान तरीके से नक्शा बनाना चाहते हैं.

मानचित्र डेटा स्रोत: गूगल नक़्शे
निर्भरता: jQuery
लाइसेंस: एमआईटी लाइसेंस

आलीशान

Stately जावास्क्रिप्ट पुस्तकालय है कि अमेरिका के नक्शे उत्पन्न करने के लिए विकसित किया गया है। लाइब्रेरी तुलनात्मक रूप से हल्की होती है, जिससे आप अपने उत्पन्न नक्शे के शीर्ष पर सहभागी तत्वों को जोड़ सकते हैं.

मानचित्र डेटा स्रोत: आलीशान / एसवीजी
निर्भरता: कोई नहीं
लाइसेंस: एमआईटी लाइसेंस

GeoComplete

GeoComplete अपने आप में एक विशिष्ट जावास्क्रिप्ट पुस्तकालय है। पुस्तकालय में मानचित्र के साथ एक इनपुट फ़ील्ड शामिल होगी, जो आपके लिखते ही शहरों, देशों या राज्यों के सुझाव दिखाएगी.

मानचित्र डेटा स्रोत: गूगल नक़्शे
निर्भरता: jQuery
लाइसेंस: एमआईटी लाइसेंस

मानचित्र उपकरण

मैप टूल्स Google मैप्स को जोड़ने के लिए सहज ज्ञान युक्त एपीआई प्रदान करता है। यह भू-स्वरूपित JSON डेटा जैसे TopoJSON और GeoJSON को मैप रेंडर करने के लिए लोड करने का समर्थन करता है। उसके ऊपर, आप एनिमेटेड मार्कर जोड़ सकते हैं जो मुझे लगता है कि नक्शे को अधिक जीवंत बना देगा, HTML सामग्री को चर या प्लेसहोल्डर्स के साथ सम्मिलित करें Ala Handlebars.

मानचित्र डेटा स्रोत: गूगल नक़्शे
निर्भरता: जियोसन / टोपोजॉन
लाइसेंस: एमआईटी लाइसेंस

OpenLayers

OpenLayers विभिन्न मानचित्रण सेवाओं का उपयोग करके इंटरेक्टिव मानचित्र बनाने के लिए एक उच्च प्रदर्शन खुला स्रोत जावास्क्रिप्ट ढांचा है। आप कई मैप सेवाओं से टाइल लेयर या वेक्टर लेयर का उपयोग करके मैप लेयर सोर्स चुन सकते हैं.

OpenLayer मोबाइल को बॉक्स से बाहर तैयार करता है, जो उपकरणों और ब्राउज़रों में मानचित्र बनाने के लिए उपयुक्त है। आप अपने नक्शे के एक अलग रूप के लिए CSS का उपयोग कर सकते हैं। OpenLayers का उपयोग करके अपने वेब में मानचित्र को लागू करने के लिए, यहां एक ट्यूटोरियल है जो मदद करेगा.

मानचित्र डेटा स्रोत: OpenStreetMap
निर्भरता: कोई नहीं
लाइसेंस: अनिर्धारित

पत्रक

डेवलपर्स ने दिया पत्रक बुनियादी कार्य पूरी तरह से काम करने के लिए, इसके आकार को छोटा रखते हुए, मोबाइल उपकरणों के लिए बिल्कुल सही। विशिष्ट कार्यों के लिए, प्लगइन्स का उपयोग करके केवल NAT का विस्तार करें। पत्रक में आपके लिए आवश्यक ऑनलाइन नक्शा विशेषताएं हैं: टाइल की परतें, पॉपअप, मार्कर, और पॉलीलाइन, पॉलीगॉन, सर्कल या आयताकार जैसी नि: शुल्क वेक्टर परतें। यह अच्छा डिफ़ॉल्ट डिजाइन के साथ आता है, हालांकि आप आसानी से CSS3 का उपयोग करके शैली को अनुकूलित कर सकते हैं.

मोबाइल और डेस्कटॉप ब्राउज़र दोनों के लिए सबसे अधिक उपयोग करने की सुविधा है.

मानचित्र डेटा स्रोत: OpenStreetMap
निर्भरता: कोई नहीं
लाइसेंस: अनिर्धारित