Free · Colour areas by a number

GeoJSON Choropleth Map Maker

Shade GeoJSON polygons from low to high using any number field in the data.

Live interactive map
Local file handling
PNG, JSON, or GeoJSON

Build the map

Use the example or add your own GeoJSON. Your data stays in this tab.

Polygon GeoJSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "West",
        "value": 24,
        "height": 45
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -79.5,
              43.62
            ],
            [
              -79.4,
              43.62
            ],
            [
              -79.4,
              43.7
            ],
            [
              -79.5,
              43.7
            ],
            [
              -79.5,
              43.62
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Centre",
        "value": 68,
        "height": 110
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -79.4,
              43.62
            ],
            [
              -79.31,
              43.62
            ],
            [
              -79.31,
              43.7
            ],
            [
              -79.4,
              43.7
            ],
            [
              -79.4,
              43.62
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "East",
        "value": 92,
        "height": 175
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -79.31,
              43.62
            ],
            [
              -79.22,
              43.62
            ],
            [
              -79.22,
              43.7
            ],
            [
              -79.31,
              43.7
            ],
            [
              -79.31,
              43.62
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "North West",
        "value": 46,
        "height": 80
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -79.5,
              43.7
            ],
            [
              -79.4,
              43.7
            ],
            [
              -79.4,
              43.77
            ],
            [
              -79.5,
              43.77
            ],
            [
              -79.5,
              43.7
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "North Centre",
        "value": 77,
        "height": 135
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -79.4,
              43.7
            ],
            [
              -79.31,
              43.7
            ],
            [
              -79.31,
              43.77
            ],
            [
              -79.4,
              43.77
            ],
            [
              -79.4,
              43.7
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "North East",
        "value": 35,
        "height": 60
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -79.31,
              43.7
            ],
            [
              -79.22,
              43.7
            ],
            [
              -79.22,
              43.77
            ],
            [
              -79.31,
              43.77
            ],
            [
              -79.31,
              43.7
            ]
          ]
        ]
      }
    }
  ]
}

Background mapNumber fieldColour rampFill opacity

No background tiles

The camera JSON updates when you move the map or change a field.Ready

Starting the interactive mapMapLibre is loading in this tab.

Centre-79.3832, 43.6532

Zoom10.5

Pitch0°

Bearing0°

Three simple steps

How to use it

Add polygons with a number in their properties.
Choose the number field and colour ramp.
Move and zoom the map, then download the view as a PNG.

Your pasted map data stays in this tab

MapLibre draws your GeoJSON in the browser. Bookify does not upload or save it. Street backgrounds request public demo tiles, while Paper and Night use no background tiles. A pasted style may request the sources named inside that style.