diff --git a/components/Map/MapBase.vue b/components/Map/MapBase.vue index d6d377194..06beac88e 100644 --- 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 index 91c95a92b..2240c1f3d 100644 --- 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 index 26cfda95e..02a645e90 100644 --- 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 }} @@ -77,6 +78,10 @@ export default defineNuxtComponent({ type: Object as PropType, required: true, }, + position: { + type: String, + required: false, + }, }, data(): { diff --git a/components/PoisDetails/Route/RouteMap.vue b/components/PoisDetails/Route/RouteMap.vue index eac8d073b..2db68e777 100644 --- 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" />
@@ -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 index fdd257ec6..0dafe45c0 100644 --- a/components/UI/TeritorioIconBadge.vue +++ b/components/UI/TeritorioIconBadge.vue @@ -8,10 +8,12 @@ :style="{ backgroundColor: colorFill }" > + {{ text }} @@ -44,6 +46,10 @@ export default defineNuxtComponent({ type: String as PropType, default: null, }, + text: { + type: String as PropType, + required: false, + }, }, computed: { diff --git a/lib/apiPoiDeps.ts b/lib/apiPoiDeps.ts index da9a0a5df..089b520dc 100644 --- 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 index c7e8e2b92..ca8a6e55b 100644 --- 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 = [] ) { 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