# സ്ഥലം ഡാറ്റ ദൃശ്യവൽക്കരിക്കൽ
> [Nitya Narasimhan](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) പരിശോധിക്കുക.
## ഡാറ്റ ദൃശ്യമാക്കൽ എന്താണ്
ഡാറ്റ ദൃശ്യവൽക്കരണം, പേരാകത്തോട് അനുബന്ധിച്ച്, മനുഷ്യർക്കു മികവുറ്റും മനസ്സിലാക്കാൻ പ്രയാസമില്ലാത്ത രീതിയിൽ ഡാറ്റ കാഴ്ചവെക്കുന്നതാണ്. സാധാരണയായി ഇത് ചാർട്ടുകളോടും ഗ്രാഫുകളോടും ബന്ധപ്പെട്ടു കാഴ്ച വയ്ക്കപ്പെടുന്നു, എന്നാൽ ഡാറ്റ പടമായി പ്രത്യക്ഷപ്പെടുത്തിയ രൂപം മനുഷ്യർക്ക് ഡാറ്റയെ എളുപ്പത്തിൽ മനസ്സിലാക്കുന്നതിന് മാത്രമല്ല, അവരെ തീരുമാനമെടുക്കുന്നതിൽ സഹായിക്കുന്ന തരത്തിലാണ്.
ഒരു ലളിതമായ ഉദാഹരണം എടുത്താൽ - ഫാം പ്രോജക്ടിൽ നിങ്ങൾ മണ്ണിന്റെ ഈർപ്പം ക്രമീകരണങ്ങൾ രേഖപ്പെടുത്തി. 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 |
മനുഷ്യൻ ആ കണക്കുകൾ മനസ്സിലാക്കുന്നത് ബുദ്ധിമുട്ടാണ്. അർത്ഥമല്ലാത്ത അക്കങ്ങളുടെ ഒരു മതിലാണ് അത്. ഈ ഡാറ്റ ദൃശ്യമാക്കാനുള്ള ആദ്യപടി ആയി, അത് ഒരു ലൈൻ ചാർട്ടിൽ പ്ലോട്ട് ചെയ്യാവുന്നതാണ്:
ഇത് കൂടുതൽ മെച്ചപ്പെടുത്താൻ, 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) പരീക്ഷിക്കുക
നിങ്ങൾക്ക് മാപ്പുകൾ ഒരു ശൂന്യ കലവറ kimi ആയി പ്രദർശിപ്പിക്കാമെന്നും, ഉരുട്ടുകൾ, ഉപഗ്രഹ ചിത്രങ്ങൾ, റോഡുകൾ ഉൾപ്പെടുത്തിയ ഉപഗ്രഹ ചിത്രങ്ങൾ, വിവിധ തരത്തിലുള്ള ഗ്രേ സ്കെയിൽ മാപ്പുകൾ, ഉയരമുള്ള ചായം കാണിക്കുന്ന മാപ്പുകൾ, രാത്രിക്കാല മാപ്പുകൾ, ഉയർന്ന വ്യത്യാസമുള്ള ഒരു മാപ്പ് എന്നിവ കാണിക്കാമെന്ന് അറിയാം. [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. `` ടാഗിന്റെ തുറക്കുന്ന ഭാഗത്തിന് താഴെ, മാപ്പ് പ്രദർശിപ്പിക്കുന്നതിന് ഒരു സ്റ്റൈൽ ഷീറ്റ് പുറംഫയൽ ചേർക്കുക, കൂടാതെ Web SDK മുതൽ ഒരു സ്ക്രിപ്റ്റ് ചേർക്കുക അതിന്റെ പെരുമാറ്റം നിയന്ത്രിക്കാൻ:
```html
```
ഈ സ്റ്റൈൽ ഷീറ്റ് മാപ്പിന്റെ ദൃശ്യം എങ്ങനെ കാണിക്കണമെന്ന് നിർവഹിക്കുന്നു, സ്ക്രിപ്റ്റ് ഫയൽ മാപ്പ് ലോഡ് ചെയ്യുന്നതിനുള്ള കോഡ് അടങ്ങിയിരിക്കുന്നു. ഈ കോഡ് ചേർക്കൽ C++ ഹെഡർ ഫയലുകൾ ഉൾപ്പെടുത്തുന്നതോടോ Python മോഡ്യൂളുകൾ ഇറക്കുമതിയാക്കുന്നതോടോ തുല്യമാണെന്ന് മനസ്സിലാക്കുക.
1. ആ സ്ക്രിപ്റ്റിനു താഴെ, മാപ്പ് ആരംഭിക്കുന്ന ഒരു സ്ക്രിപ്റ്റ് ബ്ലോക്ക് ചേർക്കുക.
```javascript
```
`` ന് പകരം നിങ്ങളുടെ Azure Maps അക്കൗണ്ടിനായുള്ള API കീ നൽകുക.
നിങ്ങളുടെ `index.html` പേജ് ഒരു വെബ് ബ്രൗസറിൽ തുറന്നാൽ, സിയാറ്റിൽ പ്രദേശത്തെ കേന്ദ്രീകരിച്ച ഒരു മാപ്പ് കാണുന്നതാണ്.
✅ നിങ്ങളുടെ മാപ്പ് പ്രദർശനം മാറ്റാൻ 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` അല്ല.
`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` എന്നത് ഈ ക്രമീകരണം ബ്ലോബുകൾക്കായാണ് പ്രയോജനപ്പെടുത്തുക എന്നർത്ഥം.
### ടാസ്ക് - സ്റ്റോറേജിൽ നിന്നുള്ള 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 കീ കൊണ്ട് മാറ്റുക.
ഇവിടെ ഒന്നിലധികം പ്രവർത്തനങ്ങൾ നടക്കുന്നു. ആദ്യം, കോഡ് നിങ്ങളുടെ ബ്ലോബ്സ്റ്റോറേജിൽ നിന്നുള്ള GPS ഡാറ്റ URL എൻപോയിന്റ് ഉപയോഗിച്ച് പിടിക്കുന്നു. ഈ URL `gps-data` എന്ന സെക്ഷനിൽ നിന്നാണ് ഡാറ്റ നേടുന്നത്, അതായത് റിസോഴ്സ് തരം കൺറ്റെയ്നർ ആണ് (`restype=container`), എല്ലാ ബ്ലോബുകളുടെയും വിവരങ്ങൾ ലിസ്റ്റ് ചെയ്യുന്നു. ഈ ലിസ്റ്റ് 블ോബുകൾ മാത്രമല്ല തിരിച്ചുകൊടുക്കുക, പക്ഷെ ഓരോ ബ്ലോബിനും വേണ്ടി ഡാറ്റ ലോഡ് ചെയ്യാനുള്ള URL നൽകും.
> 💁 ഈ URL നിങ്ങളുടെ ബ്രൗസറിൽ ചേർത്തു ഡാറ്റയിൽ ഉള്ള എല്ലാ ബ്ലോബുകളും വിശദമായി കാണാം. ഓരോ ഇനത്തിനും ഒരു `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 ഡാറ്റ മുഴുവനും ലോഡ് ചെയ്ത് മാപ്പിൽ പ്ലോട്ട് ചെയ്യും.
> 💁 ഈ കോഡ് [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 ട്യൂട്ടോറിയലിൽ](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)
---
**അസൂയാപത്രം**:
ഈ ഡോക്യുമെന്റ് AI പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം പരമാവധി കൃത്യതയ്ക്കായി ശ്രമിക്കുന്നതിനിടത്തിലും, ഓട്ടോമേറ്റഡ് പരിഭാഷകളിൽ പിശക് अथവാ തെറ്റായ വിവരം ഉണ്ടായിരിക്കാം എന്ന് ദയവായി ശ്രദ്ധിക്കുക. മൂൾ ഭാഷയിൽ ഉള്ള അസൽ ഡോക്യുമെന്റ് പ്രാമാണികമായ സ്ഥാനത്തുണ്ട്. നിർണായക വിവരങ്ങൾക്കായി, പ്രൊഫഷണൽ മനുഷ്യപരിഭാഷ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷ ഉപയോഗിച്ചതിൽ നിന്നുള്ള യാതൊരു തെറ്റിദ്ധാരണയ്ക്കും അർത്ഥതർജ്ജനത്തിനും ഞങ്ങൾ ഉത്തരവാദികളല്ല.