1

I have managed to display a GeoJSON layer with multiple polygons (~150) in a Leaflet map in SharePoint.

I would like to style different features in this GeoJSON layer according to a colour stored within a column in this GeoJSON layer, called "color". So far the output is only diplaying by default: "blue"

// Polygons coloured
      $.getJSON("../XX/XX/XX/polygons.geojson",function(data){
        polygons = L.geoJSON(data, {
                style:function(feature) {
                switch (feature.properties.color)                     
                },
        onEachFeature: function(feature, layer) {
               layer.bindPopup(feature.properties.name);    
    }
        });

 layercontrol.addOverlay(polygons, 'POLYGONS');

 document.getElementById('mapid').style.opacity = 1;

 });

I could style the features indivdually like I started in the following script but I dont think it is the most adequate solution since I have more than 100 polygons.

/ polygons 
      $.getJSON("../SiteAssets/webparts/Data/WOAs_WGS84.geojson",function    (data){
         woas2 = L.geoJSON(data, {
                        style: function(feature) {
                switch (feature.properties.name) {
                case 'polygon 1: return {color: #00FF7F", opacity:0.7};
                case 'polygon 2:   return {color: "#c917dc", opacity:0.7};
                case 'polygon 3:   return {color: "#FF0000", opacity:0.7};
                case 'polygon 4':   return {color: "#a9fb3a", opacity:0.7};
                case 'polygon 5:   return {color: "#4169E1", opacity:0.7};

and so on

... 
                case 'polygon 150 ':   return {color: " #C0C0C0", opacity:0.7};     
         },
               onEachFeature: function(feature, layer) {
               layer.bindPopup(feature.properties.name);    
         }
         });

            layercontrol.addOverlay(polygons, 'POLYGONS');

               });
  • Do you want to color the polygons by an attribute or just diffrent colors? – NettaB Feb 23 '18 at 16:56
  • I am happy to colour them just by different colors, but it would also be good to know how to color them by attribute. Thanks – Svea Feb 24 '18 at 14:58
1

Leaflet's choropleth example is an excellent place to understand coloring by attributes.
I didn't change the example much - just followed your sample. // color by attribute. woas2 = L.geoJSON(data, { style: function(feature) { d = feature.properties.colorByAttr; return d > 1000 ? {color: '#00FF7F', opacity:0.7} : d > 500 ? {color: '#BD0026', opacity:0.7} : d > 200 ? {color: '#E31A1C', opacity:0.7} : {color: '#FFEDA0', opacity:0.7};
},
...

Assigning random colors can also be achieved by creating a function that returns a random color or creating a pre defined array of colors and assigning the colors simillar to your method, though serially instead of 'by name'.

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.