Spelen met OpenLayers – Open Streetmap en Google Maps

Het is/was een pagina waarvan ik in 2007 al schreef “een handig script van vroeger“. Maar ik wist dat er toch nog redelijk wat mensen waren die gebruik maakten van de mogelijkheid om op de kaart op te zoeken wat de coördinaten van een locatie op Google Maps was en er dan naar te linken (ook al verwacht ik niet dat iemand ooit nog de Flickr optie gebruikt waar ik hem eigenlijk voor gebouwd had).

Van tijd tot tijd krijg ik mailtjes met de vraag of de code hergebruikt mag worden (natuurlijk, gewoon even in de bron van de pagina kijken en je hebt alles wat je nodig hebt). Maar echt veel andere plannen voor uitbreiding had ik al een tijdje niet. Wel ging ik er vanuit dat ik er *iets* aan moest doen want Google had al in mei 2010 de versie 2 van hun Maps API als “depricated” betiteld en vanaf a.s. november zou hij nu toch echt uitgeschakeld worden. Ze zouden dan wel een “wrapper” aanleveren die mogelijk de pagina toch werkend zou moeten houden, maar dat leek me ook niet ideaal.
Daar kwam bij dat ik hier en daar gelezen had over de grenzen die Google inmiddels gesteld heeft aan het gratis gebruik van Google Maps, dus wilde ik ook wel eens kijken of Open Streetmap geen goed alternatief was voor deze pagina.

Het weergeven van een Open Streetmap kaart in een webpagina is op zichzelf niet zo’n uitdaging, maar ik moest wat langer zoeken om te achterhalen hoe ik er dan ook de dingen mee kon doen die ik bij het oorspronkelijke Google Maps script ook kon: tonen van een marker als je ergens op de kaart klikt en het weergeven van de coördinaten van die plek in een permalink + in de velden naast de kaart. Daarnaast had ik van iemand de vraag gekregen of ik ook kon weergeven wat de schaal van de kaart was als je op een willekeurig niveau ingezoomd was.

Bij Open Streetmap zelf vond ik geen voorbeelden van wat ik wilde, maar het bleek dan ook zo te zijn dat ik op de verkeerde plek zocht. Ik kwam uiteindelijk terecht bij OpenLayers. Dat is een library (verzameling scripts) die niet specifiek is voor Open Streetmap, maar die in combinatie met verschillende ‘kaartproviders’ (waaronder ook Google Maps) gebruikt kan worden. Die library leverde de functionaliteit die ik nodig had om (ook) op basis van Open Streetmap de benodigde functionaliteit opnieuw te realiseren.

Het resultaat zie je in de afbeelding bij dit bericht en hier kun je het live uitproberen. Alle code is weer browser side, d.w.z. als je in de bron van de pagina kijkt dan zie je alle code die je nodig hebt om het script op je eigen server te laten draaien (of lokaal op je computer).
Er zit code in die er voor zorgt dat ook de oude URLs nog gewoon werken, leek me wel zo fijn voor de mensen die al gebruik maakten van de pagina.

Het meeste werk heb ik eigenlijk gehad aan het begrijpen van het geheel van ‘projections’, d.w.z. de vertaling tussen het coördinaten systeem dat OpenLayer gebruikt en het ‘gewone’ coördinaten systeem zoals ik dat gewend was te gebruiken met graden voor lengtegraad en breedtegraad.
Bij het aanmaken van de map geef ik aan dat de weergave in “EPSG:4326” moest zijn (ook wel bekend al WGS84, gebruikt graden van voor lengtegraad en breedtegraad) ook al gebruikte de kaart “EPSG:900913” (behandelt de aarde als een bol in plaats van een elipsoïde en gebruikt waarden van -20037508.34 tot 20037508.34 voor de coördinaten):
map = new OpenLayers.Map("map", {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
Dat betekent ook dat als ik een punt op de kaart wil plaatsen op basis van lengtegraad en breedtegraad in graden, ik die waarde eerst moet converteren:
var point = new OpenLayers.LonLat(setLon, setLat);
map.setCenter(point.transform(projWGS84, map.getProjectionObject()), setZoom);
updateLocation(map.getCenter(), map.getZoom());
Hier zijn setLon en setLat in graden weergegeven en die worden dan getransformeerd naar het coördinatensysteem van de kaart.

Mooi is ook dat OpenLayers een ingebouwde optie heeft om op basis van je IP-adres jouw locatie te bepalen. Dat werkt lang niet altijd. Zo is het IP-adres van mijn ADSL-aansluiting gekoppeld aan Nijmegen als locatie omdat daar mijn ADSL-provider gevestigd is. Maak ik via Wifi verbinding, dan klopt de locatie wel omdat het MAC-adres van mijn Wifi-router wél weer (ooit nog handmatig gedaan) gekoppeld is aan de juiste coördinaten.

Al met al is de kaart niet heel erg veel uitgebreider dan voorheen, maar heb ik nu in ieder geval de zekerheid dat het nog wel een tijdje blijft werken (mits de Open Streetmap servers in de lucht blijven) en was de vingeroefening met OpenLayers natuurlijk ook heel leerzaam.