# स्थान डेटा का विज़ुअलाइज़ेशन ![इस पाठ का स्केच नोट अवलोकन](../../../../../translated_images/lesson-13.a259db1485021be7d7c72e90842fbe0ab977529e8684c179b5fb1ea75e92b3ef.hi.jpg) > स्केच नोट [नित्या नरसिम्हन](https://github.com/nitya) द्वारा। बड़े संस्करण के लिए छवि पर क्लिक करें। यह वीडियो Azure Maps और IoT का अवलोकन देता है, जो इस पाठ में कवर किया जाएगा। [![Azure Maps - Microsoft Azure एंटरप्राइज़ लोकेशन प्लेटफ़ॉर्म](https://img.youtube.com/vi/P5i2GFTtb2s/0.jpg)](https://www.youtube.com/watch?v=P5i2GFTtb2s) > 🎥 वीडियो देखने के लिए ऊपर दी गई छवि पर क्लिक करें ## व्याख्यान से पहले का क्विज़ [व्याख्यान से पहले का क्विज़](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/25) ## परिचय पिछले पाठ में आपने सीखा कि अपने सेंसर से GPS डेटा प्राप्त करके उसे सर्वरलेस कोड का उपयोग करके क्लाउड में स्टोरेज कंटेनर में कैसे सहेजें। अब आप यह जानेंगे कि उन बिंदुओं को Azure मानचित्र पर कैसे विज़ुअलाइज़ करें। आप सीखेंगे कि वेब पेज पर मानचित्र कैसे बनाएं, GeoJSON डेटा प्रारूप के बारे में जानें और इसे अपने मानचित्र पर सभी कैप्चर किए गए GPS बिंदुओं को प्लॉट करने के लिए कैसे उपयोग करें। इस पाठ में हम कवर करेंगे: * [डेटा विज़ुअलाइज़ेशन क्या है](../../../../../3-transport/lessons/3-visualize-location-data) * [मानचित्र सेवाएँ](../../../../../3-transport/lessons/3-visualize-location-data) * [Azure Maps संसाधन बनाएं](../../../../../3-transport/lessons/3-visualize-location-data) * [वेब पेज पर मानचित्र दिखाएं](../../../../../3-transport/lessons/3-visualize-location-data) * [GeoJSON प्रारूप](../../../../../3-transport/lessons/3-visualize-location-data) * [GeoJSON का उपयोग करके मानचित्र पर GPS डेटा प्लॉट करें](../../../../../3-transport/lessons/3-visualize-location-data) > 💁 इस पाठ में HTML और JavaScript का थोड़ा उपयोग होगा। यदि आप HTML और JavaScript का उपयोग करके वेब विकास के बारे में अधिक जानना चाहते हैं, तो [शुरुआती के लिए वेब विकास](https://github.com/microsoft/Web-Dev-For-Beginners) देखें। ## डेटा विज़ुअलाइज़ेशन क्या है डेटा विज़ुअलाइज़ेशन, जैसा कि नाम से पता चलता है, डेटा को इस तरह से विज़ुअलाइज़ करने के बारे में है जो मनुष्यों के लिए इसे समझना आसान बनाता है। यह आमतौर पर चार्ट और ग्राफ़ से जुड़ा होता है, लेकिन यह डेटा को चित्रात्मक रूप से प्रस्तुत करने का कोई भी तरीका है जो न केवल डेटा को बेहतर ढंग से समझने में मदद करता है, बल्कि निर्णय लेने में भी मदद करता है। एक साधारण उदाहरण लेते हैं - फार्म प्रोजेक्ट में आपने मिट्टी की नमी के स्तर को कैप्चर किया था। 1 जून 2021 को हर घंटे कैप्चर किए गए मिट्टी की नमी के डेटा की एक तालिका कुछ इस प्रकार हो सकती है: | दिनांक | रीडिंग | | ---------------- | ------: | | 01/06/2021 00:00 | 257 | | 01/06/2021 01:00 | 268 | | 01/06/2021 02:00 | 295 | | 01/06/2021 03:00 | 305 | | 01/06/2021 04:00 | 325 | | 01/06/2021 05:00 | 359 | | 01/06/2021 06:00 | 398 | | 01/06/2021 07:00 | 410 | | 01/06/2021 08:00 | 429 | | 01/06/2021 09:00 | 451 | | 01/06/2021 10:00 | 460 | | 01/06/2021 11:00 | 452 | | 01/06/2021 12:00 | 420 | | 01/06/2021 13:00 | 408 | | 01/06/2021 14:00 | 431 | | 01/06/2021 15:00 | 462 | | 01/06/2021 16:00 | 432 | | 01/06/2021 17:00 | 402 | | 01/06/2021 18:00 | 387 | | 01/06/2021 19:00 | 360 | | 01/06/2021 20:00 | 358 | | 01/06/2021 21:00 | 354 | | 01/06/2021 22:00 | 356 | | 01/06/2021 23:00 | 362 | एक इंसान के लिए इस डेटा को समझना मुश्किल हो सकता है। यह केवल संख्याओं की एक दीवार है जिसमें कोई अर्थ नहीं है। इस डेटा को विज़ुअलाइज़ करने के पहले चरण के रूप में, इसे एक लाइन चार्ट पर प्लॉट किया जा सकता है: ![उपरोक्त डेटा का एक लाइन चार्ट](../../../../../translated_images/chart-soil-moisture.fd6d9d0cdc0b5f75e78038ecb8945dfc84b38851359de99d84b16e3336d6d7c2.hi.png) इसे और बेहतर बनाने के लिए एक रेखा जोड़ी जा सकती है जो यह दिखाती है कि स्वचालित सिंचाई प्रणाली कब मिट्टी की नमी के स्तर 450 पर चालू हुई: ![मिट्टी की नमी का चार्ट जिसमें 450 पर एक रेखा है](../../../../../translated_images/chart-soil-moisture-relay.fbb391236d34a64d0abf1df396e9197e0a24df14150620b9cc820a64a55c9326.hi.png) यह चार्ट बहुत जल्दी दिखाता है कि मिट्टी की नमी का स्तर क्या था और सिंचाई प्रणाली कब चालू हुई। चार्ट डेटा को विज़ुअलाइज़ करने का एकमात्र उपकरण नहीं हैं। IoT डिवाइस जो मौसम को ट्रैक करते हैं, वे वेब ऐप्स या मोबाइल ऐप्स का उपयोग कर सकते हैं जो मौसम की स्थिति को प्रतीकों के माध्यम से विज़ुअलाइज़ करते हैं, जैसे बादल वाले दिनों के लिए बादल का प्रतीक, बारिश वाले दिनों के लिए बारिश का बादल और इसी तरह। डेटा को विज़ुअलाइज़ करने के कई तरीके हैं, कुछ गंभीर, कुछ मज़ेदार। ✅ उन तरीकों के बारे में सोचें जिनसे आपने डेटा को विज़ुअलाइज़ होते देखा है। कौन से तरीके सबसे स्पष्ट थे और निर्णय लेने में सबसे तेज़ मदद की? सबसे अच्छे विज़ुअलाइज़ेशन वे होते हैं जो मनुष्यों को जल्दी निर्णय लेने में मदद करते हैं। उदाहरण के लिए, औद्योगिक मशीनरी से संबंधित सभी प्रकार की रीडिंग दिखाने वाले गेज की दीवार को समझना कठिन हो सकता है, लेकिन जब कुछ गलत होता है तो एक चमकती लाल बत्ती इंसान को निर्णय लेने की अनुमति देती है। कभी-कभी सबसे अच्छा विज़ुअलाइज़ेशन एक चमकती बत्ती होती है! GPS डेटा के साथ काम करते समय, सबसे स्पष्ट विज़ुअलाइज़ेशन डेटा को मानचित्र पर प्लॉट करना हो सकता है। उदाहरण के लिए, एक मानचित्र जो डिलीवरी ट्रकों को दिखाता है, एक प्रसंस्करण संयंत्र में काम करने वालों को यह देखने में मदद कर सकता है कि ट्रक कब आएंगे। यदि यह मानचित्र केवल ट्रकों की वर्तमान स्थिति की तस्वीरें दिखाने के बजाय ट्रक की सामग्री का भी संकेत देता है, तो संयंत्र में काम करने वाले तदनुसार योजना बना सकते हैं - यदि वे देखते हैं कि एक रेफ्रिजरेटेड ट्रक पास में है, तो वे फ्रिज में जगह तैयार कर सकते हैं। ## मानचित्र सेवाएँ मानचित्रों के साथ काम करना एक दिलचस्प अभ्यास है, और चुनने के लिए कई विकल्प हैं जैसे Bing Maps, Leaflet, Open Street Maps, और Google Maps। इस पाठ में, आप [Azure Maps](https://azure.microsoft.com/services/azure-maps/?WT.mc_id=academic-17441-jabenn) और उनके माध्यम से अपने GPS डेटा को प्रदर्शित करने के बारे में जानेंगे। ![Azure Maps का लोगो](../../../../../translated_images/azure-maps-logo.35d01dcfbd81fe6140e94257aaa1538f785a58c91576d14e0ebe7a2f6c694b99.hi.png) Azure Maps "भौगोलिक सेवाओं और SDKs का एक संग्रह है जो ताज़ा मानचित्र डेटा का उपयोग करके वेब और मोबाइल अनुप्रयोगों को भौगोलिक संदर्भ प्रदान करता है।" डेवलपर्स को सुंदर, इंटरैक्टिव मानचित्र बनाने के लिए उपकरण प्रदान किए जाते हैं जो ट्रैफ़िक मार्गों की सिफारिश करने, ट्रैफ़िक घटनाओं की जानकारी देने, इनडोर नेविगेशन, खोज क्षमताओं, ऊंचाई की जानकारी, मौसम सेवाओं और बहुत कुछ करने में सक्षम होते हैं। ✅ कुछ [मानचित्र कोड नमूनों](https://docs.microsoft.com/samples/browse?WT.mc_id=academic-17441-jabenn&products=azure-maps) के साथ प्रयोग करें आप मानचित्रों को एक खाली कैनवास, टाइल्स, उपग्रह छवियों, सड़कों के साथ उपग्रह छवियों, विभिन्न प्रकार के ग्रेस्केल मानचित्र, ऊंचाई दिखाने के लिए छायांकित राहत के साथ मानचित्र, रात दृश्य मानचित्र, और एक उच्च कंट्रास्ट मानचित्र के रूप में प्रदर्शित कर सकते हैं। आप [Azure Event Grid](https://azure.microsoft.com/services/event-grid/?WT.mc_id=academic-17441-jabenn) के साथ एकीकृत करके अपने मानचित्रों पर वास्तविक समय अपडेट प्राप्त कर सकते हैं। आप मानचित्र को पिंच, ड्रैग और क्लिक जैसी घटनाओं पर प्रतिक्रिया देने की अनुमति देने के लिए विभिन्न नियंत्रण सक्षम करके इसके व्यवहार और रूप को नियंत्रित कर सकते हैं। अपने मानचित्र के रूप को नियंत्रित करने के लिए, आप बबल्स, लाइन्स, पॉलीगन्स, हीट मैप्स और अधिक सहित लेयर्स जोड़ सकते हैं। आप किस प्रकार का मानचित्र लागू करते हैं, यह आपके चुने गए SDK पर निर्भर करता है। आप Azure Maps APIs तक इसकी [REST API](https://docs.microsoft.com/javascript/api/azure-maps-rest/?WT.mc_id=academic-17441-jabenn&view=azure-maps-typescript-latest), इसके [Web SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control?WT.mc_id=academic-17441-jabenn), या, यदि आप एक मोबाइल ऐप बना रहे हैं, इसके [Android SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-android-map-control-library?WT.mc_id=academic-17441-jabenn&pivots=programming-language-java-android) का उपयोग करके पहुंच सकते हैं। इस पाठ में, आप वेब SDK का उपयोग करके एक मानचित्र खींचने और अपने सेंसर के GPS स्थान के पथ को प्रदर्शित करने का तरीका सीखेंगे। ## Azure Maps संसाधन बनाएं आपका पहला कदम एक Azure Maps खाता बनाना है। ### कार्य - Azure Maps संसाधन बनाएं 1. अपने टर्मिनल या कमांड प्रॉम्प्ट से निम्नलिखित कमांड चलाएं ताकि `gps-sensor` संसाधन समूह में एक Azure Maps संसाधन बनाया जा सके: ```sh az maps account create --name gps-sensor \ --resource-group gps-sensor \ --accept-tos \ --sku S1 ``` यह `gps-sensor` नामक एक Azure Maps संसाधन बनाएगा। उपयोग किया जा रहा टियर `S1` है, जो एक पेड टियर है जिसमें कई सुविधाएँ शामिल हैं, लेकिन मुफ्त में एक उदार मात्रा में कॉल्स के साथ। > 💁 Azure Maps का उपयोग करने की लागत देखने के लिए, [Azure Maps मूल्य निर्धारण पृष्ठ](https://azure.microsoft.com/pricing/details/azure-maps/?WT.mc_id=academic-17441-jabenn) देखें। 1. आपको मानचित्र संसाधन के लिए एक API कुंजी की आवश्यकता होगी। इस कुंजी को प्राप्त करने के लिए निम्नलिखित कमांड का उपयोग करें: ```sh az maps account keys list --name gps-sensor \ --resource-group gps-sensor \ --output table ``` `PrimaryKey` मान की एक प्रति लें। ## वेब पेज पर मानचित्र दिखाएं अब आप अगला कदम उठा सकते हैं, जो कि अपने मानचित्र को एक वेब पेज पर प्रदर्शित करना है। हम आपके छोटे वेब ऐप के लिए केवल एक `html` फ़ाइल का उपयोग करेंगे; ध्यान रखें कि उत्पादन या टीम वातावरण में, आपके वेब ऐप में अधिक भाग हो सकते हैं! ### कार्य - वेब पेज पर मानचित्र दिखाएं 1. अपने स्थानीय कंप्यूटर पर कहीं एक फ़ोल्डर में index.html नामक एक फ़ाइल बनाएं। मानचित्र को होल्ड करने के लिए HTML मार्कअप जोड़ें: ```html
``` मानचित्र `myMap` `div` में लोड होगा। कुछ स्टाइल इसे पेज की चौड़ाई और ऊंचाई तक फैलने की अनुमति देते हैं। > 🎓 एक `div` वेब पेज का एक खंड है जिसे नामित और स्टाइल किया जा सकता है। 1. `` टैग के नीचे, मानचित्र प्रदर्शन को नियंत्रित करने के लिए एक बाहरी स्टाइल शीट और इसके व्यवहार को प्रबंधित करने के लिए वेब SDK से एक बाहरी स्क्रिप्ट जोड़ें: ```html ``` यह स्टाइल शीट मानचित्र के रूप को नियंत्रित करने के लिए सेटिंग्स रखती है, और स्क्रिप्ट फ़ाइल मानचित्र को लोड करने के लिए कोड रखती है। इस कोड को जोड़ना C++ हेडर फ़ाइलों को शामिल करने या Python मॉड्यूल आयात करने के समान है। 1. उस स्क्रिप्ट के नीचे, मानचित्र लॉन्च करने के लिए एक स्क्रिप्ट ब्लॉक जोड़ें। ```javascript ``` `` को अपने Azure Maps खाते की API कुंजी से बदलें। यदि आप अपने `index.html` पेज को वेब ब्राउज़र में खोलते हैं, तो आपको एक मानचित्र लोड होता हुआ दिखाई देगा, जो सिएटल क्षेत्र पर केंद्रित है। ![सिएटल, वाशिंगटन राज्य, यूएसए का मानचित्र](../../../../../translated_images/map-image.8fb2c53eb23ef39c1c0a4410a5282e879b3b452b707eb066ff04c5488d3d72b7.hi.png) ✅ अपने मानचित्र प्रदर्शन को बदलने के लिए ज़ूम और केंद्र पैरामीटर के साथ प्रयोग करें। आप अपने डेटा के अक्षांश और देशांतर के अनुरूप विभिन्न निर्देशांक जोड़ सकते हैं ताकि मानचित्र को पुनः केंद्रित किया जा सके। > 💁 वेब ऐप्स के साथ स्थानीय रूप से काम करने का एक बेहतर तरीका [http-server](https://www.npmjs.com/package/http-server) स्थापित करना है। आपको [node.js](https://nodejs.org/) और [npm](https://www.npmjs.com/) स्थापित करने की आवश्यकता होगी। एक बार ये उपकरण स्थापित हो जाने के बाद, आप अपने `index.html` फ़ाइल के स्थान पर नेविगेट कर सकते हैं और `http-server` टाइप कर सकते हैं। वेब ऐप एक स्थानीय वेब सर्वर [http://127.0.0.1:8080/](http://127.0.0.1:8080/) पर खुलेगा। ## GeoJSON प्रारूप अब जब आपका वेब ऐप मानचित्र के साथ प्रदर्शित हो रहा है, तो आपको अपने स्टोरेज खाते से GPS डेटा निकालने और मानचित्र के ऊपर मार्करों की एक परत में प्रदर्शित करने की आवश्यकता है। इससे पहले कि हम ऐसा करें, आइए [GeoJSON](https://wikipedia.org/wiki/GeoJSON) प्रारूप को देखें जो Azure Maps द्वारा अपेक्षित है। [GeoJSON](https://geojson.org/) एक ओपन स्टैंडर्ड JSON विनिर्देश है जिसमें विशेष प्रारूपण है जो भौगोलिक-विशिष्ट डेटा को संभालने के लिए डिज़ाइन किया गया है। आप [geojson.io](https://geojson.io) का उपयोग करके नमूना डेटा का परीक्षण करके इसके बारे में जान सकते हैं, जो GeoJSON फ़ाइलों को डिबग करने के लिए भी एक उपयोगी उपकरण है। नमूना GeoJSON डेटा इस प्रकार दिखता है: ```json { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -2.10237979888916, 57.164918677004714 ] } } ] } ``` विशेष रूप से ध्यान देने योग्य बात यह है कि डेटा `FeatureCollection` के भीतर एक `Feature` के रूप में नेस्टेड है। उस ऑब्जेक्ट के भीतर `geometry` है जिसमें `coordinates` अक्षांश और देशांतर को इंगित करता है। ✅ जब आप अपना GeoJSON बना रहे हों, तो ऑब्जेक्ट में `latitude` और `longitude` के क्रम पर ध्यान दें, अन्यथा आपके बिंदु वहां नहीं दिखाई देंगे जहां उन्हें होना चाहिए! GeoJSON बिंदुओं के लिए डेटा को `lon,lat` क्रम में अपेक्षित करता है, न कि `lat,lon` में। `Geometry` के विभिन्न प्रकार हो सकते हैं, जैसे एकल बिंदु या बहुभुज। इस उदाहरण में, यह एक बिंदु है जिसमें दो निर्देशांक निर्दिष्ट हैं, देशांतर और अक्षांश। ✅ Azure Maps मानक GeoJSON का समर्थन करता है और कुछ [उन्नत सुविधाएँ](https://docs.microsoft.com/azure/azure-maps/extend-geojson?WT.mc_id=academic-17441-jabenn) प्रदान करता है, जिनमें सर्कल और अन्य ज्यामितीय आकृतियाँ बनाने की क्षमता शामिल है। ## GeoJSON का उपयोग करके GPS डेटा को मानचित्र पर प्रदर्शित करें अब आप उस स्टोरेज से डेटा उपयोग करने के लिए तैयार हैं जिसे आपने पिछले पाठ में बनाया था। याद दिलाने के लिए, यह blob स्टोरेज में कई फाइलों के रूप में संग्रहीत है, इसलिए आपको फाइलों को प्राप्त करना होगा और उन्हें पार्स करना होगा ताकि Azure Maps उस डेटा का उपयोग कर सके। ### कार्य - स्टोरेज को वेब पेज से एक्सेस करने के लिए कॉन्फ़िगर करें यदि आप अपने स्टोरेज से डेटा प्राप्त करने के लिए कॉल करते हैं, तो आप अपने ब्राउज़र के कंसोल में त्रुटियाँ देख सकते हैं। ऐसा इसलिए है क्योंकि आपको इस स्टोरेज पर [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) की अनुमति सेट करनी होगी ताकि बाहरी वेब ऐप्स इसका डेटा पढ़ सकें। > 🎓 CORS का मतलब "Cross-Origin Resource Sharing" है और इसे आमतौर पर सुरक्षा कारणों से Azure में स्पष्ट रूप से सेट करने की आवश्यकता होती है। यह उन साइटों को आपके डेटा तक पहुँचने से रोकता है जिनकी आप अपेक्षा नहीं करते। 1. CORS सक्षम करने के लिए निम्नलिखित कमांड चलाएँ: ```sh az storage cors add --methods GET \ --origins "*" \ --services b \ --account-name \ --account-key ``` `` को अपने स्टोरेज अकाउंट के नाम से बदलें। `` को अपने स्टोरेज अकाउंट के अकाउंट की से बदलें। यह कमांड किसी भी वेबसाइट (वाइल्डकार्ड `*` का मतलब है कोई भी) को *GET* अनुरोध करने की अनुमति देता है, यानी आपके स्टोरेज अकाउंट से डेटा प्राप्त करना। `--services b` का मतलब है कि यह सेटिंग केवल blobs के लिए लागू होगी। ### कार्य - स्टोरेज से GPS डेटा लोड करें 1. `init` फ़ंक्शन की पूरी सामग्री को निम्नलिखित कोड से बदलें: ```javascript fetch("https://.blob.core.windows.net/gps-data/?restype=container&comp=list") .then(response => response.text()) .then(str => new window.DOMParser().parseFromString(str, "text/xml")) .then(xml => { let blobList = Array.from(xml.querySelectorAll("Url")); blobList.forEach(async blobUrl => { loadJSON(blobUrl.innerHTML) }); }) .then( response => { map = new atlas.Map('myMap', { center: [-122.26473, 47.73444], zoom: 14, authOptions: { authType: "subscriptionKey", subscriptionKey: "", } }); map.events.add('ready', function () { var source = new atlas.source.DataSource(); map.sources.add(source); map.layers.add(new atlas.layer.BubbleLayer(source)); source.add(features); }) }) ``` `` को अपने स्टोरेज अकाउंट के नाम से बदलें। `` को अपने Azure Maps अकाउंट के API की से बदलें। यहाँ कई चीजें हो रही हैं। सबसे पहले, कोड आपके blob कंटेनर से GPS डेटा को आपके स्टोरेज अकाउंट नाम का उपयोग करके बनाए गए URL एंडपॉइंट से प्राप्त करता है। यह URL `gps-data` से डेटा प्राप्त करता है, जो इंगित करता है कि संसाधन प्रकार एक कंटेनर है (`restype=container`), और सभी blobs की जानकारी सूचीबद्ध करता है। यह सूची blobs को स्वयं वापस नहीं करेगी, लेकिन प्रत्येक blob के लिए एक URL वापस करेगी जिसे blob डेटा लोड करने के लिए उपयोग किया जा सकता है। > 💁 आप इस URL को अपने ब्राउज़र में डाल सकते हैं ताकि अपने कंटेनर में सभी blobs का विवरण देख सकें। प्रत्येक आइटम में एक `Url` प्रॉपर्टी होगी जिसे आप अपने ब्राउज़र में लोड करके blob की सामग्री देख सकते हैं। यह कोड फिर प्रत्येक blob को लोड करता है, एक `loadJSON` फ़ंक्शन को कॉल करता है, जिसे अगला बनाया जाएगा। फिर यह मानचित्र नियंत्रण बनाता है और `ready` इवेंट में कोड जोड़ता है। यह इवेंट तब कॉल किया जाता है जब मानचित्र वेब पेज पर प्रदर्शित होता है। `ready` इवेंट एक Azure Maps डेटा स्रोत बनाता है - एक कंटेनर जिसमें GeoJSON डेटा होता है जिसे बाद में भरा जाएगा। इस डेटा स्रोत का उपयोग फिर एक bubble layer बनाने के लिए किया जाता है - यानी GeoJSON में प्रत्येक बिंदु के केंद्र पर मानचित्र पर सर्कल का एक सेट। 1. अपने स्क्रिप्ट ब्लॉक में, `init` फ़ंक्शन के नीचे `loadJSON` फ़ंक्शन जोड़ें: ```javascript var map, features; function loadJSON(file) { var xhr = new XMLHttpRequest(); features = []; xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { gps = JSON.parse(xhr.responseText) features.push( new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)])) ) } } }; xhr.open("GET", file, true); xhr.send(); } ``` यह फ़ंक्शन fetch रूटीन द्वारा JSON डेटा को पार्स करने और इसे GeoJSON के रूप में पढ़ने के लिए longitude और latitude coordinates में बदलने के लिए कॉल किया जाता है। पार्स किए जाने के बाद, डेटा को GeoJSON `Feature` के हिस्से के रूप में सेट किया जाता है। मानचित्र को इनिशियलाइज़ किया जाएगा और छोटे बबल्स उस पथ के चारों ओर दिखाई देंगे जिसे आपका डेटा प्रदर्शित कर रहा है: 1. HTML पेज को अपने ब्राउज़र में लोड करें। यह मानचित्र लोड करेगा, फिर स्टोरेज से सभी GPS डेटा लोड करेगा और इसे मानचित्र पर प्रदर्शित करेगा। ![सिएटल के पास सेंट एडवर्ड स्टेट पार्क का एक मानचित्र, जिसमें पार्क के किनारे के चारों ओर एक पथ दिखाने वाले सर्कल हैं](../../../../../translated_images/map-path.896832e72dc696ffe20650e4051027d4855442d955f93fdbb80bb417ca8a406f.hi.png) > 💁 आप इस कोड को [code](../../../../../3-transport/lessons/3-visualize-location-data/code) फ़ोल्डर में पा सकते हैं। --- ## 🚀 चुनौती मानचित्र पर स्थिर डेटा को मार्कर के रूप में प्रदर्शित करना अच्छा है। क्या आप इस वेब ऐप को बढ़ाकर एनिमेशन जोड़ सकते हैं और समय के साथ मार्करों के पथ को दिखा सकते हैं, टाइमस्टैम्प किए गए JSON फाइलों का उपयोग करके? यहाँ [कुछ नमूने](https://azuremapscodesamples.azurewebsites.net/) हैं जो मानचित्रों में एनिमेशन का उपयोग दिखाते हैं। ## पोस्ट-लेक्चर क्विज़ [पोस्ट-लेक्चर क्विज़](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/26) ## समीक्षा और स्व-अध्ययन Azure Maps IoT डिवाइस के साथ काम करने के लिए विशेष रूप से उपयोगी है। * [Microsoft docs पर Azure Maps दस्तावेज़](https://docs.microsoft.com/azure/azure-maps/tutorial-iot-hub-maps?WT.mc_id=academic-17441-jabenn) में इसके उपयोगों पर शोध करें। * [Microsoft Learn पर Azure Maps के साथ अपना पहला रूट फाइंडिंग ऐप बनाएं](https://docs.microsoft.com/learn/modules/create-your-first-app-with-azure-maps/?WT.mc_id=academic-17441-jabenn) स्व-निर्देशित लर्निंग मॉड्यूल के साथ मानचित्र निर्माण और वेपॉइंट्स के बारे में अपने ज्ञान को गहरा करें। ## असाइनमेंट [अपना ऐप डिप्लॉय करें](assignment.md) **अस्वीकरण**: यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता सुनिश्चित करने का प्रयास करते हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियां या अशुद्धियां हो सकती हैं। मूल भाषा में उपलब्ध मूल दस्तावेज़ को प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।