wip: Support new map styling #816

kalisio · Feb 8, 2024 · 9fd1497 · 9fd1497
1 parent 3ef58af
commit 9fd1497
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 31 deletions.
diff --git a/core/client/utils/utils.shapes.js b/core/client/utils/utils.shapes.js
@@ -64,7 +64,8 @@ export const Shapes = {
     },
     text: {
       translation: ['-50%', '-70%']
-    }
+    },
+    anchor: 'bottom-center'
   },
   'square-pin': {
     viewBox: [0, 0, 56, 56],
@@ -74,7 +75,8 @@ export const Shapes = {
     },
     text: {
       translation: ['-50%', '-60%']
-    }
+    },
+    anchor: 'bottom-center'
   }
 }
 
@@ -135,6 +137,8 @@ export function createShape (options) {
     logger.warn(`[KDK] 'options' argument is required`)
     return
   }
+  // Define the anchor
+  let anchor = 'middle-center'
   // Define the shape
   let shape
   if (options.shape && options.shape !== 'none') {
@@ -146,6 +150,7 @@ export function createShape (options) {
         shape = Shapes['circle']
       }
     }
+    anchor = shape.anchor || anchor
   }
   // Define the size
   let size = { width: 24, height: 24 }
@@ -252,9 +257,9 @@ export function createShape (options) {
     htmlTag += '</div>'
   }
   return {
-    width: size.width,
-    height: size.height,
-    html: beginDivTag + beginSvgTag + svgClipPath + svgShapeContent + endSvgTag + iconTag + textTag + htmlTag + endDivTag
+    html: beginDivTag + beginSvgTag + svgClipPath + svgShapeContent + endSvgTag + iconTag + textTag + htmlTag + endDivTag,
+    size,
+    anchor
   }
 }
 
diff --git a/map/client/components/widget/KElevationProfile.vue b/map/client/components/widget/KElevationProfile.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="elevation-profile" class="column">
-    <k-chart ref="chart" class="col q-pl-sm q-pr-sm" />
+    <KChart :ref="onChartRefCreated" class="col q-pl-sm q-pr-sm" />
   </div>
 </template>
 
@@ -44,8 +44,15 @@ export default {
     yAxisLabel: { type: String, default: '' },
     mapGhostIcon: {
       type: Object,
-      default (rawProps) {
-        return { 'marker-type': 'shapeMarker', 'fill-color': 'primary', 'icon-classes': 'las la-mountain' }
+      default: () => {
+        return { 
+          shape: "square-pin",
+          size: [60, 24],
+          color: 'secondary',
+          stroke: {
+            color: 'primary'
+          }
+        }
       }
     },
     terrainLegend: { type: String, default: '' }
@@ -76,6 +83,7 @@ export default {
   },
   data () {
     return {
+      ready: false,
       profile: null
     }
   },
@@ -88,6 +96,11 @@ export default {
     }
   },
   methods: {
+    onChartRefCreated (reference) {
+      if (reference) {
+        this.chartRef = reference
+      }
+    },
     hasFeature () {
       return !_.isNil(this.feature)
     },
@@ -107,6 +120,7 @@ export default {
       return lbl || this.$t('KElevationProfile.TERRAIN_CHART_LEGEND')
     },
     updateChart (terrainDataset, profileDataset, profileColor, chartWidth) {
+      if (!this.chartRef) throw new Error('Cannot update the chart while not created')
       const update = {
         type: 'line',
         data: { datasets: [] },
@@ -177,7 +191,7 @@ export default {
                 }
 
                 this.highlightFeature = along(segment, abscissaKm, { units: 'kilometers' })
-                this.highlightFeature.properties = _.cloneDeep(this.mapGhostIcon)
+                this.highlightFeature.style = _.get(this.kActivity, 'activityOptions.engine.style.location.point')
                 this.highlight(this.highlightFeature)
               }
             }
@@ -302,7 +316,7 @@ export default {
       }
 
       // Add profile elevation if provided
-      if (profileDataset.length) {
+      if (_.size(profileDataset)) {
         update.data.datasets.push({
           label: this.title,
           data: profileDataset,
@@ -317,7 +331,7 @@ export default {
       }
 
       // Add terrain elevation dataset
-      if (terrainDataset.length) {
+      if (_.size(terrainDataset)) {
         update.data.datasets.push({
           label: this.getTerrainLegend(),
           data: terrainDataset,
@@ -332,7 +346,7 @@ export default {
         })
       }
 
-      this.$refs.chart.update(update)
+      this.chartRef.update(update)
     },
 
     async refresh () {

diff --git a/map/client/components/widget/KMapillaryViewer.vue b/map/client/components/widget/KMapillaryViewer.vue
@@ -10,7 +10,6 @@
 
 <script>
 import _ from 'lodash'
-import L from 'leaflet'
 import logger from 'loglevel'
 import { ref } from 'vue'
 import { Viewer } from 'mapillary-js'
@@ -164,7 +163,7 @@ export default {
     this.key = undefined
     this.refresh()
   },
-  async beforeUnmount () {
+  beforeUnmount () {
     // Remove event listeners
     this.mapillaryViewer.off('image', this.onImageEvent)
     // Save the states

diff --git a/map/client/leaflet/ShapeMarker.js b/map/client/leaflet/ShapeMarker.js
@@ -3,21 +3,16 @@ import logger from 'loglevel'
 import L from 'leaflet'
 import { utils as coreUtils } from '../../../core/client/index.js'
 
-const DefaultOptions = {
-  anchor: 'top-center' 
-}
-
 export const ShapeMarker = L.Marker.extend({
 
   // Constructor
   initialize (latlng, options) {
-    const shapeOptions = Object.assign({}, DefaultOptions, options)
-    const shape = coreUtils.createShape(shapeOptions)
+    const shape = coreUtils.createShape(options)
     if (shape) {
       L.Marker.prototype.initialize.call(this, latlng, {
         icon: L.divIcon({
           iconSize: [shape.width, shape.height],
-          iconAnchor: this.getAnchor(shapeOptions, shape.width, shape.height),
+          iconAnchor: this.getAnchor(shape.anchor, shape.size),
           popupAnchor: [0, -shape.height / 2],
           html: shape.html,
           className: ''
@@ -30,16 +25,16 @@ export const ShapeMarker = L.Marker.extend({
     }
   },
 
-  getAnchor (position, width, height) {
+  getAnchor (position, size) {
     if (position === 'top-left') return [0, 0]
-    if (position === 'top-center') return [width / 2, 0]
-    if (position === 'top-right') return [width, 0]
-    if (position === 'middle-left') return [0, height / 2]
-    if (position === 'middle-right') return [width, height / 2]
-    if (position === 'middle-left') return [0, height / 2]
-    if (position === 'bottom-left') return [0, height]
-    if (position === 'bottom-center') return [width / 2, height]
-    if (position === 'bottom-right') return [width, height]
-    return [width / 2, height / 2]
+    if (position === 'top-center') return [size.width / 2, 0]
+    if (position === 'top-right') return [size.width, 0]
+    if (position === 'middle-left') return [0, size.height / 2]
+    if (position === 'middle-right') return [size.width, size.height / 2]
+    if (position === 'middle-left') return [0, size.height / 2]
+    if (position === 'bottom-left') return [0, size.height]
+    if (position === 'bottom-center') return [size.width / 2, size.height]
+    if (position === 'bottom-right') return [size.width, size.height]
+    return [size.width / 2, size.height / 2]
   }
 })