wip: do not fail when setting "Circles" layer with non markers data

umap/static/umap/js/modules/data/features.js

@@ -119,7 +119,7 @@ class Feature {
   }
 
   getUIClass() {
-    return this.getOption('UIClass') || this.getDefaultUIClass()
+    return this.getOption('UIClass')
   }
 
   getClassName() {
@@ -560,8 +560,8 @@ class Feature {
       properties.lon = center.lng
       properties.lng = center.lng
       properties.alt = center?.alt
-      if (typeof this.getMeasure !== 'undefined') {
-        properties.measure = this.getMeasure()
+      if (typeof this.ui.getMeasure !== 'undefined') {
+        properties.measure = this.ui.getMeasure()
       }
     }
     return L.extend(properties, this.properties)
@@ -601,8 +601,8 @@ export class Point extends Feature {
     return { coordinates: GeoJSON.latLngToCoords(latlng), type: 'Point' }
   }
 
-  getDefaultUIClass() {
-    return LeafletMarker
+  getUIClass() {
+    return super.getUIClass() || LeafletMarker
   }
 
   hasGeom() {
@@ -710,16 +710,6 @@ class Path extends Feature {
     ]
   }
 
-  getStyle() {
-    const options = {}
-    for (const option of this.ui.getStyleOptions()) {
-      options[option] = this.getDynamicOption(option)
-    }
-    if (options.interactive) options.pointerEvents = 'visiblePainted'
-    else options.pointerEvents = 'stroke'
-    return options
-  }
-
   getBestZoom() {
     return this.getOption('zoomTo') || this.map.getBoundsZoom(this.bounds, true)
   }
@@ -805,19 +795,14 @@ export class LineString extends Path {
     return !this.coordinates.length
   }
 
-  getDefaultUIClass() {
-    return LeafletPolyline
+  getUIClass() {
+    return super.getUIClass() || LeafletPolyline
   }
 
   isSameClass(other) {
     return other instanceof LineString
   }
 
-  getMeasure(shape) {
-    const length = L.GeoUtil.lineLength(this.map, shape || this.ui._defaultShape())
-    return L.GeoUtil.readableDistance(length, this.map.measureTools.getMeasureUnit())
-  }
-
   toPolygon() {
     const geojson = this.toGeoJSON()
     geojson.geometry.type = 'Polygon'
@@ -922,9 +907,9 @@ export class Polygon extends Path {
     return !this.coordinates.length || !this.coordinates[0].length
   }
 
-  getDefaultUIClass() {
+  getUIClass() {
     if (this.getOption('mask')) return MaskPolygon
-    return LeafletPolygon
+    return super.getUIClass() || LeafletPolygon
   }
 
   isSameClass(other) {
@@ -956,11 +941,6 @@ export class Polygon extends Path {
     return options
   }
 
-  getMeasure(shape) {
-    const area = L.GeoUtil.geodesicArea(shape || this.ui._defaultShape())
-    return L.GeoUtil.readableArea(area, this.map.measureTools.getMeasureUnit())
-  }
-
   toLineString() {
     const geojson = this.toGeoJSON()
     delete geojson.id

umap/static/umap/js/modules/rendering/ui.js

@@ -7,6 +7,7 @@ import {
   DomUtil,
   LineUtil,
   latLng,
+  LatLng,
   LatLngBounds,
 } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
@@ -267,7 +268,7 @@ export const LeafletMarker = Marker.extend({
 const PathMixin = {
   _onMouseOver: function () {
     if (this._map.measureTools?.enabled()) {
-      this._map.tooltip.open({ content: this.feature.getMeasure(), anchor: this })
+      this._map.tooltip.open({ content: this.getMeasure(), anchor: this })
     } else if (this._map.editEnabled && !this._map.editedFeature) {
       this._map.tooltip.open({ content: translate('Click to edit'), anchor: this })
     }
@@ -334,7 +335,7 @@ const PathMixin = {
     let items = FeatureMixin.getContextMenuItems.call(this, event)
     items.push({
       text: translate('Display measure'),
-      callback: () => Alert.info(this.feature.getMeasure()),
+      callback: () => Alert.info(this.getMeasure()),
     })
     if (this._map.editEnabled && !this.feature.isReadOnly() && this.feature.isMulti()) {
       items = items.concat(this.getContextMenuMultiItems(event))
@@ -468,6 +469,12 @@ export const LeafletPolyline = Polyline.extend({
     })
     return items
   },
+
+  getMeasure: function (shape) {
+    // FIXME: compute from data in feature (with TurfJS)
+    const length = L.GeoUtil.lineLength(this._map, shape || this._defaultShape())
+    return L.GeoUtil.readableDistance(length, this._map.measureTools.getMeasureUnit())
+  },
 })
 
 export const LeafletPolygon = Polygon.extend({
@@ -502,6 +509,11 @@ export const LeafletPolygon = Polygon.extend({
   startHole: function (event) {
     this.enableEdit().newHole(event.latlng)
   },
+
+  getMeasure: function (shape) {
+    const area = L.GeoUtil.geodesicArea(shape || this._defaultShape())
+    return L.GeoUtil.readableArea(area, this._map.measureTools.getMeasureUnit())
+  },
 })
 const WORLD = [
   latLng([90, 180]),
@@ -541,6 +553,14 @@ export const MaskPolygon = LeafletPolygon.extend({
 export const CircleMarker = BaseCircleMarker.extend({
   parentClass: BaseCircleMarker,
   includes: [FeatureMixin, PathMixin],
+  initialize: function (feature, latlng) {
+    if (Array.isArray(latlng) && !(latlng[0] instanceof Number)) {
+      // Must be a line or polygon
+      const bounds = new LatLngBounds(latlng)
+      latlng = bounds.getCenter()
+    }
+    FeatureMixin.initialize.call(this, feature, latlng)
+  },
   getClass: () => CircleMarker,
   getStyleOptions: function () {
     const options = PathMixin.getStyleOptions.call(this)

umap/static/umap/js/umap.controls.js

@@ -1261,7 +1261,7 @@ U.Editable = L.Editable.extend({
       } else {
         const tmpLatLngs = e.layer.editor._drawnLatLngs.slice()
         tmpLatLngs.push(e.latlng)
-        measure = e.layer.feature.getMeasure(tmpLatLngs)
+        measure = e.layer.getMeasure(tmpLatLngs)
 
         if (e.layer.editor._drawnLatLngs.length < e.layer.editor.MIN_VERTEX) {
           // when drawing second point
@@ -1273,7 +1273,7 @@ U.Editable = L.Editable.extend({
       }
     } else {
       // when moving an existing point
-      measure = e.layer.feature.getMeasure()
+      measure = e.layer.getMeasure()
     }
     if (measure) {
       if (e.layer instanceof L.Polygon) {