wip: use CircleMarker instead of Circle icon

This needs more work, but would allow:
- better performance:
    - one svg for all features instead of one HTML per feature
    - as it inherits from path, only visible feature are added to DOM
- controling the circle radius, which is something requested from time
  to time

To move forward, we need:

- [ ] to have default per UI class (instead of in the SCHEMA), as
 for example we do not want the same default weight for a line or
 for the CircleMarker
- [ ] maybe to have some static properties, so to keep the circle
  border color always white, as now (but can be discussed)
- [ ] when editing a feature, to show properties according to the
  current selected UI class, so user can define the radius when
  "Circle" is selected, but also other path related properties
  (fillColor, opacity…)
This commit is contained in:
Yohan Boniface 2024-08-15 12:06:11 +02:00
parent ab8bce985e
commit 8129c06152
2 changed files with 9 additions and 0 deletions

View file

@ -14,6 +14,7 @@ import {
LeafletPolyline, LeafletPolyline,
LeafletPolygon, LeafletPolygon,
MaskPolygon, MaskPolygon,
CircleMarker,
} from '../rendering/ui.js' } from '../rendering/ui.js'
import loadPopup from '../rendering/popup.js' import loadPopup from '../rendering/popup.js'
@ -602,6 +603,7 @@ export class Point extends Feature {
} }
getUIClass() { getUIClass() {
if (this.getOption('iconClass') === 'Circle') return CircleMarker
return super.getUIClass() || LeafletMarker return super.getUIClass() || LeafletMarker
} }

View file

@ -407,6 +407,13 @@ export const SCHEMA = {
], ],
default: 'Default', default: 'Default',
}, },
radius: {
type: Number,
default: 4,
impacts: ['data'],
label: translate('Radius in px'),
inheritable: true,
},
remoteData: { remoteData: {
type: Object, type: Object,
impacts: ['remote-data'], impacts: ['remote-data'],