[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

Begonnen von eki, 23 Oktober 2017, 17:10:33

Vorheriges Thema - Nächstes Thema

copystring

Hallöchen, ich bin sehr von dieser Kartendarstellung begeistert.
Ich habe nur ein Problem und ich bin nicht sicher ob es an meiner unwissenheit liegt oder an der Kartendarstellung.

Was ich erreichen möchte ist folgendes:
Zwei gmaps haben jeweils nur die Position eines Mitbewohners. Dies klappt auch sauber. Beide Stecknadeln werden auf einer Karte angzeigt. Genau so wie ich das möchte.
Nur der Zoomlevel passt nicht. Ich weiß, der kann fest eingestellt werden. Was ich aber lieber hätte ein automatischer Zoom, welcher so so einstellt, dass immer die beiden Stecknadeln auf der Karte zu sehend sind. Ist das möglich?
Hier mein code:


<!-- MAPS -->
<li data-row="1" data-col="8" data-sizey="1" data-sizex="2">
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-alias="Felix"
data-showdetails="false"
data-device="positionFelix"
data-longitude="lng"
data-label="Felix"
data-latitude="lat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-alias="Kelly"
data-showdetails="false"
data-device="positionKelly"
data-longitude="lng"
data-label="Kelly"
data-latitude="lat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>
</li>


Liebe Grüße

Felix

eki

Das geht bisher nur dann, wenn eine Route dargestellt wird (dann kann das GoogleMaps selbst machen). Um das auch für andere Fälle, wie den von Dir genannten, einzubauen, muss ich erst mal überlegen, wie das realisierbar ist.
Ich bin allerdings gerade an einer größeren Änderung des widgets dran (Einbau der Nutzung von OpenStreetMap als Alternative zu Google) und daher wird das möglicherweise ein bisschen dauern.

setstate

Kann denn OpenStreetMaps auch den aktuellen Verkehr so schön farbig darstellen?

eki

Ich habe die Erweiterung eigentlich deshalb angefangen, weil mich die geänderten AGBs bei Google geärgert haben (man muss für einen API Key jetzt eine Kreditkarte hinterlegen).
OSM selbst ist erst mal nur eine Basis für die Karten selbst. Ich habe mich für Leaflet als js API entschieden und baue gerade einen Wrapper ein, der dann ein Umschalten zwischen Google und Leaflet (mit OSM) ermöglicht.
OSM selbst bietet keinen Layer mit Verkehrsdaten, allerdings gibt es verschiedene Möglichkeiten (z.B. OpenTransportMap) das zu realisieren, da bin ich aktuell noch dran die richtige Variante einzubauen. Gleiches gilt im Übrigen auch für das Thema Routenplanung und Info.

Peer Plex

Zitat von: eki am 23 Oktober 2017, 17:10:33
Hallo zusammen,

ich wollte ursprünglich eine Darstellung meiner Wegezeiten auf eine Karte (ähnlich wie im FHEM Typ TRAFFIC) und habe nun ein Widget in einer ersten Version fertig, das eigentlich alles, was in FHEM eine geografische Koordinate als Reading Internal oder Attribut hat, auf einer Landkarte auf Basis Google Maps API darstellen kann.
Das Ganze ist noch eher Beta, ich zeige es aber hier schon mal, damit "early Adopters" es testen und mir Feedback geben können. Eventuell habt Ihr ja auch Ideen, was man noch so alles damit tun können sollte, dann wäre ich interessiert und bereit das auch noch zu erweitern.

Was kann das Widget:
Darstellung von FHEM Devices, welche eine Koordinate (longitude/latitude) als Reading/Attribut/Internal haben (z. B. Anwesenheiten auf Basis von ROOMMATE/RESIDENT/GUEST, oder das global Device als Standort von FHEM).
Darstellung von Fahrwegen mit Fahrzeiten auf Basis des FHEM TRAFFIC Moduls. Hierbei können die Routen eingefärbt als Linien dargestellt werden und entsprechend per InfoWindow dann Details (wie z.B. die normale Fahrzeit bzw. die Fahrzeit bei aktuellem Verkehr) dazu dargestellt werden.

Was braucht man zur Nutzung/Installation:

  • einen Google Maps API Key. Wie man den bekommt, ist bei der Beschreibung des TRAFFIC Moduls unter https://wiki.fhem.de/wiki/TRAFFIC  zu sehen. Den so erhaltenen Code muss man in die html index Datei als meta Tag eintragen. Das sieht z.B. so aus (<Key> muss natürlich noch durch den API Key selbst ersetzt werden):

    <meta name="GoogleMapsApiKey" content="<Key>">

  • das angehängte widget_gmaps.js entsprechend im js Verzeichnis der Installation von FTUI
  • den folgenden Zusatz in der fhem-tablet-ui-user.css Datei (zur Formattierung der InfoWindows).

.gm-style-iw-parent {
opacity: 0.85;
}
.map_infowindow {
    color: #8C8C8C;
text-align: left;
}
.firstHeading {
margin-top: 2px;
margin-bottom: 2px;
}
.bodyContent > p {
margin-top: 2px;
margin-bottom: 2px;
}


Folgendes sind die Widget Parameter (Dinge wie data-get, die schon im FTUI standardmäßig bekannt sind, lasse ich weg):

  • data-alias: Hiermit kann man festlegen aus welchem Reading der Name für die Anzeige genommen werden soll (default 'alias')

  • data-latitude: Hiermit kann man festlegen aus welchem Reading die geografische Breite genommen werden soll (default 'latitude')

  • data-longitude: Hiermit kann man festlegen aus welchem Reading die geografische Länge genommen werden soll (default 'longitude')

  • data-language: Kann 'de' oder 'en' sein und stellt die Sprache für die Ausgabe in den Info Windows ein

  • data-size: Gibt die Größe des Kartenausschnittes an (als String mit "<Breite>,<Höhe>"), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem GoogleMapsSize Reading genommen oder, falls das auch nicht vorhanden ist, wird die Größe aus der Ausdehnung der Route(n) ermittelt.

  • data-center: Gibt das Zentrum der Karte an (als String mit "<Latitude>,<Longitude>"), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus GoogleMapsCenter Reading genommen oder, falls das auch nicht vorhanden ist, wird das Zentrum aus der Ausdehnung der Route(n) ermittelt.

  • data-zoom: Gibt den Zoomwert der Karte an (als integer Wert, siehe Google Maps API), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem GoogleMapsZoom Reading genommen oder, falls das auch nicht vorhanden ist, wird der Zoom Wert aus der Ausdehnung der Route(n) ermittelt.

  • data-travel_mode: Gibt an, wie die Route berechnet werden soll. Es gibt die Möglichkeiten 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT' (Details siehe TRAFFIC Modul von FHEM oder Google Maps API für den 'Directions' Service), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem trafficMode Reading genommen.

  • data-traffic: Gibt an, ob die Verkehrslage auf der Karte dargestellt werden soll (true/false default false)

  • data-showdetails: Gibt an ob per Default die Info Windows eingeblendet werden sollen (true/false, default false)

  • data-stroke: Gibt an, wie die Fahrstrecken oder Symbole dargestellt werden sollen. Besteht aus maximal 6 Werten (Farbe Hinweg, Breite Hinweg, Durchsichtigkeit Hinweg, Farbe Rückweg, Breite Rückweg, Durchsichtigkeit Rückweg), die Farbe wird per #rrggbb angegeben, die Breite in Pixel und die Durchsichtigkeit als Prozentwert zwischen 0% und 100%, siehe auch Details zum Modul TRAFFIC. Die Symbole zur Route werden in der doppelten angegebenen Breite des Pfades dargestellt

  • data-icon: Hiermit kann ein Icon angegeben werden, welches statt des standardmäßigen Pfeils verwendet werden soll, um die Position zu markieren. Kann eine URL auf eine icon Datei, die relativ zum Verzeichnis www/images/ liegt sein

  • data-label: Will man statt eines Icons ein FontAwesome/Openautomation/fhemSVG Font-Icon (z.B. 'fa-home', 'oa-weather_winter', 'fs-usb_stick') verwenden, wird das hiermit angegeben (es kann auch icon und Font-Icon zusammen verwendet werden (z.B. ein Kreis als Icon und darin ein Font-Icon.

  • data-mapgroup: Legt fest, ob jedes Widget in eine eigene Karte gezeichnet werden soll oder ob mehrer Informationen in einer Karte landen sollen.

Im Folgenden ist ein Minimalbeispiel enhalten, das 3 Instanzen des Widgets enthält, die eine Fahrstrecke, eine ROOMMATE position und die Position des global Devices in eine Karte malen.


<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="testTrf"
data-traffic="true"
data-mapgroup="1"
data-stroke="#111111,7,60">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="global"
data-mapgroup="1"
data-icon="default/HOME_Status.1.png"
data-stroke="#33dd00,7,70">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="true"
data-device="myRoommate"
data-longitude="locationLong"
data-label="fa-home"
data-icon="no-icon"
data-latitude="locationLat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>


Daraus ergibt sich dann beispielsweise folgendes Bild (nein, ich wohne nicht in Köln, das habe ich eher zufällig als Beispiel gewählt).

setstate

@Peer Plex: Warum hast du nur Post 1 kopiert? Oder sehe ich deinen Kommentar/Frage nur nicht?

curt

Zitat von: eki am 16 August 2018, 10:20:35
OSM selbst bietet keinen Layer mit Verkehrsdaten, allerdings gibt es verschiedene Möglichkeiten (z.B. OpenTransportMap) das zu realisieren, da bin ich aktuell noch dran die richtige Variante einzubauen.

Hallo @eki
ich stolpere zufällig rein, ich machte gerade meine ersten Schritte mit FTUI und informiere mich nun, was noch so alles geht.

Ich würde gar keine Routenplanung benötigen. Meine Idee ist eine andere: Ich würde mir gern die aktuelle Verkehrlage in einem vorab definierten Kartenausschnitt ansehen.

Hat sich seit Deinem letzten Posting in Sachen OSM + Verkehrslage etwas getan?

Freundliche Grüße.
RPI 4 - Jeelink HomeMatic Z-Wave

eki

Ja, bin fast fertig und werde demnächst hier eine neue Version zum Testen posten. Darin geht nun alles (inklusive Routing und Verkehrslage) auf Basis von OSM Karten und TomTom für Verkehr und Routing. Für TomTom braucht man zwar auch eine Anmeldung um einen Key zu bekommen, aber die wollen zumindest keine Kreditkarte für den privaten Gebrauch.

curt

@eki danke-schön.

Eine kleine Bitte dafür: Einen neuen Thread. Es ist ja was Neues. (Und Hinweisbeitrag in diesem Thread und Subject ändern auf: "[obsolent] Neues FTUI Widget Kartendarstellung mit Google Maps API" und zumachen).

Das wäre aus meiner kleinen Sicht sehr hilfreich für Leute, die Jahre später suchen ... binjaschonweg
RPI 4 - Jeelink HomeMatic Z-Wave

eki

#144
OK, dann mache ich den Beitrag hier mal zu und starte mit einem Neuen.
https://forum.fhem.de/index.php/topic,91781.0.html