Tilemill-Tutorial – Karten stylen mit „CSS“

Nachdem im ersten Schritt das Shapefile mit den entsprechenden Daten verknüpft wurde lädt man dann das Shapefile in Tilemill.

Dazu muss man zunächst ein neues Projekt anlegen und dem Kind einen Namen geben. Außerdem empfiehlt es sich imho meist, das Häkchen bei „include world layer…“ zu entfernen, da man meist ja mit eigenen Shapefiles arbeitet und die Weltkarte im Hintergrund im besten Fall überflüssig ist und sonst eher irritierend ist. Weitere Angaben wie „Description“ sind optional und erstmal nicht notwendig.

Ist das Projekt angelegt, landet man auf der Projektübersicht, klickt nun auf sein neues Projekt und landet auf einer großen blauen Wand.

Unten links befinden sich mehrere Icons nämlich (aufsteigend) „Layer“, „Carto“, „Fonts“ und „Templates“.  Während „Carto“ und „Fonts“ nur eine lesenswerte Referenz sind, benötigt man insbesondere „Layer“ um überhaupt sein Shapefile einzubauen, während „Templates“ dann für das Styling von Tooltips und Legende der Karte verantwortlich ist.

Shapefile einfügen

Unter Layer (links unten) findet man den Eintrag „Add layer“. Öffnet man diesen kann man unter „Datasource“ im Dateiverzeichnis seines Rechners das gewünschte Shapefile in Tilemile hochladen. Weitere Angaben sind eigentlich nicht notwendig. Arbeitet man allerdings mit deutschen/nicht-englischen Daten, gibt es manchmal Darstellungsprobleme mit Umlauten und Sonderzeichen. In diesem Fall kann man unter „Advanced“ noch einen Eintrag vorzunehmen und zwar in dem man den Zeichensatz von UTF auf LATIN1 setzt. Dazu bei „Advanced“ encoding="LATIN1" einfügen.

Nun wird auf dem blauen Bildschirm oft noch nicht viel zu sehen sein, da man erst noch etwas reinzoomen muss (oben links sind die entsprechenden Buttons).

Rechts ist das Fenster mit Carto, einer Art CSS, der Auszeichnungssprache von Tilemill zu finden. Hier werden all die Angeben eingetragen, die für das Äußere der Karte verantwortlich sind.
Map {background-color: white;}

Dieses Code-Schnipsel beispielsweise legt den Seitenhintergrund der Karte auf weiß (white) fest. Hier können Farben natürlich auch in HEX-Daten angebeben werden (#fff z.B. für weiß).Tilemill Formatierung

Um nun einzelnen Werten wie in diesem Beispiel eine bestimmte Farbe zuzuordnen muss man mit „bedingten Formatierungen“ arbeiten. Dazu im Menu „Layers“ in der Datentabelle nach dem Spaltennamen mit den entsprechenden Daten suchen und mit den entsprechenden Bedingungen (größer/kleiner etc.) formatieren.
[WAHLKREISG >= -50000] { polygon-fill:#FEE6CE; }

Sehr praktisch ist, dass auch Tooltip, Legende und Klickverhalten mit Hilfe von Platzhalter in 3-fach geschweifter Klammer gestaltet werden können. Diese Platzhalter stammen ebenfalls aus der Datentabelle und werden dann live mit den entsprechenden Daten gefüllt.

Mit diesem Eintrag im Reiter „Teaser“ würde der Tooltip dann den Wahlkreisnamen und das zugehörige Bundesland angeben.

Im Wahlkreis {{{WKR_NAME}} in {{{LAND_NAME}}} gibt es {{{WAHLBERECH}}} Wahlberechtigte.

tabelle

Hat man noch eine Spalte mit der Webadresse namens „URL“, dann könnte man unter „Location“ das Klickverhalten mit {{{URL}}} festlegen. Hier im Beispiel aber nicht umgesetzt.

Dieser Eintrag wurde veröffentlicht in Datenjournalismus und getaggt als , , , , , . Fügen Sie den permalink zu Ihren Favoriten hinzu.

Schreib einen Kommentar

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