Beyond GoogleMaps
Andrew Turner, Mapufacture & FortiusOne

or...

or...
Evolved Maps,
desconstructed

A Brief History
of Mapping *
*IANAH

StoryMapping

Emphemeral Maps http://maps.google.com

Meaning

Meaning

Navigation

Compass

1492 - Columbus sails
the ocean blue

Cartographic Renaissance

So geographers, in Afric maps,
With savage pictures fill their gaps,
And o’er unhabitable downs
Place elephants for want of towns.
- Jonathan Swift

Ortelius Atlas

Exploration

Travel Guides

Driving Guides

GIS

Internet Maps

2005 - Google slips the
map

urban renewal
participatory web
2005 - Google slips the
map
mobile computing
GPS becomes
ubiquitous

HousingMaps http://housingmaps.com

Slippy Maps
&
Spinny Globes

GoogleMaps http://maps.google.com

Interactivity http://maps.google.com

Design

Usability

http://maps.google.com/maps?f=q&hl=en&geocode=&q=Cape+Town&ie=UTF8&ll=-33.938803,18.486214&spn=0.182293,0.331306&z=12
Data Coverage and
Quality

http://maps.google.com/maps?f=q&hl=en&geocode=&q=Cape+Town&ie=UTF8&ll=-33.938803,18.486214&spn=0.182293,0.331306&z=12
Data Coverage and
Quality
http://openstreetmap.org/?lat=-33.9377&lon=18.4745&zoom=12&layers=B000FTF

Brighton, UK

Brighton, UK

Data Ownership and
Access

Data Ownership and
Access

Technology Limitations

Technology Limitations

Where Next?
http://flickr.com/photos/loupiote/25426957

Storage

id name rating lat lon
10045 Vibe Bar 4.3 52.81 0.295
10046 Half Moon 3.8 53.432 0.312
Pub
10047 Windmill 2.6 50.982 0.256
10048 Marquess 1.7 51.023 1.24
oAnglesey
Grange
10049 4.5 52.110 0.4562
Pub
Coopers
10050 3.5 50.862 0.821
Arms
Old
10051 3.2 52.591 0.312
Queens
Oxo
10052 1.3 51.93 -0.351
Head
Tower
10053 Riverside 3.9 52.18 0.62

id name rating lat lon
10045 Vibe Bar 4.3 52.81 0.295
10046 Half Moon 3.8 53.432 0.312
Pub
10047 Windmill 2.6 50.982 0.256
10048 Marquess 1.7 51.023 1.24
oAnglesey
Grange
10049 4.5 52.110 0.4562
Pub
Coopers
10050 3.5 50.862 0.821
Arms
Old
10051 3.2 52.591 0.312
Queens
Oxo
10052 1.3 51.93 -0.351
Head
Tower
10053 Riverside 3.9 52.18 0.62

SELECT name,latitude,longitude, acos(SIN( PI()* 40.7383040 /180 )*SIN( PI()*latitude/180 )
)+(cos(PI()* 40.7383040 /180)*COS( PI()*latitude/180) *COS(PI()*longitude/180-PI()* -73.99319 /180)
)* 3963.191 AS distance
FROM allcountries
WHERE 3963.191 * ACOS( (SIN(PI()* 40.7383040 /180)*SIN(PI() * latitude/180)) +
(COS(PI()* 40.7383040 /180)*cos(PI()*latitude/180)*COS(PI() * longitude/180-PI()* -73.99319 /180))
) < = 1.5
ORDER BY 3963.191 * ACOS(
(SIN(PI()* 40.7383040 /180)*SIN(PI()*latitude/180)) +
(COS(PI()* 40.7383040 /180)*cos(PI()*latitude/180)*COS(PI() * longitude/180-PI()* -73.99319 /180))
)

SELECT the_geom
FROM geom_table
WHERE ST_Distance(the_geom, GeomFromText('POINT(0.02839 51.50807)', -1)) < 100

SELECT the_geom
FROM geom_table
WHERE the_geom && 'BOX3D(0.02 51,0.03 52)'::box3d
AND
ST_Distance(the_geom, GeomFromText('POINT(0.02839 51.50807)', -1)) < 100

SpatiaLite
SQLite + Spatial Types
http://www.gaia-gis.it/spatialite/

GeoHash
http://geohash.org/

GeoHash
http://geohash.org/

GeoHash
SELECT name
FROM pubs
WHERE geohash LIKE \"GCPUV%\"
http://geohash.org/

GeoHash
SELECT name
FROM pubs
WHERE geohash LIKE \"GCPUVR%\"
OR geohash LIKE \"GCPVJ2%\"
http://geohash.org/

Data

GeoNames http://geonames.org

GeoNames http://geonames.org

Implicit GeoData http://geocodr.net

Implicit GeoData http://geocodr.net

OpenStreetMap http://openstreetmap.org

OpenStreetMap London http://openstreetmap.org

Wiki for the World

Flickr OSM http://www.flickr.com/map?
&fLat=39.9227&fLon=116.4694&zl=6

OpenAerialMap http://openaerialmap.org

GeoCommons Finder! http://geocommons.com

GeoCommons Finder! http://finder.geocommons.com

Sharing

GeoRSS

GeoRSS

GeoRSS
+

GeoRSS
<georss:point>
+ 45.256 -71.92
</georss:point>

GeoRSS
<georss:point>
+ 45.256 -71.92
</georss:point>

GeoRSS
<georss:point>
+ 45.256 -71.92
</georss:point>

RSS / Atom
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<feed xml:lang=\"en-US\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xml:base=\"http://grwifi.net/feed\" xmlns=\"http://www.w3.org/2005/Atom\">
<title>Grand Rapids WiFi: News, Updated Hotspot Locations, and Comments</title>
<id>http://grwifi.net/atom/locations</id>
<link href=\"http://grwifi.net/feed\" rel=\"self\" type=\"application/atom+xml\"/>
<rights>Creative Commons Attribution-NonCommercial-ShareAlike 2.0 http://creativecommons.org/licenses/by-nc-sa/2.0/ </rights>
<updated>2007-03-28T17:31:33+00:00</updated>
<entry>
<id>http://grwifi.net/location/view/skelletones#comment3862</id>
<title>Grand Rapids WiFi: Comment on The Euclid</title>
<link href=\"http://grwifi.net/location/view/skelletones#comment3862\" rel=\"alternate\" type=\"text/html\"/>
<category term=\"The Euclid\"/>
<author><name>mari</name></author>
<content type=\"xhtml\"><p>i know a local band in kalamazoo called rising vacancy. i was wondering how …/p></content>
<published>2007-03-28T17:31:33+00:00</published>
</entry>
<entry>
<id>http://grwifi.net/location/view/bk-east-paris#comment3855</id>
<title>Grand Rapids WiFi: Comment on Burger King - East Paris</title>
<link href=\"http://grwifi.net/location/view/bk-east-paris#comment3855\" rel=\"alternate\" type=\"text/html\"/>
<category term=\"Burger King - East Paris\"/>
<author><name>Brandino</name></author>
<content type=\"xhtml\"><p>I love burger king </p></content>
<published>2007-03-21T16:38:19+00:00</published>
</entry>
<entry>
<id>http://grwifi.net/location/view/common-ground#comment3843</id>
<title>Grand Rapids WiFi: Comment on Common Ground Coffee Shop</title>
<link href=\"http://grwifi.net/location/view/common-ground#comment3843\" rel=\"alternate\" type=\"text/html\"/>
<category term=\"Common Ground Coffee Shop\"/>
<author>
<name>Rex Cowan</name>
</author>
<content type=\"xhtml\">
<div xmlns=\"http://www.w3.org/1999/xhtml\"><p>Common Ground is a welcoming place with a warm atmosphere, the clerk I talked to had …</p></
content>
<published>2007-03-17T01:45:59+00:00</published>
</entry>
</feed>

GeoRSS
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<feed xml:lang=\"en-US\" xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xml:base=\"http://grwifi.net/feed\" xmlns:georss=\"http://www.georss.org/georss\" xmlns=\"http://
www.w3.org/2005/Atom\">
<title>Grand Rapids WiFi: News, Updated Hotspot Locations, and Comments</title>
<id>http://grwifi.net/atom/locations</id>
<link href=\"http://grwifi.net/feed\" rel=\"self\" type=\"application/atom+xml\"/>
<rights>Creative Commons Attribution-NonCommercial-ShareAlike 2.0 http://creativecommons.org/licenses/by-nc-sa/2.0/ </rights>
<updated>2007-03-28T17:31:33+00:00</updated>
<entry>
<id>http://grwifi.net/location/view/skelletones#comment3862</id>
<title>Grand Rapids WiFi: Comment on The Euclid</title>
<link href=\"http://grwifi.net/location/view/skelletones#comment3862\" rel=\"alternate\" type=\"text/html\"/>
<category term=\"The Euclid\"/>
<author><name>mari</name></author>
<georss:point>42.960126 -85.667997</georss:point>
<content type=\"xhtml\"><p>i know a local band in kalamazoo called rising vacancy. i was wondering how …/p></content>
<published>2007-03-28T17:31:33+00:00</published>
</entry>
<entry>
<id>http://grwifi.net/location/view/bk-east-paris#comment3855</id>
<title>Grand Rapids WiFi: Comment on Burger King - East Paris</title>
<link href=\"http://grwifi.net/location/view/bk-east-paris#comment3855\" rel=\"alternate\" type=\"text/html\"/>
<category term=\"Burger King - East Paris\"/>
<author><name>Brandino</name></author>
<georss:point>42.911495 -85.568665</georss:point>
<content type=\"xhtml\"><p>I love burger king </p></content>
<published>2007-03-21T16:38:19+00:00</published>
</entry>
<entry>
<id>http://grwifi.net/location/view/common-ground#comment3843</id>
<title>Grand Rapids WiFi: Comment on Common Ground Coffee Shop</title>
<link href=\"http://grwifi.net/location/view/common-ground#comment3843\" rel=\"alternate\" type=\"text/html\"/>
<category term=\"Common Ground Coffee Shop\"/>
<author>
<name>Rex Cowan</name>
</author>
<georss:point>42.962927 -85.637179</georss:point>
<content type=\"xhtml\">
<div xmlns=\"http://www.w3.org/1999/xhtml\"><p>Common Ground is a welcoming place with a warm atmosphere, the clerk I talked to had …</p></content>
<published>2007-03-17T01:45:59+00:00</published>
</entry>
</feed>

GeoNames GeoRSS http://www.geonames.org/rss-to-georss-converter.html

KML
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<kml xmlns=\"http://earth.google.com/kml/2.2\">
<Placemark>
<name>Simple placemark</name>
<description>Attached to the ground. Intelligently places itself
at the height of the underlying terrain.</description>
<Point>
<coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
</Point>
</Placemark>
</kml>

KML Extended Data
<ExtendedData id=\"rooms\">
<name>Rooms</name>
<value>3</value>
</ExtendedData>

KML Network Links
</NetworkLink>
<NetworkLink>
<name><![CDATA[Pubs in London]]></name>
<Link>
<href>http://maker.geocommons.com/maps/839/overlays/1</href>
</Link>
</NetworkLink>

GeoJSON
{ \"type\": \"Point\", \"coordinates\": [100.0, 0.0] }

GeoJSON
{ \"blog\": {
\"posts\": [
{ \"type\": \"atom:item\",
\"atom:summary\": \"post 1\",
\"atom:description\": \"i love blogging\"
},
{ \"type\": \"atom:item\",
\"atom:summary\": \"post 2 from CA\",
\"atom:description\": \"geoblogging in California\"
\"geometry\": {
\"type\", \"Point\",
\"coordinates\": [-120, 40]
}
},
],
\"geometry\": {
\"type\": \"Polygon\",
\"coordinates\": [[[-121, 39], [-119, 39], [-119, 41], [-121, 41], [-121, 39]]]
}
}
}

GeoWeb

Resources
• /places
• /places/89
• /places/89.atom
• /places/89.kml

Web Aligned http://highearthorbit.com/a-proposal-georss-kml

Formats
HTML : RSS

Formats
HTML : RSS ::

Formats
HTML : RSS :: KML : GeoRSS

Formats
HTML : RSS :: KML : GeoRSS
Visualization : Syndication

Mapufacture http://mapufacture.com

Visualization

Mapstraction

Mapstraction API
<script src=\"http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY\" type=\"text/javascript\">
</script>
<script type=\"text/javascript\" src=\"mapstraction.js\"></script>
<div id=\"mapstraction\" style=\"width: 400px; height: 400px;\"></div>
<script type=\"text/javascript\">
var mapstraction = new Mapstraction('mapstraction','google');
var myPoint = new LatLonPoint(37.4041, -122.0081);
mapstraction.setCenterAndZoom(myPoint, 10);
mapstraction.addControls({
pan: true,
zoom: 'small',
map_type: true
});
</script>

Power of the Swap
var mapstraction = new Mapstraction(‘map’, ‘google’);

Power of the Swap
mapstraction.swap(‘mapstraction’, ‘yahoo’);

Power of the Swap
mapstraction.swap(‘mapstraction’, ‘microsoft’);

Power of the Swap
mapstraction.swap(‘mapstraction’, ‘openstreetmap’);

Overlays
mapstraction.addImageOverlay
(\"over\",file,opacity,west,south,east,north);
mapstraction.addImageOverlay(\"over\",\"images/
santodomingo.png\",50,-70.01544, 18.39777, -69.80567,
18.563517);

Filters
mapstraction.removeAllFilters();
mapstraction.addFilter('category', 'eq', 10 );
mapstraction.doFilter();

Filters
mapstraction.removeAllFilters();
mapstraction.addFilter('category', 'eq', 10 );
mapstraction.doFilter();
mapstraction.toggleFilter('category', 'eq', 10 );

Sliders

OpenLayers http://openlayers.org

map = new OpenLayers.Map(\"map\", {
maxResolution: 360/512,
projection: \"EPSG:4326\" ,
numZoomLevels: 20,
minZoomLevel: 0,
maxZoomLevel: 19,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
]
});
var wms = new OpenLayers.Layer.WMS(
\"world\",
\"/cgi-bin/tilecache/tilecache.cgi?\",
{layers: 'world'}
);
map.addLayers([wms]);
map.setCenter(new OpenLayers.LonLat(0, 32), 7);

map = new OpenLayers.Map(\"map\", {
maxResolution: 360/512,
projection: \"EPSG:4326\" ,
numZoomLevels: 20,
minZoomLevel: 0,
maxZoomLevel: 19,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
]
});
var wms = new OpenLayers.Layer.WMS(
\"world\",
\"/cgi-bin/tilecache/tilecache.cgi?\",
{layers: 'world'}
);
map.addLayers([wms]);
map.setCenter(new OpenLayers.LonLat(0, 32), 7);

<link rel=\"stylesheet\" href=\"../themes/gray.css\" type=\"text/css\" media=\"screen\" />
<div id=\"map\" class=\"gray smallmap\"></div>

<link rel=\"stylesheet\" href=\"../themes/gray.css\" type=\"text/css\" media=\"screen\" />
<div id=\"map\" class=\"gray smallmap\"></div>
div.gray .olControlZoomPanel {
top: 14px;
left: 14px;
}
div.gray .olControlZoomPanel div {
background-image: url(img/gray/gray_zoom_horiz.png);
height: 18px;
width: 18px;
}
div.gray .olControlZoomPanel .olControlZoomInItemInactive {
top: 0px;
left: 25px;
background-position: 18px 0px;
}
div.gray .olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
top: 0px;
left: 0px;
background-position: 0px -18px;
}
div.gray .olControlZoomPanel .olControlZoomOutItemInactive {
top: 0px;
left: 0px;
background-position: 0px 0px;
}

<link rel=\"stylesheet\" href=\"../themes/gray.css\" type=\"text/css\" media=\"screen\" />
<div id=\"map\" class=\"gray smallmap\"></div>
div.gray .olControlZoomPanel {
top: 14px;
left: 14px;
}
div.gray .olControlZoomPanel div {
background-image: url(img/gray/gray_zoom_horiz.png);
height: 18px;
width: 18px;
}
div.gray .olControlZoomPanel .olControlZoomInItemInactive {
top: 0px;
left: 25px;
background-position: 18px 0px;
}
div.gray .olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
top: 0px;
left: 0px;
background-position: 0px -18px;
}
div.gray .olControlZoomPanel .olControlZoomOutItemInactive {
top: 0px;
left: 0px;
background-position: 0px 0px;
}

<link rel=\"stylesheet\" href=\"../themes/hearts.css\" type=\"text/css\" media=\"screen\" />
<div id=\"map\" class=\"hearts smallmap\"></div>

<link rel=\"stylesheet\" href=\"../themes/hearts.css\" type=\"text/css\" media=\"screen\" />
<div id=\"map\" class=\"hearts smallmap\"></div>
.hearts .olControlZoomPanel div {
background-image: url(img/hearts/hearts-zoom.png);
}
.hearts .olControlPanPanel div {
background-image: url(img/hearts/hearts-panel.png);
}

<link rel=\"stylesheet\" href=\"../themes/hearts.css\" type=\"text/css\" media=\"screen\" />
<div id=\"map\" class=\"hearts smallmap\"></div>
.hearts .olControlZoomPanel div {
background-image: url(img/hearts/hearts-zoom.png);
}
.hearts .olControlPanPanel div {
background-image: url(img/hearts/hearts-panel.png);
}

Accessibility

ModestMaps

package {
public class ModestMapsSample extends Sprite
{
private var map:Map;
public function ModestMapsSample()
{
map = new TweenMap(stage.stageWidth - 2 * PADDING, stage.stageHeight - 2 * PADDING,
true,
new MicrosoftRoadMapProvider(),
new MapExtent(37.829853, 37.700121, -122.212601, -122.514725));
map.addChild(new MapControls(map));
map.addChild(new ZoomSlider(map));
addChild(map);
}
}
}

London2012 http://london2012.co.uk

Hurricane Tracking http://hurricanewiki.org

Analysis

WalkScore http://walkscore.com

MySociety House Price http://www.mysociety.org/2007/more-travel-maps/
vs. Travel Time

pgRouting
http://pgrouting.postlbs.org/

Safe Routing http://www.ridethecity.com

Fuel Efficiency Routing

Bakery Routing

Cartography

NeoCartography

wrp.geothings.net

BurningManEarth http://earth.burningman.org

Maps for Farmers http://serveyourcountryfood.com

Mapnik

<?xml version=\"1.0\" encoding=\"utf-8\"?>
<!DOCTYPE Map>
<Map bgcolor=\"#b5d0d0\" srs=\"+proj=latlong +datum=WGS84\">
<Style name=\"world\">
<Rule>
<MaxScaleDenominator>250000000000</MaxScaleDenominator>
<MinScaleDenominator>6000000</MinScaleDenominator>
<PolygonSymbolizer>
<CssParameter name=\"fill\">#f2efe9</CssParameter>
</PolygonSymbolizer>
<LineSymbolizer>
<CssParameter name=\"stroke\">#b5d0d0</CssParameter>
<CssParameter name=\"stroke-width\">0.5</CssParameter>
</LineSymbolizer>
</Rule>
</Style>
<Layer name=\"world\" status=\"on\" srs=\"+proj=latlong +datum=WGS84\">
<StyleName>world</StyleName>
<Datasource>
<Parameter name=\"type\">shape</Parameter>
<Parameter name=\"file\">/Users/ajturner/Projects/mapnik/world_borders</Parameter>
</Datasource>
</Layer>
</Map>
Mapnik http://mapnik.com

OpenCycleMap http://opencyclemap.org

OpenCycleMap http://opencyclemap.org

Shenzen Maps

example.mml example.mss
<?xml version=\"1.0\" encoding=\"utf-8\"?> * {
<!DOCTYPE Map> line-width: 1;
<Map bgcolor=\"#b5d0d0\" srs=\"...\"> line-color: #999;
<Stylesheet> polygon-fill: #fff;
Map { map-bgcolor: #ccc; } }
</Stylesheet>
<Stylesheet src=\"example.mss\"/> *[zoom>=6][zoom<12] {
<Layer name=\"world\" status=\"on\" srs=\"...\"> line-color: #f90;
<StyleName>world</StyleName> }
<Datasource> #world-borders[zoom<10] NAME
<Parameter name=\"type\">shape</Parameter> {
<Parameter name=\"file\">...</Parameter> text-fill: #333;
</Datasource> }
</Layer>
</Map>
Cascadenick http://code.google.com/p/mapnik-utils/

Tiles

Tiles

Tiles

TileCache
TileCache http://tilecache.org

Image
WMS
Mapnik TileCache
Image
CRS
TileCache http://tilecache.org

Image
WMS
TMS
Mapnik TileCache
900913
Image
(google)
CRS
TileCache http://tilecache.org

Mapstraction Tiles
mapstraction.addTileLayer(\"http://oakland-1950s.s3.amazonaws.com/{Z}-r{Y}-c{X}.jpg\", 80);

New Orleans http://maps.thinknola.com

EveryBlock http://everyblock.com

Mobile

Mobline Placemarking

uLocate WHERE

uLocate WHERE

Android Innovations
cab4me

Ambient Location
OmniFocus

UrbanSpoon

API
Dash http://dash.net

PocketMaps

PocketMaps
height = 11
width = 8.5
margin = .25
dpi = 144
bbox = (45.482882,-73.619899,45.532687,-73.547801)
zoom = 16
out = \"montreal_pocketmmap.pdf\"
pm = pocketMMap(height, width, margin, dpi)
pm.load_provider('OPEN_STREET_MAP')
pm.draw(bbox, zoom)
pm.save(out)
ruby: http://github.com/ajturner/pocketmaps
python: http://aaronland.info/python/pocketMMap

Geolocation

W3C Geolocation http://dev.w3.org/geo/api/spec-source.html

navigator.geolocation.getCurrentPosition(function(pos) {
alert( pos.latitude + \", \" + pos.longitude );
})

interface Geolocation {
readonly attribute Position lastPosition;
void getCurrentPosition(in PositionCallback successCallback);
int watchPosition(in PositionCallback successCallback);
void clearWatch(in int watchId);
};

PlundrDS

FireEagle http://fireeagle.com

geotagging pacers
M T W Th

geotagging pacers
M T W Th
1 23 4

geotagging pacers
M T W Th
1 23 4

geotagging pacers
M T W Th
1 23 4

geotagging pacers
M T W Th
1 23 4

BBC Bangladesh Boat
Journey

Public Geodata
Repository

Metadata, Statistics,
Open Data

GeoData Visualization

Thematic Styling

Classification

Styling

Base Data

Comparative Analysis http://maker.geocommons.com/maps/839

Inspect the Data

Styled KML

GeoWeb
We’re Hiring Help build the GeoWeb

Asante sana!
andrew@highearthorbit.com
highearthorbit.com
twitter.com/ajturner