1

I am new to Leaflet.js and I would like to apply specific styling to the Geojson layer>

This is my code so far:

# geojson data
var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              78.25218200683594,
              17.169658620146077
            ],
            [
              78.24806213378905,
              17.124385992430643
            ],
            [
              78.3270263671875,
              17.128323180676293
            ],
            [
              78.32771301269531,
              17.17097070556175
            ],
            [
              78.25218200683594,
              17.169658620146077
            ]
          ]
        ]
      }
    }
  ]
}


# map id
map = map_d9d7d7866ebf4532b5adbeac7253c85f

test = "test"

L.geoJson(geojson, {
onEachFeature: function(feature,layer) {
layer.bindTooltip(test);
}
}).addTo(map);


# styling options
var exteriorStyle = {
    "stroke": "blue",
    "stroke-width": 3,
    "stroke-opacity": 0.7,
    "fill": "#494949",
    "fill-opacity": 0
};

# map geojson layer with styling
var exteriorMaskLayer = L.geoJson(geojson, {style: exteriorStyle}).addTo(map);

However, when I run it, I get the following:

enter image description here

Desired Result:

enter image description here

I would like this result as specified in the styling:

What am I doing wrong here?

  • Do read leafletjs.com/reference-1.6.0.html#geojson-style carefully. – IvanSanchez Jul 13 at 23:13
  • Hi Ivan, I read that documentation before but I still don't understand. Could you explain please with my example? – Ishack Marshook Jul 13 at 23:19
  • The documentation states that the style option must be a Function (which shall return a set of Path options). Now look at your code and tell me: is the value of your style option a Function? – IvanSanchez Jul 14 at 0:03
  • It's definitely not a function. How can turn in into a function please? Sorry I'm very new to JavaScript. Could you give me a example here? – Ishack Marshook Jul 14 at 0:08
  • Read the tutorials. And make sure you don't add the GeoJSON data twice, since adding a second L.GeoJSON with the same data to a Leaflet map will use the default blue scheme, will display on top of the other instance, and you'll be confused. – IvanSanchez Jul 14 at 0:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.