Geofency auf Karte in Vis darstellen

mickym

@damrak2022 Nun passen wir noch die Change Node an - die direkt vor der World-Map Out Node steckt.

Am Besten den JSONATA Editor aufmachen und alles wegschmeissen und folgenden Code eintragen und dann screenshot posten:

{
   "name":name,
   "lat":lat,
   "lon":lon,
   "layer":"Andy's Favoriten",
   "icon":"circle",
   "iconColor":color,
   "popup": table
   }

Damrak2022

@mickym Ah okay, das ist die msg.payload

mickym

@damrak2022 Ja komm gleich - nun wie gesagt erst mal die Change Node - die ich im letzten Screenshot markiert habe - und die hinter der großen Auftrennung steckt.

Damrak2022

@mickym Fehler von mr - alles gut

mickym

@damrak2022 Ja machen wir gleich - bitte ein Screenshot vom JSONATA Editor der letzten Change msg.payload vor der worldmap node

Damrak2022

@mickym Bildschirmfoto 2022-08-31 um 17.16.34.png

mickym

@damrak2022 Sehr gut - nun kommt der erste große Test. - die Query DB Node - nun an die Change Node Farbe setzen grün verkabeln. Die Debug Node einfach bissi nach oben schieben.

Damrak2022

@mickym Ist verkabelt

mickym

@damrak2022 So nun sollte nach Browser-Refresh Dein Punkt My Home wieder auf der Karte auftauchen.

bei Dir ist er halt grün.

Damrak2022

@mickym Nein, nicht nach Browserrefresh und auch nicht wenn ich oben timestamp einmal anklicke
Muss ich die timestamp nicht erstmal trennen und mit Latitude verbinden?
Bildschirmfoto 2022-08-31 um 17.22.53.png

mickym

@damrak2022 Nein lass die ruhig - aber zusätzlich natürlich noch mit der Latitude Node verbinden - Es muss nun natürlich eine durchgehende Verbindung von vorne bis hinten existieren.

Damrak2022

@mickym Ja, jetzt geht es

mickym

@damrak2022 Siehst Du also Deinen myHome Punkt auf der karte?

Damrak2022

@mickym Jepp

mickym

@damrak2022 Ok Deine Punkte haben wir nun dem layer Andy's Favoriten hinzugefügt.

Das Kartenmenü öffnest Du über den Papierstapel:

Dort kannst Du über die Checkbox nun Deinen Punkt ein- und ausblenden. Funktioniert das?

Damrak2022

@mickym Ja, das klappt auch

mickym

@damrak2022 So dann nähern wir uns dem Ende des Projektes, weil ich das nun im Großen und Ganzen nach meinem ästhetischem Empfinden gemacht habe - und falls Du das anders haben willst - dann empfehle ich Dir @OliverIO - der scheint mir hier der HTML Profi zu sein.

Erst mal unformatiert:

Bitte diese Node importieren und hinter die JOIN Node im unteren Flow hängen:

[
   {
       "id": "12838a4c3b5049ec",
       "type": "function",
       "z": "42e3c58ef661ea13",
       "name": "Erstelle HTML Tabelle V2 für WorldMap",
       "func": "/**********************************************************************************************************/\n/* Zweck:      Erstellt eine HTML Tabelle für Popup der World-Maps\n/* Datum:      31.08.2022\n/* Autor:      @mickym\n/*\n/**********************************************************************************************************/\n\nif (typeof msg.payload === \"object\") {\n  var table = '';\n  var tHeight = msg.payload.length > 10 ? \"height:265px\" : \"height:100%\";\n  var html_styles = `\n    <head>\n      <style>\n        table {\n          font-family: arial, sans-serif;\n          border-collapse: collapse;\n          display: block;\n          overflow-y: scroll;\n          scrollbar-width: none;  /* Firefox */\n        }\n\n      /* Hide scrollbar for Chrome, Safari and Opera */\n        table::-webkit-scrollbar {\n          display: none;\n        }\n\n       \n        th {\n          border: 1px solid #dddddd;\n          text-align: center;\n          padding: 4px;\n        }\n\n        td {\n          border: 1px solid #dddddd;\n          text-align: center;\n          padding: 4px;\n        }\n\n        tr:nth-child(even) {\n          background-color: #dddddd;\n        }\n      </style>\n    </head>`\n\n  /***          Formatierung ein und ausschalten            ***/\n  // table = html_styles;\n  \n  table += `\n    <table style=\"height:30px\"> \n      <tr> \n          <th style=\"width:55px\">Ereignis</th> \n          <th style=\"width:125px\">Zeitstempel</th>\n      </tr> \n    </table>\n    <table style=\"` + tHeight + `\">`\n\n  msg.payload.forEach(function(/** @type {{ ereignis: any; zeitstempel: any; }} */ element) {\n      table += `\n        \n          <tr>\n            <td style=\"width:55px\">` + element.ereignis + `</td>\n            <td style=\"width:125px\">` + element.zeitstempel +`</td>\n          </tr>`\n  });\n\n  table += `\n        </table>`;\n\n  // node.warn(table);\n  msg.table = table;\n}\n\nreturn msg;",
       "outputs": 1,
       "noerr": 0,
       "initialize": "",
       "finalize": "",
       "libs": [],
       "x": 2230,
       "y": 1040,
       "wires": [
           [
               "d368b3d692533f66"
           ]
       ]
   }
]

Damrak2022

@mickym Ja, habe ich

mickym

@damrak2022 Browser 2 mal refreshen auf den Ortspunkt in der Karte klicken und Screenshot der karte zeigen.

Damrak2022

@mickym Habe ich gemacht. Beim Klicken auf den Punkt auf der Karte passiert noch nichts. Ich kann aber mal einen anderen Browser versuchen - Moment

NEWS

Geofency auf Karte in Vis darstellen

Support us

1.2k
Online

31.1k
Users

78.2k
Topics

1.2m
Posts

NEWS

Geofency auf Karte in Vis darstellen

Support us

1.2kOnline

31.1kUsers

78.2kTopics

1.2mPosts

1.2k
Online

31.1k
Users

78.2k
Topics

1.2m
Posts