CODEWITHSUNDEEP
leafletmapbox
redshift
redshift

Reputation: 5217

Leaflet: how to style polygons from geoJson data?

I am trying to troubleshoot why my map is not showing the color styles I have set for two polygons in a Switch statement.

(JSfiddle here):

Here's my test data:

L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('map', 'mapbox.light')
.setView([40, -74.50], 9);

var myData = [{
  "type": "FeatureCollection",
  "features": [
{
  "type": "Feature",
  "properties": {
    "stroke": "#555555",
    "stroke-width": 2,
    "stroke-opacity": 1,
    "fill": "#555555",
    "fill-opacity": 0.5,
    "Name": "Area One"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          -75.289306640625,
          40.13899044275822
        ],
        [
          -75.5255126953125,
          40.000267972646796
        ],
        [
          -75.29754638671875,
          39.86969567045658
        ],
        [
          -74.97894287109375,
          39.905522539728544
        ],
        [
          -74.9871826171875,
          40.04654018618778
        ],
        [
          -75.289306640625,
          40.13899044275822
        ]
      ]
    ]
  }
},
{
  "type": "Feature",
  "properties": {
    "stroke": "#555555",
    "stroke-width": 2,
    "stroke-opacity": 1,
    "fill": "#555555",
    "fill-opacity": 0.5,
    "Name": "Area Two"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          -75.223388671875,
          40.20195268954057
        ],
        [
          -75.22064208984375,
          40.029717557833266
        ],
        [
          -75.08056640625,
          40.02551125229785
        ],
        [
          -74.9322509765625,
          40.11799004890473
        ],
        [
          -75.02288818359375,
          40.197757023665446
        ],
        [
          -75.223388671875,
          40.20195268954057
           ]
         ]
       ]
     }
   }
  ]
}];

Here are my functions:

function getAreaColor(){
    switch (feature.properties.Name){
     case 'Area One' : return { fillColor: 'blue' };
     case 'Area Two' : return { fillColor: 'yellow' };
      break;
 }
};

function areaStyle(){
  return {
    fillColor: getAreaColor,
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.5
 }
};

L.geoJson(myData, {style: areaStyle}).addTo(map);

Why are the two polygons not getting the colors I've assigned?

Upvotes: 1

Views: 9338

Answers (1)

snkashis
snkashis

Reputation: 2991

Okay, so you had a couple issues here, which I fixed for you in this fiddle. http://jsfiddle.net/hx5pxdt8/

1.Your areaStyle function was not accepting the feature parameter that Leaflet gives you.

2.Your getAreaColor function was not passing that parameter either.

3.Your switch statement was returning javascript objects, when you were already inside that fillColor property...which means you just needed to return the color string, not an object.

Upvotes: 3

Related Questions