# مقام کے ڈیٹا کو بصری بنائیں  > خاکہ [نیتیا نرسمہن](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) دیکھیں۔ ## ڈیٹا کی بصری نمائندگی کیا ہے جیسا کہ نام سے ظاہر ہے، ڈیٹا کی بصری نمائندگی ڈیٹا کو اس طرح دکھانے کے بارے میں ہے کہ انسان اسے آسانی سے سمجھ سکیں۔ یہ عام طور پر چارٹس اور گراف سے منسلک ہوتا ہے، لیکن یہ کسی بھی طرح سے ڈیٹا کی تصویری نمائندگی ہو سکتی ہے جو انسانوں کو نہ صرف ڈیٹا کو بہتر طور پر سمجھنے میں مدد دے بلکہ فیصلے کرنے میں بھی مدد دے۔ ایک سادہ مثال لیتے ہیں - فارم پروجیکٹ میں آپ نے مٹی کی نمی کی پیمائش کی تھی۔ 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) کے ساتھ مربوط کر کے۔ آپ مختلف کنٹرولز کو فعال کر کے اپنے نقشے کے رویے اور ظاہری شکل کو کنٹرول کر سکتے ہیں تاکہ نقشہ پنچ، ڈریگ، اور کلک جیسے واقعات پر ردعمل ظاہر کرے۔ اپنے نقشے کی ظاہری شکل کو کنٹرول کرنے کے لیے، آپ ببلز، لائنز، پولیگونز، ہیٹ میپس، اور مزید شامل کرنے کے لیے لیئرز شامل کر سکتے ہیں۔ آپ کس قسم کا نقشہ نافذ کرتے ہیں یہ آپ کے منتخب کردہ 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` صفحے کو ویب براؤزر میں کھولیں، تو آپ کو ایک نقشہ لوڈ ہوتا ہوا نظر آنا چاہیے، جو سیئٹل کے علاقے پر مرکوز ہے۔  ✅ زوم اور سینٹر پیرامیٹرز کے ساتھ تجربہ کریں تاکہ اپنے نقشے کی ظاہری شکل کو تبدیل کریں۔ آپ اپنے ڈیٹا کے طول البلد اور عرض البلد کے مطابق مختلف کوآرڈینیٹس شامل کر کے نقشے کو دوبارہ مرکز کر سکتے ہیں۔ > 💁 ویب ایپس کے ساتھ مقامی طور پر کام کرنے کا ایک بہتر طریقہ [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) فارمیٹ پر نظر ڈالیں جو Azure Maps کے لیے ضروری ہے۔ [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 ڈیٹا کو نقشے پر دکھائیں اب آپ اس اسٹوریج سے ڈیٹا حاصل کرنے کے لیے تیار ہیں جو آپ نے پچھلے سبق میں بنایا تھا۔ یاد دہانی کے طور پر، یہ 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 key سے تبدیل کریں۔ یہاں کئی چیزیں ہو رہی ہیں۔ سب سے پہلے، کوڈ آپ کے blob container سے GPS ڈیٹا حاصل کرتا ہے، ایک URL endpoint کا استعمال کرتے ہوئے جو آپ کے اسٹوریج اکاؤنٹ کے نام سے بنایا گیا ہے۔ یہ URL `gps-data` سے حاصل کرتا ہے، جو ظاہر کرتا ہے کہ resource type ایک container ہے (`restype=container`)، اور تمام blobs کے بارے میں معلومات کی فہرست دیتا ہے۔ یہ فہرست خود blobs کو واپس نہیں کرے گی، لیکن ہر blob کے لیے ایک URL واپس کرے گی جسے blob ڈیٹا لوڈ کرنے کے لیے استعمال کیا جا سکتا ہے۔ > 💁 آپ اس URL کو اپنے براؤزر میں ڈال سکتے ہیں تاکہ اپنے container میں موجود تمام blobs کی تفصیلات دیکھ سکیں۔ ہر آئٹم میں ایک `Url` پراپرٹی ہوگی جسے آپ اپنے براؤزر میں بھی لوڈ کر سکتے ہیں تاکہ blob کے مواد کو دیکھ سکیں۔ یہ کوڈ پھر ہر blob کو لوڈ کرتا ہے، ایک `loadJSON` فنکشن کو کال کرتے ہوئے، جو اگلے مرحلے میں بنایا جائے گا۔ پھر یہ نقشے کا کنٹرول بناتا ہے، اور `ready` ایونٹ میں کوڈ شامل کرتا ہے۔ یہ ایونٹ اس وقت کال کیا جاتا ہے جب نقشہ ویب صفحے پر ظاہر ہوتا ہے۔ `ready` ایونٹ ایک Azure Maps ڈیٹا سورس بناتا ہے - ایک container جو GeoJSON ڈیٹا پر مشتمل ہوتا ہے جو بعد میں آباد کیا جائے گا۔ یہ ڈیٹا سورس پھر ایک bubble layer بنانے کے لیے استعمال ہوتا ہے - یعنی نقشے پر ہر 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 routine کے ذریعے JSON ڈیٹا کو پارس کرنے اور اسے longitude اور latitude coordinates کے طور پر GeoJSON میں پڑھنے کے لیے تبدیل کرنے کے لیے بلایا جاتا ہے۔ ایک بار پارس ہونے کے بعد، ڈیٹا GeoJSON `Feature` کے حصے کے طور پر سیٹ کیا جاتا ہے۔ نقشہ initialize ہو جائے گا اور چھوٹے دائرے اس راستے کے ارد گرد ظاہر ہوں گے جو آپ کا ڈیٹا پلاٹ کر رہا ہے: 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 documentation on Microsoft docs](https://docs.microsoft.com/azure/azure-maps/tutorial-iot-hub-maps?WT.mc_id=academic-17441-jabenn) میں کچھ استعمالات پر تحقیق کریں۔ * نقشہ سازی اور waypoints کے بارے میں اپنی معلومات کو [Azure Maps کے ساتھ اپنا پہلا راستہ تلاش کرنے والا ایپ بنائیں 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) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔