Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
weiss://inter.media
1 Dokumentation: wi://googlemaps
Dokumentation: wi://googlemaps zur Einbindung von eigenen GoogleMaps Karten
im TYPO3 Backend
weiss://inter.media
2 Dokumentation: wi://googlemaps
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 ................................................................... 11
KML Dateien einbinden ......................................................................................................................... 13
GPX Dateien einbinden ......................................................................................................................... 15
Eigene GPX-Marker-Bilder ................................................................................................................. 19
GoogleMap Karte anpassen .................................................................................................................. 22
Kartenstyle ändern ............................................................................................................................ 22
Karten Kontrolleinstellungen ............................................................................................................ 24
weiss://inter.media
3 Dokumentation: wi://googlemaps
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.
weiss://inter.media
4 Dokumentation: wi://googlemaps
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.
weiss://inter.media
5 Dokumentation: wi://googlemaps
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.
weiss://inter.media
6 Dokumentation: wi://googlemaps
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. „50.5418388, 6.5625303“ 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 der Karte für Zoom
ja/nein
Styles 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) http://www.mapcoordinates.net/
weiss://inter.media
7 Dokumentation: wi://googlemaps
Das obige Beispiel erzeugt folgende Kartenansicht im Frontend:
weiss://inter.media
8 Dokumentation: wi://googlemaps
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.
weiss://inter.media
9 Dokumentation: wi://googlemaps
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.
weiss://inter.media
10 Dokumentation: wi://googlemaps
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:
weiss://inter.media
11 Dokumentation: wi://googlemaps
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.
weiss://inter.media
12 Dokumentation: wi://googlemaps
weiss://inter.media
13 Dokumentation: wi://googlemaps
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.
weiss://inter.media
14 Dokumentation: wi://googlemaps
Obiges Beispiel liefert eine KML-Ebene mit den Grenzen des Kreises Euskirchen:
weiss://inter.media
15 Dokumentation: wi://googlemaps
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.
weiss://inter.media
16 Dokumentation: wi://googlemaps
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.
weiss://inter.media
17 Dokumentation: wi://googlemaps
Mit obigem Beispiel wird folgende Karte erzeugt:
weiss://inter.media
18 Dokumentation: wi://googlemaps
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.
weiss://inter.media
19 Dokumentation: wi://googlemaps
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.
weiss://inter.media
20 Dokumentation: wi://googlemaps
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.
weiss://inter.media
21 Dokumentation: wi://googlemaps
weiss://inter.media
22 Dokumentation: wi://googlemaps
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. http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
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.
weiss://inter.media
23 Dokumentation: wi://googlemaps
weiss://inter.media
24 Dokumentation: wi://googlemaps
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.