Leaflet Tambah dan Hapus Marker on Click

Posting sekarang adalah lanjutan mengenai leaflet. Bahasannya adalah bagaimana menambah dan menghapus tanda marker dalam peta.

window.onload=function(){

// We’ll add a OSM tile layer to our map
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([25.92, 79.84], 5).addLayer(osm);

// attaching function on map click
map.on('click', onMapClick);

// Script for adding marker on map click
function onMapClick(e) {
var geojsonFeature = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [e.latlng.lat, e.latlng.lng]
}
}

var marker;

L.geoJson(geojsonFeature, {
pointToLayer: function(feature, latlng){
marker = L.marker(e.latlng, {
title: "Resource Location",
alt: "Resource Location",
riseOnHover: true,
draggable: true,
}).bindPopup("<[remove this]input class="marker-delete-button" type="button" value="Delete this marker" />");
marker.on("popupopen", onPopupOpen);
return marker;
}
}).addTo(map);
}

// Function to handle delete as well as other events on marker popup open
function onPopupOpen() {

var tempMarker = this;

//var tempMarkerGeoJSON = this.toGeoJSON();
//var lID = tempMarker._leaflet_id; // Getting Leaflet ID of this marker

// To remove marker on click of delete
$(".marker-delete-button:visible").click(function () {
map.removeLayer(tempMarker);
});
}

// Getting all the markers
function getAllMarkers() {

var allMarkersObjArray = [];//new Array();
var allMarkersGeoJsonArray = [];//new Array();

$.each(map._layers, function (ml) {
//console.log(map._layers)
if (map._layers[ml].feature) {

allMarkersObjArray.push(this)
allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
}
})

console.log(allMarkersObjArray);
alert("total Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n Also see your console for object view of this array" );
}

$(".get-markers").on("click", getAllMarkers);

}

output yang dihasilkan menjadi seperti berikut.

Semoga bermanfaat, wassalam.

Leaflet BindPopup

Bind pupup merupakan pupup informasi tambahan dalam sebuah marker leaflet. Informasi di sesuaikan dengan kebutuhan marker, apabila tidak mencukupi hanya dengan marker saja, seperti catatan tambahan.  Contoh sederhana seperti pada gambar.

kode sederhananya seperti berikut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

L.marker([0.5769167874644966, 123.01858018012717])
.addTo(map)
.bindPopup('Endang
Lokasi rumah disini.')
.openPopup();;

}
window.onload = main;

Semogabermanfaat, wassalam.

Leaflet Polygon

Bagaimana cara membuat polygon dengan menggunakan leaflet. (Leaflet adalah media interaktif maps). Jadi dalam map ada beberapa garis-garis yang menutupi area tertentu. Polygon di buat dari titik-titik yang terhubung. Jadi kuncinya adalah titik koordinat dari latitude longitude nya.

window.onload = function(){
// We’ll add a OSM tile layer to our map
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([25.92, 79.84], 5).addLayer(osm);

// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41.236511201246216, -105.27099609375],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());
}

Output tampilan yang dihasilkan seperti berikut.

Semoga bermanfaat, wassalam.

Leaflet Custom Icon Marker

Icon marker custom, secara default icon dalam leaflet penandanya warnanya biru dengan bentuk tertentu. Apabila ingin merubah icon marker sesuai dengan ke inginan maka kita perlu menambahkan kode tambahan. Contoh kode untuk custom icon marker kurang lebih sederhananya berikut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

var myIcon = L.icon({
iconUrl: 'house-icon.png',
iconSize: [40, 45], // size of the icon
});
L.marker([0.5769167874644966, 123.01858018012717], {icon: myIcon}).addTo(map);

}
window.onload = main;

Hasil output adalah sebagai berikut.

Semoga bermanfaat, wassalam.

 

Leaflet Routing

Routing berfungsi untuk memperilhatkan jalur yang akan dilalui oleh dua titik, awal dan tujuan. Untuk membuat routing, hal pertama yang dilakukan yakni mengincludekan library tambahan selain file library utama leaflet. seperti pada gambar kode berikut.

kemudian pada bagian body (setelah div dengan nama map) masukan kode berikut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

var control = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
// routeWhileDragging: true
}).addTo(map);
control.hide();

}
window.onload = main;

Hasil akan muncul seperti pada gambar dibawah.

semoga bermanfaat. wassalam.

Leaflet get latitude longitude

Bagaimana cara mengetahui letak titik koordinat Latitude dan longitude peta pada leaflet, seperti pada gambar dibawah. jadi ketika di klik pada peta akan muncul alert titik koordinat.

Berikut contoh kode sederhana untuk mengambil titik koordinat tersebut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

// get coordinate
map.on('click',
function(e){
var coord = e.latlng.toString().split(',');
var lat = coord[0].split('(');
var lng = coord[1].split(')');
alert("You clicked the map at latitude: " + lat[1] + " and longitude:" + lng[0]);
});
}
window.onload = main;

Semoga bermanfaat. wassalam.

Leaflet Multiple Marker

Posting sebelumnya bagaimana membuat marker dengan contoh satu marker atau penanda. Selanjutnya bagaimana cara membuat multiple marker di leaflet. berikut contoh kodenya.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

// add multiple marker
L.marker([0.5769167874644966, 123.01858018012717]).addTo(map);
L.marker([0.57415, 123.02233]).addTo(map);
}
window.onload = main;

Hasil display dari kode diatas adalah dibawah.

Semoga bermanfaat, wassalam.

Leaflet Marker

Marker atau penanda lokasi dalam peta sudah menjadi bagian kebutuhan pemetaan. seperti halnya google map, yang memiliki marker leaflet juga ada, perbandingan google map karena yang populer saat ini.

Bagaimana cara membuat marker dalam leaflet, berikut contoh kodenya.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

L.marker([0.5769167874644966, 123.01858018012717]).addTo(map);
}

window.onload = main;

Hasil dari kode diatas adalah seperti berikut ini.

Semoga bermanfaat, wassalam.

 

Menyiapkan Leafletjs

Setelah menentukan akan menggunakan lefleatjs, Langkah awal untuk menggunakan leaflet js pada web base. Siapkan file library dari leaflet dengan mengincludekan nya dalam bagian halaman web. caranya seperti berikut.

contoh sederhana untuk menampilkan map dengan leaflatjs.

function main() {
var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}
var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);
}
window.onload = main;

Hasil yang muncul adalah sebagai berikut.

semoga bermanfaat. wassalam.

 

Leafletjs, apa itu?

Apa itu leafletjs …

leafletjs di kutip dari websitenya leafletjs.com

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

translatenya adalah berikut

Leaflet adalah pustaka JavaScript open-source terkemuka untuk peta interaktif ramah-mobile. Dengan berat hanya sekitar 38 KB JS, ia memiliki semua fitur pemetaan yang paling dibutuhkan pengembang.

jadi leaflet mempermudah pengembang atau developer yang hendak membuat aplikasi pemetaan geografi baik itu mobile atau web base. seperti halnya yang ada pada google map api. Dengan adanya leaflet developer memilliki alternatif dalam hal pemetaan geografi. untuk keterangan lengkapnya bisa di lihat website resmi leaflet.com.

wassalam.