# स्थान डेटा दृश्यात्मक बनाउनुहोस्  > स्केच नोट [नित्या नरसिम्हन](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 प्रयोग गरेर वेब विकासबारे थप जान्न चाहनुहुन्छ भने, [शुरुआतीहरूको लागि वेब विकास](https://github.com/microsoft/Web-Dev-For-Beginners) हेर्नुहोस्। ## डेटा दृश्यात्मकता के हो डेटा दृश्यात्मकता भनेको डेटा बुझ्न सजिलो बनाउन चित्रात्मक रूपमा प्रस्तुत गर्ने प्रक्रिया हो। यो प्रायः चार्ट र ग्राफसँग सम्बन्धित हुन्छ, तर कुनै पनि प्रकारको चित्रात्मक प्रस्तुति जसले मानिसहरूलाई डेटा राम्रोसँग बुझ्न र निर्णय लिन मद्दत गर्दछ, डेटा दृश्यात्मकता हो। सजिलो उदाहरण लिँदा - फार्म परियोजनामा तपाईंले माटोको चिस्यानको मापन संकलन गर्नुभयो। २०२१ को जुन १ मा प्रत्येक घण्टा संकलित माटोको चिस्यान डेटा निम्न तालिकाजस्तो हुन सक्छ: | मिति | मापन | | ---------------- | ------: | | ०१/०६/२०२१ ००:०० | २५७ | | ०१/०६/२०२१ ०१:०० | २६८ | | ०१/०६/२०२१ ०२:०० | २९५ | | ०१/०६/२०२१ ०३:०० | ३०५ | | ०१/०६/२०२१ ०४:०० | ३२५ | | ०१/०६/२०२१ ०५:०० | ३५९ | | ०१/०६/२०२१ ०६:०० | ३९८ | | ०१/०६/२०२१ ०७:०० | ४१० | | ०१/०६/२०२१ ०८:०० | ४२९ | | ०१/०६/२०२१ ०९:०० | ४५१ | | ०१/०६/२०२१ १०:०० | ४६० | | ०१/०६/२०२१ ११:०० | ४५२ | | ०१/०६/२०२१ १२:०० | ४२० | | ०१/०६/२०२१ १३:०० | ४०८ | | ०१/०६/२०२१ १४:०० | ४३१ | | ०१/०६/२०२१ १५:०० | ४६२ | | ०१/०६/२०२१ १६:०० | ४३२ | | ०१/०६/२०२१ १७:०० | ४०२ | | ०१/०६/२०२१ १८:०० | ३८७ | | ०१/०६/२०२१ १९:०० | ३६० | | ०१/०६/२०२१ २०:०० | ३५८ | | ०१/०६/२०२१ २१:०० | ३५४ | | ०१/०६/२०२१ २२:०० | ३५६ | | ०१/०६/२०२१ २३:०० | ३६२ | मानिसका लागि यो डेटा बुझ्न गाह्रो हुन सक्छ। यो केवल संख्याको पर्खालजस्तो देखिन्छ। यसलाई दृश्यात्मक बनाउन पहिलो चरणमा यसलाई लाइन चार्टमा प्लट गर्न सकिन्छ:  यसलाई अझ सुधार गर्न, माटोको चिस्यान ४५० पुगेपछि स्वचालित पानी दिने प्रणाली अन गरिएको बिन्दुमा रेखा थप्न सकिन्छ:  यो चार्टले छिट्टै मात्र माटोको चिस्यान स्तर देखाउँदैन, तर पानी दिने प्रणाली अन भएको बिन्दु पनि देखाउँछ। चार्ट मात्र डेटा दृश्यात्मकताको उपकरण होइन। मौसम ट्र्याक गर्ने 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 "भौगोलिक सेवाहरू र 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 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. `` ट्यागको सुरुमा, नक्साको प्रदर्शन नियन्त्रण गर्न बाह्य शैली पत्र थप्नुहोस्, र यसको व्यवहार व्यवस्थापन गर्न वेब 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 storage मा फाइलहरूको रूपमा भण्डारण गरिएको छ, त्यसैले तपाईंले ती फाइलहरू पुनःप्राप्त गर्न र पार्स गर्न आवश्यक छ ताकि 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 ``` `` लाई आफ्नो भण्डारण खाताको नामले प्रतिस्थापन गर्नुहोस्। `` लाई आफ्नो भण्डारण खाताको खाता कुञ्जीले प्रतिस्थापन गर्नुहोस्। यो आदेशले कुनै पनि वेबसाइटलाई (wildcard `*` ले कुनै पनि जनाउँछ) *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 कन्टेनरबाट URL endpoint प्रयोग गरेर GPS डेटा ल्याउँछ, जुन तपाईंको भण्डारण खाताको नाम प्रयोग गरेर बनाइएको छ। यो 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(); } ``` यो फङ्सन fetch प्रक्रियाद्वारा JSON डेटा पार्स गर्न र यसलाई GeoJSON को रूपमा longitude र latitude समन्वयको रूपमा पढ्न रूपान्तरण गर्न कल गरिन्छ। पार्स भएपछि, डेटा GeoJSON `Feature` को रूपमा सेट गरिन्छ। नक्सा आरम्भ हुनेछ र तपाईंको डेटा प्लट गरिरहेको मार्ग वरिपरि साना वृत्तहरू देखा पर्नेछन्: 1. आफ्नो ब्राउजरमा HTML पृष्ठ लोड गर्नुहोस्। यसले नक्सा लोड गर्नेछ, त्यसपछि भण्डारणबाट सबै GPS डेटा लोड गर्नेछ र नक्सामा प्लट गर्नेछ।  > 💁 तपाईं यो कोड [code](../../../../../3-transport/lessons/3-visualize-location-data/code) फोल्डरमा फेला पार्न सक्नुहुन्छ। --- ## 🚀 चुनौती नक्सामा स्थिर डेटा मार्करको रूपमा देखाउन सक्षम हुनु राम्रो कुरा हो। के तपाईं यो वेब अनुप्रयोगलाई एनिमेसन थप्न र मार्करहरूको मार्गलाई समयसँगै देखाउन सुधार गर्न सक्नुहुन्छ, timestamped 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) मा यसको प्रयोगहरूको बारेमा अनुसन्धान गर्नुहोस्। * [Azure Maps को साथ आफ्नो पहिलो मार्ग खोज्ने अनुप्रयोग बनाउनुहोस्](https://docs.microsoft.com/learn/modules/create-your-first-app-with-azure-maps/?WT.mc_id=academic-17441-jabenn) भन्ने Microsoft Learn को आत्म-निर्देशित सिकाइ मोड्युलको साथ आफ्नो नक्सा बनाउने र वेप्वाइन्टहरूको ज्ञानलाई गहिरो बनाउनुहोस्। ## असाइनमेन्ट [आफ्नो अनुप्रयोग परिनियोजन गर्नुहोस्](assignment.md) --- **अस्वीकरण**: यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।