OpenStreetMap for Web Developers

Serge Wroclawski
State of the Map US
August 2010

Youll get the !ost out of this talk if"""

You know #$M%

You know so!e &avascript

You have a basic un'erstan'ing of !apping

(lat) long*

What well cover

Si!ple e!be''e' !aps

+ontrolling the !ap with Open%a,ers

+ontrolling the view) -oo!

Multiple la,ers

Multi.Marker !aps

Map searching

A''ing a si!ple !ap to our web site
1* /ick an area ,ou want to !ap on
openstreet!ap"org
2* +lick 01port on top
2* /aste the #$M% snippet into ,our web page
3* Make ,ourself a peanut butter san'wich

+licking 0!be'

What 'oes that look like4
5ht!l6
5hea'6
5title6M, first e!be''e' OpenStreetMap page57title6
57hea'6
5bo',6
5ifra!e wi'th8932:9 height892:09 fra!ebor'er8909 scrolling89no9
!arginheight8909 !arginwi'th8909
src89http;77www"openstreet!ap"org7e1port7e!be'"ht!l4bbo18.
<<"03=1>)2=">=?=<).<<"01??>)2>"001=1@la,er8!apnik9
st,le89bor'er; 1p1 soli' black9657ifra!e6
5br 76
5s!all6
5a href89http;77www"openstreet!ap"org74lat82=">>323@lon8.
<<"02233@-oo!813@la,ers8M96Aiew %arger Map57a6
57s!all6
57bo',
57ht!l6

An' how 'oes it look4

A''ing a !arker

We want to a'' a !arker (pin* to our !ap

OSMs e1port allows us to to 'o that

+ircling Back

Weve covere' the !ost co!!on use cases for

e!be''ing OSM

Showing an area

/lacing a !arker to in'icate location

OpenStreetMap"org !akes this eas,

&argon

Tiles C i!ages in a slipp, !ap

RenderC process of turning raw 'ata into visual

representation

Geocoding C %ocation search" $he locational

result of a Duer,

OSM vs +o!!ercial Mapping
Services
Traditional
Commercial Maps

Een'ere' !aps

Developer Fe,

Single A/G

Single provi'er
OpenStreetMap

Een'ere' !aps or raw

'ata

Multiple A/Gs

Ho 'eveloper ke,
nee'e'

Several provi'ers (so!e

free) so!e co!!ercial

Abilit, to roll ,our own

Mapstraction

Mapstraction provi'es a single) si!ple overla,

to !ultiple !apping provi'ers

OpenStreetMap) Ioogle) Yahoo

/rovi'es several abstractions for OSM

Alternativel,

Open%a,ers) OpenGcon) Ho!inati!

Eeco!!en'e' even if ,oure using another

provi'er

A !ap is !a'e up of
!an, i!ages calle'
tiles

$he tiles are close

together so the,
appear as a single
i!age

As the user scrolls

across the !ap) new
tiles are loa'e'
$iles

%a,ers

A !ap la,er consists of 'ata

fro! one 'atasource

A !ap consists of one or

!ore la,ers

%a,ers are georectifie'

(aligne'* an' proJecte' on
top of one another

Our Kirst Map

+reate a 'iv to hol'

the !ap

+reate a !ap
associate' with that
'iv

A'' OSM as a la,er

to the !ap

<div id="ourMap"></div>
<script
src="http://www.openlayers
.org/api/OpenLayers.js">
</script>
<script>
map = new
OpenLayers.Map("ourMap");
map.addLayer(new
OpenLayers.Layer.OSM());
map.zoomToMaxExtent();
</script>

Mapping a Specific Area

Option 1; Selecting a point an' -oo!ing to it

Kin' the point ,ou like

Specif, the point as the center an' !anuall,

specif, -oo! level

Option 2; Loo!ing to an e1tent

Kin' the boun'ing bo1

Set the !ap to -oo! there

#ope the -oo! is what ,ou want

Loo!ing to a specific obJect

We have the lat7long

of our obJect

Gf ,ou 'ont know it)

well 'iscuss that later

+reate our !ap

$ransfor! our point to

0/SI;322?

Set the centerpoint

an' -oo!
map = new
OpenLayers.Map("demoMap");
map.addLayer(new
OpenLayers.Layer.OSM());
ourpoint = new OpenLayers.LonLat(
-77.04, 38.99)
ourpoint.transform(new
OpenLayers.Projection("EPSG:4326"
), map.getProjectionObject());
map.setCenter(ourpoint, 17);

Kin'ing the boun'ing bo1 of an area

We want to provi'e a !ap of a

specific location

Kirst we have to 'efine that

area in ter!s of a bounding
box

Gf ,ou 'ont know the

boun'ries) use OSMs e1port
tab

01port 'ispla,s the top) right)

left an' botto! boun'ries

Loo!ing to a boun'ing bo1

+reate our !ap

+reate our boun's

$ransfor! the!

Set the -oo!$o01tent

an' set it to tr, to get
the cloesest -oo!
('efaults to false*
map = new OpenLayers.Map("demoMap");
map.addLayer(new OpenLayers.Layer.OSM());
map = new OpenLayers.Map("demoMap");
map.addLayer(new OpenLayers.Layer.OSM());
bounds = new OpenLayers.Bounds(
-77.03949, 38.9899, -77.02625, 39.99684);
bounds.transform(new
OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
map.zoomToExtent(bounds, true);

A''ing a Marker an' infobo1 to a
!ap

We want to create a !arker (pin* on the !ap

We also want to set a title on the label

An' so!e !ore 'etaile' infor!ation on a popup

bo1

We nee' to !ake a new la,er

Set the label an' info bo1

A''ing our !arker

Make our !ap

Set the 'efault

proJection

Set another proJection

A'' our !arker la,er

!ap 8 new Open%a,ers"Map(9!ap9) M
proJection; 90/SI;>00>129)
'ispla,/roJection; 90/SI;322?9N*O
!ap"a''%a,er(new
Open%a,ers"%a,er"OSM(**O
var !arkers 8 new
Open%a,ers"%a,er"$e1t(
9te1t9) Mlocation; 9"7!arkers"t1t9)
proJection; !ap"'ispla,/roJectionN*O
!ap"a''%a,er(!arkers*O
!ap"-oo!$oMa101tent(*O

OSM Search

Search7Ieoco'ing is inclu'e' in OpenStreetMap

+alle' Ho!inati!

Use it online;

http;77no!inati!"openstreet!ap"org7search

/ass it para!eters;

format = {xml|json|html} ('efaults to ht!l*

q = {my search parameter}

viewbox = {left,top,right,bottom} C constrain search

to a boun'ing bo1

Gt also groks so!e special wor's as ke,7value pairs so

PcafeQ beco!es a!enit,8cafe an' so!e translation as well

A Duer, to Ho!inati!

G! using Eub, Eest+lient

Use whatever ,ou like" You coul' 'o it via

&avascript too) if ,ou knew !ore &S than !e

result = RestClient.get
'http://nominatim.openstreetmap.org/search',
{:params => {:q => 'McDonalds Silver Spring
MD', :format => 'json'}}.to_s

results = JSON.parse(result.to_s)

How we have our results in an arra,R

Anal,-ing a Eesult
{"lon"=>-77.030243,
"place_id"=>9175196,
"class"=>"amenity",
"icon"=>
"http://nominatim.openstreetmap.org/images/mapicons/food_fastfood.p.20.png",
"type"=>"fast_food",
"osm_id"=>480594520,
"display_name"=>
"McDonalds, 8507, Colesville Road, Sligo, Washington, Montgomery County, 20910,
Maryland, United States of America",
"licence"=>
"Data Copyright OpenStreetMap Contributors, Some Rights Reserved. CC-BY-SA 2.0.",
"lat"=>38.9949658,
"boundingbox"=>
[38.9948654174805, 38.9950675964355, -77.0303497314453, -77.0301361083984],
"osm_type"=>"node"}

Where to go fro! here4

Mapping %ibraries

Een'ering

G!ple!enting OSM in ,our environ!ent

+o!!ercial Support

Mapping %ibraries

Open%a,ers

We onl, barel, scratche' the surface

Mapstraction

0asier to use) Much less !ature

+o!!ercial Alternatives

+lou'Ma'e A/G

Uses OSM Data) co!prehensive) easier to use) !ore

featureful

MapDuest7AO%4 Bing4

Een'ering

+o!!ercial Een'ering Services

+lou'!a'e

+o!!ercial Support

Several +o!panies (Ieofabrik) others*

DGY

Mapnik

OSMEen'er

Your Own OSM Service

OSM +o!ponents

DB

Eails

Mapnik

Apache

Ilue

+o!!ercial Support

+usto! Een'ering

+lou'!a'e offers custo! tile ren'ering on their

har'war'

OSM Support

Man, in'ivi'uals an' co!panies offer support for

installing7!aintaining private OSM instances

%iste' on the OSM Wiki

$hank YouR