2

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');

               });
2
  • Do you want to color the polygons by an attribute or just diffrent colors?
    – NettaB
    Commented Feb 23, 2018 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
    Commented Feb 24, 2018 at 14:58

1 Answer 1

5

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 and acknowledge you have read our privacy policy.

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