Geofency auf Karte in Vis darstellen

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

mickym

@damrak2022 Beim iPad musst Du mit dem Finger nur etwas länger auf dem Punkt bleiben.

Damrak2022

@mickym In Chrome am Mac sieht es so aus:
Bildschirmfoto 2022-08-31 um 17.40.25.png

mickym

@damrak2022 2 mal refreshen bitte. Und zeigen wohin Du die importierte Node gesteckt hast.

Damrak2022

@mickym Habe Chrome 3 mal refresht - Anzeige bleibt gleich. Eventuell sollte ich den Rechner mal neustarten . Bin gleich wieder da

mickym

@damrak2022 Nein Rechner brauchst nicht neu starten - zeig den Flow wohin Du die neue Node gepackt hast.

Damrak2022

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

Damrak2022

@damrak2022 Habe den Fehler entdeckt

mickym

@damrak2022 Na wie soll denn bitte da was ankommen???? - die neue Node schmeisst ihren Output ja ins Nirwana.

Damrak2022

@mickym Nirwana ist schlecht, da hast Du recht.
In Chrome so:
Bildschirmfoto 2022-08-31 um 17.52.39.png
Mega gut

In Safari wird mir nicht angezeigt, obwohl da Inhaltsblocker und Popup deaktiviert sind, aber das kann ich ja nochmal in Ruhe prüfen

Bildschirmfoto 2022-08-31 um 17.55.03.png

mickym

@damrak2022 Du musst länger drauf bleiben. So nun habe ich als kleine Überraschung - das ganze auch noch in formatierter Form . Habe mich deshalb da heute bisschen mit beschäftigt. Wie gesagt auf dem Ipad musste ich den Punkt nur länger berühren.

Du siehst ja das die Tabelle lang wird - ich hab da - weil ich Scrollbalken störend fand das so gemacht, dass man trotzdem scrollen kann - ohne Scrollbalken einfach in die Tabelle klicken und dann am Mausrad drehen. - So wird das Popup nur unendlich groß.

Ich hab da bissi Code geklaut:

Also was Du machen musst ist, die Funktion Node, die Du importiert hast die Formatierung aktivieren:

/**********************************************************************************************************/
/* Zweck:      Erstellt eine HTML Tabelle für Popup der World-Maps
/* Datum:      31.08.2022
/* Autor:      @mickym
/*
/**********************************************************************************************************/

if (typeof msg.payload === "object") {
  var table = '';
  var tHeight = msg.payload.length > 10 ? "height:265px" : "height:100%";
  var html_styles = `
    <head>
      <style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          display: block;
          overflow-y: scroll;
          scrollbar-width: none;  /* Firefox */
        }

      /* Hide scrollbar for Chrome, Safari and Opera */
        table::-webkit-scrollbar {
          display: none;
        }

       
        th {
          border: 1px solid #dddddd;
          text-align: center;
          padding: 4px;
        }

        td {
          border: 1px solid #dddddd;
          text-align: center;
          padding: 4px;
        }

        tr:nth-child(even) {
          background-color: #dddddd;
        }
      </style>
    </head>`

  /***          Formatierung ein und ausschalten            ***/
  // table = html_styles;
  
  table += `
    <table style="height:30px"> 
      <tr> 
          <th style="width:55px">Ereignis</th> 
          <th style="width:125px">Zeitstempel</th>
      </tr> 
    </table>
    <table style="` + tHeight + `">`

  msg.payload.forEach(function(/** @type {{ ereignis: any; zeitstempel: any; }} */ element) {
      table += `
        
          <tr>
            <td style="width:55px">` + element.ereignis + `</td>
            <td style="width:125px">` + element.zeitstempel +`</td>
          </tr>`
  });

  table += `
        </table>`;

  // node.warn(table);
  msg.table = table;
}

return msg;

Geh dann dort mal in Zeile 47 und mach die 2 // vorne weg und deploy das ganze nochmal - und das ist dann mein finales Ergebnis für DIch.

Damrak2022

@mickym Okay, habe die zwei Flashs weggemacht - Sieht super aus, was Du da gemacht hast. Und jetzt kann ich die Farbe setzen Nodes wieder mit den My Query verbinden, damit ich auch alle anderen Orte auf der Karte sehe?
Bildschirmfoto 2022-08-31 um 18.06.40.png

mickym

@damrak2022 Genau einfach die Query Node - 9 mal kopieren und alles verkabeln.

Damrak2022

@mickym Okay, besten Dank für Deine super Hilfe. Jetzt kann ich mich Stück für Stück dranmachen und versuchen eigene Dinge umzusetzen.

mickym

@damrak2022 Also wie gesagt die Node Query Node kopieren - Unten findet zentral die Verarbeitung statt - oben haben wir aufgrund der unterschiedlichen Querys aber unterschiedliche Daten pro Punkt.

Muss dann halt so aussehen mit den entsprechenden Query Nodes davor:

Zum Abschluss wäre vielleicht noch mal ein Abschlussbild als Screenshot schön - in der formatierten Form schön - damit man das als Abschluß des Projektes betrachten kann.

Sollte ja dann so aussehen:

Community Forum

NEWS

Geofency auf Karte in Vis darstellen

Support us

691

32.4k

81.5k

1.3m