Practice: Visualizati

on Using OpenStreetMa
p Data
Content
• Data Features
• Data Extractions
• Data Applications
OpenStreetMap Basics
• OpenStreetMap (OSM) is a collaborative project tha
t creates and distributes free geographic data for th
e world.
• Not “Open Street Maps”
• Created by Steve Coast in the UK in 2004
OSM homepage (https://www.openstreetmap.org/)
Data Features
• “Wikipedia of Maps” — it’s editable by anyone with
an account.
• It’s a prominent example of volunteered geographic
information.
• It’s a very large database of XML data.
• It changes and grows all the time.
• It’s data quality varies across the world.
Data Features
• It’s not a rendered map, rather than the map itself,
the data generated by the project is considered its
primary output.
• It’s not proprietary—anyone can use it for free as l
ong as they provide proper credit
• It’s not controlled by an authority—it is driven and
maintained by a large community of contributors a
nd data consumers
Mapping in Haiti
Mapping in Haiti
OSM Data Editing Tools
Web-based editor
• iD — default editor, html5
• Potlatch — old version, flash
More powerful desktop application, for advanced use
rs
• JOSM (Java OpenStreetMap, cross platform)
• Merkaartor
OSM iD Editor(recommended)
• OpenStreetMap uses a topological data structure,
with four core elements : node, way, relation and t
ag (also known as data primitives).

• Nodes are points with a geographic position, stored

as coordinates according to WGS 84. They are used
to represent map features without a size, such as
points of interest.
• Ways are ordered lists of nodes, representing a pol
yline, or possibly a polygon if they form a closed loo
p. They are used both for representing linear featur
es and areas.

…
• Tags are key-value pairs. They are used to store met
adata about the map objects (such as their type, th
eir name and their physical properties). Tags are no
t free-standing, but are always attached to an objec
t: to a node, a way or a relation. A recommended o
ntology of map features (the meaning of tags) is ma
intained on wiki page of OSM.
• Relations are used for representing the relationship
of existing nodes and ways. Relations are ordered li
sts of nodes, ways and relations (together called "m
embers"), where each member can optionally have
a "role" (a string). Examples include bus routes, ad
ministrative boundaries and areas with holes.
Data Extractions
• The main copy of the OSM data is stored in OSM's
main database. The main database is a PostgreSQL
database with PostGIS extension, which has one tab
le for each data primitive, with individual objects st
ored as rows. All edits happen in this database, and
all other formats are created from it.
• For data transfer, several database dumps are creat
ed, which are available for download. The complete
dump (the OpenStreetMap data in one file, XML or
PBF format) includes all the nodes, ways and relatio
ns that make up the map. It is a big file about 1000
GB.
• There are also files called extracts which contain Op
enStreetMap data for individual continents, countri
es, and metropolitan areas.
• Homepage export tool

https://api.openstreetmap.
org/api/0.6/map?
bbox=114.3487900,
30.5275100, 114.3622000,
30.5340100
Get original XML file,
need further conversion
to be used in practice
• Planet OSM — Regularly updated copies of the co
mplete OpenStreetMap database
• Each week, a new and complete copy of all data in
OpenStreetMap is made available as both a compre
ssed XML file and a custom PBF format file. Also ava
ilable is the 'history' file which contains not only up-
to-date data but also older versions of data and del
eted data items.

still very big although

compressed, good
choice if study area is
whole world
• Geofabrik — Regularly-updated extracts of continen
ts, countries, and selected cities
•  This server has data extracts from the OpenStreet
Map project which are normally updated every day.
You can select any continent and then country of in
terest from the list.

Support shapefile,
size is reasonable
 • QGIS

Work directly with
provided data
Commonly used
data format
Flexible extent
QuickOSM plugin, based on OverPass API, support key value query
• ArcGIS Editor for OpenStreetMap
• Overpass Turbo (recommended)
• A web-based data filtering tool for OpenStreetMap
• With Overpass Turbo you can run Overpass API que
ries and analyze the resulting OSM data interactivel
y on a map. There is an integrated Wizard which ma
kes creating queries easy.
• If you’d like to extract OpenStreetMap features pro
grammatically rather than with a user interface, you
can check out the Overpass API for more informatio
n.
input your query on the left, click ‘run’, features you queried will be highlighted in the map
• First, you need to find the proper tags for those feat
ures you want to download. You can do this by ope
ning OpenStreetMap and clicking a feature to find it
s tags or by searching the OpenStreetMap Map Fea
tures wiki. By searching the wiki you can find the ke
ys and values that most closely resemble the featur
es you want to query.
• When you first launch Overpass Turbo, it starts you
off with an example for querying drinking fountains.
Overpass Turbo uses a simplified version of the XQu
ery to query OpenStreetMap features.
• You must click Run for the results to be shown on t
he map. Once you’ve executed the query, Overpass
will highlight the features that meet the query cond
itions.
• Take a closer look at the structure of the query:

• The query starts by looking for features with the

type node. Then it checks the key amenity against
the value drinking_water. A bounding box
(southwest and northeast coordinate pairs) can be
issued, or in this case, a bbox variable will grab the
current window’s extent.
• Start by using the search tool to locate and zoom to
the area where you are interested in
• Click the Wizard button from the toolbar and type i
n something you want to download in the Query Wi
zard window
• Click Run. You should see that Overpass has highlig
hted the features on the map.
• Now that Overpass has found the features, export t
hem. Click the Export button in the toolbar, then sel
ect data format.
Data Application
• Now that you have downloaded your data, you can start bui
lding with Mapbox by uploading your data as a dataset or til
eset in Mapbox Studio, and creating a new custom style usi
ng the Mapbox Studio style editor.
• Another easy way to display OSM data you have just downl
oaded is using Mapbox GL JS, you can load and visualize you
r GeoJSON file with only a few JavaScript codes and a simpl
e server.
• If you have loads of data and want to manage them efficien
tly, build your own server and database to store and publish
your data. For example, use the combination of Tomcat, Ge
oServer, PostgreSQL (PostGIS).
Experiment: Display 3D buildings in Mapbox using da
ta extracted from OpenStreetMap
Steps:
1. Download data (Any of the several methods descri
bed in the previous section, recommend OverPass Tu
rbo)
2. Process data (Desktop GIS software such as QGIS o
r ArcGIS)
3. Visualize data (Mapbox Studio or Mapbox GL JS)
Download data
Take 3D buildings data in Manhattan as an example
1. Open OverPass Turbo website(https://overpass-turbo.eu/)
2. Move the map to the mapping area. Search for a location using the search bar, zoom in to a
small area or manually select a bounding box to limit the size of data.

3. Use the “Wizard” menu option to search for map features, and automatically build queries
like this.
4. Run the queries, features you queried are highlighted in the map
5. Select the “Export” menu option, choose a file format for your data, your
data will be immediately downloaded
Process data

1. Open buildings data in QGIS

2. Right click the data item in layer panel, open attribute table, sort the height in ascending
order by clicking the field name, we can find that some buildings lack height information,
without these information we can’t display them in 3D
3. Suppose their height is 10 meters for example, select those features in attribute table,
toggle edit mode to start editing, open field calculator and set their height to 10.
4. Because the type of height field is string, use field calculator to create a new
decimal number field, and set its value according to height field. You can optionally
delete unrelated fields to make the file smaller. Toggle edit mode to save the changes.
Visualize data using Mapbox Studio

1. Create a new style, choose ‘Basic’ as

template and start customization
2. Move to mapping area,
Manhattan, New York City
3. Add new layer, upload the data
source, select the file that has just
been processed
4. Select the data that has just been uploaded
as data source, select fill-extrusion as layer
type
5. Set layer style, set the height and color according to the actual height of the
building
6. Hold the right mouse button to adjust the view
of the map. Publish and share it with others.
Visualize data using Mapbox GL JS (optional work)
• Mapbox GL JS is a popular
tool for spatial data
visualization, you can
visualize 3D building data
with only 50 lines of codes.
• One of the advantage of it
over Mapbox Studio is that
you can store your data in
your own server for safety.
• Open your text editor and
create a HTML file named
‘index.html’ and copy these
codes.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display OSM Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYXJzbHh5IiwiYSI6ImNqZzRzemViajJ4MWUzM3Bjc3Z2M283ajMifQ.VuhGIVxu7Y9H7V4gUxTMdw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-73.952,40.782],
zoom: 15,
pitch: 50,
});
map.on('load', function () {
map.addSource('Manhattan',{
'type': 'geojson',
'data': 'export.geojson'//'Manhattan.geojson'
});
map.addLayer({
'id': 'Manhattan',
'type': 'fill-extrusion',
'source': 'Manhattan',
'paint': {
'fill-extrusion-color': [
'interpolate',
['linear'],
['get', 'h'],
0, 'rgb(255,255,191)',
75, 'rgb(253,174,97)',
150, "rgb(215,25,28)",
],
'fill-extrusion-height': ["get", "h"],
'fill-extrusion-opacity': 0.8
}
});
});
</script>
</body>
</html>
Explanation

Add your access

token. You can find it
on your Mapbox
Account page
Change the center of
the map to
Manhattan

It’s difficult to see the

3D effect because the
default map view
looks straight “down”.
Adjust the pitch to 50
degrees and make the
3D buildings easier to
see.
In order to make sure the rest of the
code can execute, it needs to live in a
callback function that is executed
when the map is finished loading.
map.on('load', function() {
// the rest of the code will go in here
});
Add the geojson you
processed as the source for
your 3D buildings. Make sure
the geojson data is in the
same folder as ‘index.html’.
Use the addLayer method to
create a new layer for your
buildings data.
Set the type of this layer to
‘fill-extrusion’.
Make use of the paint
properties to fine-tune your
building’s appearance.
Set a different color for each
of the building depending on
the height.
Extrude the buildings
according to their height
property.
• Because you load data from external file, due to browsers' same origin policy securi
ty restrictions, loading webpage from a file system will fail with a security exception.
• Many programming languages have simple HTTP servers built in. They are not as ful
l featured as production servers such as Apache or NGINX, however they should be
sufficient for testing this simple web application.
• If you have installed Node or Python(automatically installed with ArcGIS), input the
following codes in command line tools.
• Node.js server

• Python server

• Input the URL ‘localhost:8080’ in browser

The finished map with data stored on your own server