# ਸਥਾਨ ਡਾਟਾ ਨੂੰ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਓ  > ਸਕੈਚਨੋਟ [ਨਿਤਿਆ ਨਰਸਿੰਹਨ](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) ਨੂੰ ਦੇਖੋ। ## ਡਾਟਾ ਦ੍ਰਿਸ਼ਮਾਨਤਾ ਕੀ ਹੈ ਡਾਟਾ ਦ੍ਰਿਸ਼ਮਾਨਤਾ, ਜਿਵੇਂ ਕਿ ਨਾਮ ਸੁਝਾਉਂਦਾ ਹੈ, ਡਾਟਾ ਨੂੰ ਇਸ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਉਣ ਬਾਰੇ ਹੈ ਜੋ ਮਨੁੱਖਾਂ ਲਈ ਸਮਝਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਚਾਰਟ ਅਤੇ ਗ੍ਰਾਫ ਨਾਲ ਜੁੜਿਆ ਹੁੰਦਾ ਹੈ, ਪਰ ਇਹ ਡਾਟਾ ਨੂੰ ਚਿੱਤਰਕਾਰੀ ਰੂਪ ਵਿੱਚ ਪੇਸ਼ ਕਰਨ ਦਾ ਕੋਈ ਵੀ ਤਰੀਕਾ ਹੈ ਜੋ ਮਨੁੱਖਾਂ ਨੂੰ ਸਿਰਫ ਡਾਟਾ ਨੂੰ ਬਿਹਤਰ ਸਮਝਣ ਵਿੱਚ ਹੀ ਨਹੀਂ ਸਹਾਇਕ ਹੁੰਦਾ, ਸਗੋਂ ਫੈਸਲੇ ਕਰਨ ਵਿੱਚ ਵੀ ਮਦਦ ਕਰਦਾ ਹੈ। ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ ਲੈ ਕੇ - ਫਾਰਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਤੁਸੀਂ ਮਿੱਟੀ ਦੀ ਨਮੀ ਦੇ ਪੜ੍ਹਨ ਨੂੰ ਕੈਪਚਰ ਕੀਤਾ ਸੀ। 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 "ਜੀਓਸਪੇਸ਼ਲ ਸੇਵਾਵਾਂ ਅਤੇ 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) ਨਾਲ ਇੰਟੀਗਰੇਟ ਕਰਕੇ ਆਪਣੇ ਮੈਪਸ 'ਤੇ ਰੀਅਲ-ਟਾਈਮ ਅਪਡੇਟ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਮੈਪਸ ਦੇ ਵਿਵਹਾਰ ਅਤੇ ਦਿੱਖ ਨੂੰ ਵੱਖ-ਵੱਖ ਕੰਟਰੋਲਸ ਨੂੰ ਯੋਗ ਕਰਕੇ ਸੰਭਾਲ ਸਕਦੇ ਹੋ ਜੋ ਮੈਪ ਨੂੰ ਪਿੰਚ, ਡਰੈਗ, ਅਤੇ ਕਲਿ ✅ ਐਜ਼ਰ ਮੈਪਸ ਸਟੈਂਡਰਡ GeoJSON ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ਅਤੇ ਕੁਝ [ਵਧੇਰੇ ਫੀਚਰਾਂ](https://docs.microsoft.com/azure/azure-maps/extend-geojson?WT.mc_id=academic-17441-jabenn) ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਰਕਲ ਅਤੇ ਹੋਰ ਜਿਓਮੈਟਰੀਆਂ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ। ## GeoJSON ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੈਪ 'ਤੇ GPS ਡਾਟਾ ਪਲਾਟ ਕਰੋ ਹੁਣ ਤੁਸੀਂ ਪਿਛਲੇ ਪਾਠ ਵਿੱਚ ਬਣਾਈ ਗਈ ਸਟੋਰੇਜ ਤੋਂ ਡਾਟਾ ਵਰਤਣ ਲਈ ਤਿਆਰ ਹੋ। ਯਾਦ ਦਿਵਾਉਣ ਲਈ, ਇਹ blob ਸਟੋਰੇਜ ਵਿੱਚ ਕਈ ਫਾਈਲਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਫਾਈਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਅਤੇ ਪਾਰਸ ਕਰਨਾ ਪਵੇਗਾ ਤਾਂ ਜੋ ਐਜ਼ਰ ਮੈਪਸ ਇਸ ਡਾਟੇ ਨੂੰ ਵਰਤ ਸਕੇ। ### ਟਾਸਕ - ਸਟੋਰੇਜ ਨੂੰ ਵੈੱਬ ਪੇਜ ਤੋਂ ਐਕਸੈਸ ਕਰਨ ਲਈ ਕਨਫਿਗਰ ਕਰੋ ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਸਟੋਰੇਜ ਤੋਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਗਲਤੀਆਂ ਵੇਖਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਨੂੰ ਇਸ ਸਟੋਰੇਜ 'ਤੇ [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(); } ``` ਇਹ ਫੰਕਸ਼ਨ ਫੈਚ ਰੂਟੀਨ ਦੁਆਰਾ ਕਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ 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) ## ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ ਐਜ਼ਰ ਮੈਪਸ ਖਾਸ ਤੌਰ 'ਤੇ IoT ਡਿਵਾਈਸਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ। * [ਐਜ਼ਰ ਮੈਪਸ ਡੌਕਯੂਮੈਂਟੇਸ਼ਨ](https://docs.microsoft.com/azure/azure-maps/tutorial-iot-hub-maps?WT.mc_id=academic-17441-jabenn) ਵਿੱਚ ਕੁਝ ਵਰਤੋਂ ਦੇ ਕੇਸਾਂ ਬਾਰੇ ਖੋਜ ਕਰੋ। * [ਐਜ਼ਰ ਮੈਪਸ ਸੈਲਫ-ਗਾਈਡਡ ਲਰਨਿੰਗ ਮੋਡੀਊਲ](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) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।