OpenStreepMaps (OSM) auf TYPO3 Website einbinden mit Leaflet und Mapbox

Wer helfen möchte die Datenkrake Google auf Informationsdiät zu setzen, der kann OpenStreetMaps als hochwirksames Google Maps – Derivat auf seiner Website einsetzen! OpenStreetMaps ist ein Open Source Projekt mit dem Ziel, eine unabhängige, freie Weltkarte zu erschaffen. Das tolle ist, JEDER kann an dieser Entwicklung beitragen und das Ergebnis kostenlos nutzen.

In diesem Blogbeitrag möchte ich jedoch lediglich kurz auf die Integration dieser wunderbaren Open Source Karte, ohne TYPO3-Extension eingehen. Stattdessen verwenden wir Leaflet und Mapbox.

Dazu sind folge Schritte notwendig.

1. Schritt

Folgender Code muss ins Typoscript eingefügt werden um das benötigte Script bzw. CSS bereitzustellen.

page.includeJSFooterlibs {
  leaflet = http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
  leaflet.external = 1
}
page.includeCSS {
  leaflet = http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
  leaflet.external = 1
}

 

2.Schritt

Als nächstes fügt Ihr an beliebiger Stelle ein <div> mit beliebiger ID ein.

<div id="openstreetmap"></div>

 

Ihr müsst außerdem noch per CSS diesem Container die gewünschte Höhe für die Karte geben.

3.Schritt

Als nächstes benötigt ihr einen Dienst, der eure im Prinzip gestaltete Karten zur Verfügung stellt. Einen solchen Dienst stellt zum Beispiel Mapbox zur Verfügung. Dort könnt ihr euch einen Account erstellen und anschließend Karten anlegen. Jede dieser Karte könnt ihr individuell gestaltet. Nachdem ihr damit fertig seid, müsst ihr die Karte öffentlich zugänglich machen und in dem folgenden Script die Map-ID und euer persönliches AccessToken eintragen, welche ihr von Mapbox erhaltet.

Als letztes bindet Ihr folgenden Javascriptschnipsel ein. Bitte die Daten ggf. anpassen (ID,Adresse etc…).

if($('#openstreetmap').length) { 
        // Euer AccessToken von Mapbox eintragen
        var accessToken = 'EUER-ACCESS-TOKEN';
        // 'examples.map-i87786ca' gegen eure Mapbox Karten ID auswechseln
        var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v4/examples.map-i87786ca/{z}/{x}/{y}.png?access_token=' + accessToken, {
            attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18
        });
         
        // Map Koordinaten eintragen
        var map = L.map('map')
            .addLayer(mapboxTiles)
            .setView([53.612817, 11.421642], 12);
 
        // Marker Koordinaten / Text eintragen             
        var marker = L.marker([53.606484, 11.426074]).addTo(map); 
	marker.bindPopup("<strong>Ihre Firma</strong><br />Musterstraße 1<br />12345 Musterstadt");
}

Ét voila, that’s it!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.