⚡Web APIs

Karten einbinden (Mapbox)

Interaktive Karten mit Markern und Navigation

Ob Filialfinder, Liefertracking oder Reise-App. Interaktive Karten machen deine App sofort professioneller. Mit Mapbox bekommst du volle Kontrolle ueber Design und Features.

Pro-Tip — Der schnelle Weg
Mapbox hat 50.000 kostenlose Map-Loads pro Monat. Das reicht fuer die meisten Projekte. Wechsle zu vector tiles fuer schnelleres Rendering auf Mobilgeraeten.
Seite 1
1

Mapbox Account und Token

Erstelle einen kostenlosen Account auf mapbox.com und kopiere deinen Access Token. Den brauchst du fuer jede Map-Instanz. Speichere ihn als Umgebungsvariable.

# .env.local
NEXT_PUBLIC_MAPBOX_TOKEN=pk.eyJ1Ijoi...
2

React Map Komponente

Nutze react-map-gl, den offiziellen React-Wrapper fuer Mapbox GL JS. Ein paar Props und du hast eine voll interaktive Karte.

npm install react-map-gl mapbox-gl


import Map from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';


function MyMap() {
 return (
 <Map
 mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
 initialViewState={{ longitude: 10.45, latitude: 51.16, zoom: 5 }}
 style={{ width: '100%', height: 400 }}
 mapStyle="mapbox://styles/mapbox/dark-v11"
 />
 );
}
3

Marker hinzufuegen

Platziere Marker auf der Karte fuer Standorte, Filialen oder Points of Interest. Jeder Marker kann ein Popup mit Infos haben.

import { Marker, Popup } from 'react-map-gl';


<Marker longitude={13.38} latitude={52.52}>
 <div className="marker-pin" />
</Marker>


{showPopup && (
 <Popup longitude={13.38} latitude={52.52}>
 <h3>Berlin</h3>
 </Popup>
)}
4

User Location anzeigen

Zeige die aktuelle Position des Nutzers mit dem GeolocateControl. Ein Klick zentriert die Karte auf den Standort.

import { GeolocateControl, NavigationControl } from 'react-map-gl';


<Map ...>
 <GeolocateControl position="top-left" />
 <NavigationControl position="top-right" />
</Map>
5

Custom Map Style

Im Mapbox Studio kannst du komplett eigene Map-Styles erstellen. Farben, Fonts, sichtbare Layer, alles anpassbar. Perfekt fuer dein Branding.

Seite 2
Warum das funktioniert
  • Interaktive Karten erhoehen die Verweildauer auf der Seite
  • Visuelle Daten werden schneller verstanden als Listen
  • Mapbox ist schneller und anpassbarer als Google Maps
  • 50.000 kostenlose Loads pro Monat reichen fuer die meisten Apps
Tipps
  • Mapbox Geocoding API fuer Adress-Suche auf der Karte nutzen
  • Cluster-Marker fuer viele Datenpunkte verwenden
  • Lazy-load die Karte um die initiale Ladezeit nicht zu erhoehen
  • Dark-Mode Map-Style fuer dunkle Themes bereitstellen
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen