[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

[choenig]

Hi sek_is_back, hi eki,

so könnte das aussehen:

Code Auswählen Erweitern


--- /tmp/widget_gmaps.js.orig   2018-04-14 09:32:35.128229678 +0200
+++ widget_gmaps.js     2018-04-14 09:42:06.885812584 +0200
@@ -201,6 +201,7 @@
                elem.initData('center', 'auto');
                elem.initData('zoom', 'auto');
                elem.initData('travel_mode', 'DRIVING');
+               elem.initData('hide-ui', false);
                elem.initData('traffic', false);
                elem.initData('showdetails', false);
                elem.initData('stroke', '#ffffff,7,50,#ffffff,7,50');
@@ -247,6 +248,10 @@
                if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center').split(",")[0]),lng: parseFloat(elem.data('center').split(",")[1])} : {lat: 0, lng: 0};
                if (!elem.data('map_options').zoom) elem.data('map_options').zoom = (elem.data('zoom')&&elem.data('zoom')!='auto') ? parseFloat(elem.data('zoom')) : 1;

+               if (elem.data('hide-ui')) {
+                       elem.data('map_options').disableDefaultUI = true;
+               }
+
                if (!elem.data('map_options').styles) {
                        if (elem.data('nightmode')) {
                                elem.data('map_options').styles = [


LG
Christian

[sek_is_back]

ahhh sehr cool, danke. jetzt werde ich mal versuchen ob ich es mit meinem mini Grundverständnis schon eingebaut bekomme. 
Wahrscheinlich mache ich alles kaputt, hab dann aber einen super Lernerfolg.

Funktioniert perfekt, code verstanden und easy eingebaut... DANKE jetzt ist es für mich perfekt

[basty2]

Hi. Hat jemand die Karte im Swiper Widget hinbekommen? Ohne Swiper funktioniert es, mit Swiper wird die Karte nicht angezeigt und auch nicht abgerufen.

[ToM_ToM]

Hey zusammen,

ich logge aktuell minütlich meine Geokoordinaten mit. Ist es irgendwie möglich, z.B. die letzte Stunde oder auch den Tag  (von - bis) als Wegstrecke darzustellen?

VG, Thomas

[eki]

Hi sek_is_back, hi eki,

so könnte das aussehen:

Code Auswählen Erweitern


--- /tmp/widget_gmaps.js.orig   2018-04-14 09:32:35.128229678 +0200
+++ widget_gmaps.js     2018-04-14 09:42:06.885812584 +0200
@@ -201,6 +201,7 @@
                elem.initData('center', 'auto');
                elem.initData('zoom', 'auto');
                elem.initData('travel_mode', 'DRIVING');
+               elem.initData('hide-ui', false);
                elem.initData('traffic', false);
                elem.initData('showdetails', false);
                elem.initData('stroke', '#ffffff,7,50,#ffffff,7,50');
@@ -247,6 +248,10 @@
                if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center').split(",")[0]),lng: parseFloat(elem.data('center').split(",")[1])} : {lat: 0, lng: 0};
                if (!elem.data('map_options').zoom) elem.data('map_options').zoom = (elem.data('zoom')&&elem.data('zoom')!='auto') ? parseFloat(elem.data('zoom')) : 1;

+               if (elem.data('hide-ui')) {
+                       elem.data('map_options').disableDefaultUI = true;
+               }
+
                if (!elem.data('map_options').styles) {
                        if (elem.data('nightmode')) {
                                elem.data('map_options').styles = [


LG
Christian

Werde ich so bei mir einbauen. Im Prinzip hätte man das aber auch direkt durch:

Code Auswählen Erweitern

data-map_options='{"hide-ui":true}' ohne Code Änderungen machen können.

[eki]

Hey zusammen,

ich logge aktuell minütlich meine Geokoordinaten mit. Ist es irgendwie möglich, z.B. die letzte Stunde oder auch den Tag  (von - bis) als Wegstrecke darzustellen?

VG, Thomas

Das geht bisher nicht. Wenn Du ein Reading mit einer Liste von Geo-Koordinatenpaaren bauen könntest (über userReading) dann könnte ich das im Modul nutzen um daraus eine Strecke auf die Karte zu legen.

[eki]

Hi. Hat jemand die Karte im Swiper Widget hinbekommen? Ohne Swiper funktioniert es, mit Swiper wird die Karte nicht angezeigt und auch nicht abgerufen.

Hast Du ein Beispiel html, mit dem ich das nachvollziehen könnte.

[ToM_ToM]

Das geht bisher nicht. Wenn Du ein Reading mit einer Liste von Geo-Koordinatenpaaren bauen könntest (über userReading) dann könnte ich das im Modul nutzen um daraus eine Strecke auf die Karte zu legen.

Hallo eki, klar das sollte kein Problem sein.
Hast du eine Vorgabe wie das Format aussehen soll? Irgendein JSON-Format evtl.? Was ich bieten kann, wäre Längen- und Breitengrad sowie dazugehöriger Timestamp.
Könnte z.B. so aussehen:

Code Auswählen Erweitern


{
  "2018-04-16 13:50:30": [
    "49.773172",
    "10.2488713"
  ],
  "2018-04-16 13:51:35": [
    "49.7711765",
    "10.2626042"
  ],
  "2018-04-16 13:52:40": [
    "49.7682939",
    "10.278397"
  ],
  "2018-04-16 13:53:35": [
    "49.7671851",
    "10.2986531"
  ],
...
}


VG, Thomas

[eki]

Na wenn Du mich so fragst .

Am einfachsten wäre geojson, das versteht das Modul ohnehin (siehe auch erklärung weiter oben). Wenn Du also so etwas:

Code Auswählen Erweitern


{ "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
        },
        "properties": {
            "timestamp": "2018-04-16 13:50:30",
         }
      },
   ]
}


als Reading bauen könntest, dann wäre es für mich relativ einfach.

[ToM_ToM]

Am einfachsten wäre geojson

Oh geojson verarbeitet aber positionen auf einer x/y Achse. Ich habe ja nur Längen- und Breitengrad.
Dann müsste ich diese in Geokoordinaten anhand der Mapgröße umwandeln? Oder denke ich da gerade zu kompliziert?

Kannst du mir mal ein Beispiel-Datensatz geben anhand meinem Beispiel oben?

VG, Thomas

[basty2]

Hast Du ein Beispiel html, mit dem ich das nachvollziehen könnte.

klar:

Code Auswählen Erweitern

    <li class="halbTransparent" data-row="1" data-col="8" data-sizex="8" data-sizey="7">
    <header class="headerTransparent centered">Draußen</header>
    <div data-type="swiper"
data-device="anzeige" data-get="test"
data-states='["1","2","3"]'
class="nopagination">
         <ul>
         
    <li class="noswipe"><div class="center large"></div>
    <div class="inline">

<div id="hier" data-type="label"
data-device="temp1.temp"
data-hide="reachable"                                
data-hide-on="0"
data-hide-off="!on"
data-fix="1"
data-get="temperature"
data-limits="[-20,18,25]"
data-colors='["#9999ff","#00ff00","#ff0000"]'
data-unit=" °C"
class="inline tall"></div>
</div>
</li>
            <li class="noswipe">
<div id="myMap"
data-type="gmaps"
data-showdetails="true"
data-device="home"
data-height="300"
data-width="500"
data-traffic="true"
data-stroke="#000,0,50"></div>
</li>

            <li class="noswipe">
<div data-type="iframe"
data-src="http://xxx:8083/fhem/TRAFFIC?name=home"
data-height="300"
data-width="500"
></div>
</li>
         </ul>
     </div>
</li>

3 seiten für swiper, die ich per DOIF steuere. Iframe funktioniert, wenn man heigth und width angibt.

Edit: Fehlermeldungen beim Laden der Seite bekomme ich keine.

[eki]

Oh geojson verarbeitet aber positionen auf einer x/y Achse. Ich habe ja nur Längen- und Breitengrad.
Dann müsste ich diese in Geokoordinaten anhand der Mapgröße umwandeln? Oder denke ich da gerade zu kompliziert?

Kannst du mir mal ein Beispiel-Datensatz geben anhand meinem Beispiel oben?

VG, Thomas

Kein Problem, geojson kann mit geographischen Koordinaten umgehen. Beispiel ist angehängt.

[ToM_ToM]

Hi eki,

ich habe das jetzt mal anhand meiner Beispielkoordinaten oben nachgebaut.
Wäre das so korrekt?

Code Auswählen Erweitern


{
"type": "FeatureCollection",
"timestamp": "2018-04-16T13:50:30Z",
"features": [
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:50:30Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.2488713,
49.773172
]
}
},
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:51:35Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.2626042,
49.7711765
]
}
},
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:52:40Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.278397,
49.7682939
]
}
},
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:53:35Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.2986531,
49.7671851
]
}
}
]
}


VG, Thomas

[eki]

Linien müssen immer mindestens 2 Punkte haben. Wenn ich Dich richtig verstehe, dann willst Du darstellen, wo Du warst. Das macht aus meiner Sicht mehr Sinn mit Punkten (man kann dann auf der Karte z.B. ein Icon darstellen). Die Linien dazwischen sind ansonsten ja nur Verbindungen zwischen den einzelnen Positionen, die nicht auf Straßen gemappt werden).
Aber wie Du willst, es geht recht viel. Ich habe mal aus Deinen Daten 3 Beispiele gemacht, die alle dargestellt werden.
1. Beispiel: Eine Linie mit allen Koordinaten (hier kann man nur der ganzen Linie Properties mitgeben)
2. Beispiel: mehrere Liniensegmente, die dann die Gesamtlinie bilden (mach deshalb Sinn, weil man dann den Liniensegmenten einzelne Properties geben kann)
3. Beispiel: Einzelne Punkte. Bei den Punkten kannst Du festlegen, welches Logo dargestellt werden kann und das sogar unterschiedlich je nach Property. Dazu musst Du den Parameter data-feature_style festlegen (ist im Beispiel für eine von mir erfundene Property "home" mal gemacht.

Ausprobieren kannst Du das einfach in dem Du Deine Beispieldaten in ein File mit extension geojson packst, das auf Deinen Webserver legst (ich habe dazu unter dem Ordner tablet noch einen Ordner data angelegt.

Die Definition des Kartenwidgets für das 3. Beispiel könnte z.B. so aussehen:

<div id="myMap"
   style="height:100%; width:100%"
   data-type="gmaps"
   data-showdetails="false"
   data-traffic="true"
   data-mapgroup="0"
   data-geojson="data/test3.geojson"
   data-label="fa-car"
   data-stroke="#0000AA,20,70"
   data-feature_style='{
      "popup_properties_click":"timestamp",
      "display_styles":{
         "home.yes":{"label":"fa-home","opacity":"0.8","strokeColor":"red","zoom_min":"11","zoom_max":"100"}
   }'
</div>

[ToM_ToM]

Ausprobieren kannst Du das einfach in dem Du Deine Beispieldaten in ein File mit extension geojson packst, das auf Deinen Webserver legst (ich habe dazu unter dem Ordner tablet noch einen Ordner data angelegt.

Guten Morgen eki,

muss es immer eine Datei sein oder kann ich die Daten auch direkt aus einem Reading auslesen um hier Schreibzugriffe auf der SD-Karte oder SSD zu sparen?

VG, Thomas