Sollte man Mapbox oder Google Maps API für eine Application mit Satellitenkarte verwenden? Wir schauen uns Beispiele, Vor- und Nachteile und Implementationen in React an.
Geschrieben von Peer Joeressen
Zuletzt aktualisiert: 07.06.2024
Ob beim Entwickeln einer App, Web-App oder einfach deiner Website. Die Wahl zwischen Mapbox und Google Maps API fällt nicht einfach.
In diesem Artikel beleuchten wir die Vor- und Nachteile beider Services und beantworten die Frage - Mapbox oder Google Maps API?
Die beiden Karten Anbieter stellen verschiedene Kartentypen zur Verfügung. Darunter fallen Satelliten-, Straßen-, Gelände- und Hybride- Karten. In diesem Artikel schauen wir uns die Satelliten- und Hybrid-Karten genauer an. Dafür beleuchten wir zunächst zwei Anwendungsfälle, die wir implementiert haben und schauen uns dann die einzelnen Eigenschaften an, um zu verstehen, welche Vor- und Nachteile die beiden Kartenanbieter haben.
Zunächst schauen wir uns zwei Praxisbeispiele an, die wir implementiert haben. Bei der Implementation der beiden Anwendungen haben wir Mapbox und Google Maps ausprobiert und sind bei beiden an unsere Grenzen gestoßen. Die beiden Anwendungen ähneln sich in der Branche, aber haben unterschiedliche Merkmale. Außerdem haben wir schlussendlich Mapbox und Google Maps API für die Anwendungen verwendet.
Die erste Anwendung ist die Einzeichnung der Dachfläche innerhalb eines Solar-Rechners. Hierbei wird dem Nutzer die Möglichkeit geboten, ein Polygon auf die Hybride-Satelliten-Karte einzuzeichnen. Außerdem wird anhand der Koordinaten die Adresse bestimmt mit der Reverse-Geocoding API. Die Anwendung wurde in React (Next js) und mit der Mapbox API gebaut. Das Einzeichnen auf der Satelliten-Karte passiert mit dem MapboxDraw-Tool aus dem Mapbox-GL-Package.
Außerdem hat man die Möglichkeit, nach Adresse zu suchen und das gezeichnete Polygon zu löschen. Beim Einzeichnen wird die Dachfläche berechnet und unten angegeben.
In diesem Beispiel haben wir uns für Mapbox entschieden, denn in der Anwendungsumgebung bietet die Satelliten Karte von Mapbox ein brauchbares Bild und wir kommen mit dem free Kontingent monatlich aus.
In diesem Artikel gehen wir weiter auf die Solar-Rechner ein.
Der zweite Anwendungsfall ist auch im Solar-Bereich. Hierbei geht es um die Planung einer Dachbelegung. Wieder wird die Dachfläche eingezeichnet. Im nächsten Schritt wird die Dachkante abgefragt und dann werden die Solarmodule auf die Dachfläche produziert und man kann die Dachbelegung planen.
Bei dieser Anwendung sieht man direkt die Anzahl der passenden Module, kann weitere hinzufügen oder entfernen und kann die Dachmerkmale genau angeben. Anhand dieser Merkmale werden die Module richtig projiziert.
Für diese Anwendung haben wir Google Maps verwendet, denn die Auflösung musste dafür in ganz Deutschland sehr hoch sein. Für das Einzeichnen des Polygons, Anzeigen der Buttons und Projizieren der Module haben wir Leaflet.js verwendet. Die App ist mit React und Vite gebaut worden, denn diese wird als Modul in eine weitere Applikation eingebunden.
Jetzt haben wir verschieden Anwendungsfälle für diese Kartenanbindung gesehen. In beiden Fällen haben wir uns für unterschiedliche Anbieter entschieden. Die genauen Merkmale besprechen wir jetzt, damit du auch eine gezielte Entscheidung treffen kannst.
Die beiden Kartenanbieter stellen verschiedene Kartentypen zur Verfügung. Darunter fallen Satelliten-, Straßen-, Gelände- und Hybride- Karten. Die grundlegenden Karten bieten beide an. Google hat darüber hinaus noch fachliche-spezifische Karten, die hier in der rechten Spalte zu finden sind. Auf die gehen wir nicht genau ein, da sie ein eigenes Thema sind.
Für beide Beispiele haben wir die Hybriden-Satelliten-Karten verwendet. Dabei werden die Straßeninformationen auf die Satelliten-Karte projiziert. Dies erleichtert die Navigation im Satellitenbild.
Mapbox bietet die Möglichkeit, Map-Styles zu erstellen, mit denen dies gelingt. In den Styles kann man den Kartentyp und die jeweiligen Informationen auswählen. Bei Google Maps gibt es verschiedene Kartentypen und Kombinationen direkt von Google.
In beiden Fällen muss man nur den Kartenlink anpassen, um den Kartentypen der Anwendung zu ändern.
Bei dem API Modell und den Einstellungen gibt es keinen großen Unterschied zwischen den Anbietern. Die Karten APIs werden anhand von API Keys verwendet. Diese können in Google API Konsole oder auf Mapbox.com erstellt werden.
Beim Erzeugen dieser Keys sollte man diese nur auf die jeweilige Domain beschränken und nicht weiter teilen. Bei der Verwendung in einer Web-Application oder Website ist der API-Key einsehbar. Aus diesem Grund sollte der geteilte Key nur auf die eigene Domain beschränkt werden.
Außerdem sollte man ein festes Kontingent festlegen, welches nicht überschritten werden kann, um die API Kosten zu regulieren.
In diesem Aspekt unterscheiden sich die beiden Kartenanbieter bei den Satellitenkarten stark. Keine der beiden Satellitenkarten ist perfekt.
Google Maps bietet grundsätzlich ein schärferes Bild in den meisten Teilen von Deutschland. Leider sind manche Bilder recht alt und wurden noch nicht erneuert.
Mapbox bietet allgemein ein schlechteres Bild als Google. Jedoch ist es in manchen Regionen schärfer und besser ausgeprägt als das Bild von Google Maps.
Insgesamt hat Google ein besseres Bild. Jedoch ist dies nicht in jeder Region so. Man sollte vor der Anwendung seine bestimmte Region checken und schauen, wie das Bild ist. Denn in manchen Regionen ist Mapbox besser als Google Maps.
In diesem Aspekt geben sich die beiden Lieferanten nicht viel. Beide Kartenanbieter stellen gute Dokumentation für die Services bereit. Diese Dokumentationen sind sehr detailliert und helfen bei der Implementation in die eigene Anwendung. Mit den Suchfunktionen findet man alle Funktionalitäten der Karten, wenn man weiß, wie diese heißen.
Die Dokumentation für Google Maps und Mapbox.
Reverse Geolocation ist die Möglichkeit, eine genaue Adresse für Geo-Koordinaten abzufragen. Also (52°31'06.6"N 13°24'04.0"E) → (Am Lustgarten, 10178 Berlin, Germany). Dies ist sinnvoll, wenn der Nutzer auf der Karte etwas markiert und man die genaue Adresse ausgeben möchte. Dies Möglichkeit bieten beide APIs sehr gut an.
Dabei sendet man jeweils einen Request mit API Key und Geo-Koordinaten an die API und erhält die Informationen als Antwort.
Die Dokumentationen zum Reverse Geolocation von Mapbox und Google Maps Doc.
Hier gibt es große Unterschiede zwischen den beiden Services. Beide Services bieten ein monatliches Kontingent für die API-Nutzung an. Das reicht für kleine Anwendungen aus, sobald die Nutzerbasis wächst, wird man diese Kontingents ausschöpfen. Deshalb ist frühzeitig zu beachten, worauf man sich einlässt. Denn einmal implementiert, ist es schwieriger, zwischen den Anbietern zu wechseln.
Die genauen Preise für Google Maps API. Ein Kartenaufruf kostet nach dem Kontingent ca 0.007 €. Das klingt zunächst nach nicht viel, aber bei Satellitenkarten wird dann noch anhand von Bildkacheln und weiteren API Services abgerechnet.
Die genauen Preise für Mapbox API. Bei Mapbox ist es nach dem Kontingent ca 0.0025 €. Außerdem sind die weiteren API Services von Mapbox günstiger als Google Maps und das Gratis-Kontingent größer.
Außerdem sollte man bei beiden APIs eine obere Kontingentsstufe einstellen. Diese verhindert, dass mehr Kontingent verwendet werden kann, ab einem bestimmten Preis.
Es ist wichtig, die API Preise zu prüfen, denn diese können sich ändern.
Im Aspekt der Anbindung und Funktionalitäten gibt es große Unterschiedene. In unseren Bespielen haben wir die Anbieter jeweils in React verwendet und um weitere Funktionalität erweitert.
Mapbox bietet mit dem Mapbox-GL-Package ein sehr ausführliches Package, um die Karten mit Funktionalitäten zu erweitern. Dabei bieten sie viel Dokumentation für die Einbindung in React an und zeigen, wie man die Karten erweitert. Hier ist die Dokumentation und ein Github Repo mit weiteren Beispielen.
Das ganze fällt bei Google schwerer. Es gibt ebenfalls die Möglichkeit, die Karte um Funktionalitäten wie Zeichnen zu erweitern. Jedoch sind wir damit sehr schnell an die Grenzen gestoßen. Sobald man gezielt Bilder auf die Karte projizieren will, wird es mühselig. Im Anwendungsfall haben wir uns entschieden, auf Leaflet.js zurückzugreifen. Leaflet erstellt eine weitere Schicht über die Karte und auf dieser kann man die weiteren Funktionalitäten implementieren. Damit gelingt einzeichnen und projizieren.
Leider ist die Dokumentation von Leaflet in React und Erstrecht in Next js (Typescript) sehr begrenzt. Bei der Implementation lauern viele Hürden, die es zu überkommen gilt. Es gibt nicht sehr viel ausführliche Informationen im Internet und es ist keine gute Erfahrung. Doch wenn man es zum Laufen bringt, scheint es sehr stabil zu sein. Außerdem ist es mächtiger als die Funktionalitäten von Mapbox-GL.
Anhand dieser Informationen kann man gezielt auswählen, welchen Kartenanbieter man verwendet. Beide Kartenanbieter haben Vor- und Nachteile und man kann keine grundlegende Entscheidung treffen.
Wenn man eine neue Web-Application nur zum Testen von Karten-Anwendungen entwickelt, kann der Einstieg mit Mapbox leichter fallen und viel günstiger sein. Oft wächst man dann im Prozess darüber hinaus und benötigt weitgehend gute Bilder, die man bei Google findet. Doch Googles API Preise skalieren höher als Mapbox.
In unseren Beispielen fielen die Wahlen leicht. Im Anwendungsfall 1 brauchten wir gute Kartenbilder in einer bestimmten Gegend, dadurch konnten wir uns für Mapbox entscheiden. Die Kartenbilder in der Umgebung des Anwendungsfalls waren gut und darüber hinaus kommen wir mit dem Gratis-Kontingent aus. Sollte dieses überschritten werden, ist Mapbox kostengünstiger.
Für Anwendungsfall 2 brauchen wir gute Satellitenbilder in ganz Deutschland. Deshalb haben wir uns für Google Maps API entschieden. Wir können sichergehen, dass flächendeckend gute Bilder verfügbar sind und die Anwendung gut funktioniert für alle Nutzer. Außerdem konnten wir mit Leaflet die Funktionalität gut implementieren.
Endlich ausgelastet mit eigenen, exklusiven Solar Leads
Hey, bist du Inhaber oder Geschäftsführer einer Solarfirma? Dann ist das hier sicher interessant für dich. Mein Name ist Armin Hirschfeld. In den vergangenen 12 Monaten haben wir eine einzigartige Methode für PV-Fachbetriebe geschaffen, die für täglich neue Kundenanfragen in deinem Email-Postfach sorgt.
Unser Prozess zeichnet sich durch den allumfänglichen Ansatz in der Leadgenerierung aus. Wir machen nicht nur Social Media und das war's, sondern wir nutzen alle relevanten Kanäle, um deine Wunschkunden zu erreichen.
Mehr ansehen
