Skip to content

Instantly share code, notes, and snippets.

@woutervdijke

woutervdijke/leafletquickstartnl.html

Created July 7, 2019 19:53
Show Gist options
  • Save woutervdijke/252a45e74c01dfb9c02af1c68566ca99 to your computer and use it in GitHub Desktop.
Save woutervdijke/252a45e74c01dfb9c02af1c68566ca99 to your computer and use it in GitHub Desktop.
Download ZIP
De Leaflet Quickstart, maar dan in Nederland
Raw
leafletquickstartnl.html
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
#mapid { height: 600px; }
#mapinfo { }
</style>
</head>
<body>
<div id="mapid"></div>
<div id="mapinfo" style="text-align: center;">
<p><span id='mapcenter'></span></p>
<p>Zoom level: <span id='mapzoom'></span></p>
</div>
<script>
var map = L.map('mapid').setView([52.08085, 4.30135], 14);
function zoomAndCenter(){ //function to output map center and zoom level below map
document.getElementById('mapzoom').innerHTML = map.getZoom();
document.getElementById('mapcenter').innerHTML = map.getCenter().lat.toFixed(5) + ", " + map.getCenter().lng.toFixed(5);
}
map.on('layeradd', function(){ //show center and zoom level on map load
zoomAndCenter();
});
map.on('moveend', function() { //update center and zoom leven on move
zoomAndCenter();
});
L.tileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartgrijs/EPSG:3857/{z}/{x}/{y}.png', {
attribution: 'Kaartgegevens &copy; Kadaster',
maxZoom: 19,
id: 'grijs',
}).addTo(map);
var marker = L.marker([52.08572, 4.3078]).addTo(map); //add a marker
var circle = L.circle([52.07572, 4.3178], { //add a circle
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
var polygon = L.polygon([ //add a polygon
[52.08572, 4.2978],
[52.08572, 4.2878],
[52.07872, 4.2978]
]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); //add popups to each element
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment