GeoJSON tutorial for beginners
This is the first article in a series about working with maps in web development. Here I want to break down a very important type of data, without which it is very difficult to imagine the work of maps in modern web applications. So today we will analyze what GeoJSON is and what it consists of and what it is needed for.
GeoJSON is a data format for representing geographic objects and their attributes. It is used to store and exchange geodata such as points, lines and polygons, as well as their associated attributes such as name, description, address, etc. If you want more technical and official explanations, visit the GeoJSON format page.
GeoJSON uses JSON text format to represent data, which makes it easily readable by humans and computers alike. In GeoJSON format, geometric objects are defined as Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon.
In GeoJSON, it is also possible to set the coordinate system and other parameters of geometric objects, such as geometry type, coordinate accuracy and other properties, but we’ll get to that in the next article.
GeoJSON has become a widely used data format in the field of geoinformatics and in software development.
There are a bunch of JavaScript libraries that use GeoJSON for working with geographic data. Some popular libraries:
- Mapbox GL JS — client-side JavaScript library for building web maps and web applications with Mapbox’s modern mapping technology.
- Leaflet — open-source JavaScript library for mobile-friendly interactive maps.
- Turf.js — JavaScript library for performing spatial operations and analysis on GeoJSON data.
- D3.js — JavaScript library for producing dynamic, interactive data visualizations in web browsers
- OpenLayers — is an open-source JavaScript library for displaying map data in web browsers as slippy maps.
- and many others…
Point 🔴
A Point in GeoJSON is like a location on a treasure map. It’s a specific spot on the map that can be identified using a set of coordinates (latitude and longitude). Just like you might use an “X marks the spot” to indicate where a treasure is buried, a Point in GeoJSON uses coordinates to show where something is located on the Earth’s surface.
For example, if you were making a map of your neighborhood and wanted to show where your house is, you could use a Point in GeoJSON to mark the exact location of your house on the map.
Overall, a Point is simply a way to represent a single location on a map.
Point GeoJSON representation:
{
"coordinates": [
8.308903076149363,
47.05038385401457
],
"type": "Point"
}LineString 📈
A LineString in GeoJSON is like a path on a treasure map. It’s a line that connects a series of points, and it can be used to show a route or a path between two or more places.
For example, imagine you’re making a treasure map that leads to a hidden treasure. Or you just want to find the way to the closest bakery 🥨
You might use a LineString to draw a path on the map that shows the route from the starting point to the treasure location. The LineString would be made up of a series of points that connect to form a line, just like a dot-to-dot drawing.
In GeoJSON, a LineString is a way to represent a series of connected points as a single object, making it easy to show a path or route on a map. It’s commonly used in applications such as navigation and transportation planning.
LineString GeoJSON representation:
{
"coordinates": [
[
8.310242689008646,
47.05429444841852
],
[
8.310504651721004,
47.05399445514598
],
[
8.309440079847974,
47.05356534791096
],
[
8.309228280208345,
47.05341345071696
],
[
8.309100085689579,
47.05285522481279
],
[
8.308498128818854,
47.05292737678937
]
],
"type": "LineString"
}Polygon 🔲
A Polygon in GeoJSON is like a shape on a treasure map. It’s a closed shape made up of straight lines, and it can be used to show the outline of an area, like a park, a lake, or a building.
For example, imagine you’re making a treasure map that leads to a castle. You might use a Polygon to draw the shape of the castle walls on the map. The Polygon would be made up of a series of points that connect to form a closed shape, just like drawing the outline of a castle on a piece of paper.
Polygon GeoJSON representation:
{
"coordinates": [
[
[
12.478129652015241,
41.9022826549635
],
[
12.478129652015241,
41.90136017129154
],
[
12.479303348926749,
41.90136017129154
],
[
12.479303348926749,
41.9022826549635
],
[
12.478129652015241,
41.9022826549635
]
]
],
"type": "Polygon"
}Actually, Polygon GeoJSON is really similar to LineString, but the shape is closed and usually, in Polygon the first and the last coordinates are the same Point. Please, take a look at the example above.
MultiPoint ⚪️
A MultiPoint is like a collection of points on a treasure map. It’s a group of individual points, each with its own latitude and longitude coordinates, and it can be used to show the locations of multiple things on a map.
For example, imagine you’re making a treasure map that shows the locations of hidden gems throughout a park. You might use a MultiPoint to mark the locations of each gem on the map. The MultiPoint would be made up of a series of individual points, each with its own coordinates, just like putting multiple dots on a piece of paper to show the locations of different gems.
MultiPont GeoJSON representation:
{
"type": "MultiPoint",
"coordinates": [
[
-73.984,
40.748
],
[
-73.985,
40.749
],
[
-73.986,
40.75
],
[
-73.987,
40.751
]
]
}MultiLineString 📈📉
A MultiLineString in GeoJSON is like a group of paths on a treasure map. It’s a collection of lines that connect a series of points, and it can be used to show multiple routes or paths between different places on a map.
For example, imagine you’re making a treasure map that leads to a treasure chest, and you want to show three different possible routes that someone could take to get there. You might use a MultiLineString to draw three different paths on the map, each made up of a series of connected points.
MultiLineString GeoJSON representation:
{
"type": "MultiLineString",
"coordinates": [
[
[
2.3415215150407676,
48.848216086115485
],
[
2.3407788857352045,
48.847325398150645
],
[
2.3380359484630446,
48.8480269147754
]
],
[
[
2.330406031247776,
48.84706528274708
],
[
2.3372693633740766,
48.84692340104834
],
[
2.3372933191584764,
48.84791656449744
]
],
[
[
2.332755904765321,
48.85020559607162
],
...,
[
2.336719866067824,
48.84788609233465
]
]
]
}MultiPolygon 🏔🌋🏝
A MultiPolygon in GeoJSON is like a group of shapes on a treasure map. It’s a collection of polygons, each made up of a series of connected points, and it can be used to show multiple areas or regions on a map.
For example, imagine you’re making a treasure map that shows different types of land in a park, such as a forest, a meadow, and a lake. You might use a MultiPolygon to draw three different shapes on the map, each made up of a series of connected points.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
2.291863239086439,
48.8577137262115
],
[
2.293452085617105,
48.856693553273885
],
[
2.2968403487010107,
48.85892279314069
],
[
2.2951175030651143,
48.86006886087142
],
[
2.291863239086439,
48.8577137262115
]
]
],
[
[
[
2.288226120523035,
48.86156752523257
],
[
2.2899681088877344,
48.86042149181674
],
[
2.290810388976098,
48.86063558796482
],
[
2.2909826735397587,
48.8611015587675
],
[
2.28947039792655,
48.862234983151495
],
[
2.288226120523035,
48.86156752523257
]
]
],
[
[
[
2.2912927602678224,
48.85709062155263
],
[
2.2905402133688426,
48.85661663833349
],
[
2.291917551492446,
48.855746990243716
],
[
2.2926328654095016,
48.85624492205244
],
[
2.2912927602678224,
48.85709062155263
]
]
]
]
}
}
]
}That’s it! We’ve taken apart all the basic types of elements in GeoJSON, I hope this data format is now much clearer and easier for you.
And last, I would also like to share with you a very useful tool for exploring and visualizing GeoJSON data directly in your browser — https://geojson.io.
If you suddenly do not understand some type of data, I advise you to try it in geojson.io and you will figure it out!
Stay tuned!
Reach me on LinkedIn 🚀
