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 :
#jalankan ini untuk mensimulasikan pergerakan sebuah kendaraan
import json
import time
import paho.mqtt.client as mqtt
import ssl
# MQTT Broker Configuration sesuaikan dengan account hivemq kalian
MQTT_BROKER = "xxxxxxxxxxxxxxxxxxxxxxxxx.s1.eu.hivemq.cloud"
MQTT_PORT = 8884 # WebSocket Secure (WSS) port
MQTT_TOPIC = "car/gps" #topiknya sama
MQTT_USERNAME = "user_name" # Ganti dengan HiveMQ Cloud username
MQTT_PASSWORD = "password" # Gant dengan HiveMQ Cloud password
# Create MQTT client with WebSocket transport
client = mqtt.Client(transport="websockets")
client.tls_set_context(ssl.create_default_context()) #websocket TLS 8884
client.username_pw_set(MQTT_USERNAME, MQTT_PASSWORD) # Set credentials
# Connect to the broker
client.connect(MQTT_BROKER, MQTT_PORT)
print("Connected to MQTT broker")
# Load GPS data from the file GANTI FILENYA yang sesuai
with open("gps_1.txt", "r") as file:
gps_data = json.load(file)
# Simulate car movement and publish GPS data
for point in gps_data:
latitude = point["latitude"]
longitude = point["longitude"]
payload = {
"latitude": latitude,
"longitude": longitude
}
print(f"Publishing: {payload}")
client.publish(MQTT_TOPIC, json.dumps(payload))
time.sleep(0.1) # Simulate 1-second delay
# Disconnect after publishing all points
client.disconnect()
print("Disconnected from MQTT broker")
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>
Tampilan web nya seperti pada animasi paling atas halaman ini, dan untuk melihat perjalanan pengiriman titik koordinatnya melalui MQTT dapat dilihat dengan klik kanan-inspeksi-console, seperti contoh berikut :
Diagram kerja dari simulasi diatas mirp-mirip dengan yang sering kita bahas mengenai topik IOT - MQTT di blog ini dan mungkin para pembaca setia sudah hapal dengan skema dibawah ini.
Selamat Mencoba !
