Dunia transportasi memiliki hubungan yang sangat erat dengan per-Peta-an yang dalam istilah kerennya disebut ilmu Geographic Information System. Penilaian dari sebuah lalu lintas apakah padat, lengang, macet, bahkan laporan bulananya akan menjadi lebih mudah dimengerti melalui laporan visual. Seperti orang bijak bilang "A picture is worth a thousand words" apalagi kalau "words" atau kata-kata yang ingin disampaikan berupa data-data numerik. Alasan inilah yang melatarbelakangi saya berbagi ilmu bagaimana menyusun sebuah laporan traffic dalam sebuah peta yang interactive.
Masih teringat jelas 5 tahun lalu saya sempat bermain perangkat GPS yang saya bawa keliling perumahan untuk mencoba mengambil data suhu dan kelembaban (baca disini), dan dimasa pandemi itu saya mendapatkan dasar-dasar penggabungan data numerik ke dalam sebuah peta yang saat itu saya gunakan adalah google maps. Begitu juga perkenalan saya dengan python dan geopy yang merupakan package berbasis OSM ( open street map). Jadi topik pertama di awal sesi berbagi ilmu koding GIS di D4 transportasi fakultas vokasi unesa, saya perkenalan OSM dan bagaimana membuat simulasi perjalanan berbasis GPS-MQTT yang kemudian ditampilkan langsung di web browser.
OSM ini merupakan platform per-petaan yang berbasis open source, sehingga dapat digunakan secara bebas (tentunya dengan volume penggunaan yang wajar) untuk berbagai aplikasi perpetaan. Simulasi yang saya rancang akan membaca urutan titik-titik koordinat yang saya susun dan kemudian secara satu-persatu dikirimkan melalui protokol MQTT ( kalau belum paham dasar mqtt bisa baca disini). Broker yang saya gunakan adalah hivemq.com yang kini sudah tidak full gratis lagi jika tidak mendaftar akun. Jadi jika kalian ingin mencobanya maka butuh mendaftar akun dan mendapatkan alamat broker private cloud yang lebih cepat dari sekedar broker.hivemq.com.
Koding simulator python Mqtt seperti ini :
Untuk bisa menampilkan pada web browser maka dibutuhkan MQTT dengan websocket dan hivemq menggunakan port 8884 untuk pub dan sub data. Sedangkan file urutan titik-titik perjalanan digunakan sebuah file yang pada contoh diatas bernama gps_1.txt. Sedangkan isi dari file ini adalah json sebagai berikut :
[
{
"latitude": -7.23177,
"longitude": 112.72837
},
{
"latitude": -7.23173,
"longitude": 112.72839
},
{
"latitude": -7.23141,
"longitude": 112.72854
},
{
"latitude": -7.23106,
"longitude": 112.72874
},
{
"latitude": -7.23064,
"longitude": 112.72896
},
{
"latitude": -7.22985,
"longitude": 112.72941
},
{
"latitude": -7.22955,
"longitude": 112.72953
},
{
"latitude": -7.22906,
"longitude": 112.72977
},
{
"latitude": -7.229,
"longitude": 112.7298
},
{
"latitude": -7.2271,
"longitude": 112.73066
},
{
"latitude": -7.22666,
"longitude": 112.73086
},
{
"latitude": -7.22613,
"longitude": 112.73111
},
{
"latitude": -7.22598,
"longitude": 112.73118
},
{
"latitude": -7.2251,
"longitude": 112.7316
},
{
"latitude": -7.22491,
"longitude": 112.73165
},
{
"latitude": -7.22449,
"longitude": 112.73179
},
{
"latitude": -7.2244,
"longitude": 112.73182
},
{
"latitude": -7.22413,
"longitude": 112.73189
},
{
"latitude": -7.22356,
"longitude": 112.73199
},
{
"latitude": -7.223,
"longitude": 112.73208
},
{
"latitude": -7.22284,
"longitude": 112.73205
},
{
"latitude": -7.22266,
"longitude": 112.73193
},
{
"latitude": -7.2226,
"longitude": 112.73187
},
{
"latitude": -7.22241,
"longitude": 112.73167
},
{
"latitude": -7.22213,
"longitude": 112.73142
},
{
"latitude": -7.2214,
"longitude": 112.73103
},
{
"latitude": -7.22101,
"longitude": 112.73084
},
{
"latitude": -7.22074,
"longitude": 112.7307
},
{
"latitude": -7.22038,
"longitude": 112.73051
},
{
"latitude": -7.22029,
"longitude": 112.73046
},
{
"latitude": -7.22023,
"longitude": 112.7304
},
{
"latitude": -7.22009,
"longitude": 112.73021
},
{
"latitude": -7.22008,
"longitude": 112.73019
},
{
"latitude": -7.21994,
"longitude": 112.72989
},
{
"latitude": -7.21989,
"longitude": 112.72975
},
{
"latitude": -7.21982,
"longitude": 112.72943
},
{
"latitude": -7.21984,
"longitude": 112.72922
},
{
"latitude": -7.21996,
"longitude": 112.72871
},
{
"latitude": -7.22024,
"longitude": 112.728
},
{
"latitude": -7.22034,
"longitude": 112.72766
},
{
"latitude": -7.22043,
"longitude": 112.72727
},
{
"latitude": -7.22047,
"longitude": 112.72693
},
{
"latitude": -7.22049,
"longitude": 112.72673
},
{
"latitude": -7.22054,
"longitude": 112.72555
},
{
"latitude": -7.22061,
"longitude": 112.7248
},
{
"latitude": -7.22069,
"longitude": 112.72444
},
{
"latitude": -7.22088,
"longitude": 112.72395
},
{
"latitude": -7.22107,
"longitude": 112.7236
},
{
"latitude": -7.22126,
"longitude": 112.72335
},
{
"latitude": -7.22153,
"longitude": 112.72308
},
{
"latitude": -7.22185,
"longitude": 112.72285
},
{
"latitude": -7.22226,
"longitude": 112.72264
},
{
"latitude": -7.22265,
"longitude": 112.7225
},
{
"latitude": -7.22282,
"longitude": 112.72246
},
{
"latitude": -7.22292,
"longitude": 112.72246
},
{
"latitude": -7.22314,
"longitude": 112.72252
},
{
"latitude": -7.22331,
"longitude": 112.72259
},
{
"latitude": -7.22337,
"longitude": 112.72264
},
{
"latitude": -7.22348,
"longitude": 112.72269
},
{
"latitude": -7.2236,
"longitude": 112.72271
},
{
"latitude": -7.22368,
"longitude": 112.72271
},
{
"latitude": -7.22376,
"longitude": 112.72271
},
{
"latitude": -7.22393,
"longitude": 112.72269
},
{
"latitude": -7.22404,
"longitude": 112.72266
},
{
"latitude": -7.22415,
"longitude": 112.72261
},
{
"latitude": -7.22423,
"longitude": 112.72254
},
{
"latitude": -7.22425,
"longitude": 112.72252
},
{
"latitude": -7.2244,
"longitude": 112.72235
},
{
"latitude": -7.22453,
"longitude": 112.72223
},
{
"latitude": -7.22471,
"longitude": 112.72211
},
{
"latitude": -7.22486,
"longitude": 112.72205
},
{
"latitude": -7.22533,
"longitude": 112.72196
},
{
"latitude": -7.2261,
"longitude": 112.72181
},
{
"latitude": -7.22696,
"longitude": 112.72164
},
{
"latitude": -7.2273,
"longitude": 112.72155
},
{
"latitude": -7.22813,
"longitude": 112.72135
},
{
"latitude": -7.22875,
"longitude": 112.72118
},
{
"latitude": -7.22881,
"longitude": 112.72117
},
{
"latitude": -7.22884,
"longitude": 112.72116
},
{
"latitude": -7.229,
"longitude": 112.7211
},
{
"latitude": -7.22949,
"longitude": 112.72093
},
{
"latitude": -7.23014,
"longitude": 112.72065
},
{
"latitude": -7.2307,
"longitude": 112.72038
},
{
"latitude": -7.2315,
"longitude": 112.71988
},
{
"latitude": -7.23173,
"longitude": 112.71973
},
{
"latitude": -7.23199,
"longitude": 112.71955
},
{
"latitude": -7.23204,
"longitude": 112.71951
},
{
"latitude": -7.23219,
"longitude": 112.7194
},
{
"latitude": -7.23233,
"longitude": 112.71929
},
{
"latitude": -7.23601,
"longitude": 112.71656
},
{
"latitude": -7.23617,
"longitude": 112.71644
},
{
"latitude": -7.23633,
"longitude": 112.71633
},
{
"latitude": -7.23707,
"longitude": 112.71577
},
{
"latitude": -7.23774,
"longitude": 112.71526
},
{
"latitude": -7.23778,
"longitude": 112.71523
},
{
"latitude": -7.23842,
"longitude": 112.71474
},
{
"latitude": -7.23862,
"longitude": 112.71459
},
{
"latitude": -7.2389,
"longitude": 112.71438
},
{
"latitude": -7.23916,
"longitude": 112.71418
},
{
"latitude": -7.23978,
"longitude": 112.71371
},
{
"latitude": -7.24009,
"longitude": 112.71348
},
{
"latitude": -7.24021,
"longitude": 112.7134
},
{
"latitude": -7.24034,
"longitude": 112.71331
},
{
"latitude": -7.24053,
"longitude": 112.71319
},
{
"latitude": -7.24072,
"longitude": 112.71306
},
{
"latitude": -7.24098,
"longitude": 112.71288
},
{
"latitude": -7.24112,
"longitude": 112.71278
},
{
"latitude": -7.24116,
"longitude": 112.71276
},
{
"latitude": -7.24138,
"longitude": 112.71258
},
{
"latitude": -7.24154,
"longitude": 112.71245
},
{
"latitude": -7.24191,
"longitude": 112.71214
},
{
"latitude": -7.24209,
"longitude": 112.71199
},
{
"latitude": -7.24226,
"longitude": 112.71186
},
{
"latitude": -7.24289,
"longitude": 112.71137
},
{
"latitude": -7.24334,
"longitude": 112.71104
},
{
"latitude": -7.24361,
"longitude": 112.71085
},
{
"latitude": -7.24367,
"longitude": 112.71081
},
{
"latitude": -7.24372,
"longitude": 112.71078
},
{
"latitude": -7.24425,
"longitude": 112.71042
},
{
"latitude": -7.24469,
"longitude": 112.71016
},
{
"latitude": -7.24519,
"longitude": 112.70993
},
{
"latitude": -7.24532,
"longitude": 112.70986
},
{
"latitude": -7.24556,
"longitude": 112.70977
},
{
"latitude": -7.2459,
"longitude": 112.70961
},
{
"latitude": -7.24601,
"longitude": 112.70958
},
{
"latitude": -7.24615,
"longitude": 112.70958
},
{
"latitude": -7.24643,
"longitude": 112.70948
},
{
"latitude": -7.24684,
"longitude": 112.7094
},
{
"latitude": -7.24706,
"longitude": 112.70937
},
{
"latitude": -7.24733,
"longitude": 112.70932
},
{
"latitude": -7.24802,
"longitude": 112.70928
},
{
"latitude": -7.24847,
"longitude": 112.70927
},
{
"latitude": -7.24906,
"longitude": 112.70926
},
{
"latitude": -7.24991,
"longitude": 112.70926
},
{
"latitude": -7.25059,
"longitude": 112.70928
},
{
"latitude": -7.25067,
"longitude": 112.70927
},
{
"latitude": -7.25072,
"longitude": 112.70927
},
{
"latitude": -7.25092,
"longitude": 112.70928
},
{
"latitude": -7.25098,
"longitude": 112.70928
},
{
"latitude": -7.25199,
"longitude": 112.70928
},
{
"latitude": -7.2523,
"longitude": 112.70929
},
{
"latitude": -7.253,
"longitude": 112.70931
},
{
"latitude": -7.25341,
"longitude": 112.70931
},
{
"latitude": -7.25348,
"longitude": 112.70931
},
{
"latitude": -7.2541,
"longitude": 112.70933
},
{
"latitude": -7.25524,
"longitude": 112.70934
},
{
"latitude": -7.25577,
"longitude": 112.70936
},
{
"latitude": -7.25597,
"longitude": 112.70937
},
{
"latitude": -7.2565,
"longitude": 112.70938
},
{
"latitude": -7.25732,
"longitude": 112.70941
},
{
"latitude": -7.25799,
"longitude": 112.70939
},
{
"latitude": -7.25864,
"longitude": 112.70939
},
{
"latitude": -7.25901,
"longitude": 112.70941
},
{
"latitude": -7.25961,
"longitude": 112.70943
},
{
"latitude": -7.2599,
"longitude": 112.70944
},
{
"latitude": -7.25998,
"longitude": 112.70945
},
{
"latitude": -7.26115,
"longitude": 112.70946
},
{
"latitude": -7.2617,
"longitude": 112.70945
},
{
"latitude": -7.26272,
"longitude": 112.70943
},
{
"latitude": -7.26526,
"longitude": 112.70929
},
{
"latitude": -7.26607,
"longitude": 112.70924
},
{
"latitude": -7.26738,
"longitude": 112.70915
},
{
"latitude": -7.26747,
"longitude": 112.70913
},
{
"latitude": -7.26763,
"longitude": 112.70912
},
{
"latitude": -7.26779,
"longitude": 112.70911
},
{
"latitude": -7.26907,
"longitude": 112.70903
},
{
"latitude": -7.26947,
"longitude": 112.709
},
{
"latitude": -7.26963,
"longitude": 112.70899
},
{
"latitude": -7.27295,
"longitude": 112.70878
},
{
"latitude": -7.27298,
"longitude": 112.70877
},
{
"latitude": -7.27468,
"longitude": 112.70865
},
{
"latitude": -7.27573,
"longitude": 112.70858
},
{
"latitude": -7.27726,
"longitude": 112.70848
},
{
"latitude": -7.27979,
"longitude": 112.7083
},
{
"latitude": -7.27996,
"longitude": 112.70828
},
{
"latitude": -7.28079,
"longitude": 112.70813
},
{
"latitude": -7.28131,
"longitude": 112.70802
},
{
"latitude": -7.28207,
"longitude": 112.70783
},
{
"latitude": -7.28241,
"longitude": 112.70772
},
{
"latitude": -7.28311,
"longitude": 112.70742
},
{
"latitude": -7.28348,
"longitude": 112.70725
},
{
"latitude": -7.28361,
"longitude": 112.70718
},
{
"latitude": -7.28404,
"longitude": 112.70693
},
{
"latitude": -7.28449,
"longitude": 112.70661
},
{
"latitude": -7.28498,
"longitude": 112.70619
},
{
"latitude": -7.28524,
"longitude": 112.70595
},
{
"latitude": -7.28556,
"longitude": 112.70563
},
{
"latitude": -7.28601,
"longitude": 112.70509
},
{
"latitude": -7.28604,
"longitude": 112.70506
},
{
"latitude": -7.28607,
"longitude": 112.70502
},
{
"latitude": -7.28653,
"longitude": 112.70437
},
{
"latitude": -7.2871,
"longitude": 112.70352
},
{
"latitude": -7.28719,
"longitude": 112.70338
},
{
"latitude": -7.28824,
"longitude": 112.70181
},
{
"latitude": -7.28888,
"longitude": 112.70088
},
{
"latitude": -7.2891,
"longitude": 112.70058
},
{
"latitude": -7.28943,
"longitude": 112.70012
},
{
"latitude": -7.2899,
"longitude": 112.69963
},
{
"latitude": -7.29003,
"longitude": 112.69951
},
{
"latitude": -7.29006,
"longitude": 112.69948
},
{
"latitude": -7.29012,
"longitude": 112.69943
},
{
"latitude": -7.29032,
"longitude": 112.69927
},
{
"latitude": -7.29098,
"longitude": 112.6988
},
{
"latitude": -7.29126,
"longitude": 112.69864
},
{
"latitude": -7.29137,
"longitude": 112.69859
},
{
"latitude": -7.29171,
"longitude": 112.69846
},
{
"latitude": -7.2922,
"longitude": 112.69828
},
{
"latitude": -7.2923,
"longitude": 112.69824
},
{
"latitude": -7.29272,
"longitude": 112.69815
},
{
"latitude": -7.29317,
"longitude": 112.69808
},
{
"latitude": -7.29409,
"longitude": 112.69801
},
{
"latitude": -7.29492,
"longitude": 112.69801
},
{
"latitude": -7.29517,
"longitude": 112.69801
},
{
"latitude": -7.29849,
"longitude": 112.6983
},
{
"latitude": -7.30103,
"longitude": 112.69851
},
{
"latitude": -7.30178,
"longitude": 112.69859
},
{
"latitude": -7.30245,
"longitude": 112.69867
},
{
"latitude": -7.30286,
"longitude": 112.69873
},
{
"latitude": -7.30336,
"longitude": 112.69883
},
{
"latitude": -7.30387,
"longitude": 112.69899
},
{
"latitude": -7.30433,
"longitude": 112.69918
},
{
"latitude": -7.30477,
"longitude": 112.69942
},
{
"latitude": -7.30501,
"longitude": 112.69957
},
{
"latitude": -7.30534,
"longitude": 112.69982
},
{
"latitude": -7.30568,
"longitude": 112.70012
},
{
"latitude": -7.30599,
"longitude": 112.70045
},
{
"latitude": -7.30628,
"longitude": 112.70083
},
{
"latitude": -7.30652,
"longitude": 112.70125
},
{
"latitude": -7.30674,
"longitude": 112.70169
},
{
"latitude": -7.30704,
"longitude": 112.7025
},
{
"latitude": -7.30712,
"longitude": 112.70271
},
{
"latitude": -7.30753,
"longitude": 112.70414
},
{
"latitude": -7.3079,
"longitude": 112.7056
},
{
"latitude": -7.30803,
"longitude": 112.70609
},
{
"latitude": -7.30818,
"longitude": 112.70663
},
{
"latitude": -7.30838,
"longitude": 112.70741
},
{
"latitude": -7.30848,
"longitude": 112.70776
},
{
"latitude": -7.30864,
"longitude": 112.70835
},
{
"latitude": -7.30868,
"longitude": 112.70853
},
{
"latitude": -7.30873,
"longitude": 112.7087
},
{
"latitude": -7.30883,
"longitude": 112.70909
},
{
"latitude": -7.30896,
"longitude": 112.7095
},
{
"latitude": -7.30915,
"longitude": 112.7101
},
{
"latitude": -7.30937,
"longitude": 112.71065
},
{
"latitude": -7.30947,
"longitude": 112.71087
},
{
"latitude": -7.30952,
"longitude": 112.71097
},
{
"latitude": -7.30963,
"longitude": 112.71118
},
{
"latitude": -7.30966,
"longitude": 112.71126
},
{
"latitude": -7.30969,
"longitude": 112.71131
},
{
"latitude": -7.30975,
"longitude": 112.71142
},
{
"latitude": -7.30994,
"longitude": 112.71176
},
{
"latitude": -7.31003,
"longitude": 112.71193
},
{
"latitude": -7.31011,
"longitude": 112.71206
},
{
"latitude": -7.31034,
"longitude": 112.71241
},
{
"latitude": -7.31054,
"longitude": 112.71266
},
{
"latitude": -7.31058,
"longitude": 112.71272
},
{
"latitude": -7.31061,
"longitude": 112.71275
},
{
"latitude": -7.31084,
"longitude": 112.71305
},
{
"latitude": -7.31135,
"longitude": 112.71358
},
{
"latitude": -7.31172,
"longitude": 112.71392
},
{
"latitude": -7.31211,
"longitude": 112.71424
},
{
"latitude": -7.31221,
"longitude": 112.71432
},
{
"latitude": -7.31264,
"longitude": 112.71471
},
{
"latitude": -7.31317,
"longitude": 112.71516
},
{
"latitude": -7.31399,
"longitude": 112.71582
},
{
"latitude": -7.31421,
"longitude": 112.71598
},
{
"latitude": -7.31472,
"longitude": 112.71631
},
{
"latitude": -7.31513,
"longitude": 112.71656
},
{
"latitude": -7.31541,
"longitude": 112.71671
},
{
"latitude": -7.31603,
"longitude": 112.71695
},
{
"latitude": -7.31626,
"longitude": 112.71702
},
{
"latitude": -7.3164,
"longitude": 112.71706
},
{
"latitude": -7.31643,
"longitude": 112.71707
},
{
"latitude": -7.31689,
"longitude": 112.71719
},
{
"latitude": -7.31695,
"longitude": 112.7172
},
{
"latitude": -7.31704,
"longitude": 112.71721
},
{
"latitude": -7.31735,
"longitude": 112.71723
},
{
"latitude": -7.31773,
"longitude": 112.71723
},
{
"latitude": -7.31791,
"longitude": 112.71721
},
{
"latitude": -7.31847,
"longitude": 112.71718
},
{
"latitude": -7.31895,
"longitude": 112.71711
},
{
"latitude": -7.3206,
"longitude": 112.7168
},
{
"latitude": -7.32241,
"longitude": 112.71635
},
{
"latitude": -7.32288,
"longitude": 112.71625
},
{
"latitude": -7.32396,
"longitude": 112.716
},
{
"latitude": -7.32401,
"longitude": 112.71599
},
{
"latitude": -7.32455,
"longitude": 112.71587
},
{
"latitude": -7.32737,
"longitude": 112.71526
},
{
"latitude": -7.32763,
"longitude": 112.71521
},
{
"latitude": -7.3282,
"longitude": 112.7151
},
{
"latitude": -7.32828,
"longitude": 112.71509
},
{
"latitude": -7.32842,
"longitude": 112.71506
},
{
"latitude": -7.32879,
"longitude": 112.715
},
{
"latitude": -7.32922,
"longitude": 112.71493
},
{
"latitude": -7.33055,
"longitude": 112.71472
},
{
"latitude": -7.33163,
"longitude": 112.71455
},
{
"latitude": -7.33167,
"longitude": 112.71454
},
{
"latitude": -7.33275,
"longitude": 112.71437
},
{
"latitude": -7.33318,
"longitude": 112.71432
},
{
"latitude": -7.33367,
"longitude": 112.71425
},
{
"latitude": -7.33388,
"longitude": 112.71422
},
{
"latitude": -7.33533,
"longitude": 112.71399
},
{
"latitude": -7.33631,
"longitude": 112.71381
},
{
"latitude": -7.33792,
"longitude": 112.71343
},
{
"latitude": -7.33887,
"longitude": 112.71318
},
{
"latitude": -7.33899,
"longitude": 112.71314
},
{
"latitude": -7.3393,
"longitude": 112.71316
},
{
"latitude": -7.33991,
"longitude": 112.71305
},
{
"latitude": -7.34065,
"longitude": 112.71287
},
{
"latitude": -7.34087,
"longitude": 112.7128
},
{
"latitude": -7.3411,
"longitude": 112.71273
},
{
"latitude": -7.3413,
"longitude": 112.71267
},
{
"latitude": -7.34171,
"longitude": 112.71252
},
{
"latitude": -7.34196,
"longitude": 112.71245
},
{
"latitude": -7.34205,
"longitude": 112.71244
},
{
"latitude": -7.34221,
"longitude": 112.71242
},
{
"latitude": -7.34236,
"longitude": 112.71243
},
{
"latitude": -7.34248,
"longitude": 112.71246
},
{
"latitude": -7.34259,
"longitude": 112.7125
},
{
"latitude": -7.34268,
"longitude": 112.71255
},
{
"latitude": -7.34289,
"longitude": 112.71268
},
{
"latitude": -7.34324,
"longitude": 112.71295
},
{
"latitude": -7.34334,
"longitude": 112.71301
},
{
"latitude": -7.34356,
"longitude": 112.71313
},
{
"latitude": -7.34392,
"longitude": 112.71327
},
{
"latitude": -7.34414,
"longitude": 112.71337
},
{
"latitude": -7.3443,
"longitude": 112.71349
},
{
"latitude": -7.34441,
"longitude": 112.7136
},
{
"latitude": -7.34452,
"longitude": 112.7138
},
{
"latitude": -7.34474,
"longitude": 112.7143
},
{
"latitude": -7.34486,
"longitude": 112.71456
},
{
"latitude": -7.34489,
"longitude": 112.7146
},
{
"latitude": -7.34496,
"longitude": 112.71463
},
{
"latitude": -7.34521,
"longitude": 112.7152
},
{
"latitude": -7.34539,
"longitude": 112.71556
},
{
"latitude": -7.34572,
"longitude": 112.71632
},
{
"latitude": -7.34581,
"longitude": 112.71655
},
{
"latitude": -7.34591,
"longitude": 112.71679
},
{
"latitude": -7.34604,
"longitude": 112.71716
},
{
"latitude": -7.34623,
"longitude": 112.71778
},
{
"latitude": -7.34625,
"longitude": 112.71788
},
{
"latitude": -7.34629,
"longitude": 112.71802
},
{
"latitude": -7.34629,
"longitude": 112.71807
},
{
"latitude": -7.34632,
"longitude": 112.71822
},
{
"latitude": -7.34634,
"longitude": 112.71833
},
{
"latitude": -7.34637,
"longitude": 112.7186
},
{
"latitude": -7.34641,
"longitude": 112.71895
},
{
"latitude": -7.34643,
"longitude": 112.71916
},
{
"latitude": -7.34643,
"longitude": 112.71958
},
{
"latitude": -7.34641,
"longitude": 112.71973
},
{
"latitude": -7.34639,
"longitude": 112.72004
},
{
"latitude": -7.34635,
"longitude": 112.72031
},
{
"latitude": -7.34621,
"longitude": 112.72101
},
{
"latitude": -7.34616,
"longitude": 112.7213
},
{
"latitude": -7.34615,
"longitude": 112.72159
},
{
"latitude": -7.34617,
"longitude": 112.72188
},
{
"latitude": -7.34622,
"longitude": 112.7222
},
{
"latitude": -7.34644,
"longitude": 112.72302
},
{
"latitude": -7.34648,
"longitude": 112.7232
},
{
"latitude": -7.34662,
"longitude": 112.72371
},
{
"latitude": -7.34669,
"longitude": 112.72418
},
{
"latitude": -7.34673,
"longitude": 112.72448
},
{
"latitude": -7.34676,
"longitude": 112.72468
},
{
"latitude": -7.34677,
"longitude": 112.72501
},
{
"latitude": -7.34679,
"longitude": 112.72531
},
{
"latitude": -7.34676,
"longitude": 112.72565
},
{
"latitude": -7.34674,
"longitude": 112.72614
},
{
"latitude": -7.34677,
"longitude": 112.72665
},
{
"latitude": -7.34678,
"longitude": 112.7273
},
{
"latitude": -7.34678,
"longitude": 112.7275
},
{
"latitude": -7.34677,
"longitude": 112.72867
},
{
"latitude": -7.34678,
"longitude": 112.72922
},
{
"latitude": -7.34678,
"longitude": 112.72928
},
{
"latitude": -7.34677,
"longitude": 112.7294
},
{
"latitude": -7.34678,
"longitude": 112.72959
},
{
"latitude": -7.34678,
"longitude": 112.73047
},
{
"latitude": -7.34677,
"longitude": 112.73066
},
{
"latitude": -7.34674,
"longitude": 112.73104
},
{
"latitude": -7.34668,
"longitude": 112.73137
},
{
"latitude": -7.34662,
"longitude": 112.73159
},
{
"latitude": -7.34655,
"longitude": 112.73178
},
{
"latitude": -7.34646,
"longitude": 112.73201
},
{
"latitude": -7.34639,
"longitude": 112.73213
},
{
"latitude": -7.3462,
"longitude": 112.73247
},
{
"latitude": -7.34601,
"longitude": 112.73277
},
{
"latitude": -7.34526,
"longitude": 112.73381
},
{
"latitude": -7.34501,
"longitude": 112.73417
},
{
"latitude": -7.34483,
"longitude": 112.73444
},
{
"latitude": -7.34475,
"longitude": 112.73457
},
{
"latitude": -7.3447,
"longitude": 112.73467
},
{
"latitude": -7.34467,
"longitude": 112.73476
},
{
"latitude": -7.3446,
"longitude": 112.73493
},
{
"latitude": -7.34457,
"longitude": 112.73507
},
{
"latitude": -7.34455,
"longitude": 112.73534
},
{
"latitude": -7.34456,
"longitude": 112.73569
},
{
"latitude": -7.34459,
"longitude": 112.73611
},
{
"latitude": -7.3446,
"longitude": 112.73618
},
{
"latitude": -7.34461,
"longitude": 112.73627
},
{
"latitude": -7.34463,
"longitude": 112.73642
},
{
"latitude": -7.34467,
"longitude": 112.73673
},
{
"latitude": -7.34477,
"longitude": 112.73739
},
{
"latitude": -7.34479,
"longitude": 112.73753
},
{
"latitude": -7.34482,
"longitude": 112.7377
},
{
"latitude": -7.34484,
"longitude": 112.7378
},
{
"latitude": -7.34489,
"longitude": 112.73824
},
{
"latitude": -7.34489,
"longitude": 112.73856
},
{
"latitude": -7.34489,
"longitude": 112.73876
},
{
"latitude": -7.34488,
"longitude": 112.73887
},
{
"latitude": -7.34485,
"longitude": 112.73911
},
{
"latitude": -7.34479,
"longitude": 112.73936
},
{
"latitude": -7.3446,
"longitude": 112.74005
},
{
"latitude": -7.3445,
"longitude": 112.74038
},
{
"latitude": -7.34418,
"longitude": 112.74152
},
{
"latitude": -7.34413,
"longitude": 112.7417
},
{
"latitude": -7.34402,
"longitude": 112.74207
},
{
"latitude": -7.34397,
"longitude": 112.74225
},
{
"latitude": -7.34382,
"longitude": 112.74276
},
{
"latitude": -7.34367,
"longitude": 112.74327
},
{
"latitude": -7.34348,
"longitude": 112.74387
},
{
"latitude": -7.34337,
"longitude": 112.74428
},
{
"latitude": -7.34319,
"longitude": 112.74494
},
{
"latitude": -7.34305,
"longitude": 112.74552
},
{
"latitude": -7.34293,
"longitude": 112.7461
},
{
"latitude": -7.34289,
"longitude": 112.74633
},
{
"latitude": -7.34267,
"longitude": 112.74784
},
{
"latitude": -7.34261,
"longitude": 112.74846
},
{
"latitude": -7.34255,
"longitude": 112.74916
},
{
"latitude": -7.34254,
"longitude": 112.7495
},
{
"latitude": -7.34256,
"longitude": 112.74994
},
{
"latitude": -7.34261,
"longitude": 112.75057
},
{
"latitude": -7.34265,
"longitude": 112.75097
},
{
"latitude": -7.3427,
"longitude": 112.75133
},
{
"latitude": -7.34279,
"longitude": 112.75186
},
{
"latitude": -7.34296,
"longitude": 112.75298
},
{
"latitude": -7.34305,
"longitude": 112.75361
},
{
"latitude": -7.3432,
"longitude": 112.75458
},
{
"latitude": -7.34323,
"longitude": 112.7548
},
{
"latitude": -7.3433,
"longitude": 112.7555
},
{
"latitude": -7.34331,
"longitude": 112.7557
},
{
"latitude": -7.34329,
"longitude": 112.75597
},
{
"latitude": -7.34327,
"longitude": 112.75621
},
{
"latitude": -7.34313,
"longitude": 112.75684
},
{
"latitude": -7.34284,
"longitude": 112.75814
},
{
"latitude": -7.34279,
"longitude": 112.75872
},
{
"latitude": -7.34276,
"longitude": 112.75907
},
{
"latitude": -7.34277,
"longitude": 112.75936
},
{
"latitude": -7.34281,
"longitude": 112.75959
},
{
"latitude": -7.34291,
"longitude": 112.76015
},
{
"latitude": -7.34299,
"longitude": 112.76047
},
{
"latitude": -7.34318,
"longitude": 112.7613
},
{
"latitude": -7.3432,
"longitude": 112.76146
},
{
"latitude": -7.34324,
"longitude": 112.7617
},
{
"latitude": -7.34325,
"longitude": 112.76185
},
{
"latitude": -7.34323,
"longitude": 112.76223
},
{
"latitude": -7.34318,
"longitude": 112.76248
},
{
"latitude": -7.34311,
"longitude": 112.76274
},
{
"latitude": -7.34297,
"longitude": 112.76307
},
{
"latitude": -7.34262,
"longitude": 112.76367
},
{
"latitude": -7.34247,
"longitude": 112.76393
},
{
"latitude": -7.34241,
"longitude": 112.76411
},
{
"latitude": -7.34234,
"longitude": 112.76432
},
{
"latitude": -7.34227,
"longitude": 112.76456
},
{
"latitude": -7.34223,
"longitude": 112.76475
},
{
"latitude": -7.34223,
"longitude": 112.76477
},
{
"latitude": -7.34221,
"longitude": 112.76494
},
{
"latitude": -7.3422,
"longitude": 112.76508
},
{
"latitude": -7.34221,
"longitude": 112.7654
},
{
"latitude": -7.34224,
"longitude": 112.76562
},
{
"latitude": -7.34238,
"longitude": 112.76621
},
{
"latitude": -7.34248,
"longitude": 112.76656
},
{
"latitude": -7.34273,
"longitude": 112.76755
},
{
"latitude": -7.34283,
"longitude": 112.76799
},
{
"latitude": -7.34289,
"longitude": 112.76833
},
{
"latitude": -7.34296,
"longitude": 112.76872
},
{
"latitude": -7.34298,
"longitude": 112.76882
},
{
"latitude": -7.34302,
"longitude": 112.76907
},
{
"latitude": -7.34309,
"longitude": 112.76954
},
{
"latitude": -7.34322,
"longitude": 112.7703
},
{
"latitude": -7.3435,
"longitude": 112.77199
},
{
"latitude": -7.34375,
"longitude": 112.77343
},
{
"latitude": -7.34395,
"longitude": 112.77469
},
{
"latitude": -7.34412,
"longitude": 112.77557
},
{
"latitude": -7.34421,
"longitude": 112.77612
},
{
"latitude": -7.34427,
"longitude": 112.77648
},
{
"latitude": -7.34436,
"longitude": 112.77697
},
{
"latitude": -7.34447,
"longitude": 112.77784
},
{
"latitude": -7.34454,
"longitude": 112.77819
},
{
"latitude": -7.3447,
"longitude": 112.77894
},
{
"latitude": -7.34475,
"longitude": 112.77917
},
{
"latitude": -7.34489,
"longitude": 112.77971
},
{
"latitude": -7.34493,
"longitude": 112.77983
},
{
"latitude": -7.34531,
"longitude": 112.78136
},
{
"latitude": -7.34557,
"longitude": 112.78245
},
{
"latitude": -7.34621,
"longitude": 112.78517
},
{
"latitude": -7.34632,
"longitude": 112.78564
},
{
"latitude": -7.34639,
"longitude": 112.78593
},
{
"latitude": -7.34651,
"longitude": 112.7864
},
{
"latitude": -7.34696,
"longitude": 112.78834
},
{
"latitude": -7.34726,
"longitude": 112.78961
},
{
"latitude": -7.34752,
"longitude": 112.79086
},
{
"latitude": -7.34767,
"longitude": 112.79177
},
{
"latitude": -7.34776,
"longitude": 112.79214
},
{
"latitude": -7.34787,
"longitude": 112.79266
},
{
"latitude": -7.34799,
"longitude": 112.79321
},
{
"latitude": -7.34817,
"longitude": 112.79419
},
{
"latitude": -7.34859,
"longitude": 112.7963
},
{
"latitude": -7.34901,
"longitude": 112.79845
},
{
"latitude": -7.34952,
"longitude": 112.80108
},
{
"latitude": -7.34959,
"longitude": 112.80138
},
{
"latitude": -7.34969,
"longitude": 112.80171
},
{
"latitude": -7.34983,
"longitude": 112.80203
},
{
"latitude": -7.34989,
"longitude": 112.80214
},
{
"latitude": -7.35001,
"longitude": 112.80235
},
{
"latitude": -7.3501,
"longitude": 112.80247
},
{
"latitude": -7.35025,
"longitude": 112.80264
},
{
"latitude": -7.35055,
"longitude": 112.80292
},
{
"latitude": -7.35087,
"longitude": 112.80315
},
{
"latitude": -7.35118,
"longitude": 112.80331
},
{
"latitude": -7.35171,
"longitude": 112.80349
},
{
"latitude": -7.3521,
"longitude": 112.80357
},
{
"latitude": -7.35377,
"longitude": 112.80386
},
{
"latitude": -7.35523,
"longitude": 112.80412
},
{
"latitude": -7.35574,
"longitude": 112.80423
},
{
"latitude": -7.35606,
"longitude": 112.80433
},
{
"latitude": -7.35655,
"longitude": 112.80452
},
{
"latitude": -7.3567,
"longitude": 112.8046
},
{
"latitude": -7.35719,
"longitude": 112.80488
},
{
"latitude": -7.35876,
"longitude": 112.80593
},
{
"latitude": -7.35916,
"longitude": 112.80616
},
{
"latitude": -7.35946,
"longitude": 112.80629
},
{
"latitude": -7.35972,
"longitude": 112.8064
},
{
"latitude": -7.36011,
"longitude": 112.8065
},
{
"latitude": -7.36035,
"longitude": 112.80655
},
{
"latitude": -7.36038,
"longitude": 112.80655
},
{
"latitude": -7.36055,
"longitude": 112.80657
},
{
"latitude": -7.36082,
"longitude": 112.80659
},
{
"latitude": -7.36084,
"longitude": 112.80659
},
{
"latitude": -7.36103,
"longitude": 112.80658
},
{
"latitude": -7.36131,
"longitude": 112.80656
},
{
"latitude": -7.3616,
"longitude": 112.80651
},
{
"latitude": -7.36182,
"longitude": 112.80646
},
{
"latitude": -7.36221,
"longitude": 112.80634
},
{
"latitude": -7.3623,
"longitude": 112.8063
},
{
"latitude": -7.36238,
"longitude": 112.80627
},
{
"latitude": -7.36247,
"longitude": 112.80623
},
{
"latitude": -7.36266,
"longitude": 112.80612
},
{
"latitude": -7.36301,
"longitude": 112.80591
},
{
"latitude": -7.36323,
"longitude": 112.80573
},
{
"latitude": -7.36352,
"longitude": 112.80548
},
{
"latitude": -7.36377,
"longitude": 112.80519
},
{
"latitude": -7.36398,
"longitude": 112.8049
},
{
"latitude": -7.36409,
"longitude": 112.80473
},
{
"latitude": -7.36441,
"longitude": 112.80416
},
{
"latitude": -7.36447,
"longitude": 112.80407
},
{
"latitude": -7.36461,
"longitude": 112.80378
},
{
"latitude": -7.36472,
"longitude": 112.8036
},
{
"latitude": -7.36477,
"longitude": 112.80349
},
{
"latitude": -7.36491,
"longitude": 112.80325
},
{
"latitude": -7.3651,
"longitude": 112.80297
},
{
"latitude": -7.36543,
"longitude": 112.80256
},
{
"latitude": -7.36574,
"longitude": 112.80226
},
{
"latitude": -7.36619,
"longitude": 112.80192
},
{
"latitude": -7.36641,
"longitude": 112.80178
},
{
"latitude": -7.36685,
"longitude": 112.80156
},
{
"latitude": -7.36707,
"longitude": 112.80148
},
{
"latitude": -7.3673,
"longitude": 112.80142
},
{
"latitude": -7.36783,
"longitude": 112.8013
},
{
"latitude": -7.36811,
"longitude": 112.80127
},
{
"latitude": -7.36848,
"longitude": 112.80127
},
{
"latitude": -7.36936,
"longitude": 112.8013
},
{
"latitude": -7.37032,
"longitude": 112.80133
},
{
"latitude": -7.37068,
"longitude": 112.80135
},
{
"latitude": -7.37116,
"longitude": 112.80136
},
{
"latitude": -7.37148,
"longitude": 112.80135
},
{
"latitude": -7.37163,
"longitude": 112.80132
},
{
"latitude": -7.37186,
"longitude": 112.80125
},
{
"latitude": -7.37197,
"longitude": 112.80119
},
{
"latitude": -7.37209,
"longitude": 112.80109
},
{
"latitude": -7.37218,
"longitude": 112.801
},
{
"latitude": -7.37225,
"longitude": 112.80091
},
{
"latitude": -7.37231,
"longitude": 112.80079
},
{
"latitude": -7.37238,
"longitude": 112.80062
},
{
"latitude": -7.3724,
"longitude": 112.80052
},
{
"latitude": -7.37241,
"longitude": 112.80044
},
{
"latitude": -7.3724,
"longitude": 112.80024
},
{
"latitude": -7.37237,
"longitude": 112.79998
},
{
"latitude": -7.37227,
"longitude": 112.79952
},
{
"latitude": -7.37214,
"longitude": 112.79909
},
{
"latitude": -7.37197,
"longitude": 112.79862
},
{
"latitude": -7.37192,
"longitude": 112.79848
},
{
"latitude": -7.37183,
"longitude": 112.7983
},
{
"latitude": -7.37176,
"longitude": 112.79809
},
{
"latitude": -7.37167,
"longitude": 112.79773
},
{
"latitude": -7.37164,
"longitude": 112.79763
},
{
"latitude": -7.37157,
"longitude": 112.79713
},
{
"latitude": -7.37149,
"longitude": 112.7965
},
{
"latitude": -7.37139,
"longitude": 112.79572
},
{
"latitude": -7.37137,
"longitude": 112.7956
},
{
"latitude": -7.37136,
"longitude": 112.79548
},
{
"latitude": -7.37127,
"longitude": 112.79559
},
{
"latitude": -7.3713,
"longitude": 112.79585
},
{
"latitude": -7.37133,
"longitude": 112.79609
},
{
"latitude": -7.37153,
"longitude": 112.79763
},
{
"latitude": -7.37161,
"longitude": 112.798
},
{
"latitude": -7.3718,
"longitude": 112.79852
},
{
"latitude": -7.37196,
"longitude": 112.7989
},
{
"latitude": -7.37206,
"longitude": 112.79922
},
{
"latitude": -7.37216,
"longitude": 112.79958
},
{
"latitude": -7.37224,
"longitude": 112.79997
},
{
"latitude": -7.37228,
"longitude": 112.80018
},
{
"latitude": -7.37229,
"longitude": 112.80032
},
{
"latitude": -7.37226,
"longitude": 112.80061
},
{
"latitude": -7.37223,
"longitude": 112.80071
},
{
"latitude": -7.37209,
"longitude": 112.80092
},
{
"latitude": -7.37202,
"longitude": 112.80099
},
{
"latitude": -7.37193,
"longitude": 112.80106
},
{
"latitude": -7.37176,
"longitude": 112.80115
},
{
"latitude": -7.37146,
"longitude": 112.80121
},
{
"latitude": -7.37121,
"longitude": 112.80122
},
{
"latitude": -7.3703,
"longitude": 112.80118
},
{
"latitude": -7.37014,
"longitude": 112.80116
},
{
"latitude": -7.36935,
"longitude": 112.80114
},
{
"latitude": -7.36881,
"longitude": 112.80112
},
{
"latitude": -7.36827,
"longitude": 112.80112
},
{
"latitude": -7.36796,
"longitude": 112.80113
},
{
"latitude": -7.36747,
"longitude": 112.80121
},
{
"latitude": -7.36718,
"longitude": 112.80128
},
{
"latitude": -7.36692,
"longitude": 112.80136
},
{
"latitude": -7.36655,
"longitude": 112.80153
},
{
"latitude": -7.36625,
"longitude": 112.80169
},
{
"latitude": -7.36586,
"longitude": 112.80196
},
{
"latitude": -7.36545,
"longitude": 112.8023
},
{
"latitude": -7.3652,
"longitude": 112.80259
},
{
"latitude": -7.36503,
"longitude": 112.8028
},
{
"latitude": -7.36476,
"longitude": 112.80322
},
{
"latitude": -7.36464,
"longitude": 112.80343
},
{
"latitude": -7.36459,
"longitude": 112.80351
},
{
"latitude": -7.36442,
"longitude": 112.80381
},
{
"latitude": -7.36428,
"longitude": 112.80406
},
{
"latitude": -7.36421,
"longitude": 112.80421
},
{
"latitude": -7.36381,
"longitude": 112.80487
},
{
"latitude": -7.36362,
"longitude": 112.80512
},
{
"latitude": -7.36352,
"longitude": 112.80525
},
{
"latitude": -7.36337,
"longitude": 112.80541
},
{
"latitude": -7.36314,
"longitude": 112.80561
},
{
"latitude": -7.36294,
"longitude": 112.80576
},
{
"latitude": -7.36267,
"longitude": 112.80595
},
{
"latitude": -7.36231,
"longitude": 112.80613
},
{
"latitude": -7.36223,
"longitude": 112.80616
},
{
"latitude": -7.36222,
"longitude": 112.80616
},
{
"latitude": -7.36191,
"longitude": 112.80628
},
{
"latitude": -7.36168,
"longitude": 112.80634
},
{
"latitude": -7.36148,
"longitude": 112.80638
},
{
"latitude": -7.36111,
"longitude": 112.80642
},
{
"latitude": -7.36084,
"longitude": 112.80643
},
{
"latitude": -7.36079,
"longitude": 112.80643
},
{
"latitude": -7.3604,
"longitude": 112.8064
},
{
"latitude": -7.36005,
"longitude": 112.80633
},
{
"latitude": -7.35961,
"longitude": 112.80619
},
{
"latitude": -7.35938,
"longitude": 112.8061
},
{
"latitude": -7.35916,
"longitude": 112.80599
},
{
"latitude": -7.35904,
"longitude": 112.80592
},
{
"latitude": -7.3588,
"longitude": 112.80577
},
{
"latitude": -7.35855,
"longitude": 112.80559
},
{
"latitude": -7.35804,
"longitude": 112.80521
},
{
"latitude": -7.35774,
"longitude": 112.80499
},
{
"latitude": -7.35744,
"longitude": 112.80481
},
{
"latitude": -7.35693,
"longitude": 112.80456
},
{
"latitude": -7.35619,
"longitude": 112.80422
},
{
"latitude": -7.35594,
"longitude": 112.80414
},
{
"latitude": -7.35551,
"longitude": 112.80403
},
{
"latitude": -7.35461,
"longitude": 112.80385
},
{
"latitude": -7.35382,
"longitude": 112.80371
},
{
"latitude": -7.35208,
"longitude": 112.80341
},
{
"latitude": -7.35163,
"longitude": 112.8033
},
{
"latitude": -7.35146,
"longitude": 112.80325
},
{
"latitude": -7.35117,
"longitude": 112.80313
},
{
"latitude": -7.35093,
"longitude": 112.803
},
{
"latitude": -7.35078,
"longitude": 112.8029
},
{
"latitude": -7.35045,
"longitude": 112.80263
},
{
"latitude": -7.35027,
"longitude": 112.80243
},
{
"latitude": -7.35005,
"longitude": 112.80211
},
{
"latitude": -7.3499,
"longitude": 112.8018
},
{
"latitude": -7.34977,
"longitude": 112.80142
},
{
"latitude": -7.34969,
"longitude": 112.8011
},
{
"latitude": -7.34916,
"longitude": 112.79841
},
{
"latitude": -7.34886,
"longitude": 112.79691
}
]
Hasil dari koding python diatas jika dijalankan pada google colab seperti gambar berikut ini :
Pada bagian tampilan di web browser, saya gunakan leaflet.js yang merupakan library perpetaan milik OSM yang sangat banyak digunakan, bisa dilihat beberapa aplikasi seperti bus suroboyo pun menggunakan leaflet.js untuk peta realtime pada aplikasi Bus Suroboyo. Saya akan bagikan kodingnya dan dapat disimpan langsung pada PC tanpa menggunakan server, hanya simpan sebagai file html biasa.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car GPS Tracking</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.3.7/mqtt.min.js"></script>
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Initialize the map
const map = L.map('map').setView([-7.23177, 112.72837], 15); // Initial view at the first GPS point
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Define a custom car icon
const carIcon = L.icon({
iconUrl: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh97sGns5_ZMJSFQPbC-gYR090rGj3OyacILohQ4k_v6OT_niNcR1JSRV_0ZMl2cyry85DKHnuinr8oU_Oaw8ez4Wl6capGSc0EQelQv0zYS18xmW1GGHz7eQTfwbLoLuejhwnuRvBmugL1Si1SJ_zmhMygRSODpUdrneYM6nmSb1lle6sz5riVcFAsapC/s50/car.png', // Replace with your car image URL
iconSize: [38, 38], // Size of the icon (width, height)
iconAnchor: [19, 19], // Point of the icon which corresponds to the marker's location
});
// Marker for the car
let carMarker = null;
// Array to store the trail points
const trailPoints = [];
// Polyline for the trail
const trailLine = L.polyline(trailPoints, { color: 'blue' }).addTo(map);
// MQTT Client Setup
// GANTI PAKE AKUN KAMU ..ini punya pak nyoman
const client = mqtt.connect('wss://xxxxxxxxxx.s1.eu.hivemq.cloud:8884/mqtt', {
username: 'user', // Replace with your HiveMQ Cloud username
password: 'pass', // Replace with your HiveMQ Cloud password
protocol: 'wss', // Ensure WebSocket Secure (WSS) is used
rejectUnauthorized: true // Optional: Set to false if using self-signed certificates (not recommended for production)
});
client.on('connect', () => {
console.log('Connected to MQTT broker');
client.subscribe('car/gps', (err) => {
if (!err) {
console.log('Subscribed to car/gps topic');
}
});
});
// Handle incoming GPS data
client.on('message', (topic, message) => {
const data = JSON.parse(message.toString());
const { latitude, longitude } = data;
console.log(`Received GPS data: Latitude=${latitude}, Longitude=${longitude}`);
// Add the new point to the trail
trailPoints.push([latitude, longitude]);
// Update the trail polyline
trailLine.setLatLngs(trailPoints);
// Update the car marker position
if (carMarker) {
carMarker.setLatLng([latitude, longitude]);
} else {
carMarker = L.marker([latitude, longitude], { icon: carIcon }).addTo(map);
}
// Center the map on the car's position
map.setView([latitude, longitude], 15);
});
</script>
</body>
</html>
0 komentar:
Posting Komentar