Cara Get Lat Lang Map pada Textbox dengan Leaflet Js
Jurnalcode.com

Cara Get Lat Lang Map pada Textbox dengan Leaflet Js


Jurnalcode.com :Leaflet Js merupakan library javascript open source yang berguna untuk membangun aplikasi peta interaktif berbasis web. Leaflet support dengan platform mobile dan platform desktop, HTML5 dan CSS3 serta OpenLayer dan Google Maps API yang merupakan library javascript untuk membangun aplikasi peta yang sangat popular saat ini.

Dengan memanfaatkan leaflet, developer yang tidak memiliki latar belakang GIS pun dapat dengan mudah menampilkan peta interaktif berbasis web pada server. Leaflet mampu menampilkan layer dari file geojson, memberi style dan membuat layer yang interaktif seperti menampilkan marker yang menampilkan popup informasi ketika di klik.

Nah Kali ini saya akan menuliskan tentang bagaimana mengambil atau Get lat lang pada textbox saat kita klik map . nah langsung saja kita ke tutorial nya

Silahkan Perhatikan Code dibawah :

<html>
<head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
</head>
<body>
    <label for="latInput">Latitude</label>
    <input type="text" id="latInput"/>
    <label for="lngInput">Longitude</label>
    <input type="text" id="lngInput"/>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    	function addMapPicker() {
	    	var mapCenter = [22, 87];
            var map = L.map('map').setView([0.818410,  100.402070], 12);
			L.tileLayer('https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=bgISsnxrAiRak6OLsnfO', {
				maxZoom: 18,
				attribution: ''
			}).addTo(map);
		
		var marker = L.marker(mapCenter).addTo(map);
		var updateMarker = function(lat, lng) {
		    marker
		        .setLatLng([lat, lng])
		        .bindPopup("Your location :  " + marker.getLatLng().toString())
		        .openPopup();
		    return false;
		};
		map.on('click', function(e) {
		    $('#latInput').val(e.latlng.lat);
		    $('#lngInput').val(e.latlng.lng);
		    updateMarker(e.latlng.lat, e.latlng.lng);
	    	});
	    	
	    	var updateMarkerByInputs = function() {
			return updateMarker( $('#latInput').val() , $('#lngInput').val());
		}
		$('#latInput').on('input', updateMarkerByInputs);
		$('#lngInput').on('input', updateMarkerByInputs);
    	}
    	
	$(document).ready(function() {
	    addMapPicker();
	});
    </script>
    <style>
		input {
		    margin-bottom : 2px;
		}
		#map {
		    width : 600px;
		    height : 400px;
		}
    </style>
<body>
</html>

Kemudian Silahkan Jalankan Script diatas ..

 

Selamat Mencoba ... Silahkan Tanyakan pada kolom komentar jika ada pertanyaan

 

.

Ayo Komentar