Dokumentation: wi://googlemaps

Transkript

1 1 Dokumentation: wi://googlemaps zur Einbindung von eigenen GoogleMaps Karten im TYPO3 Backend

2 2 Inhalt Einrichtung des Plugins... 3 Schritt 1: Frontend Plugin anlegen... 3 Schritt 2: Speicherort der Datensätze wählen... 3 Schritt 3: Datensätze anlegen... 4 Einrichtung einer simplen GoogleMaps Karte... 5 Einstellmöglichkeiten der Karte:... 6 Marker einbinden... 8 Einfacher Marker mit Infofenster... 8 Eigene Marker-Bilder... 9 Anlegen mehrerer Marker und spezielle Eigenschaften KML Dateien einbinden GPX Dateien einbinden Eigene GPX-Marker-Bilder GoogleMap Karte anpassen Kartenstyle ändern Karten Kontrolleinstellungen... 24

3 3 Einrichtung des Plugins Schritt 1: Frontend Plugin anlegen Zu Beginn muss ein Frontend Plugin vom Typ wi://googlemaps auf der gewünschten Seite, Spalte und Position erstellt werden. Schritt 2: Speicherort der Datensätze wählen Dieses Frontend Plugin besitzt keine eigenen Einstellungen, außer dem Speicherort für die Datensätze der GoogleMap Karte. Dieser wird im Tab Verhalten gewählt. Hier wurde dieselbe Seite für den Speicherort der GoogleMap Datensätze gewählt, da in diesem Beispiel die Datensätze nicht extern auslagert werden. Wichtig: Wenn kein Speicherort gewählt ist, wird keine GoogleMaps Karte im Frontend ausgegeben.

4 4 Schritt 3: Datensätze anlegen Im nächsten Schritt werden die GoogleMap Datensätze im festgelegten Speicherort angelegt. Dafür muss nun das Listenmodul ausgewählt werden. Anschließend muss das neuen Datensatz erstellen Icon in der rechten Spalte angeklickt werden. Nun erhält man eine Auflistung aller möglichen Datensatztypen im TYPO3 System. Hier ist jetzt der Datensatztyp Google Map zu wählen, da eine GoogleMap Karte erstellt werden soll. Alle weiteren Datensatztypen des Plugins, wie z.b. Marker oder KML, werden bei der Einrichtung der Kartendaten automatisch erstellt und können ignoriert werden.

5 5 Einrichtung einer simplen GoogleMaps Karte In den Einstellungen des GoogleMap Datensatzes erhält man folgende Ansicht: Für die Anzeige einer simplen Karte ist lediglich die Breite und Höhe, sowie Startposition und Zoom zu wählen. Die entsprechenden Werte sind der unteren Tabelle zu entnehmen. Alle weiteren Einstellungen können fürs Erste übersprungen werden.

6 6 Einstellmöglichkeiten der Karte: Feld Beschreibung Mögliche Werte Title Überschrift der Karte als <h1> Tag Width Breite der Karte Relative Breiten (z.b. 100% ) oder absolute Breiten (z.b. 500px ) Height Höhe der Karte Absolute Höhen (z.b. 400px ) Startposition Zentrierung der Karten bei Initialisierung Geographische Koordinaten im Dezimalformat (z.b , für Kall) Zoom Zoomstufe der Karte bei Initialisierung Ganze Zahlen von 1 bis X (abhängig von Position) Types Available Auswahl der Kartentypen (z.b. Satellit) hybrid, roadmap, satellite, terrain, styledmap Type Active Aktiver Kartentyp bei Initialisierung hybrid, roadmap, satellite, terrain, styledmap Controls Available Anzeige von einzelnen Kartenwerkzeugen maptype, pan, rotate, scale, streetview, zoom Scrollwheel Einfangen des Mausrades beim Hovern ja/nein Styles der Karte für Zoom Eigener Karten Style (Hinweis: Option styledmap muss unter Types Available gewählt sein) GoogleMaps Kartenstyle JSON Objekt Hinweis: Geokoordinaten können mit dem kostenlosen Tool mapcoordinates.net gefunden werden (auch nach Adresse)

7 7 Das obige Beispiel erzeugt folgende Kartenansicht im Frontend:

8 8 Marker einbinden Zu einer GoogleMap Karte können beliebig viele Marker hinzugefügt werden. Jeder Marker enthält verschiedene Einstellungsmöglichkeiten. Einfacher Marker mit Infofenster Der eingetragene Titel ist lediglich beim Hovern des Markers mit dem Cursor sichtbar. Für die Position ist wie auch bei der Karte eine Geokoordinate im Dezimalformat einzutragen. Die Beschreibung des Markers kann beliebig formatiert werden, wird allerdings erst mit einem Klick auf den Marker in einem Infofenster sichtbar.

9 9 Obiges Beispiel liefert folgendes Ergebnis: Eigene Marker-Bilder Ein eigenes Marker-Bild kann ebenfalls eingebaut werden. Dabei ist zu beachten, dass das Bild im PNG Format gespeichert ist und einen transparenten Hintergrund besitzt, da der Marker sonst als Rechteck mit weißem Hintergrund angezeigt wird.

10 10 Zu einem eigenen Marker-Bild muss ein sogenannter Anker-Punkt gewählt werden. Dieser entspricht dem Pixel im Bild (von oben-links gesehen), welches auf die exakte Koordinate in der Karte zeigen soll. In diesem Beispiel hat das Marker-Bild eine Auflösung von 39x60 Pixeln und der Anker-Punkt wurde auf 20, 60 gesetzt. Das bedeutet, dass der Punkt, mit dem der Marker auf der Karte befestigt ist, das horizontal mittlere und vertikal unterste Pixel ist. (Tipp: Auflösung des Bildes am besten immer mit in den Dateinamen schreiben, damit diese Information nicht nachgesehen werden muss) Der eigene Marker zeigt nun also mit der Spitze auf die gewählte Koordinate:

11 11 Anlegen mehrerer Marker und spezielle Eigenschaften Jede GoogleMaps Karte kann beliebig viele Marker beinhalten. Damit der Nutzer nicht jedes Mal den Mittelpunkt und Zoom der GoogleMap Karte neu bestimmen muss, wenn ein neuer Marker eingebaut wird und auf der Karte zu sehen sein soll, kann einem Marker die Eigenschaft Fitbounds gegeben werden. Dies bewirkt, dass alle Marker mit dieser gesetzten Eigenschaft bei Initialisierung der Karte automatisch ins Sichtfeld dieser gebracht werden. Der Mittelpunkt und Zoom wird also automatisch bestimmt. Hinweis: Für einen einzelnen Marker ist dies jedoch nicht zu empfehlen, da hierbei zu stark gezoomt wird. Zudem kann zu jedem Marker noch ein Bounce Effekt hinzugefügt werden. Die entsprechenden Marker hüpfen nun bei Erstellung der Karte.

12 12

13 13 KML Dateien einbinden Zu jeder GoogleMaps Karte können beliebig viele KML Dateien hinzugefügt werden. Diese können z.b. mit GoogleEarth erstellt werden und beinhalten grafische Oberflächen, Marker, Linien, Formen, die auf Koordinaten gelegt werden. Diese generierten KML-Ebenen besitzen ebenfalls die Eigenschaft Fitbounds. Diese werden dann, wie die Marker, mit zur Berechnung des Kartenmittelpunkts und Zoom in Betracht gezogen. Da standardmäßig KML-Ebenen ein Infofenster bei einem Klick anzeigen, kann dieses manuell deaktiviert werden. Die Informationen in diesem Infofenster sind in der KML Datei selbst zu erstellen, falls dies gewünscht ist.

14 14 Obiges Beispiel liefert eine KML-Ebene mit den Grenzen des Kreises Euskirchen:

15 15 GPX Dateien einbinden Zu jeder GoogleMaps Karte kann eine GPX-Datei hinzugefügt werden. Ein GPX-Track kann, wie auch die Marker oder KML-Ebenen, die Eigenschaft Fitbounds bekommen (siehe oben). Die Farbe des Tracks und des Höhenprofils muss im Hexadezimalen Farbformat angegeben werden, ist allerdings optional zu setzten.

16 16 Zu einem GPX-Track kann ein interaktives Höhenprofil angezeigt werden. Falls diese Option gewählt wird muss zwingend ein GPX-Marker hinzugefügt werden, da ein Marker beim Hovern des Diagramms über den Track wandert. Der Name dieses Markers muss _marker lauten, damit er als dieser erkannt wird. Alle weiteren Einstellungen entsprechen denen eines normalen Markers.

17 17 Mit obigem Beispiel wird folgende Karte erzeugt:

18 18 Eingetragene Waypoints in GPX-Dateien werden automatisch in Marker umgewandelt. Diese können ebenfalls Infofenster erhalten, wenn die Informationen in der GPX-Datei mitgeliefert wurden.

19 19 Eigene GPX-Marker-Bilder Da verschiedene Waypoints in einer GPX-Datei unterschiedliche Points-of-Interrests markieren, können diesen eigene Marker-Bilder zugeteilt werden. In der GPX-Datei ist deshalb zunächst das Marker-Bild (Symbol) den entsprechenden Waypoints zuzuteilen. In diesem Beispiel soll der Waypoint für den Start der Etappe das Symbol flaggreen und der Waypoint für das Ende der Etappe das Symbol flagred erhalten.

20 20 Im TYPO3 Plugin muss diese Information dem Namen des GPX-Markers zugeteilt werden. Hinweis: Es genügt einen Marker nur einmal anzugeben, falls dieser für mehrere Waypoints benutzt werden soll.

21 21

22 22 GoogleMap Karte anpassen Kartenstyle ändern Um die Farben der Elemente der Karte zu ändern, muss ein sogenanntes GoogleMaps Kartenstyle JSON Objekt in das Textfeld der Option Styles eingefügt werden. Dieses Objekt kann beispielsweise mit dem kostenlosen Tool Styled Maps Wizard erstellt werden. Ein Objekt für eine Karte im Style der NeT Farben hat z.b. folgen Aufbau: [ { "elementtype": "geometry", "stylers": [ { "hue": "#91ff00" }, { "saturation": -30 } ] },{ "featuretype": "water", "elementtype": "geometry", "stylers": [ { "color": "#0069B4" } ] },{ "featuretype": "water", "elementtype": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] },{ "featuretype": "administrative.country", "elementtype": "geometry", "stylers": [ { "color": "#932826" }, { "weight": 1.5 } ] },{ "featuretype": "administrative.province", "elementtype": "geometry", "stylers": [ { "color": "#932826" }, { "weight": 1 } ] },{ "featuretype": "water", "elementtype": "labels.text.stroke", "stylers": [ { "color": "#1079C4" } ] } ] Damit der eigene Kartenstyle gewählt werden kann, muss styledmap in der GoogleMap Eigenschaft Types Available hinzugefügt werden. Um diesen Style initial zu setzten, muss styledmap zusätzlich für Type Active gesetzt sein.

23 23

24 24 Karten Kontrolleinstellungen Es können einzelne Kontrollsteuerungen aktiviert werden, falls dies gewünscht ist. So kann z.b. nur die Auswahl des Kartentyps und Zoomsteuerung angezeigt werden. Diese sind kommagetrennt aufzulisten. Dabei kann zwischen folgenden Kontrollsteuerungen gewählt werden: maptype, pan, rotate, scale, streetview, zoom Alle anderen Kontrollsteuerungen sind dabei deaktiviert. Falls jedoch alle angezeigt werden sollen, kann das Feld leer gelassen werden.