Erstellen schöner, stark angepasster Karten mit Mapbox und Drupal

Es gibt viele Kartenoptionen (Google, Esri, Yahoo, usw.), aber ich habe eine gefunden, die sich von den anderen abhebt. – Mapbox.

Google ist zwar die von vielen bevorzugte Technologie, verfügt aber nur über eine begrenzte Anzahl von Basiskarten, die es Ihnen nicht erlauben, vollständig benutzerdefinierte Designs zu erstellen. Mapbox ermöglicht die Erstellung schöner, hochgradig individueller Karten, die gut zu Ihrem Branding auf einer Vielzahl von Plattformen passen. Ihr Karteneditor, Mapbox Studio, ist ein extrem leistungsfähiges Tool, das dennoch recht einfach zu bedienen ist. Mit ihm können Sie Karten vollständig anpassen, z. B. die Farben von Straßen und Grundstücken und vieles mehr.

Der Vorteil für Ihr Unternehmen besteht darin, dass Sie eine einzigartig gestaltete Karte haben, die sich von der Konkurrenz abhebt und gut mit dem Rest Ihres Brandings harmoniert. Diese Karten können auf Websites, mobilen Anwendungen und anderswo verwendet werden, um ein einheitliches Erscheinungsbild für Ihre Produkte zu schaffen. Mit der Mapbox Studio-App können Sie die Karten auch ausdrucken oder in ein hochauflösendes Bild für die Verwendung in Druckmaterialien exportieren. Darüber hinaus ist Mapbox vollständig quelloffen und bietet einen kostenlosen Service für das Hosting Ihrer Kachelsätze an, sobald Sie sie erstellt haben.

Mapbox für Ihre Website oder Anwendung anpassen

Mit dem OpenLayers-Modul für Drupal können Sie Mapbox-Karten in Ihre Website oder Anwendung einbinden und mit Geotags versehene Inhalte darauf anzeigen. In diesem Beitrag gehen wir ein wenig darauf ein, wie das funktioniert, und zeigen ein paar Beispiele für anpassbare Karten, die Sie erstellen können.

Dies ist ein Beispiel für Mapbox Studio, den plattformübergreifenden Karteneditor, mit dem Sie eigene Kartenkacheln erstellen können. Hier habe ich die Straßenfarben aktualisiert, um Schattierungen von “DOOR3 Blue” zu verwenden. Mapbox Studio verwendet eine Stylesheet-Sprache namens CartoCSS, die ein wenig an LESS erinnert, einschließlich Variablen, Funktionen und dergleichen. Wie unten zu sehen ist, hat es eine Menge Dinge, die spezifisch für Karten ist und es gibt eine gute Referenz für die online als auch innerhalb der App über die Registerkarte Docs.

Sobald Sie einen Kartenstil erstellt haben, können Sie ihn über die Registerkarte “Einstellungen” auf den Server mapbox.com hochladen (sobald Sie ein Konto erstellt und die Studio-Anwendung für die Verbindung mit diesem Server autorisiert haben):

Nach dem Hochladen können Sie ihn in Ihrem Mapbox-Konto anzeigen:

Wichtig ist der Text direkt unter dem Kartennamen, in diesem Fall seanr.0d81f662 - das ist die Karten-ID, die Sie für die Integration in Drupal in eine URL wie diese formatieren müssen:

http://a.tiles.mapbox.com/v3/seanr.0d81f662/${z}/${x}/${y}.png

Mit dem OpenLayers-Modul für Drupal können Sie nun unter Struktur -> OpenLayers -> Ebenen, Ebene hinzufügen eine neue Ebene hinzufügen und sie dort als XYZ-Ebene eingeben, wobei Sie darauf achten müssen, die Ebene als Basisebene festzulegen:

Nachdem Sie die neue Ebene gespeichert haben, können Sie nun eine Karte erstellen, in der diese Ebene verwendet wird. Fügen Sie auf der Registerkarte Karten eine neue Karte hinzu, und ändern Sie unter Ebenen und Stile die Basisebene so, dass sie unsere neue Ebene von oben verwendet. Sie müssen auch den Mittelpunkt und die Grenzen für die Karte festlegen, was Sie über die Karte auf dieser Registerkarte tun können, oder indem Sie die Koordinaten manuell eingeben, wenn Sie sie haben. Ich habe auch festgestellt, dass die Standardzoomstufe für eine Straßenkarte wie diese 16 ist.

In einem Folgebeitrag werde ich das Tool Add Map in OpenLayers erklären und wie man den Inhaltstyp und die Ansichten auf der Drupal-Seitenentwicklung konfiguriert, um all dies zusammenzubringen, einschließlich benutzerdefinierter Symbole für Orte, aber das Endergebnis wird etwa so aussehen (in diesem Fall mit historischen Orten aus den 1960er Jahren im West Village):

Sean Robertson ist ein leitender Entwickler bei DOOR3.