Archive for maj, 2012

Öppna data: Stockholmskarta i OpenLayers

Posted in Osorterad on maj 5th, 2012 by Clas – Kommentering avstängd

I samband med att Stockholms stad startade sin tävling ”Open Stockholm Award” så släppte de också lite ”öppna data” som kan/ska användas i tävlingsbidragen.

De flesta av de öppna data som de släppte är statisk information, och inte känns inte superspännande för att basera mobila tjänster på. Då de flesta data är kopplade till karta, på ett eller annat sätt, så kändes det rimligt att börja med att titta på hur kartbilderna som släpptes kan användas på en webbsida. Stockholms stads beskrivning av kartdata finns under geodata, och en beskrivningen av själva kartbilderna finns i en PDF. Eftersom de mellan raderna antyder att det bör vara enkelt att visa dessa Stockholmskarta med OpenLayers, så provade jag med det.

Då jag visserligen använt OpenLayers tidigare, men då med data från OpenStreetMap, som är lite av ”standardkartdata” för OpenLayers och som det finns massvis med exempel för, så anade jag att det skulle ta lite tid att få att fungera.

Efter några timmars experimenterande kom jag fram till koden nedan, som är ett minsta möjliga exempel för att visa kartbilderna. Dessa kartbilder är inte på något vis bättre än andra kartbilder som man kan använda ”mer eller mindre gratis”, som t.ex. Bing Maps, Google Maps, eller OpenStreetMap, och är dessutom begränsad till endast Stockholm.


<!-- Minimalt exempel på hur karta från http://open.stockholm.se/geodata
     kan visas med Javascript-bibliotektet OpenLayers
     Clas Rydergren, reslogg.se   -->
 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
    <head>
<style>
html,body {
  text-algin: center;
  margin: 0 auto;
  padding-top: 20px;
  height: 90%;
  width: 90%;
}
#map {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}
</style>
<script src='http://openlayers.org/api/OpenLayers.js'></script>
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
var extent = new OpenLayers.Bounds(140300,6564000,165000,6595000);
var options = {
  projection: "EPSG:3011",  // SWEREF99 18 00
  displayProjection: "EPSG:3011",
  maxExtent: extent,
  maxResolution: 10
};
var map = new OpenLayers.Map('map',options);
var sthlmURL = "http://openmap.stockholm.se/bios/wms/app/baggis/web/"+
"WMS_STHLM_STOCKHOLMSKARTA_GRA_FORENKLAD?";
var m = new OpenLayers.Layer.WMS('MyMAP',sthlmURL, {layers: 'stockholmskarta_gra_forenklad', type: 'png',
transparent: true, tiled: false},{buffer: 0, visibility: true, isBaseLayer: true} );
map.addLayer(m);
map.setCenter(new OpenLayers.LonLat(161250,6577500));
map.zoomToMaxExtent();
</script>
</body>
</html>

Resultatet av koden finns tillfälligt upplagd på reslogg.se/map.php.

Jag misstänker att jag aldrig kommer att göra något mer med dessa kartor, men för den som vill sätta ihop någon form av ”webbtjänst” för deras tävling (som avslutas den 13 maj) kan kanske komma igång snabbare med detta är vad jag gjorde, med hjälp av detta exempel.