Skip Loading

[Leafletjs] Menggunakan custom image sebagai map

Leaflet Js (www.leafletjs.com) adalah open-source javascript library untuk membuat interactive maps. Library ini sangat populer karena mobile friendly, mempunyai ukuran file yang kecil dan dapat diextend dengan plugins ataupun dengan menggunakan fungsi javascript saja. Leaflet Js dapat menampilkan peta/map dari berbagai sumber, sepetri Google map, OpenStreetmap, OpenWheatherMap, dan lain-lain.

Pada artikel ini, saya akan memberikan tutorial untuk menggunakan bitmap image sebagai map, dan menggunakan koordinat sederhana untuk menentukan posisi dalam map.

<html>
	  <script src="leaflet.js"></script>
		<link href="leaflet.css" rel="stylesheet">
		<style>
		#map {
    	background: #59d2fe url("images/bg-map.jpg") no-repeat scroll 0 0;
    	height: 385px;
    	margin-bottom: 15px;
    	width: 566px;
    }	
    .container{
    	margin:0 auto;
    	width:906px;
    }
		</style>
<body>
<div class="container">
    <div id="map">
        
    </div>
</div>	
<script>
	function init_map() {
        map = L.map('map', {
            minZoom: 1,
            maxZoom: 4,
            center: [0, 0],
            zoom: 1,
            attributionControl: false,
            crs: L.CRS.Simple
        });
        var w = 4530, h = 3075, url = 'images/map.png';
        var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
        var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
        var bounds = new L.LatLngBounds(southWest, northEast);
        L.imageOverlay(url, bounds).addTo(map);
        map.setMaxBounds(bounds);
    }

    init_map();
</script>
</body>	
</html>

KIta akan menggunakan image peta indonesia berukuran 4530x3075 sebagai base map. Definisikan dalam variabel w=4530 (lebar image), h=3075 (tinggi image) dan url pointing ke file image yang digunakan. Kemudian pada variabel init, kita gunakan crs: L.CRS.Simple, sehingga koordinat yang dipakai adalah sistem koordinat simple mneggunakan point.

var southWest = map.unproject([0, h], map.getMaxZoom() - 1); 
var northEast = map.unproject([w, 0], map.getMaxZoom() - 1); 
var bounds = new L.LatLngBounds(southWest, northEast); 
L.imageOverlay(url, bounds).addTo(map); 
map.setMaxBounds(bounds);

Dengan perintah di atas, kita mengatur leafletjs bahwa titik 0,0 ada di pojok kanan atas.

Untuk mengetahu koordinat suatu titik, kita dapat menambahkan fungsi berikut:

function onContextMenu(e) {
        alert("You clicked the map at " + e.latlng);
}
 map.on('contextmenu', onContextMenu);

Perintah diatas memberikan fungsi bila kita mengklik tombol kanan pada peta, maka akan muncul alert dialog berisi koordinat pada titik tersebut.

Kemudian kita dapat menambahkan titik dengan cara:

var marker = new L.Marker([-135.8, 124.38], {});
marker.addTo(map);

Yang akan menambahkan marker di pulau bali.

Apabila kita akan menggunakan peta ini dalam container yang tidak sama aspek rasionya dengan aspek rasio gambar peta, maka kita dapat mengatur varibel var w = 4530, h = 3075, yang kita kecilkan (namun dengan aspek rasio yang tetap) dan juga variabel minZoom agar gambar peta dapat muncul seluruhnya.

Aspek rasio adalah perbandingan lebar dan tinggi.

Contoh lengkapnya penggunaan dapat di lihat di sini.

www.paulussetyo.com

Comments ( 0 )
Add Comment

Your email address will not be published. Required fields are marked *