Created
January 30, 2016 19:18
-
-
Save kampar/b7b8afcc6e75fc9d59d1 to your computer and use it in GitHub Desktop.
Leaflet sample for geoJSON, using Kantor Kelurahan as Marker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Leaflet GeoJSON Example</title> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> | |
<style> | |
html, body, #map{ | |
height: 100%; | |
margin: 0px; | |
padding: 0px | |
} | |
/* in production, you should display attribution! DO NOT TRY THIS: */ | |
.leaflet-control-attribution { display:none!important} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="https://gist.github.com/kampar/5861d79496ca0af41e84/raw/69db60f79eed0fe0a414de9e5070aee9e886b809/kantor_lurah.js" type="text/javascript"></script> | |
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> | |
<script> | |
//perhatikan bahwa format di sini adalah LatLong, sedangkan di JSON adalah LongLat | |
var sukajadi=[0.526452500644619,101.43842513074193]; | |
//senter map di pusatnya | |
// eh ... kamsud saya pusatkan peta di sukajadi, zoom 14 | |
var map = L.map('map').setView( | |
sukajadi | |
, 14 | |
); | |
L.tileLayer( | |
'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw' | |
, { | |
maxZoom: 18 | |
,minZoom: 14 | |
,attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' | |
+'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' | |
+'Imagery © <a href="http://mapbox.com">Mapbox</a>' | |
,id: 'mapbox.light' | |
}).addTo(map); | |
/* | |
Jika kita lihat hasil export dari QGIS untuk layer Kelurahan, terdapat properties.Kelurahan yang berisi nama kantor. | |
*/ | |
function onEachFeature(feature, layer) { | |
var popupContent = ""; | |
//jika feature memiliki properties | |
// dan jika memiliki properties.Kelurahan | |
if (feature.properties && feature.properties.Kelurahan) { | |
popupContent += feature.properties.Kelurahan; | |
} | |
layer.bindPopup(popupContent); | |
} | |
L.geoJson(kantor_lurah_84,{ | |
onEachFeature: onEachFeature | |
//, | |
}).addTo(map); | |
</script> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment