Styled Maps: Interaktive Karten designen – ohne zu coden
Den Hintergrund unterschiedlich einfärben, Straßen und die Topografie hervorheben oder im Gegenteil – ein aufs nötigste reduziertes Design erstellen: Es macht Spaß, Karten nach den eigenen Vorstellungen und Anforderungen zu gestalten. Und das beste daran: Mit den richtigen Tools muss man zum Gestalten der Karte nicht einmal mehr programmieren können.
Das Wichtigste in den Vordergrund stellen
Bei Styled Maps geht es um mehr als reine Ästhetik. Es geht darum, über die gezielte Auswahl von Informationen, die auf der Karte angezeigt werden, eine Aussage zu treffen und den Nutzer zu führen. Um beispielsweise Daten auf einer Karte zu visualisieren, sollten bestimmte Labels wie Autobahnnummern oder Points of Interest entfernt werden, um nicht vom Wesentlichen abzulenken. Besser ist es, als Basis eine schlichte, reduzierte Karte zu nutzen. Für andere Zwecke können wiederum bestimmte Details sinnvoll sein: Beispielsweise können Naturschutzgebiete angezeigt werden, oder Infrastruktur wie Flughäfen oder Krankenhäuser.
Mapstylr and Mapbox Studio
Da wir bei Ubilabs vor allem mit den Kartendiensten Google Maps und Mapbox arbeiten, wollen wir anhand dieser Beispiele vorstellen, was Styled Maps sind – und was man damit machen kann. Das Prinzip ist in beiden Fällen sehr ähnlich:
Für Google Maps gibt es neben dem Google Maps API Styling Wizard, zahlreiche (kostenlose) Tools im Web, um ein individuelles Kartendesign zu erstellen, beispielsweise Snazzy Maps oder Mapstylr. Wir haben unsere Beispiele mit Mapstylr erstellt. Nachdem die Karte final gestyled wurde, wurde über den Button “Get JSON” ein JSON erstellt, das dann wiederum in eine Demo Anwendung bei Codepen eingebunden wurde.
Mapstylr for Google Maps
Malte Modrow (Front-end Developer bei Ubilabs) und Mirko Hamann (Designer bei Ubilabs) haben für uns ein Beispiel mit drei unterschiedlichen Kartenstilen entwickelt: Links ist die Basiskarte von Google Maps, rechts ist sie ganz reduziert, und darunter befindet sich eine Karte im nächtlichen Look.
See the Pen Google Maps standard + reduced by Malte Modrow (@mrMetalWood) on CodePen.
See the Pen Google Maps styled by Malte Modrow (@mrMetalWood) on CodePen.
Get your own style for Mapbox
Die Mapbox-Karten sind mit Hilfe von Mapbox Studio entstanden. Über ein Menü können eine Basiskarte und unterschiedliche Layer ausgewählt werden. Schon recht schnell stellt sich die Stärke von Mapbox heraus: Auf jeder Zoomstufe kann festgelegt werden, was man sieht – und wie es aussieht. Beispielsweise kann man definieren, ob und in welcher Farbe der Ländername auf einem bestimmten Zoomlevel angezeigt wird. Und auf einem anderen kann wieder eine andere Farbe definiert werden.
Auch für Mapbox gestalteten wir zwei neue Styles: auf der linken Seite ist wieder die Mapbox Basiskarte zu sehen. Rechts daneben ist eine reduzierte Karte und darunter ist eine benutzerdefinierte Karte in einem cleanen Look.
See the Pen Mapbox standard and reduced by Malte Modrow (@mrMetalWood) on CodePen.
See the Pen Mapbox styled by Malte Modrow (@mrMetalWood) on CodePen.
Psychedelic: Auf jeder Zoomstufe eine andere Farbe
Auf die Spitze getrieben hat das unser Designer Raphael Jocham mit seiner “Psychedelic Map”: Hier sind für jede Zoomstufe andere Farben definiert, was beim Zoomen zu einem einzigartigen Effekt führt.
See the Pen Mapbox psychadelic by Malte Modrow (@mrMetalWood) on CodePen.
Wenn die fertig gestylte Map dann auf einer Website eingebunden werden soll, muss doch noch ein bisschen gecodet werden. Für eine einfache Map ist das sowohl bei Google Maps als auch bei Mapbox jedoch schnell geschafft.
So wird die Styled Map in die Website eingebunden
Schauen wir uns zunächst einen einfaches Setup für eine Google Karte an. Um die Google Maps API nutzen zu können, muss sie zunächst in der HTML-Seite eingebunden werden:
<script src="https://maps.googleapis.com/maps/api/js"></script>
Als nächstes brauchen wir einen Container, in den die Map reingerendert werden soll. Um die Map später auch sehen zu können, sollte man darauf achten, dass für den Container eine Höhe und eine Breite festgelegt ist.
<div id="map"></div>
Anschließend wird in JavaScript eine simple Karte erstellt. Für die einfachste Variante muss man nur einen Mittelpunkt und eine Zoomstufe definieren, damit die Map angezeigt wird
<script>
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53.5617303,
lng: 9.9835443
},
zoom: 14
});
</script>
Nächster Schritt für Google Maps
Jetzt haben wir eine Basis-Karte mit den Standard Styles von Google. Wollen wir unsere selbst erstellten Styles verwenden, muss lediglich beim Erstellen der Map ein "styles" Attribut mit dem exportierten JSON (z.B. von Mapstylr oder Snazzy Maps) mit übergeben werden. Aus Platzgründen wird hier nicht das gesamte JSON gezeigt.
<script>
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53.5617303,
lng: 9.9835443
},
zoom: 14,
styles: [{
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
} ...]
});
</script>
Finished.
Nächster Schritt für Mapbox
Bei Mapbox funktioniert das ganze recht ähnlich. Auch hier muss zunächst die API eingebunden werden:
<script src='https://api.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.css' rel='stylesheet' />
Für Mapbox benötigt man zusätzlich einen Access Token für die API, welcher in Mapbox Studio bei den Account-Details oder direkt beim erstellten Style eingesehen werden kann. Das JavaScript für eine einfache Mapbox Map sieht dann so aus
<div id="map"></div>
<script>
mapboxgl.accessToken = <YOUR_ACCESS_TOKEN>;var map = new mapboxgl.Map({
container: 'map',
center: [9.9835443, 53.5617303],
zoom: 13,
style: "mapbox://styles/ubilabs/citbje2be002l2hrzs7gs8294"
});
</script>
Geschafft!