Workshop

Eigene Karten mit Mapstraction erstellen

9.5.2012 von Andreas Hitzig

Mit Mapstraction haben Sie die Freiheit anbieterunabhängig zu entwickeln und flexibel bei der Integration eines Kartenausschnitts oder einer Wegbeschreibung den Kartenanbieter zu wechseln. Wie zeigen Ihnen wie es geht.

ca. 8:25 Min

Ratgeber

Eigene Karten mit Mapstraction erstellen

Das Javascript-Framework Mapstraction bietet Ihnen eine Standardschnittstelle, die mehrere Bibliotheken für Kartendienste zusammenfasst. Neben Google Maps sind auch die Kartendienste von Yahoo, Microsoft, Open Steet Map, Open Layers und Cloud Map enthalten.

Damit müssen Sie sich zu Beginn der Entwicklung noch keine Gedanken machen, welchen Dienst Sie für diese Aufgabe nutzen. Ein Wechsel ist stets möglich - so können Sie beispielsweise schnell auf Änderungen der Lizenzbedingungen oder einen verbesserten Funktionsumfang eines Alternativanbieters reagieren und umstellen.

Mapstraction bietet Ihnen noch eine Reihe von zusätzlichen Funktionen, die auf der Standardschnittstelle aufsetzen. Besonders zu erwähnen sind an dieser Stelle die verschiedenen Marker, die Image Overlays und auch die Umkreismarkierungen, welche zusätzlich bekannte lokale Punkte mit in die Übersicht einbezieht. Das Framework wird als Open Source vertrieben und kann an Ihre eigenen Anforderungen angepasst werden.

Schritt 1: Laden Sie Mapstraction runter

Die aktuelle Version 2 des Frameworks gibt es auf der Website auf Github. In einem ersten Beispiel soll klassisch ein Kartenausschnitt dargestellt werden. Zusätzlich dazu benötigen Sie noch die Javascript-Bibliothek des Kartenanbieters.

Sie kapseln zwar die Schnittstelle, diese wird jedoch vom Mapstraction-Framework verwendet und setzt damit auch die Bibliothek des Anbieters voraus. Damit binden Sie vor dem Start immer zwei Bibliotheken - am besten über den Header Ihrer Website - ein.

<head><title>Mapstraction Simple Example</
title><script src="https://openlayers.org/
api/OpenLayers.js"></script><script src="https://raw.github.
com/mapstraction/mxn/master/source/mxn.js?(openlayers)" type="text/javascript"></script></head>

Für die Einbindung der Mapstraction-Bibliothek und die anschließende Darstellung des Kartenmaterials benötigen Sie eine minimale Struktur. Das folgende Beispiel stellt die dafür notwendigen Elemente dar.

<html><head><script type="text/javascript" src="<URL fuer die ausgewaehlte Karten API>"></script><script type="text/javascript" src="js/mxn.js?(<mxn ID fuer den gewuenschten Anbieter>)"></script><script type="text/javascript">$(document).ready(function() 
{var map = new mxn.Mapstraction('mapdiv', '<mxn ID fuer den gewuenschten Anbieter>');
});</script></head><body><div id="mapdiv" style="width: 800px; height: 470px;"></div></body></html>

Schritt 2: Arbeiten Sie mit Koordinaten

Das folgende Beispiel bildet einen Kartenausschnitt ab, in dem die Allianz-Arena in München als zentraler Punkt steht. Die entsprechenden Koordinaten bekommen Sie beispielsweise auf der Website von Sven Soltmann. Dieser ermittelt auf Basis von Google Maps die Koordinaten zu beliebigen Orten. Anschließend können Sie mit diesen Informationen Ihre erste Karte zeichnen lassen.

<body><div id="map_canvas" style="height:
400px; width: 100%;"></div><script type="text/javascript">
var mapstration;
mapstraction = new mxn.Mapstraction
('map_canvas','yahoo');
mapstraction.setCenterAndZoom(new
mxn.LatLonPoint(48.218611,11.624444), 20);</script></body>

Im Beispiel wird ein div-Bereich mit dem Namen map_canvas für die Darstellung der Karte definiert. Dieser Abschnitt bekommt aus Gründen der Einfachheit direkt in der div-Beschreibung die Höhe von 400 Pixel zugewiesen. Dies können Sie natürlich auch über eine separate Style-Definition abbilden.

Es gibt verschiedene Wege - im Bild ein Online-Dienst - zur Ermittlung des Längen- und Breitengrads eines Ortes.

Die eigentliche Darstellung der Karte erfolgt anschließend im Javascript-Teil. In diesem wird das div-Tag im ersten Schritt mit dem ausgewählten Kartenanbieter verknüpft. Dies geschieht über die Methode mxn.Mapstraction, wobei Sie als Parameter neben dem div-Tag den Hersteller angeben. In der aktuellen Version 2.0 stehen Ihnen insgesamt sechs Kartenanbieter zur Verfügung.

Schritt 3: Geben Sie den Längen- und Breitengrad des Ortes an

Diese Daten reichen bereits für die Darstellung der Karte aus. Wenn Sie das Skript mit diesen Daten starten, sehen Sie jedoch unter Umständen nicht den gewünschten Effekt und der Ort wird nicht optimal innerhalb des Kartenausschnitts dargestellt.

Sie können nun mit der nächsten Methode setCenterAndZoom() entsprechend optimieren. Die Zentrierung erfolgt automatisch, der numerische Wert definiert den Zoomfaktor des Ausschnitts. Damit haben Sie Ihren ersten Kartenausschnitt definiert.

Schritt 4: Kennzeichen Sie den dargestellten Ort

Bei dieser Darstellung ist es noch nicht klar ersichtlich, wo sich der Punkt genau befindet, den Sie auf der Karte anzeigen möchten. Aus diesem Grund bietet es sich an, im nächsten Schritt den Ort mit einem Marker zu kennzeichnen, den Sie hervorheben möchten.

Im Baukasten finden Sie mehrere Methoden zur Darstellung eines Markers. In der einfachsten Form legen Sie eine neue Markierung über die Methode addMarker() an, welche lediglich die Koordinaten des Punktes enthält. Das folgende Beispiel setzt dies auf Basis des Kartenmaterials von Google um.

mapstraction = new mxn.Mapstraction
('map_canvas','google');
mapstraction.addMarker( new mxn.
Marker( new mxn.LatLonPoint(48.218611,11.624444)));
mapstraction.autoCenterAndZoom();

In diesem Beispiel sehen Sie jedoch nur eine einfache Markierung, die Sie optisch nicht beeinflussen können. Dazu gibt es eine zweite Methode addMarkerWithData(), welche die Übergabe von zusätzlichen Eigenschaften zur Darstellung erlaubt.

mapstraction.addMarkerWithData(new
mxn.Marker( new mxn.LatLonPoint(48.218611,11.624444)),{
infoBubble : "Allianz Arena",
label : "Meine Markierung",
date : "new Date()",
marker : 4,
iconShadow: "https://mapufacture.com/
images/providers/blank.png",
iconShadowSize : [0,0],
icon : "https://assets1.mapufacture.
com/images/markers/usgs_marker.png",
iconSize : [20,20],
draggable : false,
hover : true
});

Der Baukasten besitzt die Möglichkeit, verschiedene Symbole und Schatten einzubinden und diese entsprechend zu skalieren und zu positionieren. Aus Gründen der Performance sollten Sie jedoch die Grafiken anders als in dem Beispiel auf Ihrem Server speichern. Damit verkürzen Sie die Ladezeit entsprechend. Eine komplette Übersicht aller zur Verfügung stehenden Parameter und deren Ausprägung finden Sie online in der Schnittstellendokumentation von Mapstraction .

Schritt 5: Verwenden Sie zusätzliche Steuerelemente

Ein erster einfacher Kartenausschnitt ist mit wenigen Programmzeilen dargestellt.

Bis jetzt konnten Sie den Kartenausschnitt nicht verändern und waren sowohl von der Größe als auch der Form der Darstellung limitiert. In der Regel bieten die Anbieter verschiedene Möglichkeiten, sowohl zur Skalierung als auch zum Verschieben des Ausschnitts.

Zusätzlich ist auch die Darstellung des Kartenmaterials entsprechend wählbar: Neben der Präsentation des Ausschnitts als klassische Karte verfügen die meisten Kartendienstleister auch noch über die entsprechenden Satellitenbilder und teilweise auch Geländekarten.

Mapstraction bietet Ihnen für diesen Fall die Methode addControls an, die insgesamt fünf Parameter besitzt:

pan aktiviert das Steuerkreuz sowie den Slider für den Zoomfaktor.
zoom bietet zwei Optionen - small und large - und gibt somit die Länge des Sliders zum Einstellen des Zoomfaktors des Ausschnitts an.
overview bietet Ihnen zur besseren Übersicht noch eine Übersichtskarte, welche den Ausschnitt markiert, der angezeigt werden soll.
scale zeigt Ihnen den Skalierungsfaktor an, mit dem ein Maßstab der Karte eingeblendet wird.
Map_type schließlich bietet die Option, zwischen den verschiedenen Darstellungsformen der Karte umzuschalten. Bei Google sind dies beispielsweise Karte, Satellit und Hybrid.

;mapstraction.addControls({
pan: true,
zoom: 'small',
map_type: true
});

Bis auf den Wert zoom sind alle anderen Werte boolsche Variablen. Die Standardeinstellung ist immer false, daher müssen Sie einen Wert explizit angeben und mit true versehen, den Sie aktivieren möchten.

Schritt 6: Fügen Sie Events hinzu

Die API erlaubt nicht nur die Darstellung von Kartenmaterial, sondern darüber hinaus auch die Verarbeitung von auftretenden Ereignissen.

In der Beschreibung der Schnittstelle finden Sie einen Abschnitt Event Summary, in dem die zur Verfügung stehenden Ereignisse ein wenig ausführlicher beschrieben werden.

Das folgende Listing-Beispiel reagiert hier auf das Anklicken des Kartenausschnitts, die Anpassung des Zoom-Faktors sowie das Verschieben des Kartenausschnitts.

mapstraction.click.addHandler
(function(event_name, event_source, event_args) {
var p = event_args.location;
marker = new mxn.Marker(p);
text = "<p>Lat: " + p.lat + " Lon: "
+ p.lon + "</p>";
marker.setInfoBubble(text);
mapstraction.addMarker(marker);
marker.openBubble();
});
mapstraction.changeZoom.addHandler
(function(n, s, a) { alert("Sie haben den Zoomfaktor angepasst")});
mapstraction.endPan.addHandler
(function(n, s, a) { alert("Sie haben den Kartenausschnitt verschoben")});

Das Skript verarbeitet das Klickereignis und stellt einen passenden Handler dafür zur Verfügung. Der Programmcode erstellt an der Stelle des Klickereignisses eine Markierung versieht diese im Textfeld mit dem Längen- und dem Breitengrad des Punktes. Die Information geben Sie über die Methode setInfo Bubble() aus.

Wenn Sie den Zoomfaktor anpassen, wird dieser zum einen automatisch durch die Kartenanwendung geändert. Parallel dazu geben Sie mit Hilfe des Programmcodes noch eine Popup-Nachricht mit dem Inhalt "Sie haben den Zoomfaktor angepasst" aus.

Den gleichen Aufbau hat der Handler für das Verschieben des Kartenausschnitts. Auch in diesem Fall wird eine Nachricht ausgegeben, jedoch mit abweichendem Inhalt.

Schritt 7: Arbeiten Sie mit Filtern

Mapstraction unterstützt auch den Einsatz von Filtern. Im Beispiel zeigen wir Ihnen, wie Sie alle Punkte innerhalb eines gewissen Radius um einen Punkt herum markieren. Das Beispiel setzt nur den Mittelpunkt der Suche, alle weiteren Punkte werden im Skript nicht gesetzt oder ermittelt - es ist jedoch der Platzhalter addMarker() dafür vorgesehen.

function initialize() {
$('handle2').hide();
mapstraction = new mxn.Mapstraction
('map_canvas', 'google');
mapstraction.enableScrollWheelZoom();
myPoint = new mxn.LatLonPoint
(48.218611,11.624444);
mapstraction.setCenterAndZoom
(myPoint, 12);
centerRadius = new mxn.Radius
(myPoint, 20);
addMarkers();
addSlider();
sliderChanged(1);
}

Innerhalb der Funktion zur Initialisierung des Beispiels wird wieder die Allianz-Arena als Mittelpunkt herangezogen und ein Radius um diesen Punkt gezogen. Nach der Zeile, in welcher Sie mit centerRadius den initialen Startumkreis definieren, haben Sie einen Kartenausschnitt mit dem Fußballstadion in der Mitte und einen Kreis mit einem entsprechend definierten Umgebungsradius.

Die Funktion addMarker() dient, wie bereits erwähnt, als Platzhalter für das Zusammensammeln der Punkte, die sich in der Umgebung der Markierung befinden.

In den beiden letzten Schritten wird in der Titelzeile ein Slider angelegt, mit dem Sie den Suchradius vergrößern oder verkleinern können.

function addSlider() {
slider = new Control.Slider
('handle1', 'track', {
range:$R(0, 5, false),
step:1,
restricted:true,
sliderValue: 1,
onChange: slider
Changed,
onSlide: slider
Changed
});
}

Wenn Sie einen Slider anlegen, geben Sie diesem eine Reihe von Startparametern mit:

range legt den Wertebereich des Sliders fest - im Beispiel den Bereich von 0 bis 5,
step gibt die Schrittweite an,
sliderValue legt den Startwert fest,
onChange und onSlide sind zwei Optionen, mit denen Sie Folgeverarbeitungen definieren, in beiden Fällen den Aufruf der Funktion sliderChanged.

Die Verarbeitung der Veränderung des Schiebereglers findet somit innerhalb der Funktion sliderChanged() statt. Ziel ist es, den Radius um den definierten Punkt mit dem Wert des Sliders gleichzusetzen und eventuell enthaltene Markierungen anzuzeigen.

function sliderChanged(radius) {
mapstraction.removeAllPolylines();
mapstraction.removeAllFilters();
mapstraction.addPolyline
(centerRadius.getPolyline( radius, '#00F'));
mapstraction.addFilter(distance,
'le', radius);
var selectedCount = mapstraction.
doFilter();
}

Dabei werden im ersten Schritt der vorhandene Kreis und die vorhandenen Filter gelöscht. Mit Hilfe von addPolyline ziehen Sie anschließend einen neuen Kreis um die Markierung mit dem auf dem Schieberegler eingestellten Wert und versehen diesen mit der entsprechenden Farbe.

Anschließend fügen Sie noch einen Filter distance ein und verknüpfen diesen ebenfalls mit dem Wert des Schiebereglers. Damit wären Sie streng genommen fertig. Im letzten Schritt wird jedoch noch die Anzahl der Markierungen, die sich innerhalb des neuen Suchradius befinden, ermittelt und ausgegeben.

Fazit

Mapstraction erlaubt Ihnen eine flexible Entwicklung im Umfeld der Kartenanbieter. Dank der Kapselung der Funktionen lässt sich der Kartenanbieter mit geringfügigen Änderungen austauschen. Sollten Sie aktuell in der Auswahlphase sein, welches Kartenmaterial Sie auf Ihre Website einbinden, bietet das Framework eine interessante Alternative.

Lediglich die Dokumentation lässt einige Wünsche offen. An dieser Stelle springt jedoch in der Regel die Sandbox mit ihren Beispielen ein und unterstützt beim Verständnis der Schnittstelle.