Die Alternative MapBox

Auch bei MapBox muss man sich registrieren und erhält einen API-Key, aber man muss weder seinen Namen noch Adresse oder gar Kreditkartennummer angeben (Stand Januar 2021). Es reicht eine E-Mail-Adresse. Ein paar Tausend Nutzungen im Monat sind zur Zeit noch kostenfrei.

Als Straßenkarten bindet MapBox OpenStreetMap (OSM) ein - damit haben unsere Autoren schon gute Erfahrungen gemacht. Die Satellitenkarten werden aus Bildern der NASA (National Aeronautics and Space Administration), USGS (United States Geological Survey) und aus Bildern kommerzieller Anbieter zusammengesetzt.

Zusätzlich bietet MapBox noch topographische Karten an, die als Outdoor-Map bezeichnet werden.

Man kann mit der API für MapBox direkt programmieren, aber mit den Javascript-Bibliotheken Leaflet und der Leaflet Routing Machine (wenn man einen Routenplaner benötigt) ist das Ganze doch etwas einfacher. Zusätzlich gibt es noch den Vorteil, dass Leafleat auch andere Kartenanbieter unterstützt. Sollte also MapBox aus irgendwelchen Gründen nicht mehr geeignet sein, muss man an seinen Leaflet-basierten Scripten nur wenig ändern.

Wir empfehlen, die Scripten für Leaflet und Leaflet Routing auf seinem Webserver zu speichern, z.B. im Pfad leaflet.

Für die Nutzung von MapBox mit Leaflet ergänzt man im Header:

<link href="leaflet/leaflet.css" rel="stylesheet">
<script src="leaflet/leaflet.js" type="text/javascript"></script>
<link href="leaflet/leaflet-routing-machine.css" rel="stylesheet">
<script src="leaflet/leaflet-routing-machine.js" type="text/javascript"></script>

Nun noch das eigene Script, das an einer Position einen Marker setzen kann:

<script type="text/javascript">
// Kartenobjekt
var map=-1;
// API-Key
var mapboxtoken="mein API-Key";
function showMBMap(latdeg,longdeg,zoom,maptype) {
    // latdeg --> Breitenangabe in Dezimalgrad
    // longdeg --> Längenangabe in Dezimalgrad
    // zoom --> Zoomfaktor
    // maptype --> s für Satellitenkarten, n für Straßenkarten, t für topographische Karten

    // Marker definieren
    var markerPos = L.icon({
        iconUrl: 'https://explorermagazin.de/images/startmarker.png',
        iconSize: [20, 34],
        iconAnchor: [10, 34]  // diese Angabe bestimmt, welcher Teil des Markerbilds auf der Position steht - hier ist es die Spitze, unten Mitte
    });
    // Da die Kartenanzeige vielleicht mehrfach aufgerufen werden soll, müssen wir ggf. die alte Karte löschen
    if (map!=-1) {
        map.off();
        map.remove();
    }

    // Karten und Kachelgröße gem. Typ festlegen
    var mapsrc = "";
    var tilesize=0;
    var zoomoffset=0;

    if (maptype="s") {
        mapsrc = "mapbox/satellite-v9";
        tilesize = 256;
    }
    if (maptype="n") {
        mapsrc = "mapbox/streets-v11";
        tilesize = 512;
        zoomoffset= -1; // bei einer Kachelgröße von 512 muss der Zoom angepasst werden
    }

    if (maptype="t") {
        mapsrc = "mapbox/outdoors-v9";
        tilesize = 256;
    }

    // Karte anlegen - im Zentrum soll sich unsere Koordinate befinden
    map = L.map('karte',{scrollWheelZoom: false}).setView([latdeg, longdeg],zoom);

     // Kartenkacheln laden
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + mapboxtoken,
        {attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' +
        ' contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: mapsrc,
        tileSize: tilesize,
        zoomOffset= zoomoffset;
        accessToken: mapboxtoken
    }).addTo(map);

    // Marker positionieren - der Markerkommentar kann beliebiges HTML enthalten, z.B. auch die Anzeige eines Bildes
    L.marker([latdeg, longdeg],{icon: markerPos}).addTo(map).bindPopup("Kommentar zum Marker");
}
</script>

Im Body der Webseite benötigen wir noch einen Bereich für die Karte:

<div id="karte" style="max-width: 100%; margin-left: auto; margin-right: auto; height: 400px"></div>

Und schon kann es losgehen ...

Unser beliebtes Testobjekt auf einer normalen Karte, was mag es sein?
Unser beliebtes Testobjekt auf der Satellitenkarte, was mag es sein?
Unser beliebtes Testobjekt, leider nicht mehr zu erkennen, aber zu viel Zoom hilft beim Rätseln jetzt auch nicht!
Unser beliebtes Testobjekt, leider nicht mehr zu erkennen, aber nun passt der Zoom, wir ahnen, worum es geht ...
Unser beliebtes Testobjekt, topographisch ...
Anmerkung: Unser beliebtes Testobjekt ist leider per Satellit nicht mehr zu sehen ,
aber wir helfen nach (Click auf den Marker!)
oder noch einfacher und eindrucksvoller für Faule .

Wer wissen will, wie das mit den Bildern funktioniert, schaut einfach in den Quellcode dieser Seite.

Bitte auf obige Links klicken, dann gibt es hier etwas zu sehen ...

Die Karten und Satellitenbilder von MapBox sind durchaus konkurrenzfähig mit Google Maps.

Es ist nicht allzu schwierig, Satellitenbilder oder Karten in seine Seiten einzubauen und Hinweismarker einzufügen. Wer noch mehr Satellitenbilder von beliebigen vorgegebenen Koordinaten sehen will, kann dies auf unserer Serviceseite Satellitenbild-Quickie. Ebenfalls auf Basis von MapBox Karten kann man unser weiteres Serviceangebot, den Entfernungsmesser benutzen!

© 2021 S. Zerlauth, Satellitenbilder, Luftaufnahmen und Karten: MapBox