Arbeidsmigranten uit MOE-landen

// Edit the center point and zoom level var map = L.map('map', { center: [51.6878954, 5.0574822], zoom: 10, scrollWheelZoom: true }); // Edit links to your GitHub repo and data source credit //map.attributionControl //.setPrefix('View open-source code on GitHub, created with Leaflet'); //map.attributionControl.addAttribution('Population data © US Census'); // Basemap layer new L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { attribution: 'Map by OpenStreetMap, Map tile by CARTO', maxZoom: 18, }).addTo(map); // Edit to upload GeoJSON data file from your local directory ct-towns-density.geojson changed to pc4.geojson $.getJSON("PC4CODE-density.txt", function (data) { geoJsonLayer = L.geoJson(data, { style: style, onEachFeature: onEachFeature }).addTo(map); }); // Edit ranges and colors to match your data; see http://colorbrewer.org // Any values not listed in the ranges below displays as the last color function getColor(d) { return d > 600 ? '#800026' : d > 450 ? '#BD0026' : d > 300 ? '#FC4E2A' : d > 150 ? '#FEB24C' : '#FFEDA0'; } // Edit the getColor property to match data column header in your GeoJson file function style(feature) { return { fillColor: getColor(feature.properties.density), weight: 1, opacity: 1, color: 'black', fillOpacity: 0.3 }; } // This highlights the layer on hover, also for mobile function highlightFeature(e) { resetHighlight(e); var layer = e.target; layer.setStyle({ weight: 4, color: 'black', fillOpacity: 0.7 }); info.update(layer.feature.properties); } // This resets the highlight after hover moves away function resetHighlight(e) { geoJsonLayer.setStyle(style); info.update(); } // This instructs highlight and reset functions on hover movement function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: highlightFeature }); } // Creates an info box on the map var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; // Edit info box text and variables (such as props.density2010) to match those in your GeoJSON data info.update = function (props) { this._div.innerHTML = '

Aantal inwoners uit MOE-landen

' + (props ? '' + ' Postcodegebied ' + props.PC4CODE + '
' + props.density + ' inwoners uit MOE-landen' : 'Beweeg met de muis over de kaart'); }; info.addTo(map); // Edit grades in legend to match the ranges cutoffs inserted above // In this example, the last grade will appear as 5000+ var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 150, 300, 450, 600], labels = [], from, to; for (var i = 0; i < grades.length; i++) { from = grades[i]; to = grades[i + 1]; labels.push( ' ' + from + (to ? '–' + to : '+')); } div.innerHTML = labels.join('
'); return div; }; legend.addTo(map); // Use in info.update if GeoJSON data contains null values, and if so, displays "--" function checkNull(val) { if (val != null || val == "NaN") { return comma(val); } else { return "--"; } } // Use in info.update if GeoJSON data needs to be displayed as a percentage function checkThePct(a,b) { if (a != null && b != null) { return Math.round(a/b*1000)/10 + "%"; } else { return "--"; } } // Use in info.update if GeoJSON data needs to be displayed with commas (such as 123,456) function comma(val){ while (/(\d+)(\d{3})/.test(val.toString())){ val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2'); } return val; }