Pixelfans

27 Jul 2009

Openstreetmaps in eigener Website

geschrieben von Pawel

Ich bin ein Fan von Googlemaps. Um ehrlich zu sein, ist die Bezeichnung bei dem Funktionsumfang nicht mehr ganz passend. Trotzdem lohnt es sich über den Tellerrand zu schauen, denn Googlemaps hat auch Nachteile:

  • die Nutzungsbedingungen können geändert, das Angebot (theoretisch) kostenpflichtig werden
  • das Ausdrucken der Karte, um es in einem Flyer zu nutzen, stellt eine Urheberrechtsverletzung dar
  • es ist nicht gestattet, die Karte zu modifizieren

Alle diese Nachteile haben die Openstreetmaps nicht, allerdings auch keine Satellitenbilder. Analog der Wikipediaidee kann jeder an der Sammlung und Visualisierung geografischer Daten mitwirken. Abseits der Städte gibt es naturgemäßnoch den gröten Unterstützungsbedarf. Liebe Geocacher wäre das nicht etwas für Euch?

Nun aber zur Einbindung der vorhanden Daten. Wer eben mal nur eine statische Karte benötigt, kann sich diese ganz leicht als png ausgeben lassen und gegebenfalls modifizieren. Eine Vektorgrafik kann relativ einfach gerendert und dann mit Inkscape bearbeitet werden.

Eine statische Karte lässt sich aber nicht zoomen und bewegen, deswegen ist eine Einbindung mit Javascript durchaus sinnvoll und so ähnlich machbar, wie von Googlemaps gewohnt. Das Wiki zeigt die Einbindung. Neben den Geokoordinaten muss allerdings noch das anzuzeigende Gebiet angegeben werden. Es geht aber so richtig schick fand ich das nie.

Als Alternative bietet sich CloudsMade an. Die Firma unterstützt das OSM-Projekt und stellt eine einfache API zur Verfügung, die den Zugriff auf die OSM-Daten erleichtert. Dazu ist ein kostenloser API-Key erforderlich, der nur für eine Website gültig ist.

Hier ein produktives Beispiel:

Im HTML-Quelltext muss ein Container platziert werden

<div id=“map”>
<p>Für die Anzeige ist Javascript erforderlich!</p>
</div>

In die Javascriptdatei gehört:

//Cloudsmap fuer Timeless Dance Company
function load() {
 var data = new CM.Tiles.CloudMade.Web({key:'key', styleId:998} );
 var map = new CM.Map(‘map’, data);
 var CloudMadeIcon = new CM.Icon();
 CloudMadeIcon.image = “cms/img/timeless_logo.gif“;
 CloudMadeIcon.iconSize = new CM.Size(76, 93);
 CloudMadeIcon.iconAnchor = new CM.Point(20, 80);
 var officeLocation = new CM.LatLng(51.480738, 11.962442);
 var studioMarker = new CM.Marker(officeLocation, {
			title: "Timeless Dance Studio in Halle",
			icon: CloudMadeIcon
		});
 map.setCenter(officeLocation, 17);
 map.addOverlay(studioMarker);
 map.addControl(new CM.SmallMapControl());
 }
// Aufruf der load-Funktion beim Laden
window.onload = load;
// Mapstyles nur bei aktiven Javascript laden
document.write(‘<link rel=“stylesheet” href=“cms/css/maps.css” type=“text/css” />‘);

Natürlich müssen die eigene Datei sowie die API eingebunden werden:

<script type=“text/javascript” src=“http://tile.cloudmade.com/wml/latest/web-maps-lite.js”></script>
<script type=“text/javascript” src=“cms/js/maposm.js”></script>

In dem Beispiel wurde noch ein eigenes Logo über die Karte gelegt (siehe Hervorhebungen im Quelltext). Die Möglicchkeiten sind damit nur angerissen. Am spannesten finde ich zur Zeit die Möglichkeit Mapstyles zu entwickeln, die die Karten unterschiedlich aussehen lassen können. Diese Styles stehen auch anderen zur Verfügung und können die Karten wesentlich aufhübschen.

Kategorie: JS | Trackbacks (0) | Permalink