Maps
For web developers and enthusiasts

Who?
Konstantin Delchev
http://gis.stackexchange.com/users/8174/kode
https://twitter.com/kdelchev

Contents
1. Map projections
2. Map providers
3. How to create your own map

Earth…

…is flat…

…when using projections.
• Projections
• Datums
• Geocentric datums
• WSG84
• Local datums
• NAD83
• NAD27
• ED1950

Degrees Minutes Seconds

Latitude and Longitude
• Latitude, Longitude = 42° 41' 53.0916" , 23° 19' 18.894“ (geographic
coordinates)
• Latitude = 42 + 41/60 + 53.0916/3600 = 42.698081 (decimal)
• Longitude = 23 + 19/60 + 18.894/3600 = 23.317191 (decimal)
• Latitude, Longitude = 42.698081, 23.317191 (in decimal)
• 1 min ≈ 1.85km
• 1 sec ≈ 31m
• Latitude distance ≈ 42.67 * 60 * 1.85 ≈ 4 736km
• Longitude distance ≈ 23.32 * 60 * 1.85 ≈ 2 588km

• Use at least 6
symbols after
the dot for keeping
max precision
• Degrees vary in
different places
in the world
by 21.5km

Universal Traverse Mercator
UTM – 328204 E (easting), 4746040 N (northing)

Aspects of projections
•
•
•
•
•
•
•
Distance
Scale
Direction
Bearing
Shape
Area
Distance

Equidistant cylindrical map
• Showing distances (km) between lines connected by identical lines. Each graphic scale
is only valid along its own parallel, or the one symmetrically opposite the Equator.
Only the vertical scale is valid anywhere, and none of the four is valid if rotated.

Equatorial van der Grinten III map
• Parallels are straight but not standard lines.

Equatorial cylindrical equidistant map
• Equatorial cylindrical equidistant map showing standard lines.
Markers divide segments proportionally.

Transverse cylindrical equidistant map
• Transverse cylindrical equidistant map showing standard
lines, which no more coincide with meridians and the Equator
except accidentally. Markers divide segments proportionally.

Equatorial sinusoidal map
• Equatorial sinusoidal (Sanson-Flamsteed) map showing
standard lines. Markers divide segments proportionally.

Normal Werner map
• Normal Werner map showing standard lines. Markers divide
segments proportionally.

Polar azimuthal equidistant map
• Polar azimuthal equidistant map showing standard lines.
Markers divide segments proportionally.

Which projection is best
•
•
•
•
•
Depends on the purpose
What we want to show on the map
Know target audience
Put important information on map
More in “How to lie with maps”
http://imgs.xkcd.com/comics/map_projections.png

Tools
• Proj4 – conversions between cartographic projections
• http://trac.osgeo.org/proj/
• GEOS – geometry processing and analysis
• http://trac.osgeo.org/geos/
• GDAL – geometry data abstraction, translation and processing
• http://www.gdal.org/

More information

Map providers

Google Maps
• https://www.google.com/maps/preview
• Free for commercial use with public access with 25 000
requests per day
• Zoom level up to 18-23 depend on area
• Started 2004 as C++ application by Lars and Jens Rasmussen
from Sydney’s Where 2 Technologies
• 2005 first announced
• Satellite images updated regularly, not older than 3y
• 54% usage of mobile apps

Bing Maps
•
•
•
•
•
http://www.bing.com/maps/
API with 90 days trial
December 2005 first release
2009 rebranded from Live Search Maps to Bing Maps
Based on MS MapPoint (.NET application to view, edit and
integrate maps) and TerraServer (free repository of aerial
imagery and topographic maps provided by USGS, known as
MS Research Maps as of 2010)

MapQuest
• http://www.mapquest.com/
• API, free with app key
• Free map tiles
• Static map
•
•
•
•
Founded 1967 as Cartographic Services
1994 Renamed to GeoSystems Global Corporation
1996 launched as a web service
2000 Acquired by AOL

ArcGIS Online (ESRI)
• http://www.arcgis.com/home/webmap/viewer.html
• ESRI
• Founded 1969, California USA
• API, paid
• ArcGIS desktop application
•
•
•
•
Load data from database
Creating and using maps as shape file
Compiling geographic data
Analyzing mapped information
• ArcGIS reader
• 40% market share in GIS software
• Paid license
• Proprietary data formats

HERE maps
• http://here.com/
• API
• Map tiles
• Static maps
•
•
•
•
•
•
•
•
2001 as SmartGo
2006 acquired gate 5 – Berlin-based route planning software
2007 acquired NAVTEQ
2008 acquired Plazes, Plum, Dopplr - geo related web sites
2010 acquired Metacarta
2011 bought earthmine
2011 Former Ovi Maps (2007-2010) renamed to Nokia Maps (2011-2012)
2012 rebranded to HERE Maps

CloudMade
•
•
•
•
http://maps.cloudmade.com/
Co-founded by Steve Coast in 2007
Many OSM based GIS APIs and services
Map style editor

OpenStreetMap
•
•
•
•
•
•
http://www.openstreetmap.org/
Collaborative project starter by Steve Coast in UK in 2004
2006 OpenStreetMap Foundation created to support the project
2006 OSM reuses Yahoo aerial photography
AND donated road data
The State of the Map conference
• first held 2007
• 9 000 registered users
• Sponsored by Google, Yahoo and Multimap
• 1 million users (not all contributing)
• Open Database License
• Uses Ruby On Rails for back end
Registered users

Creating own map server

What we need
• Tiles - images of 256 x 256 pixels each
• Already pre-rendered or rendered on demand from map
database
• Use from 3rd party provider (at charge or free)
• JavaScript API library
• OpenLayers – powerful and long-established
• Leaflet – lightweight and easy-to-learn

Open layers

Leaflet

Mapstraction
•
•
•
•
•
•
•
•
•
•
http://mapstraction.com/
CloudMade
ESRI ArcGIS
Google
MapQuest and MapQuest Open
Microsoft Bing
Nokia HERE
OpenLayers
Ordnance Survey OpenSpace
Yandex

What is in the black box
•
•
•
•
•
Planet file (33Gb of data so far) or extract (Geofabrik, Metro Extracts, CloudMade)
PostgreSQL + PostGIS
Apache + mod_tile for serving tiles
Mapnik
slippy_map

Put data in database
•
•
•
•
•
Get planet file or extract
Use osm2pgsql to import the data into Postgres
Add world boundaries, coastlines etc.
Modify stylesheets (not required)
render_list to pre-render tiles

Example maps
• http://en.wikipedia.org/wiki/List_of_online_map_services
• http://alpha.map1.eu/
• http://bihor-county.map2web.eu/

Stamen watercolor

Stamen toner

Example of Mars