How to view GeoJSONs

What is GeoJSON?

GeoJSON is a standard format for storing geographical information in a JSON. GeoJSONs support three main types of geographical data:

• Point: A single location, for example an address.
• Line: A group of points forming a line e.g., a road or a path.
• Polygon: A group of points forming a closed shape e.g., a country boundary or a building outline.

In the GeoJSON format, each of these is classified as a Geometry. Geometries are then included within a Feature alongside any properties you wish to store with them. Multiple Features can then be included within a FeatureCollection describe complex, real-world geographical data.

Here’s an example of a basic GeoJSON.

1{
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "geometry": {
7        "type": "Point",
8        "coordinates": [
9          10.6,
10          45.1
11        ]
12      },
13      "properties": {
14        "name": "A single point"
15      }
16    }
17  ]
18}
19

The most important aspect of the GeoJSON format is the geometry. This is where your geospatial data is actually stored. A Point is described by it’s longitude, then latitude in WGS84 decimal degrees in the coordinates array and has also been labelled here using the properties tag. When plotted onto a map, the example data looks as follows.

To make this plot, we’ve used geojson.io as it’s the quickest way to get data onto a map. We’ll cover some other plotting tools later in the blog.

When using GeoJSONs longitude always comes first, then latitude.

GeoJSON Linestring

Moving swiftly on to a more complex example, a GeoJSON can also be used to store a Linestring - a line of points. To create one, you need to make sure your coordinates field contains a list of latitude, longitude pairs.

1{
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "properties": {
7	      "name": "A single line",
8	      "stroke": "red"
9      },
10      "geometry": {
11        "coordinates": [
12          [
13            12.5638,
14            44.0499
15          ],
16          [
17            11.3364,
18            44.4894
19          ],
20          [
21            9.6897,
22            45.0566
23          ]
24        ],
25        "type": "LineString"
26      }
27    }
28  ]
29}

In this example, a stroke property has also been added. This enables you to set the style when using geojson.io and other GeoJSON plotters.

GeoJSON Polygon

If you want to represent a closed shape of some description such as a country’s border or a building outline, you’ll need to use a Polygon . Let’s take a look at an example.

1{
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "properties": {
7	       "name": "Italy",
8	       "fill": "red",
9	       "stroke": "green"
10      },
11      "geometry": {
12        "coordinates": [
13          [
14            [
15              14.2290,
16              35.7743
17            ],
18            [
19              19.6292,
20              40.2953
21            ],
22            [
23              12.8553,
24              47.7207
25            ],
26            [
27              5.8826,
28              46.0708
29            ],
30            [
31              7.9916,
32              38.495
33            ],
34            [
35              14.2290,
36              35.7743
37            ]
38          ]
39        ],
40        "type": "Polygon"
41      }
42    }
43  ]
44}

A Polygon is very similar to a LineString in structure; however, it’s vital that the final coordinate matches the first one to form a closed shape. This means you need at least 4 points to make Polygon. A Polygon should also follow the right-hand rule, whereby coordinates are logged counterclockwise. Most GeoJSON parsers won’t reject your GeoJSON for this reason though, just warn you your data is stored incorrectly!

Multi Points, LineStrings, and Polygons

You may find that you have a geometry which is made up of multiple points, lines or polygons. For example, Naurt’s GeoJSON response can contain multiple doors for a single building. Due to this, the MultiPoint geometry type is the most suitable for the data. The same follows for MultiLineString and MultiPolygon.

Let’s take a look at some examples of Multi geometries.

Multipoint

1{
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "properties": {},
7      "geometry": {
8        "coordinates": [
9          [
10            12.4648,
11            41.8948
12          ],
13          [
14            13.4648,
15            41.8948
16          ],
17          [
18            14.4648,
19            41.8948
20          ]
21        ],
22        "type": "MultiPoint"
23      }
24    }
25  ]
26}

MultiLine

1
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "properties": {},
7      "geometry": {
8        "coordinates": [
9          [
10            [
11              9.6813,
12              44.6369
13            ],
14            [
15              11.5709,
16              44.293
17            ],
18            [
19              10.9937
20              43.6332
21            ],
22            [
23              13.2048,
24              43.381
25            ]
26          ],
27          [
28            [
29              8.6813,
30              41.6369
31            ],
32            [
33              9.5700,
34              40.9388
35            ],
36            [
37              10.9939
38              41.6330
39            ],
40            [
41              10.2048,
42              42.3817
43            ]
44          ]
45        ],
46        "type": "MultiLineString"
47      }
48    }
49  ]
50}

MultiPolygon

1{
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "properties": {},
7      "geometry": {
8        "coordinates": [a
9          [
10            [
11              [
12                10.9039,
13                44.1710
14              ],
15              [
16                10.9039,
17                43.4256
18              ],
19              [
20                11.7663,
21                43.4256
22              ],
23              [
24                11.7663,
25                44.1710
26              ],
27              [
28                10.9039,
29                44.1710
30              ]
31            ],
32            [
33              [
34                8.9039,
35                44.1710
36              ],
37              [
38                10.7663,
39                44.1710
40              ],
41              [
42                10.7663,
43                43.4256
44              ],
45              [
46                9.9039,
47                43.4256
48              ],
49              [
50                8.9039,
51                44.1710
52              ]
53            ]
54          ]
55        ],
56        "type": "MultiPolygon"
57      }
58    }
59  ]
60}

‍

GeoJSON FeatureCollection

If you’re looking to store geometries of different types, then you’ll need to store them as their own Feature and combine multiple Features into a FeatureCollection. Let’s take a look at what this is like.

1{
2  "type": "FeatureCollection",
3  "features": [
4    {
5      "type": "Feature",
6      "properties": {},
7      "geometry": {
8        "coordinates": [
9          9.6402,
10          44.5834
11        ],
12        "type": "Point"
13      }
14    },
15    {
16      "type": "Feature",
17      "properties": {},
18      "geometry": {
19        "coordinates": [
20          [
21            10.3425,
22            44.9531
23          ],
24          [
25            11.0309,
26            44.0897
27          ]
28        ],
29        "type": "LineString"
30      }
31    },
32    {
33      "type": "Feature",
34      "properties": {},
35      "geometry": {
36        "coordinates": [
37          [
38            [
39              8.8063,
40              45.1480
41            ],
42            [
43              8.8060,
44              43.849
45            ],
46            [
47              11.5062,
48              43.8496
49            ],
50            [
51              11.5062,
52              45.1480
53            ],
54            [
55			        8.8063,
56              45.1480
57            ]
58          ]
59        ],
60        "type": "Polygon"
61      }
62    }
63  ]
64}

‍

Plotting a GeoJSON

GeoJSON.io

The easiest way to plot a GeoJSON to see what information is present is with GeoJSON.io. You can simply paste in your GeoJSON and view the data on a wide range of different maps. It has support for styles via the properties of the GeoJSON and best of all, let’s you create your own GeoJSONs with an interactive tool.

All of the plots in this blog so far have been produced using GeoJSON.io

Kepler.gl

If you have a large amount of data then you’ll need a more robust plotting tool. Kepler.gl lets you plots millions of features as well as add labels, filters, and multiple different data sources.

Mapbox SDKs

If you want to programmatically plot GeoJSON data whether on mobile or Web, then we’d recommend the MapBox SDKs. They have functions built-in to style and plot GeoJSONs. Here’s an example where MapBox demonstrating the plotting of an external GeoJSON file.