Berikut merupakan cara input titik koordinat / longitude dan latitude otomatis di leaflet pada form inputan , cara ini bisa dilakukan untuk menyimpan ke database dengan php maupun javascript.
Mungkin anda sudah bisa menampilkan peta dengan leaflet menggunakan php sql, nah buat anda yang sedang mengerjakan tugas pemetaan, artikel ini mungkin bisa membantu anda dalam mengerjakan tugas akhir.
input titik koordinat otomatis di leaflet
SELENGKAPNYA
Disini saya akan memebuat sebuah form saja yah dan menggunakan fungsi javascript. sebelum mulai mengoding siapkan dulu segelas teh angat agar tidak tegang he.
Buatlah sebuah file dengan nama index.html , dibawah ini merupakan kode keseluruhan dan akan saya jelaskan satu persatu fungsi javascript biar kalian paham dan tidak asal copas, nanti puyeng sendiri jika tidak paham.
var map = L.map('map').setView([51.505, -0.09], 13); Ini merupakan Titik koordinat keseluruhan peta , Jika ingin merubah titik pertama silahkan ganti setView nya yang didalam kurung dengan titik koordinat tempat anda , sedangkan angka 13 merupakan size nya atau atau maximal zoomnya .
Nah untuk menyimpan titik secara otomatis ketika diklik di tempat tertentu kita menggunakan id lat dan id lng,
copba kalian perhatikan script ini:
$("#lat").val(this.getLatLng().lat);
$("#lng").val(this.getLatLng().lng);
#lat dan #lng diambil dari form inputan yang nantikanya koordinat akan terisi otomatis ke dalam form inputan yang ada di :
<input id="lat" type="text" name="latitude" />
<input id="lng" type="text" name="longitude" />
Nah coba perhatikan tulisan yang berwarna biru , id tersebut di ambil dari javascript.
Nah artikel ini masih statis yah bro, nanti akan saya tulias tutorial berikutnya agar bisa langsung disimpan ke database Buat kalian yang bingung mengerjakan tugas pemetaan,kami terima jasa silahkan hubungi kami ke akmartani@gmail.com
Buatlah sebuah file dengan nama index.html , dibawah ini merupakan kode keseluruhan dan akan saya jelaskan satu persatu fungsi javascript biar kalian paham dan tidak asal copas, nanti puyeng sendiri jika tidak paham.
<!DOCTYPE html>Copi semua tul;isan yang berwarna hijau kedalam index.html.
<html>
<head>
<title>Add a company</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<form action="addcompanydb.php" method="post">
<h1>Add a new company</h1>
<table cellpadding="5" cellspacing="0" border="0">
<tbody>
<tr align="left" valign="top">
<td align="left" valign="top">Company name</td>
<td align="left" valign="top"><input type="text" name="company" /></td>
</tr>
<tr align="left" valign="top">
<td align="left" valign="top">Description</td>
<td align="left" valign="top"><textarea name="details"></textarea></td>
</tr>
<tr align="left" valign="top">
<td align="left" valign="top">Latitude</td>
<td align="left" valign="top"><input id="lat" type="text" name="latitude" /></td>
</tr>
<tr align="left" valign="top">
<td align="left" valign="top">Longitude</td>
<td align="left" valign="top"><input id="lng" type="text" name="longitude" /></td>
</tr>
<tr align="left" valign="top">
<td align="left" valign="top">Telephone</td>
<td align="left" valign="top"><input type="text" name="telephone" /></td>
</tr>
<tr align="left" valign="top">
<td align="left" valign="top"></td>
<td align="left" valign="top"><input type="submit" value="Save"></td>
</tr>
</tbody>
</table>
</form>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer( 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWVnYTYzODIiLCJhIjoiY2ozbXpsZHgxMDAzNjJxbndweDQ4am5mZyJ9.uHEjtQhnIuva7f6pAfrdTw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org/"> OpenStreetMap </a> contributors, ' +
'<a href="http://creativecommons.org/"> CC-BY-SA </a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
function putDraggable() {
draggableMarker = L.marker([ map.getCenter().lat, map.getCenter().lng], {draggable:true, zIndexOffset:900}).addTo(map);
draggableMarker.on('dragend', function(e) {
$("#lat").val(this.getLatLng().lat);
$("#lng").val(this.getLatLng().lng);
});
}
$( document ).ready(function() {
putDraggable();
});
</script>
</body>
</html>
var map = L.map('map').setView([51.505, -0.09], 13); Ini merupakan Titik koordinat keseluruhan peta , Jika ingin merubah titik pertama silahkan ganti setView nya yang didalam kurung dengan titik koordinat tempat anda , sedangkan angka 13 merupakan size nya atau atau maximal zoomnya .
Nah untuk menyimpan titik secara otomatis ketika diklik di tempat tertentu kita menggunakan id lat dan id lng,
copba kalian perhatikan script ini:
$("#lat").val(this.getLatLng().lat);
$("#lng").val(this.getLatLng().lng);
#lat dan #lng diambil dari form inputan yang nantikanya koordinat akan terisi otomatis ke dalam form inputan yang ada di :
<input id="lat" type="text" name="latitude" />
<input id="lng" type="text" name="longitude" />
Nah coba perhatikan tulisan yang berwarna biru , id tersebut di ambil dari javascript.
Nah artikel ini masih statis yah bro, nanti akan saya tulias tutorial berikutnya agar bisa langsung disimpan ke database Buat kalian yang bingung mengerjakan tugas pemetaan,kami terima jasa silahkan hubungi kami ke akmartani@gmail.com
Related Post