# స్థాన డేటా చూపించండి

![ఈ పాఠం యొక్క సొంత చిత్రా గమనిక](../../../../../translated_images/te/lesson-13.a259db1485021be7.webp)

> గమనిక [Nitya Narasimhan](https://github.com/nitya) ద్వారా. పెద్ద రూపానికి చిత్రాన్ని క్లిక్ చేయండి.

ఈ వీడియో Azure Maps మరియు IoT యొక్క అవలోకనం ఇస్తుంది, ఇది ఈ పాఠంలో చూచే సేవ.

[![Azure Maps - మైక్రోసాఫ్ట్ 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 ఉపయోగించి వెబ్ అభివృద్ధి గురించి మరింత తెలుసుకోవాలనుకుంటే, [Web development for beginners](https://github.com/microsoft/Web-Dev-For-Beginners) ను చూడండి.

## డేటా విజువలైజేషన్ అంటే ఏమిటి

డేటా విజువలైజేషన్ అంటే పేరు సూచించేట్లు, డేటాను మనుషులు సులభంగా అర్థం చేసుకోవడానికి దృశ్య రూపంలో చూపించడం. దీనిని సాధారణంగా చార్ట్లు మరియు గ్రాఫ్‌లతో అన associae చేస్తారు, కానీ అది డేటాను చిత్ర రూపంలో ప్రదర్శించి మనుషులకు డేటాను మెరుగ్గా అర్థం చేసుకోవడంలో మరియు నిర్ణయాలు తీసుకోవడంలో సహాయపడుతుంది.

సరళమైన ఉదాహరణ తీసుకుంటే - ఫామ్ ప్రాజెక్టులో మీరు మట్టిపాలికి తేమ సెట్‌లను సేకరించారు. 2021 జూన్ 1న ప్రతి గంట సేకరించిన మట్టిపాలికి తేమ డేటా పట్టిక ఇలా ఉండవచ్చు:

| తేదీ              | రీడింగ్ |
| ----------------- | ------: |
| 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/te/chart-soil-moisture.fd6d9d0cdc0b5f75.webp)

ఇందులో ఆటోమేటిక్ పూసే వ్యవస్థ 450 మట్టిపాల తేమ వద్ద ప్రారంభించబడ్డట్లు సూచించడానికి ఒక లైన్ చార్ట్ కూడా జోడించవచ్చు:

![450 వద్ద లైన్ తో మట్టిపాల తేమ గ్రాఫ్](../../../../../translated_images/te/chart-soil-moisture-relay.fbb391236d34a64d.webp)

ఈ చార్ట్ మట్టిపాల తేమ స్థాయిలను మాత్రమే కాకుండా, పూసే వ్యవస్థ ఎక్కడ ప్రారంభించబడిందో త్వరగా చూపిస్తుంది.

చార్ట్లు మాత్రమే డేటాను చూపించే సాధనం కాదు. వాతావరణాన్ని ట్రాక్ చేసే 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/te/azure-maps-logo.35d01dcfbd81fe61.webp)

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 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`, ఇది చెలామణీ tier, ఇది అనేక ఫీచర్లు కలిగి ఉంది కానీ ఫ్రీ కాల్‌ల కొరకు మంచి పరిమితిని కలిగి ఉంది.

    > 💁 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
    <html>
    <head>
        <style>
            #myMap {
                width:100%;
                height:100%;
            }
        </style>
    </head>
    
    <body onload="init()">
        <div id="myMap"></div>
    </body>
    </html>
    ```

    మ్యాప్ `myMap` `div` లో లోడ్ అవుతుంది. కొన్ని స్టైల్‌లు పేజీ వెడల్పు మరియు ఎత్తు అంతటా వ్యాప్తి చేస్తాయి.

    > 🎓 `div` అనేది వెబ్ పేజీ యంత్రమైన భాగం, దీనికి పేరు, స్టైల్ ఇవ్వవచ్చు.

1. `<head>` ట్యాగ్ ప్రారంభానికి కింద, మ్యాప్ ప్రదర్శన నియంత్రించడానికి బాహ్య స్టైల్ షీట్ మరియు Web SDK నుండి బాహ్య స్క్రిప్ట్ జోడించండి:

    ```html
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    ```

    ఈ స్టైల్ షీట్ మ్యాప్ రూపాన్ని నిర్దేశిస్తుంది, మరియు స్క్రిప్ట్ ఫైల్ మ్యాప్ లోడ్ చేయడానికి కోడ్ కలిగి ఉంటుంది. ఈ కోడ్ జోడించడం C++ హెడ్ ఫైల్స్ చేర్చటానికి లేదా Python మాడ్యూల్స్ ను దిగుమతి చేసుకోవడానికి సరిసమానంగా ఉంటుంది.

1. ఆ స్క్రిప్ట్ కింద, మ్యాప్ ప్రారంభం కోసం స్క్రిప్ట్ బ్లాక్ జోడించండి.

    ```javascript
    <script type='text/javascript'>
        function init() {
            var map = new atlas.Map('myMap', {
                center: [-122.26473, 47.73444],
                zoom: 12,
                authOptions: {
                    authType: "subscriptionKey",
                    subscriptionKey: "<subscription_key>",

                }
            });
        }
    </script>
    ```

    `<subscription_key>` స్థానంలో మీ Azure Maps ఖాతాకు API కీ పెట్టండి.

    మీరు `index.html` పేజీని బ్రౌజర్‌లో తెరిస్తే, సియాటిల్ ప్రాంతంపై ఫోకస్ చేసిన మ్యాప్ చూపిస్తుంది.

    ![సియాటిల్, వాషింగ్టన్ స్టేట్ లో నగరం చూపించే మ్యాప్](../../../../../translated_images/te/map-image.8fb2c53eb23ef39c.webp)

    ✅ మీ మ్యాప్ ప్రదర్శన మార్పిడి కోసం zoom మరియు center పారామీటర్లతో ప్రయోగించండి. మీ డేటా యొక్క అక్షాంశాలు మరియు రేఖాంశాల సరిపడే కోఆర్డినేట్లను జోడించి మ్యాప్‌ను మళ్ళీ కేంద్రీకరించవచ్చు.

> 💁 స్థానికంగా వెబ్ యాప్‌లతో పని చేయడానికి మంచి మార్గం [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` కాకుండా.
`జియోమెట్రీ` కి వివిధ రకాలు ఉండవచ్చు, ఉదాహరణకు ఒక ఒక్క బిందువు లేదా ఒక బహుళ భుజం. ఇక్కడ ఉదాహరణగా, ఇది రెండు కోఆర్డినేట్లు గల ఒక బిందువు, ఆది లంభరేఖా మరియు అక్షాంశం.

✅ Azure Maps ప్రామాణిక GeoJSON తో పాటు కొన్ని [విస్త‌రించ‌బ‌డిన ఫీచర్లు](https://docs.microsoft.com/azure/azure-maps/extend-geojson?WT.mc_id=academic-17441-jabenn) మద్దతు ఇస్తుంది, వాటిలో వృత్తాలు మరియు ఇతర జియోమెట్రీలను గీయవచ్చు.

## GeoJSON ఉపయోగించి మ్యాపుపై GPS డేటాను ప్లాట్ చేయడం

ముందు పాఠంలో మీరు నిర్మించిన స్టోరేజి నుండి డేటాను పొందడానికి మీరు సిద్ధంగా ఉన్నారు. గుర్తు చేసుకోవడానికి, ఇది బ్లాబ్ స్టోరేజీలో అనేక ఫైళ్లుగా నిల్వ చేయబడింది, కాబట్టి మీరు ఫైళ్లను తిరిగి తీసుకుని వాటిని పార్స్ చేయాలి, తద్వారా Azure Maps ఆ డేటాను ఉపయోగించగలదు.

### టాస్క్ - వెబ్ పేజీ నుండి యాక్సెస్ చేయడానికి స్టోరేజ్‌ను కాన్ఫిగర్ చేయడం

మీ స్టోరేజి నుండి డేటా తీసుకురావడానికి ఒక కాల్ చేస్తే, మీ బ్రౌజర్ కన్సోల్‌లో తప్పుల వుసులు చూడండి అంటే ఆశ్చర్యపోవద్దు. CORS కోసం పర్మిషన్లు సెటింగ్ అవసరం ఉంటుంది, దీనివల్ల బాహ్య వెబ్ ఆప్స్ దీనిలోని డేటాను చదవగలవు.

> 🎓 CORS అంటే "Cross-Origin Resource Sharing" మరియు సాధారణంగా Azure లో భద్రత కారణాలతో స్పష్టంగా సెటు చేయాలి. ఇది అనుకోకుండా ఇతర సైట్లకు మీ డేటాకు ప్రాప్యతను ఆపిస్తుంది.

1. క్రింది కమాండ్‌ను నడపండి CORSను ఎనేబుల్ చేయడానికి:

    ```sh
    az storage cors add --methods GET \
                        --origins "*" \
                        --services b \
                        --account-name <storage_name> \
                        --account-key <key1>
    ```

    `<storage_name>` ను మీ స్టోరేజ్ ఖాతా పేరుతో మార్చండి. `<key1>` ను మీ స్టోరేజ్ అసౌంట్‌కు సంబంధించిన కీ తో భర్తీ చేయండి.

    ఈ కమాండ్ ఎటు సైట్ అయినా (వైల్డ్‌కార్డ్ `*` యొక్క అర్థం ఎవరూ) *GET* అభ్యర్థన చేయునట్టు అనుమతిస్తుంది, అంటే మీ స్టోరేజ్ నుండి డేటా పొందగలుగుతుంది. `--services b` అంటే బ్లాబ్స్ కోసం మాత్రమే ఈ సెట్టింగ్ వర్తించాలి.

### టాస్క్ - స్టోరేజి నుండి GPS డేటాను లోడ్ చేయడం

1. `init` ఫంక్షన్‌లో మొత్తం కంటెంట్‌ను ఈ క్రింది కోడ్‌తో మార్చండి:

    ```javascript
    fetch("https://<storage_name>.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: "<subscription_key>",
    
            }
        });
        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);
        })
    })
    ```

    `<storage_name>` ను మీ స్టోరేజ్ ఖాతా పేరుతో భర్తీ చేయండి. `<subscription_key>` ను మీ Azure Maps ఖాతాకు సంబంధించిన API కీతో మార్చండి.

    ఇక్కడ కొన్ని క్రియలు జరుగుతున్నాయి. మొదటగా, ఈ కోడ్ మీ GPS డేటాను బ్లాబ్ కంటైనర్ నుండి URL ఎండ్‌పాయింట్ ద్వారా పొందుతుంది, ఇది మీ స్టోరేజ్ ఖాతా పేరుతో నిర్మించబడినది. ఈ URL `gps-data` నుండి డేటా తీసుకుంటుంది, దీనికీ రీసోర్స్ రకం కంటైనర్ (`restype=container`) అని సూచిస్తుంది, మరియు అన్ని బ్లాబ్స్ గురించి వివరాలు జాబితా చేస్తుంది. ఈ జాబితా బ్లాబ్స్‌ను ప్రత్యక్షంగా ఇవ్వదు, కానీ ప్రతి బ్లాబ్ కోసం డేటా లోడ్ చేయడానికి URL ను ఇస్తుంది.

    > 💁 మీరు ఈ URLని బ్రౌజర్‌లో పెద-wise చదువుతూ బ్లాబ్స్ వివరాలను చూడవచ్చు. ప్రతి ఐటెమ్ కి ఒక `Url` ప్రాపర్టీ ఉంటుంది, దీన్ని కూడా బ్రౌజర్‌లో లోడ్ చేస్తూ బ్లాబ్ కంటెంట్ చూడవచ్చు.

    ఈ కోడ్ తర్వాత ప్రతి బ్లాబ్‌ని లోడ్ చేస్తుంది, `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కి మారుస్తుంది.
    ఒకసారి పార్స్ అయిన తర్వాత డేటా geoJSON `Feature`గా సెట్ అవుతుంది. మ్యాప్ ప్రారంభమై, మీ దారిలో బబుల్స్ కనిపించనున్నాయి:

1. మీ బ్రౌజర్‌లో HTML పేజీని లోడ్ చేయండి. ఇది మొదట మ్యాప్‌ని లోడ్ చేసి, తరువాత స్టోరేజి నుండి GPS డేటాను పొందుకుని మ్యాప్ పై ప్లాట్ చేస్తుంది.

    ![సియాటిల్ సమీపంలో సెయింట్ ఎడ్వర్డ్ స్టేట్ పార్క్ మ్యాప్, పార్కు అంచు చుట్టూ మార్గం చూపడానికి వృత్తాలతో](../../../../../translated_images/te/map-path.896832e72dc696ff.webp)

> 💁 ఈ కోడ్‌ను [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) లో కొన్నిసార్లు ఉపయోగాలను పరిశీలించండి.
* మ్యాప్ తయారీ మరియు వైపొయింట్లపై మీ జ్ఞానాన్ని విస్తరించండి [Azure Mapsతో మీ మొదటి రూట్ కనుగొనే యాప్ సృష్టించుకుందాం స్వీయ-గైడ్](https://docs.microsoft.com/learn/modules/create-your-first-app-with-azure-maps/?WT.mc_id=academic-17441-jabenn).

## అసైన్‌మెంట్

[మీ యాప్‌ను డిప్లాయ్ చేయండి](assignment.md)

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**అస్పృష్యత**:
ఈ దస్త్రం [Co-op Translator](https://github.com/Azure/co-op-translator) అనే AI అనువాద సేవ ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి యత్నించగా ఉండక తప్ప, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా తప్పులుంటే ఉండవచ్చు అని దయచేసి గమనించండి. అసలు దస్త్రం దాని స్వదేశ భాషలో ప్రామాణిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారానికి, వృత్తిపరమైన మానవ అనువాదాన్ని సూచిస్తాము. ఈ అనువాదం వలన ఏర్పడిన ఏమైనా అపార్థాలు లేదా తప్పుగా అర్థం చేసుకోవడంపై మేము బాధ్యత ఎత్తుకోవడం లేదు.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->