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...
• Use at least 6
symbols after
the dot for keeping
max precision

• Degrees vary in
different places
in the world
by 21.5k...
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 onl...
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 seg...
Transverse cylindrical equidistant map
• Transverse cylindrical equidistant map showing standard
lines, which no more coin...
Equatorial sinusoidal map
• Equatorial sinusoidal (Sanson-Flamsteed) map showing
standard lines. Markers divide segments p...
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 proporti...
Which projection is best
•
•
•
•
•

Depends on the purpose
What we want to show on the map
Know target audience
Put import...
Tools
• Proj4 – conversions between cartographic projections
• http://trac.osgeo.org/proj/

• GEOS – geometry processing a...
More information
Map providers
Google Maps
• https://www.google.com/maps/preview
• Free for commercial use with public access with 25 000
requests per da...
Bing Maps
•
•
•
•
•

http://www.bing.com/maps/
API with 90 days trial
December 2005 first release
2009 rebranded from Live...
MapQuest
• http://www.mapquest.com/
• API, free with app key
• Free map tiles
• Static map

•
•
•
•

Founded 1967 as Carto...
ArcGIS Online (ESRI)
• http://www.arcgis.com/home/webmap/viewer.html
• ESRI
• Founded 1969, California USA

• API, paid
• ...
HERE maps
• http://here.com/
• API
• Map tiles
• Static maps

•
•
•
•
•
•
•
•

2001 as SmartGo
2006 acquired gate 5 – Berl...
CloudMade
•
•
•
•

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

http://www.openstreetmap.org/
Collaborative project starter by Steve Coast in UK in 2004
2006 O...
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
• Us...
Open layers
Leaflet
Mapstraction
•
•
•
•
•
•
•
•
•
•

http://mapstraction.com/
CloudMade
ESRI ArcGIS
Google
MapQuest and MapQuest Open
Microso...
What is in the black box
•
•
•
•
•

Planet file (33Gb of data so far) or extract (Geofabrik, Metro Extracts, CloudMade)
Po...
Put data in database
•
•
•
•
•

Get planet file or extract
Use osm2pgsql to import the data into Postgres
Add world bounda...
Example maps
• http://en.wikipedia.org/wiki/List_of_online_map_services
• http://alpha.map1.eu/
• http://bihor-county.map2...
Stamen watercolor
Stamen toner
Example of Mars
Maps
Maps
Maps
Maps
Maps
Upcoming SlideShare
Loading in …5
×

Maps

786 views

Published on

Maps for web developers and enthusiasts
1. Projections
2. Providers
3. Own map server

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
786
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Maps

  1. 1. Maps For web developers and enthusiasts
  2. 2. Who? Konstantin Delchev http://gis.stackexchange.com/users/8174/kode https://twitter.com/kdelchev
  3. 3. Contents 1. Map projections 2. Map providers 3. How to create your own map
  4. 4. Earth…
  5. 5. …is flat…
  6. 6. …when using projections. • Projections • Datums • Geocentric datums • WSG84 • Local datums • NAD83 • NAD27 • ED1950
  7. 7. Degrees Minutes Seconds
  8. 8. 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
  9. 9. • Use at least 6 symbols after the dot for keeping max precision • Degrees vary in different places in the world by 21.5km
  10. 10. Universal Traverse Mercator UTM – 328204 E (easting), 4746040 N (northing)
  11. 11. Aspects of projections • • • • • • • Distance Scale Direction Bearing Shape Area Distance
  12. 12. 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.
  13. 13. Equatorial van der Grinten III map • Parallels are straight but not standard lines.
  14. 14. Equatorial cylindrical equidistant map • Equatorial cylindrical equidistant map showing standard lines. Markers divide segments proportionally.
  15. 15. 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.
  16. 16. Equatorial sinusoidal map • Equatorial sinusoidal (Sanson-Flamsteed) map showing standard lines. Markers divide segments proportionally.
  17. 17. Normal Werner map • Normal Werner map showing standard lines. Markers divide segments proportionally.
  18. 18. Polar azimuthal equidistant map • Polar azimuthal equidistant map showing standard lines. Markers divide segments proportionally.
  19. 19. 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
  20. 20. 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/
  21. 21. More information
  22. 22. Map providers
  23. 23. 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
  24. 24. 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)
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. CloudMade • • • • http://maps.cloudmade.com/ Co-founded by Steve Coast in 2007 Many OSM based GIS APIs and services Map style editor
  29. 29. 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
  30. 30. Creating own map server
  31. 31. 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
  32. 32. Open layers
  33. 33. Leaflet
  34. 34. Mapstraction • • • • • • • • • • http://mapstraction.com/ CloudMade ESRI ArcGIS Google MapQuest and MapQuest Open Microsoft Bing Nokia HERE OpenLayers Ordnance Survey OpenSpace Yandex
  35. 35. 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
  36. 36. 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
  37. 37. Example maps • http://en.wikipedia.org/wiki/List_of_online_map_services • http://alpha.map1.eu/ • http://bihor-county.map2web.eu/
  38. 38. Stamen watercolor
  39. 39. Stamen toner
  40. 40. Example of Mars

×