Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683...
Transcript of Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683...
![Page 1: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/1.jpg)
Steve [email protected]
Making Your Own MapsPGCon 2012
http://8bitcity.com/map CC-BY-SA OpenStreetMap & Contributors
![Page 2: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/2.jpg)
Steve SingerAmateur Cartographer
http://www.flickr.com/photos/tinker-tailor/4284883477/
![Page 3: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/3.jpg)
VolumeWhy Make Your Own Maps
http://www.flickr.com/photos/kman999/750263932
![Page 4: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/4.jpg)
Show things not on other mapsWhy Make Your Own Maps
Phoenix Zoo: CC-BY-SA OpenStreetmap & Contributors
![Page 5: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/5.jpg)
Only Show the things you care aboutWhy Make Your Own Maps
CC-BY-SA: http://kartograph.org/showcase/italia/
![Page 6: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/6.jpg)
https://commons.wikimedia.org/wiki/File:Apple_Logo.svg
Making Their Own Maps
![Page 7: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/7.jpg)
A Map to the party
http://www.mapexplorer.org/pgconmap
![Page 8: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/8.jpg)
CC-BY Thomas Hasse
OpenStreetMap
![Page 9: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/jyllish/3497579854/
Free Data
![Page 10: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/10.jpg)
http://planet.openstreetmap.org
Planet Dumps
![Page 11: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/11.jpg)
Extracts – By Country
User defined Extracts
http://download.geofabrik.de/osm/
http://www.overpass-api.de/
wget -O map.osm 'http://overpass.osm.rambler.ru/cgi/interpreter?data=<union> <bbox-query s="45.41" n="45.43" w="-75.69" e="-75.67" /> <recurse type="node-relation" into="rels"/> <recurse type="node-way"/> <recurse type="way-relation"/></union><print/>'~
![Page 12: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/12.jpg)
Osm2pgsqlplanet.xml
postgis
planet.pbf
osmosis
minute diffs
Data Processing
map.osm
![Page 13: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/13.jpg)
Points Lines Polygons
Three Types of Shapes
![Page 14: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/14.jpg)
Schema Overview
![Page 15: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/15.jpg)
Qgis – A Desktop GIS: www.qgis.org
![Page 16: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/16.jpg)
Add PostGIS Layer
Exploring your data
![Page 17: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/17.jpg)
Enter Query
![Page 18: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/18.jpg)
Explore Data(Panning)
![Page 19: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/19.jpg)
Explore Data (Attributes)
![Page 20: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/20.jpg)
Tilemill: mapbox.com/tilemill
![Page 21: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/21.jpg)
Define A Layer
![Page 22: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/22.jpg)
Define A Style
![Page 23: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/23.jpg)
Define Some More Layers + Styles
![Page 24: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/24.jpg)
postgis
Map Style<XML>
Tiles(PNG)
SVG
OpenLayers
TileMill
InkScape
.MBTILESRender your map
![Page 25: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/25.jpg)
Tiles
Javascript
Web Mapping 101
![Page 26: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/26.jpg)
Pre-Render in Tilemill
![Page 27: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/27.jpg)
Your Server
Apache
$Z/$X/$Y.PNG
tilestream
.mbtiles
Your Server
https://github.com/mapbox/tilestreamhttp://mapbox.com
Host your tiles
![Page 28: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/28.jpg)
Zoom Level Cumulative Storage
0 2 KB
5 3 MB
10 3 GB
14 683 GB
18 171 TB
Render Tiles On Disk (PNG)
Source: OpenStreetMap Using and Enhancing the Free Map of the World. Ramm, Topf, 2011
PostGIS Database Server
Disk Space Required 600 GB
Import Time 8 – 60 Hours
Recommended RAM to apply diffs
24 GB
So you want to render planet
![Page 29: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/29.jpg)
Apache
mod_tile
Renderd
PostGIS
osm2pgsql
Tile Cache On Disk
http://switch2osm.org for instructions
Tile Servers
![Page 30: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/30.jpg)
Javascript Map Display Library
OpenLayers: www.openlayers.org
![Page 31: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/31.jpg)
<div id="map" ></div></div><script defer="defer" type="text/javascript"> var map, layer; var bounds = new OpenLayers.Bounds(-75.7001, 45.4166, -75.674, 45.435).transform(new OpenLayers.Projection ("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")) map = new OpenLayers.Map( 'map', { maxExtent: bounds, projection: "EPSG:900913", units: "degree", restrictedExtent: bounds, controls : [new OpenLayers.Control.Attribution(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Navigation()] });
OpenLayers – Create Your Map
![Page 32: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/32.jpg)
layer = new OpenLayers.Layer.XYZ("PGCon Map", ["http://a.tiles.mapbox.com/v3/ssinger.pgcon/${z}/${x}/${y}.png", "http://b.tiles.mapbox.com/v3/ssinger.pgcon/${z}/${x}/${y}.png", "http://c.tiles.mapbox.com/v3/ssinger.pgcon/${z}/${x}/${y}.png"] , { attribution: "CC-BY-SA. OpenStreetMap & Contributors", sphericalMercator: true, minZoomLevel: 15, maxZoomLevel: 18, numZoomLevels:4, zoomOffset: 15, resolutions: [ 4.777314266967774, 2.388657133483887, 1.1943285667419434, 0.597164283], units:"degree", projection: "EPSG:900913", } map.addLayer(layer)
OpenLayers: Add Your Layer
![Page 33: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/33.jpg)
PGCON Map
https://github.com/ssinger/mapexplorer/blob/master/app/views/pgconmap/_map.html.erb
![Page 34: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/34.jpg)
lat lon point_type description
45.42593 -75.689 pgcon Novotel
XMLHttpRequest()
[{"lat":45.4259345,"lon":-75.6896723,"description":"Novotel"},{43,"lon":-75.6869527,"description":"Desmarais Building"}]
Table: points
JSON Response
HTTP GET - /pgconmap/interests
Adding Markers
mapexplorer.org
![Page 35: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/35.jpg)
var points=JSON.parse(client.responseText);
Adding Markers:
![Page 36: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/36.jpg)
var markers = new OpenLayers.Layer.Markers("markers");
map.addLayer(markers);
Adding Markers:
![Page 37: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/37.jpg)
for(var i=0; i < points.length; i++) {
var p=new OpenLayers.LonLat(points[i]['lon'], points[i]['lat']). transform( new OpenLayers.Projection ( "EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
var marker=new OpenLayers.Marker(p,icon.clone()); markers.addMarker(marker);}
Adding Markers:
![Page 38: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/38.jpg)
var eventHandler = new PointClickHandler(p, description);
marker.events.register('mousedown',eventHandler,eventHandler.onEvent);
Adding Popups
![Page 39: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/39.jpg)
PointClickHandler.prototype.onEvent = function(evt) { var popup=new OpenLayers.Popup(null,this.latlon,
new OpenLayers.Size(100,50),this.description,true);map.addPopup(popup);
}
Adding Popups
https://github.com/ssinger/mapexplorer/blob/master/app/views/pgconmap/interest.html.erb
![Page 40: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/40.jpg)
Printed Maps
![Page 41: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/41.jpg)
SVG Export
![Page 42: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/42.jpg)
Editing Your Map – inkscape
![Page 43: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/43.jpg)
Printing
http://www.flickr.com/photos/silentcolors/30887115/
![Page 44: Making Your Own Maps PGCon 2012 - …...Zoom Level Cumulative Storage 0 2 KB 5 3 MB 10 3 GB 14 683 GB 18 171 TB Render Tiles On Disk (PNG) Source: OpenStreetMap Using and Enhancing](https://reader033.fdocuments.in/reader033/viewer/2022042219/5ec5cf684a29781b3c1abd46/html5/thumbnails/44.jpg)
http://www.openstreetmp.org
http://www.switch2osm.org
http://www.mapexporer.org/pgconmap
http://github.com/ssinger/pgcon.map
http://github.com/ssinger/mapexplorer
Steve Singerhttp://[email protected]
Additional Information