# स्थान डेटा दृश्यरूपात सादर करा  > स्केच नोट [नित्य नरसिंहन](https://github.com/nitya) यांनी तयार केले. मोठ्या आवृत्तीसाठी प्रतिमेवर क्लिक करा. या व्हिडिओमध्ये Azure Maps आणि IoT चा आढावा दिला आहे, जो या धड्यात समाविष्ट केला जाईल. [](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 वापरून वेब डेव्हलपमेंटबद्दल अधिक जाणून घ्यायचे असल्यास [Web development for beginners](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 | मानव म्हणून, हा डेटा समजून घेणे कठीण होऊ शकते. हे फक्त आकड्यांचा भिंत आहे ज्यामध्ये काही अर्थ नाही. या डेटाचे दृश्यरूप सादरीकरण करण्यासाठी पहिल्या पायरीत, ते एका रेषीय चार्टवर प्लॉट केले जाऊ शकते:  हे आणखी सुधारित केले जाऊ शकते, जिथे मातीतील आर्द्रता 450 वर पोहोचल्यावर स्वयंचलित पाणीपुरवठा प्रणाली चालू होते, ते दर्शविण्यासाठी एक रेषा जोडली जाऊ शकते:  हा चार्ट जलदपणे मातीतील आर्द्रतेची पातळी आणि पाणीपुरवठा प्रणाली चालू होण्याचे पॉइंट्स दाखवतो. चार्ट हे डेटा दृश्यरूप सादरीकरणाचे एकमेव साधन नाहीत. हवामान ट्रॅक करणाऱ्या 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 म्हणजे "भौगोलिक संदर्भ प्रदान करण्यासाठी ताज्या नकाशा डेटाचा वापर करणाऱ्या भू-स्थानिक सेवा आणि SDK चा संग्रह." डेव्हलपर्सना सुंदर, परस्परसंवादी नकाशे तयार करण्यासाठी साधने प्रदान केली जातात जी ट्रॅफिक मार्गांची शिफारस करणे, ट्रॅफिक घटनेची माहिती देणे, इनडोअर नेव्हिगेशन, शोध क्षमता, उंचीची माहिती, हवामान सेवा आणि बरेच काही करू शकतात. ✅ काही [नकाशा कोड नमुने](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 API त्याच्या [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. उघडलेल्या `` टॅगखाली, नकाशा प्रदर्शन नियंत्रित करण्यासाठी एक बाह्य शैली पत्रक आणि त्याच्या वर्तनाचे व्यवस्थापन करण्यासाठी Web SDK मधून एक बाह्य स्क्रिप्ट जोडा: ```html ``` या शैली पत्रकात नकाशा कसा दिसतो यासाठी सेटिंग्ज आहेत, आणि स्क्रिप्ट फाइलमध्ये नकाशा लोड करण्यासाठी कोड आहे. हा कोड जोडणे म्हणजे C++ हेडर फाइल्स समाविष्ट करणे किंवा Python मॉड्यूल्स आयात करणे यासारखे आहे. 1. त्या स्क्रिप्टखाली, नकाशा लाँच करण्यासाठी एक स्क्रिप्ट ब्लॉक जोडा. ```javascript ``` `` ला तुमच्या Azure Maps खात्यासाठी API कीने बदला. जर तुम्ही तुमचे `index.html` पृष्ठ वेब ब्राउझरमध्ये उघडले, तर तुम्हाला नकाशा लोड झालेला दिसेल, आणि तो सिएटल क्षेत्रावर केंद्रित असेल.  ✅ तुमच्या नकाशा प्रदर्शनात बदल करण्यासाठी झूम आणि केंद्र पॅरामीटर्ससह प्रयोग करा. तुमच्या डेटाच्या अक्षांश आणि रेखांशाशी संबंधित वेगवेगळ्या समन्वय जोडून नकाशा पुन्हा केंद्रित करू शकता. > 💁 स्थानिक स्तरावर वेब अॅप्ससह चांगले काम करण्याचा मार्ग म्हणजे [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 डेटा काढून नकाशावर मार्कर्सच्या स्तरात प्रदर्शित करणे आवश्यक आहे. त्याआधी, Azure Maps साठी आवश्यक असलेल्या [GeoJSON](https://wikipedia.org/wiki/GeoJSON) फॉरमॅटवर एक नजर टाकू. [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 डेटा असलेला कंटेनर जो नंतर भरला जाईल. हा डेटा स्रोत नंतर बबल लेयर तयार करण्यासाठी वापरला जातो - म्हणजे 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(); } ``` हे फंक्शन JSON डेटा पार्स करण्यासाठी आणि त्याला GeoJSON म्हणून वाचण्यासाठी लांबी आणि अक्षांश निर्देशांकांमध्ये रूपांतरित करण्यासाठी fetch रूटीनद्वारे कॉल केले जाते. एकदा पार्स केल्यानंतर, डेटा GeoJSON `Feature` चा भाग म्हणून सेट केला जातो. नकाशा सुरू होईल आणि तुमचा डेटा प्लॉट करत असलेल्या मार्गाभोवती छोटे बबल्स दिसतील: 1. HTML पृष्ठ तुमच्या ब्राउझरमध्ये लोड करा. हे नकाशा लोड करेल, नंतर स्टोरेजमधून सर्व GPS डेटा लोड करेल आणि नकाशावर प्लॉट करेल.  > 💁 तुम्ही हा कोड [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 उपकरणांसोबत काम करण्यासाठी विशेषतः उपयुक्त आहे. * [Azure Maps च्या Microsoft docs वरील दस्तऐवजांमध्ये](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) चा वापर करून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात घ्या की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील मूळ दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर केल्यामुळे उद्भवणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.