Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » (Kostenlose) Services » Schluss mit dem Einheitsbrei: Individuelle Karten mit MapBox

Schluss mit dem Einheitsbrei: Individuelle Karten mit MapBox

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 19. Juli 2012
Bookmarke mich
Share on pocket

Auf vielen Websites sind Kartenausschnitte zur Visualisierung des Unternehmensstandorts eingebunden. Meist wird Google Maps verwendet; gelegentlich stößt man auch auf OpenStreetMap. Das ist auf der einen Seite sehr praktisch – schließlich sind die Karten schnell in das eigene Projekt eingebunden. Auf der anderen Seite muss man sich mit dem Standardlayout der Kartendienste begnügen. Der Dienst MapBox sorgt hingegen für individuell gestaltbare Karten, die dennoch ebenso schnell eingebunden sind.


MapBox

Ist man bei MapBox einmal registriert, kann über eine grafische Oberfläche ein Kartenausschnitt gewählt werden. Ganz ähnlich wie bei Google Maps wird durch die Karte navigiert, bis der Ausschnitt stimmt. Auch die numerische Angabe von Koordinaten und eines Zoomfaktors ist möglich.

Individuelle Gestaltung der Karten

Das Besondere an MapBox ist die Möglichkeit, die einzelnen Layer der Karte zu individualisieren. Die Farben von Straßen, Gebieten, Gewässern und Ländern lassen sich frei definieren. Bei Straßen besteht zudem die Möglichkeit, diese in doppelter Breite darzustellen.


Individuelle Gestaltung der Karten möglich

Gerade bei der Darstellung von Kartenausschnitten von Ländern mit nicht-lateinischer Sprache ist die Option hilfreich, Bezeichnungen in englischer Sprache ausgeben zu lassen. So wird zum Beispiel statt arabischer oder asiatischer Namen die für Europäer besser lesbare englische Übersetzung genommen.

Marker setzen

Ein weiteres Feature von MapBox ist das Setzen eigener Marker, um Standorte zu kennzeichnen. Jeder Marker erhält einen Namen und optional eine Beschreibung. Das Aussehen des Markers ähnelt dem durch Google Maps etablierten und mittlerweile bei vielen Diensten eingesetzten Symbol. Neben der Farbe und Größe des Markers kann auch noch ein Symbol ausgewählt werden, welches innerhalb des Markers angezeigt wird.


Setzen von schicken, anpassbaren Markern

Zur Auswahl stehen über 70 Symbole für Restaurants, Museen, Rathäuser, Universitäten etc. Das von MapBox eingesetzte Maki-Iconset wird auch separat zum Download angeboten und kann daher unabhängig von MapBox eingesetzt werden.

Kartenausschnitte einbinden

Ist der Kartenausschnitt fertig, kann er auf zwei verschiedene Arten in Webprojekte eingebunden werden. Neben dem einfachen Einbinden per Iframe lässt sich der Ausschnitt über ein JSON-Objekt und die hauseigene API integrieren.

Nutzung und Kosten

Die kostenlose Variante von MapBox lässt bis zu 3.000 Karteneinblendungen im Monat zu. Besteht ein höherer Bedarf, muss einer der vier kostenpflichtigen Tarife gewählt werden, die zwischen 5 und 499 US-Dollar im Monat kosten. Die kostenpflichtigen Tarife bieten neben mehr Abrufen unter anderem noch eine Statistik und die Karteneinbindung per SSL.

Fazit: MapBox bietet alles, um schicke und individuelle Karten erstellen zu können. Wer Google Maps und OpenStreetMap nicht mehr sehen mag, sollte sich den Dienst einmal anschauen. Wer mit hohen Abrufzahlen rechnet, sollte allerdings genau kalkulieren, ob die individualisierte Darstellung die Kosten rechtfertigt.

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

UnitedAds

Starnberg

AMZ-Marketing GmbH

Regensburg

NETZhelfer GmbH

Ostfildern

SEOfolgreich – Local SEO Agentur München

München

Wee Media | Webdesign Agentur

Dernbach

Alle Agenturpartner

Jobs

Teamleiter Online Marketing

München

Sprachtalente

Volkach oder Würzburg

Inside Sales Manager

Karlsruhe

WordPress Developer – Vollzeit

Remote

Media Manager in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Social Media: 8 handverlesene Bilder-Tools

Im Allgemeinen erreicht man durch die Verwendung von Bildern in Social-Media-Beiträgen mehr, als wenn man nur Text posten würde. Experimente haben gezeigt, dass man mit bebilderten

 →   

Design mit Spark, Canva, Crello: So erstellst du perfekte Bilder für deine Website

Es ist schon erstaunlich, aber wahr. Für die Erstellung plakativer Bildkompositionen für deine sozialen Medien, deine Website und sogar deine sonstigen Kommunikationsmittel musst du nicht

 →   

Stock-Videos kostenlos: Tausende Filme für deine Designs

Wir haben zwanzig der besten kostenlosen (und fast kostenlosen) Anbieter von Stock-Videos im folgenden Beitrag gesammelt: Vor wenigen Jahren noch undenkbar, findest du heutzutage eine

 →   

0 Antworten zu „Schluss mit dem Einheitsbrei: Individuelle Karten mit MapBox“
— was ist Deine Meinung?

  1. Filip sagt:
    19. Juli 2012 um 12:12 Uhr

    Hallo dr.web-team und Danke für den Artikel.
    Hab mich schon vor einiger Zeit mit mapbox beschäftigt, finde den Service auch sehr gut. Leider hatte ich bis jetzt noch viel zu wenig Zeit um mich mit dem eigentlichen Hammer-Feature der ganzen Sache zu beschäftigen, und zwar mit dem Programm TileMill welches man kostenlos herunterladen kann um damit eigene Layer zu erstellen welche dann wiederum in den Karten eigebunden werden können.
    Das wäre doch fast einen follow-up-Artikel wert, oder?
    Viele Grüße, Filip

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.