feat: update display for route in detail page (#134)

teritorio · Dec 4, 2023 · b0e1478 · b0e1478
1 parent 6059331
commit b0e1478
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 16 deletions.
diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue
@@ -222,7 +222,8 @@ export default defineNuxtComponent({
     initPoiLayer(
       features: MapPoi[],
       clusterPropertiesValues: string[],
-      clusterPropertiesKeyExpression: maplibregl.ExpressionSpecification
+      clusterPropertiesKeyExpression: maplibregl.ExpressionSpecification,
+      cluster?: boolean
     ) {
       if (this.map.getLayer(POI_LAYER)) {
         this.map.removeLayer(POI_LAYER)
@@ -255,7 +256,7 @@ export default defineNuxtComponent({
 
       this.map.addSource(POI_SOURCE, {
         type: 'geojson',
-        cluster: true,
+        cluster: cluster || true,
         clusterRadius: 32,
         clusterProperties: clusterProps,
         clusterMaxZoom: 15,
@@ -378,7 +379,8 @@ export default defineNuxtComponent({
           this.markers,
           POI_SOURCE,
           this.fitBounds,
-          (feature: ApiPoi) => this.$emit('feature-click', feature)
+          (feature: ApiPoi) => this.$emit('feature-click', feature),
+          this.features
         )
       }
 

diff --git a/components/Map/MapPois.vue b/components/Map/MapPois.vue
@@ -57,6 +57,14 @@ export default defineNuxtComponent({
       >,
       default: undefined,
     },
+    fullscreenControl: {
+      type: Boolean,
+      default: false,
+    },
+    cluster: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup() {
     return {
@@ -127,12 +135,21 @@ export default defineNuxtComponent({
           )
         ),
       ]
-      this.mapBase!.initPoiLayer(this.features, colors, [
-        'case',
-        ['all', ['has', 'display'], ['has', 'color_fill', ['get', 'display']]],
-        ['get', 'color_fill', ['get', 'display']],
-        '#000000',
-      ])
+      this.mapBase!.initPoiLayer(
+        this.features,
+        colors,
+        [
+          'case',
+          [
+            'all',
+            ['has', 'display'],
+            ['has', 'color_fill', ['get', 'display']],
+          ],
+          ['get', 'color_fill', ['get', 'display']],
+          '#000000',
+        ],
+        this.cluster
+      )
 
       if (this.featureIds) {
         filterRouteByPoiIds(this.map as maplibregl.Map, this.featureIds)

diff --git a/components/PoisCard/PoiCardLight.vue b/components/PoisCard/PoiCardLight.vue
@@ -15,6 +15,7 @@
             :picto="icon"
             size="lg"
             :image="undefined"
+            :text="poi.properties.position"
           />
           {{ name }}
         </h3>
@@ -77,6 +78,10 @@ export default defineNuxtComponent({
       type: Object as PropType<ApiPoi>,
       required: true,
     },
+    position: {
+      type: String,
+      required: false,
+    },
   },
 
   data(): {

diff --git a/components/PoisDetails/Route/RouteMap.vue b/components/PoisDetails/Route/RouteMap.vue
@@ -6,6 +6,7 @@
       :feature-ids="[poiId]"
       :fullscreen-control="true"
       :off-map-attribution="true"
+      :cluster="false"
     />
     <div class="detail-wrapper">
       <div v-if="points.length > 0" class="detail-left">
@@ -97,12 +98,13 @@ export default defineNuxtComponent({
   },
 
   created() {
-    this.routeCollection = this.route.features.map((feature) => {
+    this.routeCollection = this.route.features.map((feature, index) => {
       if (feature.properties['route:point:type']) {
         const mapPoi = apiRouteWaypointToApiPoi(
           feature as ApiRouteWaypoint,
           this.colorFill,
-          this.colorLine
+          this.colorLine,
+          (index + 1).toString()
         )
         this.points.push(mapPoi)
         return mapPoi

diff --git a/components/UI/TeritorioIconBadge.vue b/components/UI/TeritorioIconBadge.vue
@@ -8,10 +8,12 @@
     :style="{ backgroundColor: colorFill }"
   >
     <TeritorioIcon
+      v-if="!text"
       :class="`tw-text-${iconSize}`"
       :picto="picto"
       :image="image"
     />
+    <b v-else>{{ text }}</b>
     <slot></slot>
   </span>
 </template>
@@ -44,6 +46,10 @@ export default defineNuxtComponent({
       type: String as PropType<string>,
       default: null,
     },
+    text: {
+      type: String as PropType<string>,
+      required: false,
+    },
   },
 
   computed: {

diff --git a/lib/apiPoiDeps.ts b/lib/apiPoiDeps.ts
@@ -63,7 +63,8 @@ export const iconMap: { [key: string]: string } = {
 export function apiRouteWaypointToApiPoi(
   waypoint: ApiRouteWaypoint,
   colorFill: string,
-  colorLine: string
+  colorLine: string,
+  position?: string
 ): ApiPoi {
   return {
     ...waypoint,
@@ -79,6 +80,7 @@ export function apiRouteWaypointToApiPoi(
         color_fill: colorFill,
         color_line: colorLine,
       },
+      position,
       editorial: {
         popup_fields: [
           {

diff --git a/lib/markerLayerFactory.ts b/lib/markerLayerFactory.ts
@@ -5,7 +5,7 @@ import type {
   LngLatBoundsLike,
   FitBoundsOptions,
 } from 'maplibre-gl'
-import { createApp } from 'vue'
+import { createApp, PropType } from 'vue'
 
 import { ApiPoi } from './apiPois'
 import { getBBoxFeatures } from './bbox'
@@ -79,7 +79,8 @@ export function makerHtmlFactory(
   colorFill: string,
   icon: string,
   thumbnail: string | undefined,
-  size: string | null = null
+  size: string | null = null,
+  text?: string
 ): ITMarker {
   // Marker
   const el: HTMLElement = document.createElement('div')
@@ -100,6 +101,7 @@ export function makerHtmlFactory(
     picto: icon,
     image: thumbnail,
     size,
+    text: text,
   }).mount(el)
 
   return marker
@@ -110,7 +112,8 @@ export function updateMarkers(
   markers: { [id: string]: ITMarker },
   src: string,
   fitBounds: (bounds: LngLatBoundsLike, options: FitBoundsOptions) => void,
-  markerClickCallBack: ((feature: ApiPoi) => void) | undefined
+  markerClickCallBack: ((feature: ApiPoi) => void) | undefined,
+  initFeatures: PropType<ApiPoi[]> = []
 ) {
   const markerIdPrevious = Object.keys(markers)
   const markerIdcurrent: string[] = []
@@ -188,12 +191,18 @@ export function updateMarkers(
               }
 
               // Marker
+              const index = initFeatures.findIndex(
+                (initFeature) => initFeature.properties.id === props.id
+              )
+
               markers[id] = makerHtmlFactory(
                 id,
                 markerCoords, // Using this to avoid misplaced marker
                 props.display?.color_fill || '#000000',
                 props.display?.icon || '#000000',
-                props['image:thumbnail']
+                props['image:thumbnail'],
+                null,
+                typeof index === 'number' ? index + 1 : undefined
               )
 
               // Click handler