रिएक्ट और मैपबॉक्स का उपयोग करके वेब पर मानचित्र

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

टेक स्टैक

आइए प्रौद्योगिकियों पर चर्चा करें। मानचित्रों के साथ काम करते समय, हम आम तौर पर तीन परतों का उपयोग करते हैं:

• उपयोगकर्ता इंटरफ़ेस का प्रतिपादन, जिसमें बटन और फ़ॉर्म शामिल हैं। हमारे स्टैक में, रिएक्ट यह भूमिका निभाता है;

• मानचित्र को प्रस्तुत करना और उपयोगकर्ता सहभागिता को सक्षम करना। हम इसके लिए मैपबॉक्स का उपयोग करते हैं;

• सर्वर से डेटा प्राप्त करना, जैसे मार्करों या बहुभुजों के बारे में जानकारी। डेटा पुनर्प्राप्त करने के लिए, हम ब्राउज़र की अंतर्निहित फ़ेच सुविधा का उपयोग करते हैं।

  
  

आइए मानचित्रों के साथ काम करते समय हमारे प्रौद्योगिकी स्टैक की बेहतर समझ हासिल करने के लिए प्रत्येक आइटम की समीक्षा करें।

प्रतिक्रिया

प्रतिक्रिया लाइब्रेरी आपको पेज तत्वों के साथ आसानी से और कुशलता से काम करने में सक्षम बनाती है। इसे फेसबुक द्वारा अपने स्वयं के उपयोग के लिए विकसित किया गया था, और इसमें पृष्ठों पर बटन, फॉर्म और अन्य इंटरैक्टिव तत्व जैसे कई घटक शामिल हैं। उदाहरण के लिए, फेसबुक ने एक बनाया सुलह एल्गोरिथ्म विभिन्न राज्यों की शीघ्रता से तुलना करने के लिए।

चूँकि किसी पृष्ठ पर तत्वों को बदलना ब्राउज़र के लिए सबसे महंगा ऑपरेशन है, इसलिए इसे यथासंभव कुशलतापूर्वक करना आवश्यक है। इस समस्या को हल करने के लिए, फेसबुक इंजीनियरों ने रिएक्ट लाइब्रेरी विकसित की, जो किसी पेज पर तेजी से और सीधे तत्व परिवर्तन को सक्षम बनाता है। किसी पृष्ठ पर त्वरित स्थिति परिवर्तन प्रदान करने के अलावा, रिएक्ट हमें सीधे DOM तत्वों के साथ काम किए बिना घोषणात्मक रूप से ऐसा करने की अनुमति देता है। इसके बजाय, हम आम तौर पर एक अमूर्त का उपयोग करते हैं जेएसएक्स , जो HTML जैसा दिखता है। आइए एक उदाहरण पर विचार करें:

 // It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> )

पदानुक्रम के निचले भाग में फॉर्म, बटन और इनपुट जैसे सामान्य DOM तत्वों के साथ घटकों को घोंसला बनाना संभव है। इन सरल तत्वों को इकट्ठा करके, हम अधिक जटिल तत्व बना सकते हैं, जैसे कि एक पूर्ण रूप:

 const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> )

मानचित्रों के संदर्भ में रिएक्ट हमारी किस प्रकार सहायता करता है? चूँकि पृष्ठ पर मानचित्र एक बटन या फॉर्म के समान इंटरैक्टिव है, हमारा लक्ष्य मानचित्र पर क्लिक जैसी घटनाओं के माध्यम से इसके प्रतिपादन और इंटरैक्शन को अनुकूलित करना है। रिएक्ट इस अनुकूलन को प्राप्त करने में मदद कर सकता है। यह कैसे काम करता है इसका एक उदाहरण यहां दिया गया है:

 // Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> )

रिएक्ट के साथ काम करते समय, यह याद रखना आवश्यक है कि यह पृष्ठ पर तत्वों के कुशल हेरफेर, त्वरित बदलाव और घटनाओं के माध्यम से उनके साथ बातचीत की अनुमति देता है। यह एक अमूर्तता के माध्यम से प्राप्त किया जाता है जो HTML जैसा दिखता है, जिससे सरल घटकों से जटिल घटकों को बनाना आसान हो जाता है।

मैपबॉक्स

अब, आइए मानचित्र पर ही चर्चा करें। मानचित्र बनाना और उपयोग करना चुनौतीपूर्ण हो सकता है, और केवल कुछ उत्पाद कंपनियाँ ही मानचित्रों को नए सिरे से डिज़ाइन कर सकती हैं। आमतौर पर, अधिकांश लोग उपयोगकर्ता के अनुकूल एपीआई के साथ पूर्व-निर्मित पुस्तकालयों पर भरोसा करते हैं जिन्हें आजमाया और परखा जा चुका है।

Google मैप्स, लीफलेट, बिंग मैप्स, मैपबॉक्स और अन्य सहित कई गतिशील मानचित्र प्रदाता उपलब्ध हैं। हालाँकि, हम इस पर ध्यान केंद्रित करेंगे मैपबॉक्स इसकी व्यापक विशेषताओं और उचित मूल्य निर्धारण नीति के कारण। उदाहरण के लिए, Google मानचित्र शुल्क लेता है $700 प्रति माह 100 हजार मानचित्र दृश्यों के लिए, जबकि मैपबॉक्स केवल शुल्क लेता है $250 . इसके अलावा, मैपबॉक्स प्रति माह 50 हजार तक मानचित्र दृश्यों की निःशुल्क पहुंच प्रदान करता है।

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

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

मैपबॉक्स विभिन्न प्रकार प्रदान करता है व्यावहारिक उदाहरण , हालांकि प्रलेखन कुछ सुधार से लाभ हो सकता है। उदाहरण के लिए, मार्कर कार्यक्षमता को शामिल करते समय, उदाहरण दस्तावेज़ीकरण से अधिक जानकारीपूर्ण हो सकते हैं। इसके अतिरिक्त, मार्कर क्लस्टर, कस्टम डेटा लोडिंग, सामान्यीकरण और मार्कर स्थिति परिवर्तन जैसे कई घटकों को विलय करते समय चुनौतियाँ उत्पन्न हो सकती हैं।

आइए मैपबॉक्स मानचित्रों पर दोबारा गौर करें। क्या करता है मैपबॉक्स एपीआई करना?

• यह पृष्ठ पर HTML तत्व में मानचित्र को प्रारंभ करता है;

• यह मानचित्र बनाने वाली छवियों को लोड और प्रस्तुत करता है;

• यह इनपुट डेटा के रूप में जियोसन का उपयोग करके मार्कर जैसे अतिरिक्त तत्व खींचता है;

• यह क्लिक या ज़ूम परिवर्तन जैसी घटनाएं उत्पन्न करता है, जिन्हें संभाला जा सकता है।

  
  

आइए इनमें से प्रत्येक आइटम पर करीब से नज़र डालें।

मैपबॉक्स टाइल्स का उपयोग करके मानचित्र प्रस्तुत करने में माहिर है। टाइलें छोटी वर्गाकार छवियां होती हैं जो बड़े मानचित्र का निर्माण करती हैं। टाइल का डिफ़ॉल्ट आकार 512x512 पिक्सेल है, और यह कोई भी हो सकता है वेक्टर या रेखापुंज . वेक्टर टाइलों का उपयोग सड़कों, इमारतों, रुचि के बिंदुओं (पीओआई) और बहुत कुछ को प्रदर्शित करने के लिए किया जाता है। उन्हें गतिशील रूप से स्टाइल किया जा सकता है, वे हल्के होते हैं, और मानचित्र के साथ सहज बातचीत की अनुमति देते हैं। रेखापुंज दूसरी ओर, टाइल्स का उपयोग उपग्रह इमेजरी प्रदर्शित करने के लिए किया जाता है।

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

 <canvas width="100" height="100" />

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

 mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom });

इसके बाद, हमें पृष्ठ पर 'मैप' आईडी वाले तत्व में एक मानचित्र मिलेगा।

उपयोगकर्ताओं को मानचित्र पर अधिक जानकारी प्रदान करने के लिए, हम अक्सर किसी निश्चित प्रतिष्ठान का स्थान या किसी विशिष्ट क्षेत्र की सीमाएँ प्रदर्शित करते हैं। इसे प्राप्त करने के लिए, हम एक विशिष्ट डेटा प्रारूप का उपयोग करते हैं जिसे कहा जाता है जियोजसन और मैपबॉक्स को निर्देश दें कि इस डेटा को कैसे प्रदर्शित किया जाए।

जियोजसन मानचित्रों पर भौगोलिक संरचनाओं को संग्रहीत करने का मानक प्रारूप है। यह विभिन्न आदिम प्रकारों को संग्रहीत कर सकता है जो भौगोलिक वस्तुओं जैसे पते, स्थान, सड़कें, राजमार्ग, सीमाएँ, देश, राज्य और इनके संयोजन का वर्णन करते हैं, जिन्हें मल्टीपार्ट के रूप में जाना जाता है। जियोजसन को 2008 में पेश किया गया था और इसे इस तरह दर्शाया गया है:

 { "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } }

आइए मैपबॉक्स में प्रयुक्त समन्वय प्रणाली के बारे में बात करते हैं। डिफ़ॉल्ट रूप से, मैपबॉक्स कार्यरत है ईपीएसजी 3857 , जो टाइल्स के साथ काम करने के लिए पृथ्वी को एक सपाट सतह पर प्रक्षेपित करने का एक तरीका है। इसे वेब मर्केटर के नाम से जाना जाता है और यह ऑनलाइन मानचित्रों के लिए मानक है। हालाँकि, मार्करों और बहुभुजों के बारे में डेटा से निपटने के दौरान, यह एक अलग समन्वय प्रणाली का उपयोग करता है जिसे कहा जाता है ईपीएसजी 4326 . यह प्रणाली पृथ्वी के दीर्घवृत्त पर निर्देशांक का वर्णन करने के लिए अक्षांश और देशांतर पर निर्भर करती है। मैपबॉक्स और अन्य मानचित्र प्रदाता स्वचालित रूप से निर्देशांक को EPSG 4326 से EPSG 3857 में परिवर्तित करते हैं। यदि हमें अलग-अलग के साथ काम करने की आवश्यकता है अनुमान , हम map.setProjection विधि का उपयोग कर सकते हैं।

अब, हम चर्चा करेंगे कि मानचित्र पर जियोसन को कैसे प्रदर्शित किया जाए। मैपबॉक्स दो इकाइयाँ प्रदान करता है जो हमें उपयोगी लगेंगी:

• स्रोत - यह डेटा सीड है। हम जियोसन डेटा के साथ एक नया स्रोत बना सकते हैं और इसे कॉन्फ़िगर कर सकते हैं, उदाहरण के लिए, फीचर संग्रह में प्रत्येक सुविधा के लिए एक आईडी उत्पन्न करने के लिए।

• परत - यह डेटा प्रतिनिधित्व है। हम स्रोत से डेटा को विभिन्न तरीकों से प्रदर्शित कर सकते हैं, जैसे सीमाएं दिखाना।

  
  

मानचित्र पर बहुभुज या मार्कर प्रदर्शित करने के लिए, हमें सर्वर से जियोसन प्रारूप में डेटा पुनर्प्राप्त करना होगा। फिर, हम एक स्रोत बनाते हैं, उसमें डेटा इनपुट करते हैं, और उसे आवश्यक परत से जोड़ते हैं।

 const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } });

इस कोड को चलाने के बाद, हमें परिणाम मिलता है:

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

 map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49}

संक्षेप में, हमें क्या याद रखने की आवश्यकता है? मैपबॉक्स हमें एक नक्शा प्रदर्शित करने, उसके ऊपर अपना डेटा खींचने और मानचित्र घटनाओं को संसाधित करने की अनुमति देता है। उसी समय, मैपबॉक्स छवियों (टाइल्स) को लोड करने और प्रदर्शित करने का ख्याल रखता है।

लाना

के बारे में एक शब्द लाना . हम पहले ही देख चुके हैं कि मानचित्र पर डेटा कैसे प्रस्तुत किया जाता है, लेकिन पहले, हमें इसे सर्वर से पुनर्प्राप्त करना होगा। जब हम पृष्ठ को पुनः लोड किए बिना पृष्ठभूमि में सर्वर से गतिशील रूप से डेटा का अनुरोध करते हैं, तो हम इस दृष्टिकोण को कहते हैं ajax (" एक सिंक्रोनस जे एवास्क्रिप्ट और एक्स एमएल")। सर्वर से डेटा को एसिंक्रोनस रूप से लोड करने के लिए कई उपकरण हैं, जैसे Axios या XMLHttpRequest (मूल)।

क्या याद रखें? हम सर्वर से डेटा पुनर्प्राप्त करते हैं, और इसके लिए कई लाइब्रेरी हैं, लेकिन हम फ़ेच का उपयोग करेंगे। आगे, हम देखेंगे कि मानचित्रों के साथ काम करते समय हम इसे विशेष रूप से कैसे करते हैं, क्योंकि इसमें बारीकियाँ हैं।

प्रतिक्रिया + मैपबॉक्स

अब देखते हैं कि ऊपर वर्णित प्रौद्योगिकियाँ एक साथ कैसे काम करती हैं। सबसे पहले, हम फ़ेच का उपयोग करके बहुभुज को प्रदर्शित करने के लिए डेटा पुनर्प्राप्त करेंगे। फिर हम मानचित्र के आरंभीकरण की घोषणा करेंगे, और इसके लोड होने के बाद, हम बहुभुज को मानचित्र में जोड़ देंगे।

आप यहां एक कामकाजी उदाहरण भी पा सकते हैं जोड़ना प्रदान किया।

 const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; } 

निष्कर्ष

हमने उस प्रौद्योगिकी स्टैक को देखा जो हमारे भविष्य की संरचना को रेखांकित करता है। निम्नलिखित लेख में, हम उन सिद्धांतों पर चर्चा करेंगे जो मानचित्र वास्तुकला को डिजाइन करने में मदद करते हैं, अधिकतम कम युग्मन और मॉड्यूल के उच्च सामंजस्य को कैसे प्राप्त करें, और एक स्केलेबल मानचित्र प्रणाली को कैसे बनाए रखें और विकसित करें।

आपके ध्यान के लिए बहुत - बहुत धन्यवाद! आपका दिन अच्छा रहे।