Foliensatz als PDF - Contao

AgendaTeil 1: Einstieg in CFS-Maps1. Kurze Einführung in OpenStreetMap2. Was ist OpenLayers?3. Einbindung einer Karte in Contao4. Hinzufügen von Lokationen5. Konfigurieren der Karteneinstellungen6. Nutzung verschiedener Kartenlayouts7. Konfiguration der Lokationen8. Visuell definierte Flächen und WegePauseContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 2

AgendaTeil 2: CFS-Maps verbindet9. Termine auf Karten anzeigen10. eigene Tabellen einbinden (Beispiel Catalog)11. Steuerelemente der Karte stylen12. Geokodierung über Nominatim-Dienste13. Lokationen über CFS-Forum anzeigen14. Ausblick & Diskussion15. LizenzinformationenContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 3

Teil 1: Einstieg in CFS-MapsContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 4

1. Kurze Einführung in OpenStreetMapdie freie Wiki-WeltkarteDatenbank für Geographische Informationssysteme (GIS)aus den Daten werden verschiedene Karten errechnetdie Datenbank ist offen und fast grenzenlos erweiterbardas OSM-Projekt wurde 2004 von Steve Coast gestartetwächst rasant durch die Mapper (> 500.000 Benutzer)viele Einsatzgebiete, wie Karten, Routen, Navigation, …Mitmachwerkzeuge, wie Potlatch, JOSM, …Man kann OSM komplett auf eigenen Servern betreiben, und z.B. eigeneKartenlayouts entwerfenLizenzänderung steht anContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 5

2. Was ist OpenLayers?Javascript-Bibliothek zur Einbindung von dynamischen Karten und Geodaten imWeb-Browserunterstützt z.B. OpenStreetMap, Google Maps und Bing Mapsunterstützt viele Formate wie GPX, GeoJSON und KML, um Kartenfeatures (z.B.Punkte, Flächen, Linien) zu importierendas OpenLayers Projektkomitee besteht aus acht Entwicklern.andere Bibliotheken (z. B. Leaflet) sind schlanker, bieten aber nicht so vielFunktionalitätzurzeit binden wir die OpenLayers Bibliothek komplett ein (950 KB minifiziertesJavascript)durch einen eigenen Build-Prozess könnte man die Größe wohl deutlichreduzieren, indem man alle nicht benötigten Codeteile rauslässtInformationen: http://www.openlayers.orgContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 6

3. Einbindung einer Karte in ContaoCFS-Maps installierenim Backend “Karten (OpenLayers)” wählenein neues Kartenelement anlegen“Als Karte verwenden” klickenGröße und Breite der Karte festlegenGeo-Koordinaten und Zoomlevel festlegen. Für die Geo-Koordinaten steht einvisueller Geopicker zur Verfügung.Einbindung der definierten Karte über ein Inhaltselement in einen Artikel. EinFrontend-Modul steht auch zur Verfügung.wird kein Kartenprofil angelegt, dann wird standardmäßig eine Karte im Mapnik-Layout angezeigtContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 7

5. Konfigurieren der KarteneinstellungenIm Kartenprofil (unter “Layout”) lassen sich das Aussehen der Karte sowie die zuverwendenden Steuerelemente konfigurieren.Ein “Standardprofil” wird beim Anlegen neuer Kartenelemente auf oberster Ebeneund für den Geopicker verwendet.Das OpenLayers “Dark” Theme bietet ein neutraleres Design für die wichtigstenSteuerelemente.Unter “Karten-Navigation” lassen sich die einzelnen Karten-Steuerelemente, dieOpenLayers anbietet, ein- und ausschalten.Unter “Karten-Informationen” können verschiedene Informations-Elemente vonOpenLayers aktiviert werden.Als OpenLayers-Bibliothek sollten Sie die mitgelieferte Bibliothek nutzen. DieOpenLayers-Macher empfehlen aus Performancegründen nicht, dieBibliotheksversion vom OpenLayers Server produktiv zu nutzen.Sie können das Verhalten der Lokationen bei Direktlinks und Popups steuern.Kartenprofile enthalten außerdem Lokationsstile und KartendiensteContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 9

6. Nutzung verschiedener KartenlayoutsBeim Kartenprofil können zusätzliche Kartendienste definiert werden. Das sind ausOSM-Daten generierte Karten in unterschiedlichem Design. Die Einbindung vonBing- und Google-Karten ist auch möglich.Es kann eine beliebige Anzahl von Kartendiensten eingebunden werden, dieentweder über unterschiedliche Contao-Seiten oder über die Nutzung des inOpenLayers integrierten LayerSwitchers (Kartenwechsler) angezeigt werden.Auch die Einbindung eigener OSM-Karten oder CFS-Maps unbekannter OSM-Karten ist möglich, solange der Kartenserver die Karte im Standard-XYZ-Grid zurVerfügung stellt. Dabei sind die einzelnen Kacheln über eine..///. zu erreichen.Der Kartenwechsler und der Standardkartendienst werden im Inhaltselement bzw.Frontend-Modul definiert.Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 10

7. Konfiguration der LokationenDefinition von Lokationsstilen beim KartenprofilVerwendung von Lokationsstilen überall dort, wo Lokationen (Geo-Koordinaten,Flächen, Wege) definiert werden (am Kartenelement, Ereignis, …)am Kartenelement stehen die Lokationsstile des gewählten Kartenelements zurAuswahlkein Lokationsstil verfügbar → roter PunktLokationen können durch Standardicons, eigene Icons, sowie verschiedenegeometrische Formen dargestellt werden. Achtung: Tooltips (Hints) funktionierennur bei Icons.die Position der Labels relativ zur Geo-Koordinate wird auch hier definiert, ebensodie Schriftart, Schriftfarbe, etc.Art, Größe und Position des Popups können ebenfalls definiert werdenContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 11

8. Visuell definierte Flächen und Wege1. Wege/Flächen in einem Editor definierenMerkaartor: http://www.merkaartor.orgJOSM: http://josm.openstreetmap.de2. Export der Daten im GPX, KML oder GeoJSON Format3. Export kopieren ins tl_files Verzeichnis4. passenden Lokationsstil im Kartenprofil definieren (Farbe, Opazität)5. Lokationstyp setzen (Export-Format) und Datei auswählen6. ggfs. der Ebene einen Namen geben (Kartenwechsel-Element)7. Lokationsstil wählen, ggfs. Popup-Text oder Link angebenContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 12

8. Visuell definierte Flächen und WegeBeispiel 1: Definition eines Weges1. Merkaartor starten2. Mapnik Karte einschalten, aufgewünschten Kartenbereichzoomen3. Menü Ebenen/NeueZeichnungsebene4. Fläche/Weg zeichnen5. Exportieren(Datei/Exportieren/GPX)Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 13

8. Visuell definierte Flächen und WegeBeispiel 2: Administrative Grenzen1. http://ags.misterboo.de aufrufen2. Gebiet auswählen3. Link “Show” drücken (Gebiet wird auf der Karte angezeigt)4. Link “Download” klicken (Datei im GeoJSON-Format)Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 14

8. Visuell definierte Flächen und WegeBeispiel 3: Ergebnisse der Overpass API1. http://www.overpass-api.de/query-form.html2. request an Overpass API schicken (Bsp.: Spielplätze in Oldenburg)3. Ergebnis als .OSM-Datei speichern4. GPSBabel installieren (http://www.gpsbabel.org)5. mit GPSBabel .OSM-Datein in .GPX umwandelnContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 15

Teil II: CFS-Maps verbindetContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 16

AgendaTeil 2: CFS-Maps verbindet9. Termine auf Karten anzeigen10. eigene Tabellen einbinden (Beispiel Catalog)11. Steuerelemente der Karte stylen12. Geokodierung über Nominatim-Dienste13. Lokationen über CFS-Forum anzeigen14. Ausblick & DiskussionContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 17

9. Termine auf Karten anzeigen1. Kartenelement in einer Karte erstellenKartenelement anlegen (lt: anderer Tabelle)Quelltabelle “Events”entsprechende Kalender auswählen (Elterntabellen)Lokationsstil = Vorgabe (falls im Kalender nicht definiert)2. Koordinaten am Event zuweisenin den Events mit Geopicker Koordinaten festlegenOptional: Angabe des Labels, eines Tooltips oder eines Lokationsstils3. Karte für aktuellen Eintrag (Eventreader)Originalkarte kopieren und “Nur aktuellen Eintrag anzeigen” auswählenauf Contao-Seite zusammen mit Eventreader einbinden4. CFS-Maps Felder im Event ausschalten (System / Einstellungen)Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 18

10. Eigene Tabellen einbindenBsp. Catalog: Folie1/41. Catalog-Tabelle mit CFS-Maps-Feldern definierenbenötigte Felder für CFS-Maps:a) Geo-X-Koordinate, Dezimal (Pflicht)b) Geo-Y-Koordinate, Dezimal (Pflicht)c) Lokationsstil, Select - Lookup auf Tabelle tl_cfs_map_prof_locstyles (Optional)d) Label, Text (Optional)e) Tooltip, Text (Optional)f) PopupText, Longtext (Optional)g) Link, Url (Optional)Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 19

10. Eigene Tabellen einbindenBsp. Catalog: Folie 2/42. eigene Erweiterung im Verzeichnis “modules” anlegen (cfs_maps_catalog_demo)3. in config/config.php folgenden Code einfügen:$GLOBALS['TL_LANG']['cfs_maps']['sourcetable']['tl_cat_addresses']['name'] = 'Catalog Adressen';$GLOBALS['cfs_maps_extension']['sourcetable']['tl_cat_addresses'] =array('geox' => 'geox','geoy' => 'geoy','label' => 'label','locstyle' => 'locstyle','tooltip' => 'tooltip','popup' => 'popuptext','linkurl' => 'link','sqlwhere' => '');Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 20

10. Eigene Tabellen einbindenBsp. Catalog: Folie 3/44. Geopicker-Wizard ins Catalog-Backend (dca/tl_cat_adresses.php):Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 21

10. Eigene Tabellen einbindenBsp. Catalog: Folie 4/45. Datensätze mit Geokoordinaten im Catalog Backend anlegen(mit Geopicker – im Frontend auch, aber zurzeit nur ohne Picker möglich)6. am Kartenelement bei Lokationstyp “Aus anderer Tabelle”, “Catalog Adresses”Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 22

11. Steuerelemente der Karte stylenhttp://wiki.openstreetmap.org/wiki/DE:OpenLayers/CSS (Klassen)Beispiele:Pan-KontrollelementZoom-KontrollelementCopyright-Hinweis= .olControlPanPanel= .olControlZoomPanel= .olControlAttributionCFS-Maps Kurzdokumentation beschreibt selbstgestylte IconsContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 23

12. Geokodierung über Nominatim-Diensteder Geopicker nutzt den offenen Geokodierungsdienst von MapQuest.(http://open.mapquestapi.com/nominatim/)eine Alternative ist http://nominatim.openstreetmap.org/, die aber unseresErachtens nicht ganz so gute Ergebnisse lieferteine Anfrage nach “Oldenburg, Deutschland” sieht so aus:http://open.mapquestapi.com/nominatim/v1/search.php?format=json&q=Oldenburg, Deutschlanddas Ergebnis wird vom CFS-Maps Geopicker ausgewertet und in einer Liste, sowieauf der Karte dargestelltContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 24

12. Geokodierung über Nominatim-Diensteeinfacher Klick in Liste oder auf Lokationin Karte: Selektiondoppelter Klick in Liste oder auf Lokationin Karte: Zoomdoppelter Klick in Karte auf freie Stelle:Lokation wird hinzugefügt und selektiert.So lässt sich eine Koordinate fast metergenauselektierenZukunft: Vorselektieren desKartenbereiches, in dem Geokoordinatengesucht werden (in einer BoundingBox)Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 25

13. Lokationen über CFS-Forum anzeigenCFS-Forum Backend: Neuen Forenbereich einrichtenBasiskarte für das Kartenforum in CFS-Maps definierenKartenanbindung aktivierenBerechtigungen für “Karte anzeigen” und “Kartendaten editieren”vergeben, sowie Mitgliedergruppen als Benutzer zuordnenCFS-Forum Frontend-Modul “Diskussionsforum – Komfortsicht” mit aktivierterKartenanbindung einbindenim Frontend anmelden.der Button “Zeige Karte” erscheint über ThemenlisteBeim Anlegen eines Themas/Beitrages erscheint der Button “Kartenlokationbearbeiten”, über den die Koordinaten sowie ggfs. Label und Hint (Tooltip) definiertwerden können.Außerhalb von CFS-Forum können die Lokationen aus den Forenbereichen überden Lokationstyp “Forenbereiche aus CFS-Forum” mit einem CFS-Maps-Kartenelement eingebunden werden.Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 26

Ausblick & DiskussionAusblickCFS-Maps wird in den nächsten Monaten weiter ausgebaut.Langfristiges Ziel ist es, mit Hilfe von Contao auch komplexere geographischeInformationssysteme aufbauen zu können.DiskussionContao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 27

LizenzinformationenDie dargestellten Kartenkacheln werden mit Hilfe von OpenLayers und denverschiedenen Kartenanbietern erzeugt.Weiterführendes und die entsprechenden Lizenzinformationen gibt es auf denfolgenden Seiten:http://www.openlayers.orghttp://www.openstreetmap.orghttp://www.openstreetmap.dehttp://www.opencyclemap.orghttp://www.mapquest.comhttp://www.memomaps.dehttp://stamen.comBitte berücksichtigen Sie die Lizenzinformationen, wenn Sie selbst Karten mit CFS-Maps in Websites einbinden, und entfernen Sie die mitgeliefertenLizenzinformationen nur aus den dargestellten Karten, wenn Sie sie stattdessen ananderer Stelle auf der Webseite darstellen wollen.Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 28

Vielen Dank für Ihre Aufmerksamkeit.Contao Konferenz 2012, OpenStreetMap in Contao einbinden mit CFS-Maps, Referent: Küstenschmiede - Jürgen Witte 29