# ಸ್ಥಾನ ಡೇಟಾವನ್ನು ದೃಶ್ಯೀಕರಿಸುವುದು
> ಸ್ಕೆಚ್ನೋಟ್ ಅನ್ನು [ನಿತ್ಯ ನರಸಿಂಹನ್](https://github.com/nitya) ರವರು ರಚಿಸಿದ್ದಾರೆ. ದೊಡ್ಡ ಆಕಾರಕ್ಕಾಗಿ ಚಿತ್ರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
ಈ ವೀಡಿಯೋವು ಈ ಪಾಠದಲ್ಲಿ ಚರ್ಚಿಸಲಾಗುವ ಸೇವೆ ಆಗಿರುವ ಐಒಟಿ ಜೊತೆಗಿನ ಏಜರ್ ನಕ್ಷೆಗಳ ಅವಲೋಕನವನ್ನು ನೀಡುತ್ತದೆ.
[](https://www.youtube.com/watch?v=P5i2GFTtb2s)
> 🎥 ವೀಡಿಯೋ ನೋಡಲು ಮೇಲಿನ ಚಿತ್ರವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ
## ಪೂರ್ವ-ಪಾಠ ಕ್ವಿಜ್
[ಪೂರ್ವ-ಪಾಠ ಕ್ವಿಜ್](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/25)
## ಪರಿಚಯ
ಕೊನೆಯ ಪಾಠದಲ್ಲಿ ನೀವು ಸೆನ್ಸಾರ್ಗಳಿಂದ ನಾಂವಿನ GPS ಡೇಟಾವನ್ನು ಕ್ಲೌಡ್ನ ಸ್ಟೋರೇಜ್ ಕಾಂಟೇನರ್ನಲ್ಲಿ ಸೇವ್ ಮಾಡಲು ಸರ್ವರ್ಲೆಸ್ಸ್ ಕೋಡ್ ಬಳಸಿ ತಿಳಿದುಕೊಂಡಿದ್ದೀರಿ. ಈಗ ನೀವು ಆ ಜಾಗತಿಕ ಬಿಂದುಗಳನ್ನು ಏಜರ್ ನಕ್ಷೆಯಲ್ಲಿ ಹೇಗೆ ದೃಶ್ಯೀಕರಿಸುವುದೆಂದು ಕಂಡುಹಿಡಿಯುತ್ತೀರಿ. ವೆಬ್ ಪುಟದಲ್ಲಿ ನಕ್ಷೆ ರೂಪಿಸುವುದು, GeoJSON ಡೇಟಾ ಫಾರ್ಮ್ಯಾಟ್ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳುವುದು ಮತ್ತು ಸೆರೆಹಿಡಿದ ಎಲ್ಲಾ GPS ಬಿಂದಗಳನ್ನು ನಿಮ್ಮ ನಕ್ಷೆಯಲ್ಲಿ ಹೇಗೆ ಚಿತ್ರೀಕರಿಸುವುದೆಂದು ಕಲಿಯುವಿರಿ.
ಈ ಪಾಠದಲ್ಲಿ ನಾವು ಚರ್ಚಿಸುವುದು:
* [ಡೇಟಾ ದೃಶ್ಯೀಕರಣ ಎಂದರೇನು](../../../../../3-transport/lessons/3-visualize-location-data)
* [ನಕ್ಷೆ ಸೇವೆಗಳು](../../../../../3-transport/lessons/3-visualize-location-data)
* [ಏಜರ್ ನಕ್ಷೆಗಳ ಸಂಪನ್ಮೂಲ ರಚನೆ](../../../../../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 ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇದೆ. ನೀವು ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕನ್ನಡಿಸುವ ಬಗ್ಗೆ ಹೆಚ್ಚು ತಿಳಿದುಕೊಳ್ಳಲು ಬಯಸಿದರೆ, [ಆರಂಭಿಕರಿಗಾಗಿ ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್](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ಕ್ಕಾಗಿದ್ದಾಗ ಸ್ವಯಂಚಾಲಿತ ಜಲಸಿಂಚನ ವ್ಯವಸ್ಥೆ ಪ್ರಾರಂಭವಾದ ಸ್ಥಳವನ್ನು ಸೂಚಿಸುವ ಲೈನ್ ಸೇರಿಸಬಹುದು:
ಈ ಚಾರ್ಟ್ ಬಹಳ ವೇಗವಾಗಿ ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಹಾಲಿನ ಮಟ್ಟ ಎಷ್ಟು ಇತ್ತು ಎಂದು ಮಾತ್ರವಲ್ಲ, ಜಲಸಿಂಚನ ವ್ಯವಸ್ಥೆ ಯಾವ ಸಮಯದಲ್ಲಿ ಪ್ರಾರಂಭವಾಯಿತು ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
ಡೇಟಾವನ್ನು ದೃಶ್ಯೀಕರಿಸುವುದು ಎಂದರೆ ಚಾರ್ಟ್ಗಳಿಗಿಂತ ಹೆಚ್ಚಾಗಿ ಇದೆ. ಹವಾಮಾನವನ್ನು ಅನುಸರಿಸುವ ಐಒಟಿ ಸಾಧನಗಳಿಗೆ ಮಾದರಿಯಂತೆ ಮೋಡಗಳ ಪ್ರವಾಹವನ್ನು ಸೂಚಿಸಲು ಕ್ಲೌಡ್ ಚಿಹ್ನೆ, ಮಳೆ ಮೋಡದ ಗೂಢಚರ, ಮತ್ತು ಇತರ ಸಂಕೇತಗಳೊಂದಿಗೆ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಅಥವಾ ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಇರಬಹುದು. ತುಂಬಾ ಸಾರಿ ಡೇಟಾವನ್ನು ದೃಶ್ಯೀಕರಿಸುವ ಅನೇಕ ಮಾರ್ಗಗಳಿವೆ, ಕೆಲವು ಗಂಭೀರವಾಗಿವೆ, ಕೆಲವು ಮೋಜುಮಸ್ತಿಯುಳ್ಳವು.
✅ ನೀವು ಡೇಟಾವನ್ನು ಅದು ಹೇಗೆ ದೃಶ್ಯೀಕರಿಸಿರುವುದನ್ನು ಯೋಚಿಸಿ ಕಾಣಿಸಿ. ಯಾವ ವಿಧಾನಗಳು ಸ್ಪಷ್ಟವಾಗಿದ್ದವು ಮತ್ತು ನೀವು ತ್ವರಿತವಾಗಿ ತೀರ್ಮಾನಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯಮಾಡಿದವು?
ಉತ್ತಮ ದೃಶ್ಯೀಕರಣಗಳು ಮಾನವರಿಗೆ ತ್ವರಿತ ತೀರ್ಮಾನ ಕೈಗೊಳ್ಳಲು ಅನುಕೂಲ ನೀಡುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಕೈಗಾರಿಕಾ ಯಂತ್ರಗಳಿಂದ ಎಲ್ಲಾ ರೀತಿಯ ಓದುಗಳನ್ನು ತೋರಿಸುವ ಗಾಯೇಜ್ಗಳ ಗೋಡೆ ತಿಳುವಳಿಕೆ ಮಾಡಬೇಕಾದರೋ ಬೆರಗಿನ ಬೆಂಕಿಯ ಬೆಳಕು ಏನಾದರೂ ತಪ್ಪಾಗಿದ್ದಾಗ ತಕ್ಷಣವೇ ಕ್ರಮ ಕೈಗೊಳ್ಳಲು ಸಾಧ್ಯ. ಕೆಲವೊಮ್ಮೆ ಅತ್ಯುತ್ತಮ ದೃಶ್ಯೀಕರಣವು ಬೆರಗಿನ ಬೆಳಕು ಮಾತ್ರವೇ ಆಗಿರಬಹುದು!
GPS ಡೇಟಾ ಜೊತೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಸ್ಪಷ್ಟ ದೃಶ್ಯೀಕರಣವೆಂದರೆ ಆ ಡೇಟಾವನ್ನು ನಕ್ಷೆಯಲ್ಲಿ ಪ್ಲಾಟ್ ಮಾಡುವುದು. ಉದಾಹರಣೆಗೆ, ವಿತರಣೆ ಟ್ರಕ್ಗಳನ್ನು ತೋರಿಸುವ ನಕ್ಷೆಯನ್ನು ಒಬ್ಬ ಪ್ರಯೋಗಶಾಲಾ ಕಾರ್ಯಕರ್ತನು ನೋಡಿದರೆ ಟರಕ್ಗಳು ಯಾವಾಗ ಬಂದು ಸೇರುತ್ತವೇ ಎಂಬುದನ್ನು ತಿಳಿದುಕೊಳ್ಳಬಹುದು. ನಕ್ಷೆಯಲ್ಲಿ ಟ್ರಕ್ಗಳ ಪ್ರಸ್ತುತ ಸ್ಥಳದ ಮಾತ್ರವಲ್ಲ, ಟ್ರಕ್ ಒಳಗಿನ ವಸ್ತುಗಳ ಮಾಹಿತಿಯೂ ಇಲ್ಪಟ್ಟಿದ್ದರೆ, ನಾವು ತಯಾರಿಯಲ್ಲಿ ಬರುವವುಗಳನ್ನನುಸರುವಂತೆ ಯೋಜಿಸಬಹುದು - ಹೀಗೆ ಒಂದು ದಪ್ಪ ಯಂತ್ರೋಪಕರಣ ಟ್ರಕ್ ಹತ್ತಿರ ಇದ್ದರೆ, ಶೀತಗೃಹದಲ್ಲಿ ಆ ಟೊತ್ತನ್ನು ಇರಿಸಲು ಜಾಗ ಕಾಯ್ದಿರಿಸಬಹುದು.
## ನಕ್ಷೆ ಸೇವೆಗಳು
ನಕ್ಷೆಗಳನ್ನು ಬಳಸುವುದು ರೋಚಕವಾದ ವ್ಯಾಯಾಮ ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಎಲ್ಲೂ ನಾವೇರಬಹುದು: ಬಿಂಗ್ ನಕ್ಷೆ, ಲೀಫ್ಲೆಟ್, ಓಪನ್ ಸ್ಟ್ರೀಟ್ ನಕ್ಷೆ, ಮತ್ತು ಗೂಗಲ್ ನಕ್ಷೆಗಳಂತಹ ಅನೇಕ ಆಯ್ಕೆಗಳು ಇವೆ. ಈ ಪಾಠದಲ್ಲಿ ನೀವು [ಏಜರ್ ನಕ್ಷೆಗಳ](https://azure.microsoft.com/services/azure-maps/?WT.mc_id=academic-17441-jabenn) ಬಗ್ಗೆ ಮತ್ತು ಅವು ನೀವು ಪಡೆದ GPS ಮಾಹಿತಿಯನ್ನೂ ಹೇಗೆ ಪ್ರದರ್ಶಿಸಬಹುದೆಂದು ಕಲಿಯುತ್ತೀರಿ.
ಏಜರ್ ನಕ್ಷೆಗಳು "ಜಿಯೋಸ್ಪೇಷಿಯಲ್ ಸೇವೆಗಳ ಹಾಗು SDKಗಳ ಒಟ್ಟು ಸಂಗ್ರಹವಾಗಿದೆ, ಇವು ಹೊಸ ನಕ್ಷಾ ಡೇಟಾವನ್ನು ಬಳಸಿ ಜಾಗೀಯ ಸಿದ್ಧಾಂತವನ್ನು ವೆಬ್ ಹಾಗು ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ಒದಗಿಸುತ್ತವೆ." ಡೆವಲಪರ್ಸ್ಗಳಿಗೆ ಸುಂದರ, ಪರಸ್ಪರಸಂಪರ್ಕದ ನಕ್ಷೆಗಳು ಸೃಷ್ಟಿಸಲು ಉಪಕರಣಗಳನ್ನು ಒದಗಿಸಲಾಗುತ್ತದೆ. ಇವು ಸಂಚಾರ ಮಾರ್ಗ ಸಲಹೆಗಳು, ಸಂಚಾರ ಅಪಘಾತಗಳ ಮಾಹಿತಿ, ಒಳಾಂಗಣ ದಿಕ್ಕು ಸೂಚನೆಗಳು, ಹುಡುಕಾಟ ಸಾಮರ್ಥ್ಯಗಳು, ಎತ್ತರ ಮಾಹಿತಿ, ಹವಾಮಾನ ಸೇವೆಗಳು ಮುಂತಾದವುಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
✅ ಕೆಲವು [ನಕ್ಷೆ ಕೋಡ್ ಮಾದರಿಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ](https://docs.microsoft.com/samples/browse?WT.mc_id=academic-17441-jabenn&products=azure-maps)
ನೀವು ನಕ್ಷೆಗಳನ್ನು ಖಾಲಿ ಕ್ಯಾನ್ವಾಸ್, ಟೈಲ್ಸ್, ಉಪಗ್ರಹ ಚಿತ್ರಗಳು, ರಸ್ತೆಗಳಿಗೆ ಮೇಲ್ವಿಚಾರಣೆಯೊಂದಿಗೆ ಉಪಗ್ರಹ ಚಿತ್ರಗಳು, ವಿವಿಧ ಗ್ರೇಸ್ಕೇಲ್ ನಕ್ಷೆಗಳು, ಎತ್ತರವನ್ನು ತೋರಿಸುವ ಛಾಯಾಚಿತ್ರಗಳು, ರಾತ್ರಿ ನೋಟ ನಕ್ಷೆಗಳು, ಮತ್ತು ಹೆಚ್ಚು ಭಿನ್ನತೆ ಹೊಂದಿರುವ ನಕ್ಷೆಗಳಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು. ನೀವು ನಿಮ್ಮ ನಕ್ಷೆಗಳನ್ನು [ಏಜರ್ ಇವೆಂಟ್ ಗ್ರಿಡ್](https://azure.microsoft.com/services/event-grid/?WT.mc_id=academic-17441-jabenn) ಜೊತೆ ಇಂಟಿಗ್ರೇಟ್ ಮಾಡುವ ಮೂಲಕ ನಿಖರ ಕಾಲ ರಾಜ್ಯವನ್ನೂ ಪಡೆಯಬಹುದು. ನಕ್ಷೆಯ ವರ್ತನೆ ಮತ್ತು ರೂಪವನ್ನು ನಿಯಂತ್ರಿಸಲು, ಪಿಂಚಿಂಗ್, ಡ್ರಾಗ್, ಕ್ಲಿಕ್ ಮುಂತಾದ ಈವೆಂಟ್ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ನಿಯಂತ್ರಣಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು. ನಕ್ಷೆಯ ರೂಪಕವನ್ನು ನಿಯಂತ್ರಿಸಲು ಬಬಲ್ಗಳು, ರೇಖೆಗಳು, ಬಹುಭುಜಗಳು, ಹೀಟ್ ಮ್ಯಾಪ್ಗಳು ಮುಂತಾದ ಲೇಯರ್ಗಳನ್ನು ಸೇರಿಸಬಹುದು. ನೀವು ಯಾವ SDK ಆಯ್ದುಕೊಳ್ಳುತ್ತೀರೋ ಅದನ್ವಯ ನಕ್ಷೆಯ ಶೈಲಿಯನ್ನು ಅಳವಡಿಸುವುದು.
ನೀವು ಏಜರ್ ನಕ್ಷೆಯ APIಗಳಿಗೆ ಅದರ [REST API](https://docs.microsoft.com/javascript/api/azure-maps-rest/?WT.mc_id=academic-17441-jabenn&view=azure-maps-typescript-latest), ಅದರ [ವೆಬ್ SDK](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control?WT.mc_id=academic-17441-jabenn), ಅಥವಾ, ನಿಮಗೆ ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಾಣವಾಗಿದ್ದರೆ, ಅದರ [ಆಂಡ್ರಾಯ್ಡ್ 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 ಸ್ಥಳ ಮಾರ್ಗವನ್ನು ತೋರಿಸುವಿರಿ.
## ಏಜರ್ ನಕ್ಷೆಗಳ ಸಂಪನ್ಮೂಲ ರಚನೆ
ನಿಮ್ಮ ಮೊದಲ ಹೆಜ್ಜೆ ಏಜರ್ ನಕ್ಷೆಗಳ ಖಾತೆಯನ್ನು ರಚಿಸುವುದು.
### ಕಾರ್ಯ - ಏಜರ್ ನಕ್ಷೆಗಳ ಸಂಪನ್ಮೂಲ ರಚನೆ
1. ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಟರ್ಮಿನಲ್ ಅಥವಾ ಕಮಾಂಡ್ ಪ್ರಾಂಪ್ಟ್ನಿಂದ ಮಾಡಿ, ನಿಮ್ಮ `gps-sensor` ಸಂಪನ್ಮೂಲ ಗುಂಪಿನಲ್ಲಿ ಏಜರ್ ನಕ್ಷೆಗಳ ಸಂಪನ್ಮೂಲವನ್ನು ರಚಿಸಲು:
```sh
az maps account create --name gps-sensor \
--resource-group gps-sensor \
--accept-tos \
--sku S1
```
ಇದು `gps-sensor` ಎಂಬ ಏಜರ್ ನಕ್ಷೆಗಳ ಸಂಪನ್ಮೂಲವನ್ನು ರಚಿಸುತ್ತದೆ. ಬಳಸುತ್ತಿರುವ ಟಿಯರ್ `S1`, ಇದು ಪೇಯ್ಡ್ ಟಿಯರ್ ಆಗಿದ್ದು ವಿವಿಧ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಆದರೆ ಉಚಿತವಾಗಿ ಸಾಕಷ್ಟು ಕರೆಗಳನ್ನೂ ಸಹ ಒದಗಿಸುತ್ತದೆ.
> 💁 ಏಜರ್ ನಕ್ಷೆಗಳ ಬಳಕೆಯ ವೆಚ್ಚವನ್ನು ನೋಡಲು [ಏಜರ್ ನಕ್ಷೆಗಳ ಬೆಲೆಮಾಪನ ಪುಟ](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++ ಹೆಡರ್ ಫೈಲ್ಗಳು ಸೇರಿಸುವುದು ಅಥವಾ ಪೈಥಾನ್ ಮೌಡ್ಯೂಲ್ಗಳನ್ನು ಆಮದುಮಾಡುವ ಪ್ರಕ್ರಿಯೆಗೆ ಹೋಲಿಸಬಹುದು.
1. ಆ ಸ್ಕ್ರಿಪ್ಟ್ ಕೆಳಗೆ, ನಕ್ಷೆಯನ್ನು ಪ್ರಾರಂಭಿಸಲು ಸ್ಕ್ರಿಪ್ಟ್ ಬ್ಲಾಕ್ ಸೇರಿಸಿ.
```javascript
```
`` ಅನ್ನು ನಿಮ್ಮ ಏಜರ್ ನಕ್ಷೆಗಳ ಖಾತೆಗೆ 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 ಡೇಟಾವನ್ನು ತೆಗೆಯಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ನಕ್ಷೆಯ ಮೇಲೆ ಮಾರುಕಟ್ಟೆ ಗುರುತುಗಳ ಲೇಯರ್ಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವುದು. ಆ ಮೊದಲು, ಏಜರ್ ನಕ್ಷೆಗಳ ಅಗತ್ಯವಿರುವ [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` ಇದೆಯೆಂಬುದು, ಮತ್ತು ಅದರ coordonnées ಅಕ್ಷಾಂಶ ಮತ್ತು ರೇಖಾಂಶವನ್ನು ಸೂಚಿಸುತ್ತದೆ.
✅ ನಿಮ್ಮ geoJSON ರಚಿಸುವಾಗ, ಆಬ್ಜೆಕ್ಟಿನಲ್ಲಿನ `latitude` ಮತ್ತು `longitude` ನ ಕ್ರಮದಲ್ಲಿ ಗಮನವಿಡಿ, ಇಲ್ಲದಿದ್ದರೆ ನಿಮ್ಮ ಬಿಂದುಗಳು ಸರಿಯಾದ ಸ್ಥಳದಲ್ಲಿ ಕಾಣಿಸದಿರಬಹುದು! GeoJSON `lon,lat` ಕ್ರಮದ ಡೇಟಾವನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ, `lat,lon` ಅಲ್ಲ.
`ಭೂಮಿತಿ` ವಿಭಿನ್ನ ಪ್ರಕಾರಗಳಾಗಿರಬಹುದು, ಉದಾಹರಣೆಗೆ ಒಬ್ಬetlenಿನಿಂದಾದ ಬಿಂದುವು ಅಥವಾ ಬಹುಭುಜ. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಅದು ಎರಡು ಸ್ಥಾನದೊಂದಿಗೆ ಬಿಂದು, ಅಂದರೆ ರೇಖಾಂಶ ಮತ್ತು ಅಕ್ಷಾಂಶ.
✅ ಅಜೂರ್ ನಕ್ಷೆಗಳು ಮಾನಕ GeoJSON ಮತ್ತು ಕೆಲ [ವೃದ್ಧಿಪಡಿಸಿದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು](https://docs.microsoft.com/azure/azure-maps/extend-geojson?WT.mc_id=academic-17441-jabenn) ಬೆಂಬಲಿಸುತ್ತವೆ, ಈ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ವೃತ್ತಗಳು ಮತ್ತು ಇತರ ಭೂಮಿತಿಗಳನ್ನು ಸುಳಿಯುವ ಸೌಲಭ್ಯ ಸಹ ಇದೆ.
## GeoJSON ಬಳಸಿ ನಕ್ಷೆಯಲ್ಲಿ GPS ಡೇಟಾ ರೇಖಾಚಿತ್ರ
ನೀವು ಈಗ ಹಿಂದಿನ ಪಾಠದಲ್ಲಿ ನಿರ್ಮಿಸಿರುವ ಸಂಗ್ರಹಣೆಯಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ಸಿದ್ಧರಾಗಿ. ನೆನಪಾಗಿ, ಅದು ಬ್ಲಾಬ್ ಸಂಗ್ರಹಣದಲ್ಲಿ ಕೆಲ ಫೈಲ್ಗಳಾಗಿ ಸಂರಕ್ಷಿಸಲಾಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಫೈಲ್ಗಳನ್ನು ಪಡೆದು ಅವುಗಳನ್ನು ವಿಶ್ಲೇಷಣೆ ಮಾಡಬೇಕಾಗುತ್ತದೆ, ಆಗ ಅಜೂರ್ ನಕ್ಷೆಗಳು ಡೇಟಾವನ್ನು ಬಳಸಬಹುದು.
### ಕಾರ್ಯ - ವೆಬ್ ಪುಟದಿಂದ ಪ್ರವೇಶಕ್ಕಾಗಿ ಸಂಗ್ರಹಣೆಯನ್ನು ಸಂರಚಿಸಿ
ನೀವು ನಿಮ್ಮ ಸಂಗ್ರಹಣೆಯಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ಕರೆ ಮಾಡಿದರೆ, ನಿಮ್ಮ ಬ್ರೌಸರ್ನ ಕಾನ್ಸೋಲ್ನಲ್ಲಿ ದೋಷಗಳು ಕಂಡುಬರುವಂತಿರಬಹುದು. ಅದು ನೀವು ಈ ಸಂಗ್ರಹಣೆಯ ಮೇಲೆ [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) ಅನುಮತಿಗಳನ್ನು ಹೊಂದಿಸಬೇಕಾಗಿರುವುದರಿಂದ, ಹೊರಗಿನ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಇದರ ಡೇಟಾವನ್ನು ಓದಲು ಅನುಮತಿಸಲು.
> 🎓 CORS ಅಂದರೆ "ಆಕ್ರಮಣ ಮೂಲ ಹಂಚಿಕೆ" ಮತ್ತು ಸುರಕ್ಷತಿಗಾಗಿ ಅದನ್ನು ಅಜೂರ್ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸುವ ಅಗತ್ಯವಿರುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಡೇಟಾವನ್ನು ತಲೆಗೆ ಬಾರದ ಸೈಟ್ಗಳು ಪ್ರವೇಶಿಸಬಾರದು ಎಂದು ನಿಲ್ಲಿಸುತ್ತದೆ.
1. ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ CORS ಸಾಧಿಸಲು:
```sh
az storage cors add --methods GET \
--origins "*" \
--services b \
--account-name \
--account-key
```
`` ಅನ್ನು ನಿಮ್ಮ ಸಂಗ್ರಹಣಾ ಖಾತೆಯ ಹೆಸರಿನಿಂದ ಬದಲಾಯಿಸಿ. `` ಅನ್ನು ನಿಮ್ಮ ಸಂಗ್ರಹಣಾ ಖಾತೆಯ ಖಾತೆ ಕೀಲಿಕೆಯನ್ನು ಬದಲಾಯಿಸಿ.
ಈ ಆಜ್ಞೆ ಯಾವುದೇ ವೆಬ್ಸೈಟ್ (ವೈಲ್ಡ್ಕಾರ್ಡ್ `*` ಎಂದರೆ ಯಾವುದೇ) ನಿಮ್ಮ ಸಂಗ್ರಹಣಾ ಖಾತೆ ಇಂದ *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);
})
})
```
`` ಅನ್ನು ನಿಮ್ಮ ಸಂಗ್ರಹಣಾ ಖಾತೆಯ ಹೆಸರಿನಿಂದ ಬದಲಾಯಿಸಿ. `` ಅನ್ನು ನಿಮ್ಮ ಅಜೂರ್ ನಕ್ಷೆ ಖಾತೆಗೆ API ಕೀಲಿಕೆಯಿಂದ ಬದಲಾಯಿಸಿರಿ.
ಇಲ್ಲಿ ಹಲವು ಕಾರ್ಯಗಳು ನಡೆಯುತ್ತಿವೆ. ಮೊದಲು, ಕೋಡ್ ನಿಮ್ಮ ಬ್ಲಾಬ್ ಕಂಟೇನರ್ನಿಂದ ನಿಮ್ಮ GPS ಡೇಟಾವನ್ನು ಲಭ್ಯವಿರುವ URL ಮೂಲಕ ಪಡೆಯುತ್ತದೆ. ಈ URL `gps-data` ಇಂದ ಪಡೆಯುತ್ತದೆ, ಇದು ಸಂಪನ್ಮೂಲ ಪ್ರಕಾರವು ಕಂಟೇನರ್ ಎಂಬುದನ್ನು ಸೂಚಿಸುತ್ತದೆ (`restype=container`), ಮತ್ತು ಎಲ್ಲಾ ಬ್ಲಾಬ್ಗಳ ಮಾಹಿತಿ ಪಟ್ಟಿಯನ್ನು ತೋರಿಸುತ್ತದೆ. ಈ ಪಟ್ಟಿಯಲ್ಲಿ ಬ್ಲಾಬ್ಗಳು ಸ್ವತಃ ಬರುವುದಿಲ್ಲ, ಆದರೆ ಪ್ರತಿಯೊಂದು ಬ್ಲಾಬ್ನ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಲು ಬಳಸಬಹುದಾದ URL ತಲುಪುತ್ತದೆ.
> 💁 ನೀವು ಈ URL ಅನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಹಾಕಿ ನಿಮ್ಮ ಕಂಟೇನರ್ನ ಎಲ್ಲ ಬ್ಲಾಬ್ಗಳ ವಿವರಗಳನ್ನು ನೋಡಬಹುದು. ಪ್ರತಿ ಐಟಂಗಳಿಗೆ ಒಂದು `Url` ಗುಣಲಕ್ಷಣವಿರುತ್ತದೆ, ಅದನ್ನು ಬಳಸಿಕೊಂಡು ಬ್ಲಾಬ್ ವಿಷಯವನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ಟ್ರೈ ಮಾಡಬಹುದು.
ನಂತರ ಈ ಕೋಡ್ ಪ್ರತಿ ಬ್ಲಾಬ್ ಅನ್ನು `loadJSON` ಕಾರ್ಯವನ್ನು ಕರೆದು ಲೋಡ್ ಮಾಡುತ್ತದೆ, ಅದನ್ನು ಮುಂದಿನ ಹಂತದಲ್ಲಿ ರಚಿಸಲಾಗುವುದು. ನಂತರ ನಕ್ಷೆ ನಿಯಂತ್ರಣ ರಚನೆಯಾಗುತ್ತದೆ ಮತ್ತು `ready` ಇವೆಂಟ್ಗೆ ಕೋಡ್ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಈ ಇವೆಂಟ್ ವೆಬ್ ಪುಟದಲ್ಲಿ ನಕ್ಷೆ ಪ್ರದರ್ಶಿಸಲ್ಪಟ್ಟಾಗ ಕರೆಯಲ್ಪಡುತ್ತದೆ.
ready ಇವೆಂಟ್ ಅಜೂರ್ ನಕ್ಷೆ ಡೇಟಾ ಮೂಲವನ್ನು ರಚಿಸುತ್ತದೆ - ಇದು 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 ಡೇಟಾನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಅದನ್ನು ರೇಖಾಂಶ ಮತ್ತು ಅಕ್ಷಾಂಶ ಸ್ಥಾನದಂತೆ geJSON ಆಗಿ ಓದಲು ಪರಿವರ್ತಿಸುತ್ತದೆ.
ವಿಶ್ಲೇಷಿಸಿದ ನಂತರ, ಡೇಟಾವನ್ನು geoJSON `Feature` ಭಾಗವಾಗಿ ಸೆಟ್ ಮಾಡಲಾಗುತ್ತದೆ. ನಕ್ಷೆಯನ್ನು ಪ್ರಾರಂಭಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಸಣ್ಣ ಬಸಲೆಗಳು ನಿಮ್ಮ ಡೇಟಾ ರೇಖಾಚಿತ್ರ ಹಾದಿಯ ಸುತ್ತಲೂ ಕಾಣಿಸುತ್ತವೆ:
1. HTML ಪುಟವನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಲೋಡ್ ಮಾಡಿ. ಅದು ನಕ್ಷೆಯನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ, ಆರ ನಂತರ ಸಂಗ್ರಹಣೆಯಿಂದ ಎಲ್ಲಾ GPS ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಿ ನಕ್ಷೆಯಲ್ಲಿ ರೇಖಾಚಿತ್ರ ಗುರುತಿಸುತ್ತದೆ.
> 💁 ನೀವು ಈ ಕೋಡ್ ಅನ್ನು [code](../../../../../3-transport/lessons/3-visualize-location-data/code) ಫೋಲ್ಡರ್ನಲ್ಲಿ ಕಾಣಬಹುದು.
---
## 🚀 ಸವಾಲು
ನಕ್ಷೆಯಲ್ಲಿ ಸ್ಥಿರ ಡೇಟಾವನ್ನು ಗುರುತಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರದರ್ಶಿಸುವುದು ಚೆನ್ನಾಗಿರುತ್ತದೆ. ನೀವು ಸಮಯ ಚಿಹ್ನಿತ json ಫೈಲ್ಗಳನ್ನು ಬಳಸಿ ಊಹಾಪೋಹ animation ಗೆ ಈ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ನ್ನು ಸುಧಾರಣೆ ಮಾಡಬಹುದೆ? ಇಲ್ಲಿ ನಕ್ಷೆಗಳಲ್ಲಿ ಆನಿಮೇಶನ್ ಬಳಕೆಯ ಕೆಲವು [ನಮೂನೆಗಳು](https://azuremapscodesamples.azurewebsites.net/) ಇವೆ.
## ಉಪನ್ಯಾಸನಂತರ ಕ್ವಿಜ್
[ಉಪನ್ಯಾಸನಂತರ ಕ್ವಿಜ್](https://black-meadow-040d15503.1.azurestaticapps.net/quiz/26)
## ವಿಮರ್ಶೆ & ಸ್ವಯಂ ಅಧ್ಯಯನ
ಅಜೂರ್ ನಕ್ಷೆಗಳು ಅದರಲ್ಲೇ IoT ಸಾಧನಗಳೊಡನೆ ಕೆಲಸ ಮಾಡಲು ತುಂಬ ಉಪಯುಕ್ತ.
* [ಅಜೂರ್ ನಕ್ಷೆಗಳ ಡಾಕ್ಯುಮೆಂಟೇಷನ್ನಲ್ಲಿರುವ ಕೆಲವು ಉಪಯೋಗಗಳನ್ನು Microsoft docs ನಲ್ಲಿ ಸಂಶೋಧಿಸಿ](https://docs.microsoft.com/azure/azure-maps/tutorial-iot-hub-maps?WT.mc_id=academic-17441-jabenn).
* ನಕ್ಷೆ ನಿರ್ಮಾಣ ಮತ್ತು ಮಾರ್ಗಬಿಂದುಗಳೊಳಗಿನ ನಿಘಂಟುವನ್ನು ಗಾಢಗೊಳಿಸಲು [Microsoft Learn ನಲ್ಲಿ ಅಜೂರ್ ನಕ್ಷೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಮೊದಲಿಗಿನ ಮಾರ್ಗ ಕ್ರಮ ವಿನ್ಯಾಸ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ ಸ್ವಯಂ ಪಾಠ](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) ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವೆಷ್ಟು ಶುದ್ಧತೆಯನ್ನು ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ತಪ್ಪುಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳು ಇರಬಹುದು ಎಂದು ದಯವಿಟ್ಟು ಗಮನಿಸಿರಿ. ಮೂಲ ಭಾಷೆಯ ದಸ್ತಾವೇಜು ಸಕಾಲಿಕ ಮತ್ತು ಪ್ರಾಮಾಣಿಕ ಮೂಲದಾಗಿ ಪರಿಗಣಿಸಬೇಕು. ಮಹತ್ವಪೂರ್ಣ ಮಾಹಿತಿಗಾಗಿ ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗತಿಯು ಅಥವಾ ತಪ್ಪು ತಿಳಿವಳಿಕೆಗೆ ನಾವು ಹೊಣೆವಹಿಸುವುದಿಲ್ಲ.