Über mich

• Frontend-Entwicklerin
• Kiel, DE
• Contao seit 2007
• kikmedia.de, CCA, MetaModels ...
• @carolinakoehn

Was erwartet Euch?

EIN KURZER BLICK IN DAS FORMAT

REAL-WORLD-BEISPIELE

PITFALLS UND WORKAROUNDS

Ein kurzer Blick ins Format

Grafikformate

Kompression

Beispiel: JPEG

Beispiel: SVG

Mehr Möglichkeiten

Viele Eigenschaften von SVG-Dateien können beeinflusst werden.

Formen

Grundlegende geometrische Formen ...

• ‘rect’ element - Rechtecke
• ‘circle’ element - Kreise
• ‘ellipse’ element - Ellipsen
• ‘line’ element - Linien
• ‘polyline’ element - Linienzüge
• ‘polygon’ element - geschlossene Polygone

Alle sind XML-basiert, alle sind daher editierbar und steuerbar.

Link: https://www.w3.org/TR/SVG/shapes.html

Stile und Farben

Styling-Properties

• Font properties (Schrift)
• Clipping, Masking and Compositing (Verschneiden)
• Filter Effects (Filtereffekte)
• Gradient (Verläufe)
• Interactivity (z.B. Pointer-Events)
• Color and Painting (Farben und Füllungen)
• Text (z.B. Laufrichtung, Letterspacing, Transformation)

Liste: https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties

<g clip-path="url(#SVGID_2_)">
<text transform="matrix(0.9781 -0.2079 0.2079 0.9781 100.5757 350.9893)" fill="#FFFFFF" font-family="Arial" font-size="70.4029">Community</text>
</g>

<g clip-path="url(#SVGID_2_)">
<text transform="matrix(0.9781 -0.2079 0.2079 0.9781 100.5757 350.9893)" fill="#FFFFFF" font-family="Arial" font-size="70.4029">Contao rockt!</text>
</g>

Editierbar!

Und hier: Mal eben die Füllfarbe austauschen.

SVG, Realworld

Oder: Wie man aus Geodaten in Contao interaktive Vektorgrafiken erstellt.

Die Zutaten

- Geodaten

- Mapael.js

- Metamodels

Geodaten

• Behörden
• Geodatenportale
• OpenStreetMap
• OpenSource-Geodaten
• ...

Es gibt keine Out-of-the-Box-Lösungen.

SVG

Geodaten müssen ggf. nach SVG transformiert werden.

Werkzeuge:

• Inkscape (gut)
• Illustrator (schlecht)

... weil Illustrator viel kaputt macht und das Format um eigene Tags anreichert.

#LockedIn

Mapael.js

JavaScript-Bibliothek

jQuery-basiert

Raphael.js als Voraussetzung

Link: http://www.vincentbroute.fr/mapael/

Website Mapael.js

Eckdaten von Mapael.js

• Open Source
• Interaktivität möglich
• dynamische Updates möglich
• Daten als JSON
• sehr viele Plugins
• eigene Karten möglich

MetaModels

Contao-Extension

modellierbare Datenstrukturen

frei anpassbare Ausgaben

Link: http://now.metamodel.me/

Auf geht's ...

... oder: Entscheidend is' auffen Platz.

Installation MetaModels

MetaModels 2 via Composer

Benötigte Pakete:

• core
• Attribut Text
• Attribut Langtext
• Attribut URL

Konfiguration MetaModels

MetaModel für Geodaten einrichten

• Name wie in Geodaten
• Koordinaten
• Eigenschaften für Farben, Füllungen, Hoverstates
• Links

Übersicht MetaModels

Ein MM für die Farben ...

... und ein weiteres MM für die Kartenobjekte.

Template-Ausgabe planen

Ziele:

• bequemes Pflegen der Daten, Farben, Links
• Einbau in eine JSON-Struktur
• Einbindung der JSON-Struktur in die Map
• (Optional: Befüllung via Importjob mit ConvertX)

Templates

Templatestruktur aufbauen:

• benötigte Script-Fragmente
• strukturierte Ausgabe von Item-Daten
• Rendern als Rawdaten

Javascript

Laden und Einbinden von

• jQuery
• Raphael.js
• Mapael.js

Verschiedene Möglichkeiten zur Einbindung

Module anlegen

• Map-Container
• Map-Geodaten
• angepasstes MetaModels-Listing

Weiter geht's ...

... mit den Templates

Ideen

Die Templates sollen ...

• Rohwerte ausgeben
• Werte in JSON kapseln
• angepasste Attributausgaben ermöglichen

Template-Ausgabe planen

Ziele:

• bequemes Pflegen der Daten, Farben, Links
• Einbau in eine JSON-Struktur
• Einbindung der JSON-Struktur in die Map
• (Optional: Befüllung via Importjob mit ConvertX)

Konfiguration Rendereinstellungen

Rendereinstellungen einrichten

• keine Labels
• Name und Farbwerte als Text
• Links als Rohwert

Templates

Templatestruktur metamodel_list_map.html aufbauen:

• benötigte Script-Fragmente
• Schleife zur strukturierten Ausgabe von Item-Daten
• abschliessende Script-Fragmente

Javascript

Laden und Einbinden von

• jQuery
• Raphael.js
• Mapael.js

Verschiedene Möglichkeiten zur Einbindung

Module anlegen

• Map-Container
• Map-Geodaten
• angepasstes MetaModels-Listing

... und alles in einen Artikel einbinden.

Map-Container

Map-Scripte

Die Karte an sich

Map-MetaModel

Daten erfassen ...

Ergebnis

... oder: Das Spiel dauert 90 Minuten.

Die Schweiz als interaktive Karte

Quellen

SVG-Shapes: https://www.w3.org/TR/SVG/shapes.html

SVG-Styling-Eigenschaften: https://www.w3.org/TR/SVG/styling.html

Bibliotheken

jQuery - Basis-Javascriptbibliothek - https://jquery.com/

Raphael.js - Basisbibliothek für die Arbeit mit Vektorgrafiken - http://dmitrybaranovskiy.github.io/raphael/

Mapael.js - dynamische Visualisierungen mit Vektorgrafiken - http://www.vincentbroute.fr/mapael/

Geodaten

Geodatenportal Schweiz - http://www.geo.admin.ch/

Swisstopo - http://www.swisstopo.admin.ch/

Bundesamt Kartografie und Geodäsie - http://www.geodatenzentrum.de/

Mapael-Daten: https://github.com/neveldo/mapael-maps

Tools

Inkscape - freier Vektordaten-Editor - https://inkscape.org/de/