CODEWITHSUNDEEP
javascriptmeteorleaflet
Arno Kerkmeijer
Arno Kerkmeijer

Reputation: 71

Styling of Leaflet Features doesn't work

I've been trying to add a polygon on a Leaflet map and give it a style. I've been following their tutorials on http://leafletjs.com/examples/geojson.html however with no success.

My code is as following:

var myStyle = {
  "color": "#0000FF",
  "fill": true,
  "opacity": 0.65
  };

  var myPolygon = [{
      "type": "Feature",
      "properties": {
          "name": "Poly test",
          "popupContent": "this is my test!",
      },
      "geometry": {
          "type": "Polygon",
          "coordinates": [[
              [6.0, 52],  // top right
              [5.9,  52], // top left
              [5.9,  51.5], // bottom left
              [6.0, 51.5]
          ]]
      }
  }];

    // Create a map with standard location
    map = L.map('map').setView([52.2, 6.5], 9);
  var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 14});   
  // Ask the user to get their current location
  map.locate({setView : true});
  // Add the tilelayer to the map
  map.addLayer(osm);

  L.geoJson(myPolygon, {
    style: myStyle
  }).addTo(map);

  // Add event listeners
  map.on('locationfound', myMarker);

The polygon outerlines are drawn, but with the standard blue color. Could someone point me to the right solution on how to do this right?

Thanks!

Upvotes: 1

Views: 237

Answers (1)

iH8
iH8

Reputation: 28638

You need fillColor and fillOpacity, see:

http://leafletjs.com/reference.html#path

Upvotes: 1

Related Questions