Download - Where2009 - Hacking Map APIs
Where 2.0Mapping Hacks Tutorial 1
Andrew Turner FortiusOne [email protected]
Rabble ENTP [email protected]
Welcome to Mapping the Mapping Hacks with Google, Yahoo, Open Street Map, and fellow travelers.
I’m Rabble, i like to cause trouble, and think maps are fun. I don’t do this for a living.
I’m Andrew, i like to build maps and i do do this for a living.
Mapping Hacks Tutorial What’s Covered?
Building Maps Part I
Building Data Part II
This tutorial is divided up in to two parts. First half is the building and display of maps. Then we’ll have a break, and the second half will be about the data of maps.
http://flickr.com/photos/seandreilinger/2326448445
Feel free to ask questions
at any time.
Building Maps
How to build maps, and put them on the web. The scope of this tutorial is limited to web mapping.
Building Data
The second half of the workshop is how to get and manipulate mapping data. There’s a huge amount of geodata out there, the trick is getting it in to useful formats.
Building Data == Later == Part II
But that’s for the second half, after the break. Before we can get there, we need to be able to see it.
Building Maps On Other People’s API’s
It’s possible to use pure open source data and software to do mapping. For the more advanced examples we will use these tools. But the vast majority of mapping hacks today are built upon google maps, so we will start by walking through how to build on top of and extend google maps.
Terminology
•Vector
•Raster
•Feature
•Attributes
•XML
•REST
•Proprietary - Open
First, some terminology to help
Terminology
•Vector
•Raster
•Feature
•Attributes
•XML
•REST
•Proprietary - Open
First, some terminology to help
Terminology
•Vector
•Raster
•Feature
•Attributes
•XML
•REST
•Proprietary - Open
First, some terminology to help
Terminology
•Vector
•Raster
•Feature
•Attributes
•XML
•REST
•Proprietary - Open
First, some terminology to help
Terminology
•Vector
•Raster
•Feature
•Attributes
•XML
•REST
•Proprietary - Open
First, some terminology to help
Terminology
•Vector
•Raster
•Feature
•Attributes
•XML
•REST
•Proprietary - Open
<element attribute="value"> content</element>
First, some terminology to help
Terminology
•Vector
•Raster
•Feature
•Attributes
•XML
•REST
•Proprietary - Open
<element attribute="value"> content</element>
http://host/resource.format
First, some terminology to help
Terminology: Geometries
• Point
• LineString
• Box
• Polygon
• MultiGeometry
• Coordinate Reference System (aka Projection)
Even with “location” there are several important types of geometries that are common. Almost all the formats we’ll talk about support all these geometry types. So we’ll show some examples, but assume you’ll need to know what’s appropriate, but that it’s probably supported.
Terminology: Geometries
• Point
• LineString
• Box
• Polygon
• MultiGeometry
• Coordinate Reference System (aka Projection)
Even with “location” there are several important types of geometries that are common. Almost all the formats we’ll talk about support all these geometry types. So we’ll show some examples, but assume you’ll need to know what’s appropriate, but that it’s probably supported.
Terminology: Geometries
• Point
• LineString
• Box
• Polygon
• MultiGeometry
• Coordinate Reference System (aka Projection)
Even with “location” there are several important types of geometries that are common. Almost all the formats we’ll talk about support all these geometry types. So we’ll show some examples, but assume you’ll need to know what’s appropriate, but that it’s probably supported.
Terminology: Geometries
• Point
• LineString
• Box
• Polygon
• MultiGeometry
• Coordinate Reference System (aka Projection)
Even with “location” there are several important types of geometries that are common. Almost all the formats we’ll talk about support all these geometry types. So we’ll show some examples, but assume you’ll need to know what’s appropriate, but that it’s probably supported.
Terminology: Geometries
• Point
• LineString
• Box
• Polygon
• MultiGeometry
• Coordinate Reference System (aka Projection)
Even with “location” there are several important types of geometries that are common. Almost all the formats we’ll talk about support all these geometry types. So we’ll show some examples, but assume you’ll need to know what’s appropriate, but that it’s probably supported.
Terminology: Geometries
• Point
• LineString
• Box
• Polygon
• MultiGeometry
• Coordinate Reference System (aka Projection)
Even with “location” there are several important types of geometries that are common. Almost all the formats we’ll talk about support all these geometry types. So we’ll show some examples, but assume you’ll need to know what’s appropriate, but that it’s probably supported.
Terminology: Geometries
• Point
• LineString
• Box
• Polygon
• MultiGeometry
• Coordinate Reference System (aka Projection)
Even with “location” there are several important types of geometries that are common. Almost all the formats we’ll talk about support all these geometry types. So we’ll show some examples, but assume you’ll need to know what’s appropriate, but that it’s probably supported.
Longitude is the X
Longitude
Latit
ude
[x,y]
Longitude is the XLa
titud
e
Longitude [x,y]
Google Maps
Web mapping has been around for a long time, but it was really the advent of google maps which got the masses hacking on web maps.
Mapstraction
Beyond our first demos we’ll get in to how to use the mapstraction library. It lets you easily move between mapping apis, it’s open source, and works with many data sources.
Mapstraction
OpenLayers
Then we’re going to end with some examples built in OpenLayers which give you the most flexibility in your map hacking.
Start Simple
Mapstraction Recipe
1.Include Javascripts
2.Create an HTML Map Div
3.Create a JavaScript Mapstraction object
4.Center the Map
5.Add Controls
6.Add Features - Markers, Polylines, Overlays, etc.
7.Events
http://mapstraction.appspot.com
Play Along
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>
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/gray.css" type="text/css" media="screen" /><div id="map" class="gray 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);}
<link rel="stylesheet" href="../themes/hearts.css" type="text/css" media="screen" /><div id="map" class="hearts smallmap"></div>
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); } }}
Bakery Routing http://carto.iict.ch/www/broetlikrones/htdocs/index.php
MySociety House Price vs. Travel Time
http://www.mysociety.org/2007/more-travel-maps/
Hacking with Google, Virtual Earth and Yahoo's Maps API II
Data
Why does open, interoperable data matter?
We just went over how you can create markers with javascript, from a database. Why would you bother spending time and resources working with formats that man mean other people can use your data?
http
://w
ww
.flic
kr.c
om/p
hoto
s/bl
ah_o
h_w
ell/3
5220
3022
It’s not enough for a Web App to be Sticky...
Common design principles want to make a website “sticky”. To encourage users to stay at the site and return often.
But this is no longer sufficient - users want more.
http
://w
ww
.flic
kr.c
om/p
hoto
s/or
inro
bert
john
/139
7887
03
...it also needs to be stringy.
Web applications need to be “Stringy” - they need to provide ways for users to move their data into, and out of the system. It needs to connect into the rest of their personal and corporate suite of tools, workflows, and expectations.
http
://w
ww
.flic
kr.c
om/p
hoto
s/jo
sefs
tuef
er/9
5005
03
almost like a web
Sites need to be sticky, and stringy. Kind of like a web.
or better known as The Web - we’ll get back to that later
Why does it really matter?
Traction is good - but won’t I be the only one doing this? How will it get you business?
phot
o cr
edits
.gov
let’s look at an actual use case for why this is important
phot
o cr
edits
.gov
phot
o cr
edits
Recovery.gov
Recovery.gov is a very new, and quickly conceived and implemented initiative to track all the stimulus dollars: from tax payer, to gov’t, to agency, to project, to tax payer.
phot
o cr
edits
A Chance for Change http://isd.ischool.berkeley.edu/stimulus/2009-029/
Given the new administration support for new initiatives and Transparency, it’s a chance for agencies, and citizens, to engage in rethinking how it’s all done.
They’re talking about GeoRSS AtomPub, KML, Linked Open Data, RDFa. All the hot topics on data sharing - the point of this workshop.
phot
o cr
edits
TimeMap Mockup
The UC Berkeley iSchool has published papers, example websites, and example feeds about how it *could* be done.
phot
o cr
edits
Data.gov
And it’s just the beginning. Data.gov will incorporate these ideas across the federal, and subsequently local, governments. This will be they ways in which information is spread in the US Government.
International Open Data
And it’s not just the US government, it also applies internationally to directives such as INSPIRE which is working in the EU to open data.
THEREFORE BE IT RESOLVED THAT the City of Vancouver endorses the principles of:•Open and Accessible Data - the City of
Vancouver will freely share with citizens, businesses and other jurisdictions the greatest amount of data possible while respecting privacy and security concerns;
•Open Standards - the City of Vancouver will move as quickly as possible to adopt prevailing open standards for data, documents, maps, and other formats of media;
motion, May 15, 2009Governments are enforcing data standards.
This is a big win from getting data for your system, as well as providing them technology that works within their ecosystem.
http
://w
ww
.flic
kr.c
om/p
hoto
s/bi
tter
lysw
eet/
3335
8201
Why is it so hard?
So if everyone is clamoring over open, sharable data - why has it been so hard?
phot
o cr
edits
lots of this Sheets of CSV files
Currently data is shared either by large spreadsheets of unstructured (or at best semi-structured) tabular data
phot
o cr
edits
Each Format is Unique
http
://w
ww
.flic
kr.c
om/p
hoto
s/jo
hnch
arlto
n/36
0919
818
Even when there is structure, people use arbitrary markups, formats, schemas.
phot
o cr
edits
...and unlinked
http
://w
ww
.flic
kr.c
om/p
hoto
s/bo
okgr
l/311
1647
593
And there has been no way to know if one location was the same as another - or a person or project had a link to more about them.
http
://w
ww
.flic
kr.c
om/p
hoto
s/do
cum
enta
rist/
4730
8493
9/
...and proprietary
http
://w
ww
.flic
kr.c
om/p
hoto
s/fra
gile
lisa/
3212
6844
10
But that’s changing
There is a brighter future - it’s happening grass-roots, top-down, and sideways.
http
://w
ww
.flic
kr.c
om/p
hoto
s/hu
lada
ncer
22/5
3074
3543
/
Formats
There are a number of different formats - each of which is appropriate depending on what you’re trying to do.
What do you want to do?
http
://w
ww
.flic
kr.c
om/p
hoto
s/to
mhe
/311
3819
47
The first, overarching thing you can do when choosing the formats to support is consider what you are trying to accomplish.
InterchangeVisualizationAnalysis
Interchange
GeoRSS
GeoRSS simply adds Geo to RSS/Atom
GeoRSS
GeoRSS simply adds Geo to RSS/Atom
GeoRSS
+
GeoRSS simply adds Geo to RSS/Atom
GeoRSS
<georss:point>45.256 -71.92
</georss:point>+
GeoRSS simply adds Geo to RSS/Atom
GeoRSS
<georss:point>45.256 -71.92
</georss:point>+
GeoRSS simply adds Geo to RSS/Atom
GeoRSS
<georss:point>45.256 -71.92
</georss:point>+
GeoRSS simply adds Geo to RSS/Atom
RSS / Atom
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss" xmlns:local="http://oakland.crimespotting.org/ns"> <title>Oakland Crime Feed</title> <link href="http://oakland.crimespotting.org/~migurski/oaklandcrime/www"/> <updated local:date="Wednesday, Apr 29, 2009" local:time="6:30pm">2009-04-29T18:30:00-07:00</updated> <entry> <title>THEFT</title> <link rel="alternate" href="http://oakland.crimespotting.org/~migurski/oaklandcrime/www/crime/2009-04-29/Theft/127204"/> <id>crime:oakland/09-029660/THEFT</id> <updated local:date="Wednesday, Apr 29, 2009" local:time="6:30pm">2009-04-29T18:30:00-07:00</updated> <category term="THEFT" label="Theft"/> <content type="html"><![CDATA[<h3>Theft</h3><h4>Wednesday, Apr 29, 2009 6:30pm</h4>...]]></content> </entry></feed>
http://oakland.crimespotting.orggo from this:
GeoRSS: Example
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss" xmlns:local="http://oakland.crimespotting.org/ns"> <title>Oakland Crime Feed</title> <link href="http://oakland.crimespotting.org/~migurski/oaklandcrime/www"/> <updated local:date="Wednesday, Apr 29, 2009" local:time="6:30pm">2009-04-29T18:30:00-07:00</updated> <entry> <title>THEFT</title> <link rel="alternate" href="http://oakland.crimespotting.org/~migurski/oaklandcrime/www/crime/2009-04-29/Theft/127204"/> <id>crime:oakland/09-029660/THEFT</id> <updated local:date="Wednesday, Apr 29, 2009" local:time="6:30pm">2009-04-29T18:30:00-07:00</updated> <category term="THEFT" label="Theft"/> <georss:point>37.807417 -122.275233</georss:point> <content type="html"><![CDATA[<h3>Theft</h3><h4>Wednesday, Apr 29, 2009 6:30pm</h4>...]]></content> </entry></feed>
http://oakland.crimespotting.orgto this - with geo added
GeoRSS Spotlight: Reuters News
Reuters News
Reuters news is one example of a site that you can get GeoRSS to view the news where it’s happening.
GeoRSS Spotlight: Reuters News
Reuters News
Reuters news is one example of a site that you can get GeoRSS to view the news where it’s happening.
phot
o cr
edits
GeoRSS Spotlight: Oakland Crimespotting
http://oakland.crimespotting.org/
GeoRSS Spotlight: USGS
http://earthquake.usgs.gov/eqcenter/catalogs/
GeoRSS Spotlight: FriendFeed
GeoRSS Future
• Supports point, line, box, polygon
• Not an ‘official’ standard. OGC best practice
• Used by most mapping tools
• Next generation:
• External, by reference, geometries (e.g. link to “US”)
• Multiple geometries per entry
http://georss.org
GeoRSS Demo!
GeoJSON
very compact - only requires an eval() to turn into JavaScript objects.
GeoJSON
{ "key": "value", "dictionary" : { "index1":"another value", "index2":"more values" }}
very compact - only requires an eval() to turn into JavaScript objects.
GeoJSON: Point
{ "type": "Point", "coordinates": [100.0, 0.0] }
Supports all the standard geometry types.
GeoJSON: LineString
{ "type": "LineString", "coordinates": [ [100.0, 0.0], [101.0, 1.0] ] }
GeoJSON: Polygon
{ "type": "Polygon", "coordinates": [[
[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]] }
GeoJSON: MultiGeometry
{ "type": "MultiPoint", "coordinates": [ [100.0, 0.0], [101.0, 1.0] ] }
GeoJSON: MultiGeometry
{ "type": "GeometryCollection", "geometries": [ { "type": "Point", "coordinates": [100.0, 0.0] }, { "type": "LineString", "coordinates": [ [101.0, 0.0], [102.0, 1.0] ] } ] }
Supports multiple geometries
GeoJSON: CRS
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }}
"crs": { "type": "link", "properties": { "href": "http://example.com/crs/42", "type": "proj4" }}
Projections
GeoJSON: Atom
{ "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]]] }} }
An example of Atom encoded in GeoJSON
GeoJSON Demo!
GPX
• Common Format for GPS (XML)
• Stores
• Waypoints (wpt)
• Tracks (trk)
• Routes (rte)
• Useful for importing from GPS (for geotagging photos) or exporting to (tracks, waypoints, points of interest)
GPS Exchange formatUsed for exporting/importing to GPS Devices
GPX: Track<?xml version="1.0" encoding="UTF-8"?><gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/0" version="1.0" creator="GPSBabel - http://www.gpsbabel.org" xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd"> <time>2007-12-26T00:42:06Z</time> <bounds minlat="39.9168108" minlon="116.4112773" maxlat="40.48346838" maxlon="116.65506564"/> <trk> <name>ACTIVE LOG #2</name> <number>1</number> <trkseg> <trkpt lat="39.923049649" lon="116.413739165"> <ele>55.413086</ele> <time>2007-12-25T00:00:22Z</time> </trkpt> <trkpt lat="39.923191974" lon="116.414713562"> <ele>69.352295</ele> <time>2007-12-25T00:00:31Z</time> </trkpt> <trkpt lat="39.923132882" lon="116.416241163"> <ele>66.948975</ele> <time>2007-12-25T00:00:41Z</time> </trkpt> <trkpt lat="39.923161631" lon="116.417345395"> <ele>71.274902</ele> <time>2007-12-25T00:00:49Z</time> </trkpt> <trkpt lat="39.923143359" lon="116.417817045"> <ele>72.236206</ele> <time>2007-12-25T00:00:55Z</time> </trkpt>
Waypoints, Tracks, Routes
CSV - Comma Separated Value
"name","holepar","holeyardage","holenumber","latitude","longitude""Simple placemark","4.0","234.0","1.0","-121.082203542568","37.4222899014025""Simple placemark 2","3.0","100.0","2.0","-121.082203542568","37.4222899014025"
"name","holepar","holeyardage","holenumber","address""Simple placemark","4.0","234.0","1.0","1517 N. Main St., Royal Oak, MI""Simple placemark 2","3.0","100.0","2.0","2200 Wilson Blvd., Arlington, VA"
can embed Lat,lon as columns - or WKB (well known binary) string
CSV Demo!
Visualization
photourl
KML
http://code.google.com/apis/kml/documentation/kmlreference.html
KML emerged as a commonly used format for sharing data. It meets the 80% case for geographic information, human-readable information, metadata, attributes, temporal, 3D, navigation and more. Surprisingly capable for a simple format.
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>
phot
o cr
edits
KML Line Strings
phot
o cr
edits
Embedded Media
phot
o cr
edits
KML Image Overlay
KML 3D
KML can be styled with icons, colors, labels, and even 3D.
KML: Extended Data
<ExtendedData id="rooms"> <name>Rooms</name> <value>3</value></ExtendedData>
A way to embed attribute data with any placemark
KML: Styles
<Placemark><styleUrl>#class_1</styleUrl>
<Style id='class_0'>...</Style>
KML: Styles<Style id='class_0'><PolyStyle> <color>bfa5f7fe</color> <fill>1</fill> <outline>1</outline></PolyStyle><LineStyle> <color>ffa5f7fe</color> <width>2</width></LineStyle><IconStyle> <color>bfa5f7fe</color> <scale>1</scale> <Icon> <href>http://maker.geocommons.com/images/icons/propCircle.png</href> </Icon> <hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction"/></IconStyle><BalloonStyle><text> <![CDATA[<p><b>Number of Installations:</b> $[selected_attribute]</p> <p><b>cost per 0:</b> $[cost]<br/><b>Description:</b> $[description]<br/> <b>Incentives:</b> $[incentives]<br/><b>Name:</b> $[name]<br/> <b>Size of installs (kW):</b> $[size]<br/><b>Zipcode:</b> $[zipcode]<br/></p> <p><a href="http://maker.geocommons.com/maps/5015">View the map in Maker<i>!</i></p>]]></text></BalloonStyle></Style>
Polygon
Line
Icon
Info Window
KML: Network Links
<NetworkLink> <name><![CDATA[Pubs in London]]></name> <Link> <href>http://maker.geocommons.com/maps/839/overlays/1</href> </Link></NetworkLink>
index.kml
layer1.kml layer3.kmllayer2.kml
Link to other KML files within a KML file. Useful for directory listings of KML.
phot
o cr
edits
KML Spotlight: Google Maps
KML Spotlight:Flickr Export
Flickr photos can be exported using the GeoRSS (geoFeed) or KML links at the bottom of Flickr pages. This is useful for viewing in GoogleEarth.
KML Demo!
KMZ - Zipped KML
All the verbosity, 10% the size.
Cunning in the simplicity of assigning a Zip compression as an actual type. Makes it very easy to expose via RESTful services and mime-types.
Very useful when bundling multiple KML files and 3D models together.
Other Visualization Formats
•SLD - Styled Layer Descriptor
•Mapnik
•Cascadenik
SLD - an OGC specification. Uses bits of CSS and a lot of XMLMapnik - the mapnik map rendering library has it’s own styling XMLCascadenik - a CSS3-like map styling, with preprocesses for exporting to Mapnik styling
Cascadenick http://code.google.com/p/mapnik-utils/
* { line-width: 1; line-color: #999; polygon-fill: #fff; }
*[zoom>=6][zoom<12] { line-color: #f90;}#world-borders[zoom<10] NAME{ text-fill: #333;}
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE Map><Map bgcolor="#b5d0d0" srs="..."> <Stylesheet> Map { map-bgcolor: #ccc; } </Stylesheet> <Stylesheet src="example.mss"/> <Layer name="world" status="on" srs="..."> <StyleName>world</StyleName> <Datasource> <Parameter name="type">shape</Parameter> <Parameter name="file">...</Parameter> </Datasource> </Layer></Map>
example.mml example.mss
Analysis
Shapefile
A misnomer - not a single “File”, but multiple files: SHP geometry, DBF database, SHX data-geometry join, PRJ projection file, XML metadata.
ESRI Proprietary format - though now widely used.
Limited to 10 character attribute titles.All geometries must be the same ‘type’ (all points, or all polygons, but not both)
Shapefile Demo!
File GeoDatabases
new ESRI proprietary format - a big problem
SQLite / Spatialite
An alternative. Compact, file based databases. Spatialite adds spatial extensions
Spatialite Demo!
OGC Services
!
!
OGC Web Feature Service - WFS
an interface definition for querying Vector datastores
OGC Web Mapping Service - WMS
an interface for querying Raster data stores
What again did you want to do?
http
://w
ww
.flic
kr.c
om/p
hoto
s/m
attp
hoto
s/22
8669
751/
Now that we’ve done a very quick overview of the formats - let’s look at how to decide what formats to use.
File Sizes
File Type Size
CSV (points) 3.7k
KML 460k
Shapefile 208k
http://finder.geocommons.com/overlays/9313
Proposed Stimulus Spending
The first is strictly technical - what is the file size of these formats? How doest that affect the user (mobile, costs, server)
User Compatibility
• Feed Readers
• GoogleEarth
• Mapping API’s
• Browsers
What tools will the user be using to consume or produce this information?
http
://w
ww
.flic
kr.c
om/p
hoto
s/sa
mik
sha/
4069
2844
0
What does the user understand?
What terms do they understand?
KML has done very well because people know what “GoogleEarth” is and means. They may have an “RSS Reader”, but they probably don’t have “ArcGIS Desktop” or QGIS. They almost all have Excel to read CSV.
http
://w
ww
.flic
kr.c
om/p
hoto
s/um
pqua
/191
9094
40
What does the data suggest?
Form follows Function
The purpose of the data informs how it should be exposed and utilized. Is it just for an API? Is it for users to subscribe to? Visualize? Analyze?
GeoWeb
Fortunately, there is the Web. It allows for linking together data
Resources
•/places
•/places/89
•/places/89.atom
•/places/89.kml
•/places/89.sqlite
Don’t have to choose a single format - provide many. Appropriate for basic or advanced users and developers
Web Aligned http://highearthorbit.com/a-proposal-georss-kml
Link to the other formats. Tools are getting better at following these links.
http
://w
ww
.flic
kr.c
om/p
hoto
s/al
fr3do
/743
6142
What does the user understand?
What terms do they understand?
KML has done very well because people know what “GoogleEarth” is and means. They may have an “RSS Reader”, but they probably don’t have “ArcGIS Desktop” or QGIS. They almost all have Excel to read CSV.
Create
Publish
Aggregate
Consume
Exif GeoRSS KML GeocodingGPX
KML GeoRSS Microformats MachineTags
KML GeoRSS GML GeoJSONWFS
GeoStack
Interchange formats
Finding Data
http
://w
ww
.flic
kr.c
om/p
hoto
s/m
mm
azzo
ni/1
1001
9759
OpenSearch
OpenSearch Template
http://geocommons.com/search?keyword={searchTerms}&limit={count?}&page={startPage?}
requiredoptional?
OpenSearch is essentially a way to template out search parameters from a URL.
OpenSearch - HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Starting a Business in San Francisco map</title> <link type="application/opensearchdescription+xml" title="Mapufacture" rel="search" href="http://geocommons.com/search.xml" /> <link type="application/atom+xml"
title="Mapufacture GeoRSS Feed for Starting a Business in San Francisco"rel="alternate" href="http://geocommons.com/maps/1621.atom" />
<link type="application/vnd.google-earth.kml+xml" title="Mapufacture KML for Starting a Business in San Francisco"rel="alternate" href="http://geocommons.com/maps/1621.kml" />
</head><body>...</body></html>
If you provide a link in your HTML page to the OpenSearch - browsers like Firefox, Safari, and Internet Explorer can embed these into browser search bars.
Even MS Windows 7 can connect OpenSearch providers into your *desktop search* to the web.
OpenSearch - HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Starting a Business in San Francisco map</title> <link type="application/opensearchdescription+xml" title="Mapufacture" rel="search" href="http://geocommons.com/search.xml" /> <link type="application/atom+xml"
title="Mapufacture GeoRSS Feed for Starting a Business in San Francisco"rel="alternate" href="http://geocommons.com/maps/1621.atom" />
<link type="application/vnd.google-earth.kml+xml" title="Mapufacture KML for Starting a Business in San Francisco"rel="alternate" href="http://geocommons.com/maps/1621.kml" />
</head><body>...</body></html>
If you provide a link in your HTML page to the OpenSearch - browsers like Firefox, Safari, and Internet Explorer can embed these into browser search bars.
Even MS Windows 7 can connect OpenSearch providers into your *desktop search* to the web.
OpenSearch - HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Starting a Business in San Francisco map</title> <link type="application/opensearchdescription+xml" title="Mapufacture" rel="search" href="http://geocommons.com/search.xml" /> <link type="application/atom+xml"
title="Mapufacture GeoRSS Feed for Starting a Business in San Francisco"rel="alternate" href="http://geocommons.com/maps/1621.atom" />
<link type="application/vnd.google-earth.kml+xml" title="Mapufacture KML for Starting a Business in San Francisco"rel="alternate" href="http://geocommons.com/maps/1621.kml" />
</head><body>...</body></html>
If you provide a link in your HTML page to the OpenSearch - browsers like Firefox, Safari, and Internet Explorer can embed these into browser search bars.
Even MS Windows 7 can connect OpenSearch providers into your *desktop search* to the web.
Description Document<?xml version="1.0" encoding="UTF-8"?><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:geo="http://a9.com/-/opensearch/extensions/geo/1.0/">
<ShortName>GeoCommons</ShortName> <Description>Search for maps and data in GeoCommons</Description> <Tags>geo georss location kml aggregation geosearch</Tags> <Contact>[email protected]</Contact> <Image width="16" height="16" type="image/x-icon">http://geocommons.com/favicon.ico</Image> <Url type="text/html" template="http://maker.geocommons.com/searches?query={searchTerms}&limit={count?}&page={startPage?}"/> <Url type="application/atom+xml" template="http://maker.geocommons.com/searches.atom?query={searchTerms?}&limit={count?}&page={startPage?}"/></OpenSearchDescription>
http://maker.geocommons.com/search.xml
There is a description document that is hosted on your site.
Formats
<?xml version="1.0" encoding="UTF-8"?><OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:geo="http://a9.com/-/opensearch/extensions/geo/1.0/"> <ShortName>Mapufacture</ShortName> <Description>Search for geographic items in Mapufacture</Description> <Tags>geo georss location kml aggregation geosearch</Tags> <Contact>[email protected]</Contact> <Image width="16" height="16" type="image/x-icon">http://geocommons.com/favicon.ico</Image> <Url type="text/html" template="http://geocommons.com/search?keyword={searchTerms}&dtstart={time:start?}&dtend={time:stop?}&location={geo:locationString?}&lat={geo:lat?}&lon={geo:lon?}&distance={geo:radius?}&bbox={geo:box?}&limit={count?}&page={startPage?}"/> <Url type="application/atom+xml" template="http://geocommons.com/search.atom?keyword={searchTerms}&dtstart={time:start?}&dtend={time:stop?}&location={geo:locationString?}&lat={geo:lat?}&lon={geo:lon?}&distance={geo:radius?}&bbox={geo:box?}&limit={count?}&page={startPage?}"/> <Url type="application/vnd.google-earth.kml+xml" template="http://geocommons.com/search.kml?keyword={searchTerms}&dtstart={time:start?}&dtend={time:stop?}&location={geo:locationString?}&lat={geo:lat?}&lon={geo:lon?}&distance={geo:radius?}&bbox={geo:box?}&limit={count?}&page={startPage?}"/></OpenSearchDescription>
http://maker.geocommons.com/search.xml
The description document lets you specify multiple return formats.
OpenSearch Response
<feed xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/" xmlns:georss="http://www.georss.org/georss" xmlns="http://www.w3.org/2005/Atom"> <title>Mapufacture Maps</title> <id>http://geocommons.com/maps</id> <opensearch:totalResults>96</opensearch:totalResults> <opensearch:startIndex>21</opensearch:startIndex> <opensearch:itemsPerPage>20</opensearch:itemsPerPage> <link type="application/opensearchdescription+xml" rel="search" href="http://geocommons.com/geocommonssearch.xml"/>...</feed>
Pagination
<link type="application/atom+xml" rel="first" href="http://geocommons.com/maps?limit=20&page=2"/>
<link type="application/atom+xml" rel="previous" href="http://geocommons.com/maps?limit=20&page=1"/>
<link type="application/atom+xml" rel="next" href="http://geocommons.com/maps?limit=20&page=3"/>
<link type="application/atom+xml" rel="last" href="http://geocommons.com/maps?limit=20&page=5"/>
Extensions
• Referrer
• Relevance
• Suggestions
• Geo
• Time
Multiple extensions - most pertinent here is the Geo extension.
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}&location={geo:locationString?}
http://www.opensearch.org/Specifications/OpenSearch/Extensions/Geo/1.0/Draft_1
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}&location={geo:locationString?}
http://www.opensearch.org/Specifications/OpenSearch/Extensions/Geo/1.0/Draft_1
http://geocommons.com/search.atom? keyword=pizza& location=Norcross,+Georgia
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}&lat={geo:lat?}&lon={geo:lon?}&distance={geo:radius?}
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}&lat={geo:lat?}&lon={geo:lon?}&distance={geo:radius?}
http://geocommons.com/search.atom? keyword=pizza& lat=43.25&lon=-123.45&distance=10000
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}&bbox={geo:box?}
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}&bbox={geo:box?}
http://geocommons.com/search.atom? keyword=pizza& bbox=-111.032,42.943,-119.856,43.039
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}®ion={geo:polygon?}
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}®ion={geo:polygon?}
http://geocommons.com/search.atom? keyword=pizza&polygon=45.256,-110.45,46.46,-109.48, 43.84,-109.86,45.256,-110.45
OpenSearch-Geo
http://geocommons.com/search.atom?keyword={searchTerms}&location={geo:locationString?}&lat={geo:lat?}&lon={geo:lon?}&distance={geo:radius?}&bbox={geo:box?}
Response
<?xml version="1.0" encoding="UTF-8"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/" xmlns:georss="http://www.georss.org/georss"> ... <opensearch:Query role="request" searchTerms="New York History" startPage="3" geo:box="-74.0667,40.69418,-73.9116,40.7722"/> <georss:box>40.69418 -74.0667 40.7722 -73.9116</georss:box> ...</feed>
unfortunately, query is (longitude, latitude) [WSEN]response is (latitude, longitude) [SWNE]
GeoNetwork + GeoServer
GeoNetwork + GeoServer is a stack to host yourself.
Storing Data
So where do you go to store all this data?
PostgreSQL + PostGIS
internally? PostGIS - or maybe MySQL if you want to role your own solution
Google MyMaps API
Externally? Google has a beta MyMaps API for pushing markers into Google.
GeoCommons Finder! http://geocommons.com
GeoCommons is a public repository for publishing and searching datasets.
ProgrammableWeb
Look at upcoming API’s for other specific places to find geospatial data, and publish it.
GeoWeb
Thank you @ajturner@rabble
http://highearthorbit.com/presentations/
Atom Publishing Protocol
Atom
<entry> <title>Election Precincts</title> <link type="text/html" href="http://finder.geocommons.com/overlays/1" rel="alternate"/> <link type="application/atom+xml" href="http://finder.geocommons.com/overlays/1.atom" rel="alternate"/> <link type="application/vnd.google-earth.kml+xml" href="http://finder.geocommons.com/overlays/1.kml" rel="alternate"/> <link type="application/atom+xml;type=entry" href="http://finder.geocommons.com/overlays/1.atom" rel="edit"/> <id>http://finder.geocommons.com/overlays/1</id>local <updated>2009-05-18T15:35:55Z</updated> <contributor> <name>admin</name> <uri>http://finder.geocommons.com/users/admin</uri> </contributor> <category term="democracy" scheme="http://finder.geocommons.com/tags"/> <category term="election" scheme="http://finder.geocommons.com/tags"/> <author> <name>Michele Smith</name> </author> <georss:box></georss:box> <content type="html"> </content></entry>
<entry> <title>Election Precincts</title> <link type="text/html" href="http://finder.geocommons.com/overlays/1" rel="alternate"/> <link type="application/atom+xml" href="http://finder.geocommons.com/overlays/1.atom" rel="alternate"/> <link type="application/vnd.google-earth.kml+xml" href="http://finder.geocommons.com/overlays/1.kml" rel="alternate"/> <link type="application/atom+xml;type=entry" href="http://finder.geocommons.com/overlays/1.atom" rel="edit"/> <id>http://finder.geocommons.com/overlays/1</id>local <updated>2009-05-18T15:35:55Z</updated> <contributor> <name>admin</name> <uri>http://finder.geocommons.com/users/admin</uri> </contributor> <category term="democracy" scheme="http://finder.geocommons.com/tags"/> <category term="election" scheme="http://finder.geocommons.com/tags"/> <author> <name>Michele Smith</name> </author> <georss:box></georss:box> <content type="html"> </content></entry>
Atom Links
<link type="text/html" href="http://finder.geocommons.com/overlays/index.html" rel="alternate"/><link type="application/atom+xml" href="http://finder.geocommons.com/overlays/index.atom" rel="alternate"/><link type="application/vnd.google-earth.kml+xml" href="http://finder.geocommons.com/overlays/index.kml" rel="alternate"/>
A way to embed attribute data with any placemark
<entry> <title>Election Precincts</title> <link type="text/html" href="http://finder.geocommons.com/overlays/1" rel="alternate"/> <link type="application/atom+xml" href="http://finder.geocommons.com/overlays/1.atom" rel="alternate"/> <link type="application/vnd.google-earth.kml+xml" href="http://finder.geocommons.com/overlays/1.kml" rel="alternate"/> <link type="application/atom+xml;type=entry" href="http://finder.geocommons.com/overlays/1.atom" rel="edit"/> <id>http://finder.geocommons.com/overlays/1</id>local <updated>2009-05-18T15:35:55Z</updated> <contributor> <name>admin</name> <uri>http://finder.geocommons.com/users/admin</uri> </contributor> <category term="democracy" scheme="http://finder.geocommons.com/tags"/> <category term="election" scheme="http://finder.geocommons.com/tags"/> <author> <name>Michele Smith</name> </author> <georss:box></georss:box> <content type="html"> </content></entry>
Atom Attribution
<author> <name>Michele Smith</name></author>
A way to embed attribute data with any placemark
<entry> <title>Election Precincts</title> <link type="text/html" href="http://finder.geocommons.com/overlays/1" rel="alternate"/> <link type="application/atom+xml" href="http://finder.geocommons.com/overlays/1.atom" rel="alternate"/> <link type="application/vnd.google-earth.kml+xml" href="http://finder.geocommons.com/overlays/1.kml" rel="alternate"/> <link type="application/atom+xml;type=entry" href="http://finder.geocommons.com/overlays/1.atom" rel="edit"/> <id>http://finder.geocommons.com/overlays/1</id>local <updated>2009-05-18T15:35:55Z</updated> <contributor> <name>admin</name> <uri>http://finder.geocommons.com/users/admin</uri> </contributor> <category term="democracy" scheme="http://finder.geocommons.com/tags"/> <category term="election" scheme="http://finder.geocommons.com/tags"/> <author> <name>Michele Smith</name> </author> <georss:box></georss:box> <content type="html"> </content></entry>
Atom Attribution
<contributor> <name>admin</name> <uri>http://finder.geocommons.com/users/admin</uri></contributor>
A way to embed attribute data with any placemark
<entry> <title>Election Precincts</title> <link type="text/html" href="http://finder.geocommons.com/overlays/1" rel="alternate"/> <link type="application/atom+xml" href="http://finder.geocommons.com/overlays/1.atom" rel="alternate"/> <link type="application/vnd.google-earth.kml+xml" href="http://finder.geocommons.com/overlays/1.kml" rel="alternate"/> <link type="application/atom+xml;type=entry" href="http://finder.geocommons.com/overlays/1.atom" rel="edit"/> <id>http://finder.geocommons.com/overlays/1</id>local <updated>2009-05-18T15:35:55Z</updated> <contributor> <name>admin</name> <uri>http://finder.geocommons.com/users/admin</uri> </contributor> <category term="democracy" scheme="http://finder.geocommons.com/tags"/> <category term="election" scheme="http://finder.geocommons.com/tags"/> <author> <name>Michele Smith</name> </author> <georss:box></georss:box> <content type="html"> </content></entry>
Atom Tags
<category term="democracy" scheme="http://finder.geocommons.com/tags"/><category term="election" scheme="http://finder.geocommons.com/tags"/>
A way to embed attribute data with any placemark
Conversion and Utilities
http
://w
ww
.flic
kr.c
om/p
hoto
s/ca
ravi
nagr
e/13
6461
4919
GPSBabel http://gpsbabel.org
your swiss army knifeconvert from one to another
GDAL/OGR http://gdal.org
when you need a powersaw instead of a swiss army knife
GDAL translates Raster data (97 formats)OGR translates Vector data (35 formats)
GeoNames GeoRSS http://www.geonames.org/rss-to-georss-converter.html
Converts RSS to GeoRSS
there are many more.