Cara Menambahkan Marker Pada Peta dengan Leaflet JS

Republic Code – Cara Menambahkan MarkMenambahkan Marker Pada Peta dengan Leaflet JS – marke dalam sebuah peta meruakan sebuah titik. sebuah titik untuk menandakan lokasi tertentu.

karena marker ini sangat berfunsi dalam sebuah peta, maka dalam sebuah peta harus ada sebuah marker untuk menunjukkan sebuah tempat yang penting.

marker dapat bermanfaat untuk menunukkan suatu titik pemetaan wilayah, bagi kalian yang mau tau lebih mengenai manfaat GIS ini dapat membaca manfaat sistem informasi geografis

Cara Menambahkan Marker Pada Peta dengan Leaflet JS sangatlah mudah, karena telah tersedia semua dokumentasi untuk menggunakan library leaflet

untuk mendapatkan docuentation dari leafet baca juga dari halam resmi leaflet JS leafletjs.com

karena sebelumnya telah membuat sebuah peta, baca juga Membuat peta dengan library leaflet js.

Langkah Menambahkan Marker Pada Peta dengan Leaflet JS

sebagai contoh. mengambil sebuah titik terletak pada Taman Pasralama, Pelaihari, Kalimanan Selatan

dengan menggunakan google map. Dengan cara klik bagian titik yang dicari atau diinginkan.

Cara Menambahkan Marker Pada Peta dengan Leaflet JS

bagian aadress bar berisi latitude dan longitude

Cara memmbuat marker peta dengan Leaflet JS

-3.8011986, sebagai latitude dan 114.7630298 sebagai longitude.

cara menambahkan marker peta, kita akan mengambil example leaflet default, tanpa ada costum, masukkan code dalam tag <script>

([50.5, 30.5]) adalh titik koordinat. ganti dengan titik yang diinginkan.

L.marker([-3.8011986,114.7630298]).addTo(mymap);

addTo(mymap); kenapa tidak addTo(map);

karena deklerasi awal adalah sebagai variabel mymap

code lengkap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

    <title>Peta</title>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

	var mymap = L.map('mapid').setView([-3.9372941, 114.775563], 10);

	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);

    L.marker([-3.8011986,114.7630298]).addTo(mymap);

</script>



</body>
</html>

hasil

Cara Menambahkan Marker Pada Peta Leaflet JS

kesimpulannya menggunakan leaflet JS sangatlah mudah karena telah tersedia dokumenttasi pada halaman website resmi leaflet, dan juga leaflet JS Open Source atau gratis, sehingga dengan mudah devloper untuk membuat atau mengembangkan sebuah apliasi sistem informasi geografis.

kunjungi juga website resmi leafletjs https://leafletjs.com/