Membuat Peta dan Marker dengan Leaflet
Contents
Pendahuluan
Kita mengetahu bahwa Google Maps sekarang berbayar. Mari kita coba mengerti dan jelaskan mengenai Google Maps Pricing ini.
Dalam halaman yang ada di https://cloud.google.com/maps-platform/pricing/sheet/ kita mendapatkan informasi mengenai Google Map Pricing seperti gambar di bawah ini:
Pada bagian di atas kita memahaminya bahwa ada tebal harga pada kolom Monthly Volume Range dan ada free credit atau gratis dari Google seharga 200$. Secara mudah kita memahami bahwa selama pemakaian kita di bawah 200$ perbulan maka akan gratis, jika lebih dari itu maka akan dicharge selisihnya.
Maka, alternatif lain untuk membuat peta selain dengan google maps menggunakan leaflet, Anda dapat mengikuti langkah-langkah dibawah untuk membuat aplikasi peta Anda sendiri.
Requirement
- Pakai Text editor andalanmu, bisa sublime, atom, visual studio
- Leaflet.js
Langkah-langkah
- Buat halaman HTML biasa
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1 class="text-center">Hello World</h1>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>Buat element untuk menampung map
<body>
<div id="map"></div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>Tambahkan style di HTML untuk fullscreen layout
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>Tambahkan library dari leaflet. css diletakan di head dan js diletakan dibawah sebelum body
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
</head>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
</body>Tambahkan script untuk memanggil map
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
center: [-6.991576, 109.122923],
zoom: 13
});
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=Ts9g8McLuNVEfjGFTHeG', {
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
}).addTo(map);Hasilnya bisa dilihat seperti ini
Pada tutorial berikutnya akan dicoba untuk menambahkan marker pada peta kita. Jadi, tunggu tutorial selanjutnya ya.
mas mau tanya, bagaimna caranya jika kita hanya ingin ambil label2 nya saja, tanpa background map?
owh jadi tambahkan library dari leaflet yah