Created
January 30, 2016 23:41
-
-
Save kampar/fa5a2515451e0f271b6d to your computer and use it in GitHub Desktop.
Leaflet TileLayer sample with ESRI and Mapbox OpenStreetMap
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 TileLayer 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 | |
); | |
var tileLayer_ESRI_World_Imagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/' | |
+ 'rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' | |
,{ attribution: 'ESRI' | |
}); | |
var tileLayer_Mapbox_OSM = 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' | |
}); | |
var baseMaps = { | |
"ESRI":tileLayer_ESRI_World_Imagery | |
,"Mapbox":tileLayer_Mapbox_OSM | |
}; | |
var overlayMaps = { | |
// "Kecamatan ":tileLayer_Kampar | |
// ,"Jalan": tileLayer_Kampar_Jalan | |
}; | |
//radio button, check box | |
L.control.layers(baseMaps, overlayMaps).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