Building applications with map data
What is OpenStreetMap?
OpenStreetMap is a free database of labelled map data with over 9 billion labelled features. It’s used to power navigation apps, search for nearby restaurants and shops, finding campsites near National Parks, and infinitely more use cases.
- Highway, roads, and bridges
- Building outlines
- Coastline and parks
Finding the correct tags
Each feature in OpenStreetMap is tagged, often 10+ times. Each tag is a key and value combination in the formkey=value
.
For example, the above features could be tagged:
highway=primary
,highway=residential
,man_made=bridge
building=*
natural=coastline
,leisure=park
*
(asterisk) to signal any value should be accepted. This is especially useful for buildings,
where building=yes
and building=house
could both be drawn as buildings, and names, to filter out
unnamed items for labelling.
Finding the right combination of tags for the features you want to download starts with
searching the TagInfo website for your target feature.
To help users find the right tag inside your application, you can embed an OpenStreetMap tag search
in your map. This lets users search “National Park” and get served potential OSM tags that are relevant to their query.
Download features as GeoJSON
Once you’ve identified the right tags, you can download the features in an area. One type of feature you might want to download from OSM is hiking trails near a user. We can get a list of walking paths by exporting from OpenStreetMap with the taghighway=path
and filter for named hiking trails
by also asking for
name=*
.
We can download features by hitting the OSM extract API with our tags highway=path&name=*
.
Here’s an example searching in Australia’s state of Tasmania:
features
is an array of the downloaded features. Here’s one of those features from our hiking trail extract,
the “Wilson Bight Track” hiking trail in Tasmania, Australia:
properties
as a JSON dictionary. Keys are typically lowercase
and describe the geometry’s purpose on the map. The geometry contains coordinates in (longitude, latitude) order.
Mapping the features
If you are downloading these features to a browser, we recommend using the MapLibre project because it’s free and open source. Here’s an example of rendering our downloaded features in the map. This could be useful for dynamically rendering features near a user.Building the map
First, we’ll create a map. You can follow the MapLibre quickstart here.Adding our hiking trails
We can insert the hiking trail GeoJSON we downloaded above directly as a GeoJSONsource
: