style: improve display of signage on map

GeotrekCE · Jan 6, 2025 · f7fd7e3 · f7fd7e3
1 parent e6ce310
commit f7fd7e3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
@@ -354,6 +354,20 @@
   }
 }
 
+.signage-marker {
+  overflow: hidden;
+  border-radius: 0%;
+  img {
+    width: 30% !important;
+  }
+  .signage-name {
+    margin-left: 8px;
+    color: white;
+    white-space: nowrap;
+    max-width: 50%;
+  }
+}
+
 .parking-marker {
   width: 100%;
   height: 100%;

diff --git a/src/components/grw-map/grw-map.tsx b/src/components/grw-map/grw-map.tsx
@@ -2450,12 +2450,12 @@ export class GrwMap {
       }
 
       this.currentSignagesLayer = L.geoJSON(currentSignagesFeatureCollection, {
-        pointToLayer: (_geoJsonPoint, latlng) =>
+        pointToLayer: (geoJsonPoint, latlng) =>
           L.marker(latlng, {
             icon: L.divIcon({
-              html: `<div part="signage-marker" class="signage-marker"><img  src=${signageImageSrc} /></div>`,
+              html: `<div part="signage-marker" class="signage-marker"><img  src=${signageImageSrc} /><div part="signage-name" class="signage-name">${geoJsonPoint.properties.name}</div></div>`,
               className: '',
-              iconSize: this.commonMarkerSize,
+              iconSize: [this.commonMarkerSize * 1.2, this.commonMarkerSize * 0.8],
             } as any),
             autoPanOnFocus: false,
           } as any),

diff --git a/src/services/treks.service.ts b/src/services/treks.service.ts
@@ -70,5 +70,5 @@ export function getSources(api, language, init) {
 }
 
 export function getSignages(api, language, trekId, init) {
-  return fetch(`${api}signage/?language=${language}&near_trek=${trekId}&fields=id,geometry,name`, init);
+  return fetch(`${api}signage/?language=${language}&near_trek=${trekId}&fields=id,geometry,name&published=true&page_size=999`, init);
 }