Personalisierte Standortkarte mit JavaScript und Mapbox

von Andreas Scheidmeir

In diesem Blogeintrag möchte ich kurz vorstellen, wie man mit relativ wenig Aufwand eine personalisierte Karte in eine Webanwendung integrieren kann. So kann man zum Beispiel einen Werksplan anbieten, welcher zusätzliche Informationen für Mitarbeiter und Besucher bereithält oder einen einfachen Standpland für Messen und Feste.

Um unsere Karte darzustellen verwenden wir Leafletjs als Basis. Diese open-source JavaScript Bibliothek ermöglicht eine einfache Einbindung und bietet etliche praktische Plugins. Damit man auch etwas zu sehen hat, benötigen wir zusätzlich einen Tileprovider, welcher die Kartenbilder zur Verfügung stellt. Hier greifen wir auf Mapbox zurück. Mapbox setzt auf OpenStreetMap und Leafletjs auf und bietet eine komfortable Benutzeroberfläche zum Personalisieren der Karte.

Doch zunächst stellen wir eine simple Karte auf die Beine. Dazu erstellen wir einen kostenlosen Account bei Mapbox, generieren eine neue Karte und speichern uns die Map-ID sowie den Access-Token.
Mapbox bietet eine eigene js-Bibliothek an, welche auf Leafletjs aufsetzt. Diese vereinfacht die Nutzung der Karte zusätzlich, indem alle manuell gesetzten Datenpunkte automatisch mitgeladen und nicht über ein GeoJSON oder KML eingebunden werden müssen.

Nun müssen wir nur noch mapbox.js und css in unsere Seite einbinden sowie unser map-Div definieren. Danach setzen wir die AccessToken Variable „L.mapbox.accessToken“ auf den entsprechenden Token und können über „var map = L.mapbox.map('map', ‚map-id‘);“ die Karte generieren. Erstaunlich einfach.

Hier der Code:

<head>
 <script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
</head>
<body>
    <div id='map'></div>
 <script>
  L.mapbox.accessToken = 'pk.eyJ1IjoiYXNjaGVpZG1laXIiLCJhIjoiYmMzOWZmMzkzNzg0YzFiNDVjMDE2MGRkYzM1ZjAzZTgifQ.P8vJS0Dn8RO7KNjbHvpsOg';
  var map = L.mapbox.map('map', 'ascheidmeir.n748n4p0');
 </script>
</body>

Nun können wir auf Mapbox die Karte mit Markern, Linien und Flächen personalisieren und zusätzliche Informationen für den Endanwender zu Verfügung stellen. Alle gesetzten Datenpunkte werden automatisch übernommen und sollten nach kurzer Zeit in der Karte erscheinen.

Soweit so gut. Nun wollen wir die Karte noch um die Möglichkeit erweitern, unseren aktuellen Standort zu ermitteln und auf der Karte darzustellen. Auch dies ist dank eines Leaflet-Plugins erstaunlich einfach. Leaflet Locate bedient sich der HTML5 Geolocation API, welche ab IE9 und in allen modernen Browsern unterstützt wird - natürlich vorausgesetzt das Gerät, auf dem der Browser läuft, ist in der Lage seinen Standort zu bestimmen.

Um Locate zu verwenden, müssen wir wieder nur js- und css-Dateien einbinden (entweder von rawgithub oder mapbox) und über L.control.locate({ follow: true }).addTo(map); zu unserer Karte hinzufügen. Mit follow:true aktivieren wir zusätzlich das Tracking des Nutzers.

Vollständiger Code:

<head>
 <script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />

        <!-- Location -->
 <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.mapbox.css' rel='stylesheet' />
 <!--[if lt IE 9]>
            <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.ie.css' rel='stylesheet' />
        <![endif]-->
 <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />

</head>
<body>
    <div id='map'></div>
 <script>
  L.mapbox.accessToken = 'pk.eyJ1IjoiYXNjaGVpZG1laXIiLCJhIjoiYmMzOWZmMzkzNzg0YzFiNDVjMDE2MGRkYzM1ZjAzZTgifQ.P8vJS0Dn8RO7KNjbHvpsOg';
  var map = L.mapbox.map('map', 'ascheidmeir.n748n4p0');

                L.control.locate({ follow: true }).addTo(map);
 </script>
</body>

Ich hoffe dieser Blogeintrag hat aufgezeigt, wie einfach und unkompliziert es ist, eine personalisierte Karte in Webanwendungen einzubinden, welche einen echten Mehrwert für die Nutzer bieten kann.

Kategorien: HTML5JavaScriptLeafletMapbox

Zurück