custom map-card with geojson plugin

[gerhardvilsecker]

Hello all,
i am working intensively with all tools of this mammotion integration. My custom map-card is working quite good. But:
I still did not succeed in making my display marker (which is a picture of my yuka) showing in heading direction (like you can see in the mammotion app). Question: has anyone of you ever tried?
I asked my "good friend" google AI. We tried a lot of css settings. All of them did not properly work. So if anyone is interested and/or can help. Please let me know.

Here is my custom map-card yaml:

type: custom:map-card
theme_mode: dark
tile_layer_url: /local/assets/tiles/{z}/{x}/{y}.png
zoom: 21
plugins:

• name: geoJson
  url: /hacsfiles/ha-mammotion-assets/dist/geojson.js
  options:
  rotation_deg: 0
  entity_id: lawn_mower.wurli
  entities:

• entity: device_tracker.wurli_yuka_mnehqurw
  picture: /local/wurli_bearbeitet.png
  size: 30
  display: marker
  position_update_threshold: 0.1
  card_size: 5
  tile_layers:

• url: https://tile.openstreetmap.de/{z}/{x}/{y}.png
  default_zoom: 21
  tile_layer_options:
  attribution: >-
  OpenStreetMap
  contributors
  maxZoom: 21
  minZoom: 21
  card_mode:
  style:
  ha-map $: |
  /* 2. Wir zielen exakt auf das Bild deines Trackers ab /
  .leaflet-marker-icon img {
  / Berechnung des Winkels: Richtung auslesen und den gewünschten 180° Offset addieren */
  {% set dir = state_attr('device_tracker.wurli_yuka_mnehqurw', 'direction') | float(0) %}
  rotate: {{ (dir + 180) % 360 }}deg !important;

  /* Erzwingt den Drehpunkt genau in die Mitte des hochgeladenen Bildes */
  transform-origin: center center !important;
  transition: rotate 0.5s ease-in-out;
  

  }_

CSS part is result of probably 6th or 7th iteration from google AI discussion. Unfortunately still not working.
My current workaround: I have a picture type card on the same dashboard with css rotation implemented. This is working.
Here is the yaml :

type: picture
image:
media_content_id: /local/wurli_bearbeitet.png
media_content_type: ''
metadata:
navigateIds:
- {}
- media_content_type: ''
media_content_id: MANUAL_ENTRY
grid_options:
columns: 3
rows: auto
card_mod:
style: |
ha-card {
{% set dir = state_attr('device_tracker.wurli_yuka_mnehqurw', 'direction') | float(0) + 180%}
transform: rotate({{ (dir + 180) % 360 }}deg);
transition: transform 0.5s ease; /* Macht die Drehung flüssig /
background: rgba(0, 0, 0, 0.4) !important;
width: max-content;
margin: 0 auto; / Zentriert die Karte optional im Dashboard /
}
img {
/ Hier bestimmst du die exakte maximale Breite des Bildes */
max-width: 45px;
height: auto;
}_
The css part has also been contributed by google AI....

[gerhardvilsecker]

some people advised me to use "Claude AI" instead of google or ChatGPT. this experience was amazing. Claude guided me through anlyzation of chrome webpage. After a few minutes we had a very satifying result: My marker is now showing in yuka driving direction.
Here is my (working) css code:

card_mod:
style: |
map-card-entity-marker[entity-id="device_tracker.wurli_yuka_mnehqurw"] {
{% set dir = state_attr('device_tracker.wurli_yuka_mnehqurw', 'direction') | float(0) %}
display: inline-block;
rotate: {{ (dir) % 360 }}deg !important;
transform-origin: center center !important;
transition: rotate 0.5s ease-in-out;
}