This example shows how open data from various providers can be combined to create your own maps:
Most of the code is based on the Interactive Choropleth Map tutorial for Leaflet.
This map has been created in reply to Thema: toepassing van postcodegrenzen.
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <title>Kinderen per 5PPC-gebied in 4PPC-gebied 3812</title> | |
| <meta name="author" content="Baukje Rienks"> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" /> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <div id="map-canvas"></div> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> | |
| <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | |
| <script src="kinderen.json"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
| var kinderen = [ | |
| { | |
| "postcode":"3812A", | |
| "totaal":80, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":50, | |
| "oppervlak":0.045, | |
| "dichtheid":1.78 | |
| }, | |
| { | |
| "postcode":"3812B", | |
| "totaal":90, | |
| "kind0":0, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":50, | |
| "oppervlak":0.304, | |
| "dichtheid":0.3 | |
| }, | |
| { | |
| "postcode":"3812C", | |
| "totaal":80, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":40, | |
| "oppervlak":0.068, | |
| "dichtheid":1.18 | |
| }, | |
| { | |
| "postcode":"3812D", | |
| "totaal":70, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":30, | |
| "oppervlak":0.072, | |
| "dichtheid":0.97 | |
| }, | |
| { | |
| "postcode":"3812E", | |
| "totaal":150, | |
| "kind0":10, | |
| "kind13":30, | |
| "kind34":10, | |
| "kind412":90, | |
| "oppervlak":0.258, | |
| "dichtheid":0.58 | |
| }, | |
| { | |
| "postcode":"3812G", | |
| "totaal":170, | |
| "kind0":20, | |
| "kind13":40, | |
| "kind34":20, | |
| "kind412":90, | |
| "oppervlak":0.214, | |
| "dichtheid":0.79 | |
| }, | |
| { | |
| "postcode":"3812H", | |
| "totaal":170, | |
| "kind0":20, | |
| "kind13":40, | |
| "kind34":20, | |
| "kind412":100, | |
| "oppervlak":0.099, | |
| "dichtheid":1.72 | |
| }, | |
| { | |
| "postcode":"3812J", | |
| "totaal":40, | |
| "kind0":0, | |
| "kind13":0, | |
| "kind34":0, | |
| "kind412":30, | |
| "oppervlak":0.017, | |
| "dichtheid":2.35 | |
| }, | |
| { | |
| "postcode":"3812K", | |
| "totaal":120, | |
| "kind0":20, | |
| "kind13":10, | |
| "kind34":20, | |
| "kind412":70, | |
| "oppervlak":0.068, | |
| "dichtheid":1.76 | |
| }, | |
| { | |
| "postcode":"3812L", | |
| "totaal":50, | |
| "kind0":10, | |
| "kind13":10, | |
| "kind34":0, | |
| "kind412":30, | |
| "oppervlak":0.034, | |
| "dichtheid":1.47 | |
| }, | |
| { | |
| "postcode":"3812M", | |
| "totaal":80, | |
| "kind0":10, | |
| "kind13":10, | |
| "kind34":10, | |
| "kind412":60, | |
| "oppervlak":0.076, | |
| "dichtheid":1.05 | |
| }, | |
| { | |
| "postcode":"3812N", | |
| "totaal":40, | |
| "kind0":10, | |
| "kind13":10, | |
| "kind34":0, | |
| "kind412":30, | |
| "oppervlak":0.13, | |
| "dichtheid":0.31 | |
| }, | |
| { | |
| "postcode":"3812P", | |
| "totaal":10, | |
| "kind0":0, | |
| "kind13":0, | |
| "kind34":0, | |
| "kind412":0, | |
| "oppervlak":0.839, | |
| "dichtheid":0.01 | |
| }, | |
| { | |
| "postcode":"3812R", | |
| "totaal":20, | |
| "kind0":0, | |
| "kind13":0, | |
| "kind34":0, | |
| "kind412":10, | |
| "oppervlak":0.893, | |
| "dichtheid":0.02 | |
| }, | |
| { | |
| "postcode":"3812S", | |
| "totaal":110, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":70, | |
| "oppervlak":0.21, | |
| "dichtheid":0.52 | |
| }, | |
| { | |
| "postcode":"3812T", | |
| "totaal":110, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":50, | |
| "oppervlak":0.099, | |
| "dichtheid":1.11 | |
| }, | |
| { | |
| "postcode":"3812V", | |
| "totaal":110, | |
| "kind0":20, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":60, | |
| "oppervlak":0.086, | |
| "dichtheid":1.28 | |
| }, | |
| { | |
| "postcode":"3812W", | |
| "totaal":100, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":70, | |
| "oppervlak":0.064, | |
| "dichtheid":1.56 | |
| }, | |
| { | |
| "postcode":"3812X", | |
| "totaal":120, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":80, | |
| "oppervlak":0.109, | |
| "dichtheid":1.1 | |
| }, | |
| { | |
| "postcode":"3812Z", | |
| "totaal":80, | |
| "kind0":10, | |
| "kind13":20, | |
| "kind34":10, | |
| "kind412":50, | |
| "oppervlak":0.112, | |
| "dichtheid":0.71 | |
| }, | |
| ] |
| body { | |
| font: 14px/22px 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| color: #57574D; | |
| text-shadow: 1px 1px 1px rgba(0,0,0,0.004); | |
| } | |
| #map-canvas, html, body { | |
| width: 100%; padding: 0; margin: 0; | |
| } | |
| #map-canvas { | |
| height: 450px; | |
| background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAACVBMVEUAAADl5eX////EwbxGAAAAAXRSTlMAQObYZgAAABFJREFUeAFjYESCKACdT38ZAAWhAAxcPQc7AAAAAElFTkSuQmCC) repeat scroll 0 0 #f9f9f9; | |
| cursor: move; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .info { | |
| padding: 6px 8px; | |
| font: 14px/16px Arial, Helvetica, sans-serif; | |
| background: white; | |
| background: rgba(255,255,255,0.8); | |
| box-shadow: 0 0 15px rgba(0,0,0,0.2); | |
| border-radius: 5px; | |
| } | |
| .info h4 { | |
| margin: 0 0 5px; | |
| color: #777; | |
| } | |
| i { | |
| width:10px; | |
| height:10px; | |
| display:inline-block; | |
| padding-right:3px; | |
| } | |
| .leaflet-bar { | |
| box-shadow: none; | |
| background: none repeat scroll 0 0 rgba(255, 255, 255, 0.4); | |
| padding: 2px; | |
| } | |
| .leaflet-bar a, .leaflet-bar a:hover { | |
| background: none repeat scroll 0 0 rgba(160, 195, 63, 1); | |
| border-bottom: 1px solid #ccc; | |
| color: #fff; | |
| display: block; | |
| height: 22px; | |
| line-height: 19px; | |
| text-align: center; | |
| text-decoration: none; | |
| width: 22px; | |
| margin: 1px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif; | |
| } | |
| .leaflet-bar a:hover { | |
| background: none repeat scroll 0 0 rgba(145, 177, 55, 1); | |
| } | |
| .leaflet-control-attribution { | |
| background-color: rgba(255,255,255,0.6); | |
| font-size: smaller; | |
| color: #666; | |
| padding: 0 2px; | |
| line-height: 22px; | |
| } | |
| .leaflet-control-attribution a { | |
| text-decoration: underline; | |
| } |
| var map = L.map('map-canvas'); | |
| L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { | |
| attribution: 'Referentiekaart © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', | |
| maxZoom: 19 | |
| }).addTo(map); | |
| map.attributionControl.setPrefix(''); | |
| var info = L.control(); | |
| info.onAdd = function (map) { | |
| this._div = L.DomUtil.create('div', 'info'); | |
| this.update(); | |
| return this._div; | |
| }; | |
| info.update = function (props) { | |
| var value,value1,value2,value3,value4; | |
| for (i = 0; i < kinderen.length; i++){ | |
| if (props && props.postcode == kinderen[i].postcode) { | |
| value = kinderen[i].postcode | |
| value1 = kinderen[i].kind0 | |
| value2 = kinderen[i].kind13 | |
| value3 = kinderen[i].kind34 | |
| value4 = kinderen[i].kind412 | |
| } | |
| } | |
| this._div.innerHTML = '<h4>Aantal kinderen</h4>' + (props ? | |
| '<b>' + value + '</b><br />' + '0 jaar:' + " " + value1 + '</b><br />' + | |
| '1-3 jaar:' + " " + value2 +'</b><br />' + | |
| '3-4 jaar:' + " " + value3 + '</b><br />' + | |
| '4-12 jaar:' +" " + value4 : 'Hover over de kaart'); | |
| }; | |
| info.addTo(map); | |
| function getColor(d) { | |
| return d < 0.05 ? '#edf8e9' : | |
| d < 0.1 ? '#c7e9c0' : | |
| d < 0.5 ? '#a1d99b' : | |
| d < 1.0 ? '#74c476' : | |
| d < 1.5 ? '#41ab5d' : | |
| d < 2.0 ? '#238b45' : | |
| '#005a32'; | |
| } | |
| function style(feature){ | |
| var value; | |
| for (i = 0; i < kinderen.length; i++) { | |
| if (feature.properties.postcode == kinderen[i].postcode) { | |
| value = kinderen[i].dichtheid | |
| } | |
| } | |
| return { | |
| weight: 1, | |
| opacity: 1, | |
| color: 'white', | |
| fillOpacity: 0.7, | |
| fillColor: getColor(value) | |
| }; | |
| } | |
| function highlightFeature(e) { | |
| info.update(e.target.feature.properties); | |
| var layer = e.target; | |
| layer.setStyle({ | |
| weight: 3, | |
| color: '#37ABC8', | |
| fillOpacity: 0.7 | |
| }); | |
| if (!L.Browser.ie && !L.Browser.opera) { | |
| layer.bringToFront(); | |
| } | |
| } | |
| var geojson = L.geoJson(null, {style: style,onEachFeature: onEachFeature}).addTo(map); | |
| function resetHighlight(e) { | |
| geojson.resetStyle(e.target); | |
| info.update(); | |
| } | |
| function zoomToFeature(e) { | |
| map.fitBounds(e.target.getBounds()); | |
| } | |
| function onEachFeature(feature, layer) { | |
| layer.on({ | |
| mouseover: highlightFeature, | |
| mouseout: resetHighlight, | |
| click: zoomToFeature | |
| }); | |
| } | |
| $.getJSON('http://places.geocoders.nl/demo/pc5/3812', function(data) { | |
| geojson.addData(data); | |
| map.fitBounds(geojson.getBounds()); | |
| }); | |
| geojson.getAttribution = function() { | |
| return 'brongegevens © <a href="http://www.cbs.nl/"><abbr title="Centraal Bureau voor de Statistiek">CBS</abbr></a>, postcodegebieden o.b.v. <abbr title="Basisregistratie Adressen en Gebouwen">BAG</abbr>, <a href="http://www.kadaster.nl/">Kadaster</a>.'; | |
| } | |
| var legend = L.control({position: 'bottomright'}); | |
| legend.onAdd = function (map) { | |
| var div = L.DomUtil.create('div', 'info legend'), | |
| grades = [0, 0.05, 0.1, 0.5, 1.0, 1.5, 2.0, ], | |
| labels = ['<strong>Kinderdichtheid</strong>']; | |
| for (var i = 0; i < grades.length; i++) { | |
| labels.push( | |
| '<i style="background:' + getColor(grades[i]) + '"></i> ' + | |
| grades[i] + (grades[i+1] ? '–' + grades[i+1] + ' / km²<br>' : '+ / km²')); | |
| } | |
| div.innerHTML = labels.join('<br>'); | |
| return div; | |
| }; | |
| legend.addTo(map); |