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.

Zurück

© 2006-2024 exensio GmbH
Einstellungen gespeichert

Datenschutzeinstellungen

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.

Sie können Ihre Einwilligung jederzeit ändern oder widerrufen, indem Sie auf den Link in der Datenschutzerklärung klicken.

Zu den gesetzlichen Rechenschaftspflichten gehört die Einwilligung (Opt-In) zu protokollieren und archivieren. Aus diesem Grund wird Ihre Opt-In Entscheidung in eine LOG-Datei geschrieben. In dieser Datei werden folgende Daten gespeichert:

 

  • IP-Adresse des Besuchers
  • Vom Besucher gewählte Datenschutzeinstellung (Privacy Level)
  • Datum und Zeit des Speicherns
  • Domain
You are using an outdated browser. The website may not be displayed correctly. Close