'How to color in region based on postal code using Leaflet?
I'm trying to color in an entire region on my map based on a Postal Code. So I want the entire postal code region to be colored in basically. I am using the plugin Leaflet for this.
Right now I display circles on the map (Click the link to see): Current Map
This is the JS code I am using to display it:
$(document).ready(function(){
/* Initialising the map */
var map = L.map('map').setView([50.84673, 4.35247], 9);
L.tileLayer('https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png', {
attribution:
'© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' +
', Tiles courtesy of <a href="https://geo6.be/">GEO-6</a>',
maxZoom: 18
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
// Fetching the postal codes for each representative
$.ajax({
url: dynamicmapurl,
method: "GET",
dataType: 'json',
beforeSend: function(xhr, settings) {
if(!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
success:function(data)
{
data = data.reverse();
for(var i = 0; i < data.length; i++){
//Drawing a circle on the map based on the
//Postal code dictionary array I'm receiving from the backend
L.circle([data[i].lat, data[i].lon], 500, {
color: data[i].fillColor,
fillColor: data[i].fillColor,
fillOpacity: 0.8
}).addTo(map).bindPopup("Vertegenwoordiger: " + data[i].vertegenwoordiger + " <br> "
+ " Postcode: " + data[i].postcode)
}
},
error: function(data){
console.log(data);
alert("Algemene Error");
}
});
})
Is there a way to color in the entire postal code range on the map using the Leaflet plugin? If so, how would I go about this?
Result I want: Click on link to see
Note: the region should be colored in depending on which representative & the map should not be so dark.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
