Skip to content

Instantly share code, notes, and snippets.

@webmappergists
Last active Aug 29, 2015
Embed
What would you like to do?
Kinderen per 5PPC-gebied: choropleet obv open data
<!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 &copy; <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 &copy; <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] ? '&ndash;' + grades[i+1] + ' / km&#178;<br>' : '+ / km&#178;'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment