Estoy tratando de colorear una región completa en mi mapa según un código postal . Así que básicamente quiero que se coloree toda la región del código postal . Estoy usando el complemento Folleto para esto.

En este momento muestro círculos en el mapa (Haga clic en el enlace para ver): Mapa actual

Este es el código JS que estoy usando para mostrarlo:

 $(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: '&copy; <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"); } }); })

¿Hay alguna manera de colorear todo el rango de códigos postales en el mapa usando el complemento Leaflet? Si es así, ¿cómo voy a hacer esto?

Resultado que quiero: Haga clic en el enlace para ver

Nota: la región debe colorearse según el representante y el mapa no debe ser tan oscuro.