Skip to content

Instantly share code, notes, and snippets.

Created Feb 6, 2018
What would you like to do?
Leaflet with a WMS overlay
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>A basic map with Leaflet</title>
<!--add Leaflet CSS-->
<link rel="stylesheet" href=""
<!--our own style rules-->
<style type="text/css">
body, html {
height: 90%;
#map-container {
height: 100%;
<!--The div in which the map will be created-->
<div id="map-container"></div>
<!--load leaflet.js-->
<script src=""
<!--code we need to use a different projection-->
<script src=""></script>
<script src=""></script>
<script src=""></script>
<!--our own code to create the map-->
//define the custom projection tileset (Amersfoort/RD)
var RD = new L.Proj.CRS( 'EPSG:28992','+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs', {
resolutions: [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420, 0.210],
bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
origin: [-285401.92, 22598.08]
//initialize the map with our coordinate reference system
let map ='map-container', {
crs: RD
//map view still gets set with Latitude/Longitude,
//but the zoomlevel is now different (it uses the resolutions defined in our projection tileset above)
map.setView([52.268, 4.998], 3) ;
//add background layer in custom projection
let bglayer_BRTAchtergrondkaart = new L.TileLayer('{z}/{x}/{y}.png', {
minZoom: 0,
maxZoom: 13,
tms: true,
attribution: 'Map data: <a href="">Kadaster</a>'
var cbs_cars = L.WMS.overlay('', {
'layers': 'cbs_buurten_2014',
'styles': 'wijkenbuurten_thema_buurten_gemeentewijkbuurt_gemiddeld_aantal_autos_per_huishouden',
'srs': 'EPSG:28992',
'format': 'image/png'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment