I have this json data:

var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]

It'is easy to visualize this on leaflet map by doing this:

L.geoJSON(states, {
    style: function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};

But i need the "type" of states is "polygon" not "geojson", so the result will be like this:

var states_polygon = L.polygon([[

I knew that both variable will be give the same visual on leaflet map but all i need is the object type of that variable as polygon.. How can i do this?

1 Answer 1


Instead of reading the GeoJSON straight forward, you can use a .forEach js function to map every geometry, like this:

// your json var: states
states.forEach(function(state) {
    var polygon = L.polygon(state.geometry.coordinates, {
        weight: 1,
        fillOpacity: 0.7,
        color: 'white',
        dashArray: '3'
  • Thanks but, where should i put those logic? Commented Apr 3, 2017 at 7:33
  • just after your map initialization, for example: "var map = L.map('mapid').setView([52.5243700, 13.4105300], 8);". After this, load the geojson in your states var, then use the forEach. And just take out the "L.geoJSON(states) ..." block, as you gonna load everything manually. Commented Apr 3, 2017 at 9:26
  • 6
    Keep in mind that the coordinates in GeoJSON are pairs of longitude, latitude. Leaflet expects latitude, longitude pairs. So you have to flip the coordinates first. macwright.org/lonlat
    – Dawied
    Commented Apr 14, 2019 at 5:39

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.