Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[icebear]

@oliverio

Danke für deine Arbeit, hab ich umgesetzt und sieht bis jetzt gut aus.

Eine Frage hab ich noch, kannst du auch einbauen, das man bei der Leaflet Karte die 'dunkle Karte' wählen kann?
Bei Farbschema 'dark' macht er ja nur den Widget Hintergrund dunkel.

[OliverIO]

@icebear

Hast du mir ein beispiellink dazu?
Openstreetmaps bietet nur eine
Verkehrskarte
Im Dunklen Design an oder ich habe es nicht gefunden.
Ggfs gibt es Drittanbieter die Alternative tiles layer anbieten.
Die können ggfs. kostenpflichtig sein.

https://www.openstreetmap.org/#map=11/50.1232/8.6401&layers=T

[icebear]

@oliverio

Das was ich gefunden habe ist Quasi ein CSS-Hack für Openstreetmap:

/* Nur die Hintergrund-Kacheln filtern */
.leaflet-tile-pane {
    filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3);
}

/* Marker & Popups bleiben in ihren Originalfarben */
.leaflet-marker-pane,
.leaflet-popup-pane {
    filter: none;
}

[OliverIO]

@icebear

Ja den hab ich auch gefunden.
Verändert die Farben und geht ggfs auf die Leistung des grafikprozessors.

Ich dachte, es gibt was offizielles

[icebear]

@oliverio

Dachte ich auch weil z.B. in Home Assistant sind die Karten irgendwie alle in diesem dunklen Design, keine Ahnung wie die das machen

Ich glaube, die machen das mit CartoDB, weil unten hinter dem Leaflet Openstreetmap noch Carto steht.

[OliverIO]

@icebear

Hast du mir ein link zu dieser Komponente, dann kann ich nachschauen. Hab kein ha und bin da nicht so firm

Bei carto steht immer nur 'try it for free'
Keine Ahnung wie da so die lizenzbedingungen sind.

[icebear]

@oliverio

Ich hab mal meine Freundin 'Gemini' befragt, hier die Antwort:

Ein sehr bekannter, kostenlos nutzbarer Anbieter für Open-Source-Projekte ist CartoDB (Dark Matter). Die entsprechende Tile-URL lautet:

https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png

und

Solltest du beispielsweise eine JavaScript-Karte mit Leaflet.js nutzen, bindest du den Layer wie folgt ein:

L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
  subdomains: 'abcd',
  maxZoom: 20
}).addTo(map);

Edit: In Home Assistant geht das wohl automatisch über das Theme, siehe:

Standardmäßig schaltet Home Assistant die Karte automatisch dunkel, sobald das System-Theme auf Dark Mode steht.

Aber wie gesagt wenn es zu Aufwendig wird, dann gehts auch so, passt halt nur besser wenn alles andere auch dunkel ist.

[OliverIO]

@icebear

Ich habe es selber gefunden

https://www.home-assistant.io/dashboards/map/

Es geht nicht darum so etwas einzubauen. Das ist relativ einfach.

Wie oben schon erwähnt ist carto kein kostenloser Dienst.
Ich wollte schauen ob Home Assistant da eine separate Vereinbarung hat und ich hatte recht.
https://github.com/home-assistant/home-assistant.io/blob/9a1059ea95178bb8d03e3523137ec9ee9a7aedf5/source/_posts/2016-07-16-sqlalchemy-knx-join-simplisafe.markdown?plain=1#L15

Ein Nutzer erhält keine Abmahnung nur der der die Software bereitstellt. Mit dritt Ressourcen muss man immer ein wenig vorsichtig sein.
Das ist das selbe wie Musik. Man kann die zwar ohne Probleme öffentlich abspielen, die Folgen können aber überraschend sein

Hier ist eine Übersicht der tile layer provider
https://wiki.openstreetmap.org/wiki/Raster_tile_providers
Da steht bei carto überall commercial, registration required.

Dann bliebe nur noch die css alternative

[OliverIO]

@icebear

so die lösung habe ich gefunden.
home assistant macht das auch per css

    #map.forced-dark {
      color: #ffffff;
      --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2)
        saturate(0.3);
    }
    #map.forced-light {
      background: #ffffff;
      color: #000000;
      --map-filter: invert(0);
    }
    .leaflet-tile-pane {
      filter: var(--map-filter);
    }

[OliverIO]

Neue Version 0.3.0

• die beiden widgets map und location timeline können nun das Theme schema für die Karte einstellen. Verfügbar: Auto (was im browser oder Betriebssystem eingestellt ist, light, dark
• Die Einstellung ist beim location timeline unabhängig von der theme Einstellung des widgets. daher alle Kombinationen sind möglich
• da kostenlos keine an ein dunkles Farbschema angepasste Karte verfügbar ist, wird die Farbanpassung per css-filter transformation vorgenommen. Das kann, insbesondere bei schwächeren Maschinen ohne separaten Grafikchip, zu einer höheren Auslastung führen.
• Alle vom Nutzer hinzugefügten Marker, Pfade, Polygone, etc. sind von der Farbtransformation nicht betroffen

[icebear]

@oliverio

Perfekt! Super vielen Dank für die schnelle Umsetzung.

Die Umschaltung von 'dark' und 'light' funktioniert auch.
Ich schau dann mal morgen wie sich das ganze in Betrieb verhält.

[mcm1957]

Der Adapter wurde ins LATEST Repository aufgenommen und sollte dort spätestens innerhalb von 24 Stunden sichtbar sein.

Ich rege an in Abstimmung mit @Homoran ein neues Topic im Testerbereich anzulegen und dieses Topic hier schließen zu lassen. Zur besseren Übersicht bitte nach Möglichkeit einen Titel der Art

„Test Adapter adaptername Vx.x.x“,

verwenden. Ein solcher Titel erleichtert es, den Thread über die Suchfunktion des Forums zu finden und das Topic dem richtigen Adapter zuzuordnen.

Hinweis: Falls bereits ein Test-Thread existiert, kann dieser gerne weiterverwendet werden, eine allfällieg Anpassung des Titels bitte überlegen.

Bitte bei Fragen an @homoran wenden.

[OliverIO]

@mcm1957
Danke

@homoran
Können wir durch das verschieben die Nummer?
82214/test-iobroker-vis-mapwidgets?
Das steht so als supporting aktuell im Widget drin.
Wenn ja, dann bitte noch so stehen lassen.
Muss mir dann erst noch einen link kürzungs und weiterleitungsdienst suchen und im Widget aktualisieren.

[OliverIO]

Neue Version

• der Supportlink im widget wurde auf einen Kurzlink Service umgestellt, so das ich unabhängig von einem Release den Link ändern kann.
  Aktuell zeigt dieser auf forum.iobroker.net/topic/82214/test-iobroker-vis-mapwidgets
  wenn sich durch das verschieben des threads der Link ändert, kann ich den einfach anpassen.

@homoran Bitte nach
https://forum.iobroker.net/category/91/tester
verschieben.
Auf eine Angabe der Version im Titel verzichte ich, da ich hier ja kontinuierlich über die Anpassungen des Adapters und neue Versionen berichte.

[OliverIO]

Danke fürs verschieben. Link hat sich auch nicht geändert da er am topic, also thread name hängt

[icebear]

@oliverio

Ich bekam heute ein Update auf die v0.3.2 angezeigt, beim Versuch zu aktualisieren, kam jedoch das folgende Fenster:

Ich weiß ja nich ob das so gedacht war?

[OliverIO]

@icebear

Ja, da habe ich geschlampt, entferne ich in der nächsten Version heute Nachmittag

[OliverIO]

Neue Version 0.3.3

• die vis1 abhängigkeit wurde entfernt

@icebear doch nicht geschlampt, das war von Anfang an drin. Ist mir in der dev-Umgebung und dem testserver nur nie aufgefallen, da dort ja vis1 und vis2 installiert ist.
Das ist wahrscheinlich eines der Dinge woran sich die Installation per Expertenmodus/NPM zur normalen Installation unterscheidet.