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?


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? – Faizalprabowo Apr 3 '17 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. – Vitor Sapucaia Apr 3 '17 at 9:26
  • 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 – Asimov Apr 14 at 5:39

Your Answer

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

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