मानचित्रों को शामिल करने से वेब अनुप्रयोगों को बहुत फायदा हुआ है, जिससे उपयोगकर्ताओं को मूल्यवान स्थान-आधारित जानकारी मिलती है। मानचित्रों ने दुनिया के साथ हमारी बातचीत को बदल दिया है, अपरिचित स्थानों पर घूमने से लेकर आस-पास के भोजनालयों की खोज करने तक। परिणामस्वरूप, हाल के दिनों में वेबसाइटों में मानचित्रों का एकीकरण तेजी से लोकप्रिय हो गया है। फिर भी, ऐसे मानचित्र डिज़ाइन करना जो कार्यात्मक और उपयोगकर्ता के अनुकूल दोनों हों, एक चुनौती पेश कर सकते हैं, खासकर उन लोगों के लिए जिनके पास इस क्षेत्र में अनुभव की कमी है। इस लेख में, मैं आपके ब्राउज़र में प्रभावी मानचित्र बनाने के बारे में उपयोगी युक्तियाँ साझा करूँगा।
आइए प्रौद्योगिकियों पर चर्चा करें। मानचित्रों के साथ काम करते समय, हम आम तौर पर तीन परतों का उपयोग करते हैं:
उपयोगकर्ता इंटरफ़ेस का प्रतिपादन, जिसमें बटन और फ़ॉर्म शामिल हैं। हमारे स्टैक में, रिएक्ट यह भूमिका निभाता है;
मानचित्र को प्रस्तुत करना और उपयोगकर्ता सहभागिता को सक्षम करना। हम इसके लिए मैपबॉक्स का उपयोग करते हैं;
सर्वर से डेटा प्राप्त करना, जैसे मार्करों या बहुभुजों के बारे में जानकारी। डेटा पुनर्प्राप्त करने के लिए, हम ब्राउज़र की अंतर्निहित फ़ेच सुविधा का उपयोग करते हैं।
आइए मानचित्रों के साथ काम करते समय हमारे प्रौद्योगिकी स्टैक की बेहतर समझ हासिल करने के लिए प्रत्येक आइटम की समीक्षा करें।
चूँकि किसी पृष्ठ पर तत्वों को बदलना ब्राउज़र के लिए सबसे महंगा ऑपरेशन है, इसलिए इसे यथासंभव कुशलतापूर्वक करना आवश्यक है। इस समस्या को हल करने के लिए, फेसबुक इंजीनियरों ने रिएक्ट लाइब्रेरी विकसित की, जो किसी पेज पर तेजी से और सीधे तत्व परिवर्तन को सक्षम बनाता है। किसी पृष्ठ पर त्वरित स्थिति परिवर्तन प्रदान करने के अलावा, रिएक्ट हमें सीधे DOM तत्वों के साथ काम किए बिना घोषणात्मक रूप से ऐसा करने की अनुमति देता है। इसके बजाय, हम आम तौर पर एक अमूर्त का उपयोग करते हैं
// 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 मैप्स, लीफलेट, बिंग मैप्स, मैपबॉक्स और अन्य सहित कई गतिशील मानचित्र प्रदाता उपलब्ध हैं। हालाँकि, हम इस पर ध्यान केंद्रित करेंगे
मैपबॉक्स ऑफर
इसके अतिरिक्त, मैपबॉक्स एक प्रदान करता है
मैपबॉक्स विभिन्न प्रकार प्रदान करता है
आइए मैपबॉक्स मानचित्रों पर दोबारा गौर करें। क्या करता है
यह पृष्ठ पर HTML तत्व में मानचित्र को प्रारंभ करता है;
यह मानचित्र बनाने वाली छवियों को लोड और प्रस्तुत करता है;
यह इनपुट डेटा के रूप में जियोसन का उपयोग करके मार्कर जैसे अतिरिक्त तत्व खींचता है;
यह क्लिक या ज़ूम परिवर्तन जैसी घटनाएं उत्पन्न करता है, जिन्हें संभाला जा सकता है।
आइए इनमें से प्रत्येक आइटम पर करीब से नज़र डालें।
मैपबॉक्स टाइल्स का उपयोग करके मानचित्र प्रस्तुत करने में माहिर है। टाइलें छोटी वर्गाकार छवियां होती हैं जो बड़े मानचित्र का निर्माण करती हैं। टाइल का डिफ़ॉल्ट आकार 512x512 पिक्सेल है, और यह कोई भी हो सकता है
जैसा कि आप जानते हैं, मैपबॉक्स स्टूडियो हमें वह विशिष्ट डेटा चुनने की अनुमति देता है जिसे हम मैप टाइल्स में शामिल करना चाहते हैं। फिर इन टाइलों को एक पर रखा जाता है
<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" } }
आइए मैपबॉक्स में प्रयुक्त समन्वय प्रणाली के बारे में बात करते हैं। डिफ़ॉल्ट रूप से, मैपबॉक्स कार्यरत है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}
संक्षेप में, हमें क्या याद रखने की आवश्यकता है? मैपबॉक्स हमें एक नक्शा प्रदर्शित करने, उसके ऊपर अपना डेटा खींचने और मानचित्र घटनाओं को संसाधित करने की अनुमति देता है। उसी समय, मैपबॉक्स छवियों (टाइल्स) को लोड करने और प्रदर्शित करने का ख्याल रखता है।
के बारे में एक शब्द
क्या याद रखें? हम सर्वर से डेटा पुनर्प्राप्त करते हैं, और इसके लिए कई लाइब्रेरी हैं, लेकिन हम फ़ेच का उपयोग करेंगे। आगे, हम देखेंगे कि मानचित्रों के साथ काम करते समय हम इसे विशेष रूप से कैसे करते हैं, क्योंकि इसमें बारीकियाँ हैं।
अब देखते हैं कि ऊपर वर्णित प्रौद्योगिकियाँ एक साथ कैसे काम करती हैं। सबसे पहले, हम फ़ेच का उपयोग करके बहुभुज को प्रदर्शित करने के लिए डेटा पुनर्प्राप्त करेंगे। फिर हम मानचित्र के आरंभीकरण की घोषणा करेंगे, और इसके लोड होने के बाद, हम बहुभुज को मानचित्र में जोड़ देंगे।
आप यहां एक कामकाजी उदाहरण भी पा सकते हैं
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} />; }
हमने उस प्रौद्योगिकी स्टैक को देखा जो हमारे भविष्य की संरचना को रेखांकित करता है। निम्नलिखित लेख में, हम उन सिद्धांतों पर चर्चा करेंगे जो मानचित्र वास्तुकला को डिजाइन करने में मदद करते हैं, अधिकतम कम युग्मन और मॉड्यूल के उच्च सामंजस्य को कैसे प्राप्त करें, और एक स्केलेबल मानचित्र प्रणाली को कैसे बनाए रखें और विकसित करें।
आपके ध्यान के लिए बहुत - बहुत धन्यवाद! आपका दिन अच्छा रहे।