/
/
Panduan Implementasi Open Street Map di Web
Posted 4 years ago • 4317 Dibaca

Panduan Implementasi Open Street Map di Web

Semenjak Google Maps  tidak menggratiskan lagi penggunaan Maps api dan sdk terutama pada web dan production mode, Open Street Map pun mulai ramai digunakan. Bagi yang belum tahu update harga terbaru Google Maps terbaru bisa cek link berikut https://cloud.google.com/maps-platform/pricing/ .  Untuk itu Id More Academy mengajak kamu untuk menggunakan berbagai fitur - fitur di Open Street Map, karena sifatnya yang sangat terbuka dan open source, banyak cara yang bisa digunnakan untuk implementasi Open Street Map dan link ini akan sangat berguna untuk kamu yang ingin mempelajarinya https://wiki.openstreetmap.org/wiki/Frameworks , banyak referensi open library, api, raw data dan lain - lain yang bisa dipilih disana.

Sample Menggunakan Leaflet

Dari banyak pilihan library untuk rendering map dari Open Street Map disini kami pilih Leaflet, karena saat tulisan ini dibuat Leaflet menempati urutn nomor 1 paling populer.

Untuk semua langkah didalam ini saya menggunakan Codepen agar lebih praktis. Pertama silahkan download atau gunakan cdn dari Leaflet yang bisa diakses di https://leafletjs.com

Untuk download .js dan .css bisa melalui link berikut ini https://leafletjs.com/download.html . Atau kalian bisa menggunakan CDNnya sebagai berikut

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

Atau kalian juga bisa install Leaflet dari NPM dengan cara npm install leaflet.

Merender Peta

Menyiapkan Map Container

Dipostingan ini kita tidak akan membuat postingan yang sifatnya expert, yaknik cukup untuk rendering peta berdasarkan coordinat (latitude dan longitude) yang telah disiapkan, kemudian ditandai dengan sebuah marker dan jika marker itu diklik akan keluar popup message.

Setelah kamu memasang tag script dan style diatas, lanjutkan dengan membuat sebuah div kosong, dan berikan id untuk memudahkan melakukan seleksi di js, dalam kasus ini saya membuat div kosong dengan id = "#map-standard"

<div id="#map-standard"></div>

Inisialisasi Leaflet

Ada 2 inisialisasi yang dilakukan yang inisialisasi untuk map container dan osm (Open Street Map).

// map container initial
const standardMap = L.map('map-standard');

// osm initial
onst osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';

// create layer
const mapLayer = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 50, attribution: osmAttrib});		

Dari inisialisasi diatas bertujuan untuk konfigurasi dari dari peta yang akan dirender, seperti url untuk raw map dari OSM , text di footer, batasan zoom dan lain sebagainya.

Render Map

Setelah semua inisialisasi awal dirasa cukup waktunya render peta tersebut ke browser.

// set focus location on map and zoom to 17
standardMap.setView(new L.LatLng('-7.75422', '110.38534'), 17)

// render map
standardMap.addLayer(mapLayer)

Hasil akhir dari baris code diatas akan menghasilkan tampilan peta seperti pada gambar dibawah. Untuk langkah inisialisasi sampai render bisa kalian baca lebih lengkap di https://leafletjs.com/examples/quick-start/.

Menambah Marker dan PopUp

Sesuai dengan misi diatas, maka tugas kita tinggal satu yaitu menampilkan marker dan popup sesuai dengan target yang telah ditentukan. Disini kita masih menggunakan koordinat yang sama seperti fokus diatas '-7.75422', '110.38534' . Untuk pop up di Leaflet support dengan HTML, jadi kamu bisa membuat tampilannya sesuai dengan kreatifitas kamu, tapi sayangnya hanya support inline CSS.

// added marker to standard map : pointing to Id More
const standardMarker = L.marker(['-7.75422', '110.38534']).addTo(standardMap);
// added popup in the marker and open by default
standardMarker.bindPopup("<b>Disini</b><br>Id More").openPopup();

Dan berikut adalah hasil akhirnya.

Kesimpulan

Cukup gampang bukan, Leaflet bisa membuat lebih dari ini tergantung dari kreatifitas kamu.  Berikut beberapa sampel yang telah saya buat di Codepen , membuat custom marker ketika klik , multi marker dan lain sebagainya. 

Kekurangan dari Open Street Map menurut saya pribadi adalah kelengkapan datanya, tidak selengkap dengan Google Maps yang kita sudah tahu penggunannya hampir seluruh pengguna perangkat digital saat ini, serta kekurangan lain adalah tampilannyayang tidak se modern Google Maps. Tapi tidak apa-apa yang penting free.

Referensi

MauCoding © 2024 powered by YMG Team