0

I've tried various ways to change the polygon color with external links, but only one color can be displayed.

I need help with changing and displaying more than one polygon color in Leaflet, using 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 Answer 1

2

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 us to classify polygons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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