0

I've done various ways to change the polygon color with external links, but only one color can be displayed, so I need help with changing and displaying more than one polygon color in the source code Leaflet with an external GeoJSON file link.

Code:

fetch("https://testapp.my.id/batas_wilayah_sumbar.geojson")

    .then(function(response){
        return response.json();
    })
    .then(function(data1){
        
       L.geoJson(data1, {
        style:function(feature){
         return{
            
                style:myStyle
           
        },
          onEachFeature:onEachFeature
       })
    .addTo(myMap);
    });
1

There is no difference between external or local file. While you are creating .geojson layer using leaflet, you can set style for each feature:

var map = L.map('mapContainer', {
   center: [0,0],
   zoom: 10,
})

var vectorLayer = L.geoJSON("data.geojson", {
    style: function(feature) {
        switch (feature.properties.class) {
            case '1': return style1;
            case '2': return style2;
            ...
        }
    }
}).addTo(map);

You need to have a property (in this example it is "class") which enables to classify polygons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.