@kalisio/kdk 2.5.3 → 2.6.0

package/map/client/components/widget/KTimeSeries.vue

@@ -11,8 +11,10 @@ import logger from 'loglevel'
 import centroid from '@turf/centroid'
 import Papa from 'papaparse'
 import { downloadAsBlob } from '../../../../core/client/utils'
+import { Store } from '../../../../core/client/store'
 import { Units } from '../../../../core/client/units'
 import { Time } from '../../../../core/client/time'
+import { Events } from '../../../../core/client/events'
 import { KChart } from '../../../../core/client/components'
 import { useCurrentActivity, useWeather, useMeasure, useHighlight } from '../../composables'
 import 'chartjs-adapter-moment'
@@ -471,26 +473,26 @@ export default {
   },
   async mounted () {
     // Initialize the time range
-    const span = this.$store.get('timeseries.span')
+    const span = Store.get('timeseries.span')
     const start = moment(Time.getCurrentTime()).subtract(span, 'm')
     const end = moment(Time.getCurrentTime()).add(span, 'm')
     Time.patchRange({ start, end })
     // Force a first refresh
     await this.refresh()
     // Then setup listeners
-    this.$events.on('time-current-time-changed', this.refresh)
-    this.$events.on('time-range-changed', this.refresh)
-    this.$events.on('time-format-changed', this.refresh)
-    this.$events.on('timeseries-span-changed', this.refresh)
+    Events.on('time-current-time-changed', this.refresh)
+    Events.on('time-range-changed', this.refresh)
+    Events.on('time-format-changed', this.refresh)
+    Events.on('timeseries-span-changed', this.refresh)
     this.kActivity.$engineEvents.on('forecast-model-changed', this.refresh)
     this.kActivity.$engineEvents.on('selected-level-changed', this.refresh)
   },
   beforeUnmount () {
     // Release listeners
-    this.$events.off('time-current-time-changed', this.refresh)
-    this.$events.off('time-range-changed', this.refresh)
-    this.$events.off('time-format-changed', this.refresh)
-    this.$events.off('timeseries-span-changed', this.refresh)
+    Events.off('time-current-time-changed', this.refresh)
+    Events.off('time-range-changed', this.refresh)
+    Events.off('time-format-changed', this.refresh)
+    Events.off('timeseries-span-changed', this.refresh)
     this.kActivity.$engineEvents.off('forecast-model-changed', this.refresh)
     this.kActivity.$engineEvents.off('selected-level-changed', this.refresh)
   },

package/map/client/globe.js

@@ -1,3 +1,4 @@
+import * as composables from './composables/index.js'
 import * as commonMixins from './mixins/index.js'
 import * as globeMixins from './mixins/globe/index.js'
 import * as hooks from './hooks/index.js'
@@ -11,6 +12,7 @@ export * from './planets.js'
 export * from './navigator.js'
 export { hooks }
 export { utils }
+export { composables }
 export { mixins }
 export * from '../common/index.js'
 export * from './init.js'

package/map/client/i18n/map_en.json

@@ -12,6 +12,7 @@
     "LEGEND": "Legend",
     "SELECTION_MANAGER": "Selection manager",
     "STYLES_MANAGER": "Styles manager",
+    "TAGS_MANAGER": "Tags manager",
     "TIME_SERIES": "Time series",
     "POSITION": "Geographical coordinates",
     "NORTH_ARROW": "North arrow",
@@ -33,14 +34,26 @@
     "INVALID_GEOJSON_FILE": "{file} is not a valid GeoJSON file",
     "INVALID_GEOJSON_CRS": "{file} has an unsupported Coordinates Reference System (CRS)",
     "INVALID_GPX_FILE": "{file} is not a valid GPX file",
-    "INVALID_KML_FILE": "{file} is not a valid KML file"
+    "INVALID_KML_FILE": "{file} is not a valid KML file",
+    "GEOMETRY_ERROR": "<b>{total}</b> topology validation errors",
+    "GEOMETRY_REPEATED_POINT": "<b>{total}</b> errors of <b>repeated points</b>",
+    "GEOMETRY_HOLE_OUTSIDE_SHELL": "<b>{total}</b> errors of <b>holes outside shell</b>",
+    "GEOMETRY_NESTED_HOLES": "<b>{total}</b> errors of <b>nested holes</b>",
+    "GEOMETRY_DISCONNECTED_INTERIOR": "<b>{total}</b> errors of <b>disconnected interiors</b>",
+    "GEOMETRY_SELF_INTERSECTION": "<b>{total}</b> errors of <b>self-intersection</b>",
+    "GEOMETRY_RING_SELF_INTERSECTION": "<b>{total}</b> errors of <b>ring self-intersection</b>",
+    "GEOMETRY_NESTED_SHELLS": "<b>{total}</b> errors of <b>nested shells</b>",
+    "GEOMETRY_DUPLICATE_RINGS": "<b>{total}</b> errors of <b>duplicate rings</b>",
+    "GEOMETRY_TOO_FEW_POINTS": "<b>{total}</b> errors of <b>too few distinct points in geometry component</b>",
+    "GEOMETRY_INVALID_COORDINATES": "<b>{total}</b> errors of <b>invalid coordinates</b>",
+    "GEOMETRY_RING_NOT_CLOSED": "<b>{total}</b> errors of <b>ring not closed</b>"
   },
   "utils": {
     "layers": {
       "INVALID_FEATURES_DIALOG_TITLE": "Invalid elements",
-      "INVALID_FEATURES_DIALOG_MESSAGE": "Your layer contains {total} elements with invalid geometry (e.g. self-intersection). As a consequence they will be removed prior to saving.",
-      "DOWNLOAD_INVALID_FEATURES_LABEL": "By checking this option the invalid features will be exported to a file before saving",
-      "INVALID_FEATURES_FILE": "InvalidFeatures.geojson",
+      "INVALID_FEATURES_DIALOG_MESSAGE": "Your layer contains {total} elements with invalid geometry. As a consequence they will be removed prior to saving.",
+      "INVALID_FEATURES_LIST_ERRORS": "<div class='text-subtitle2 q-mt-xs'>Liste des erreurs : </div><ul class='q-ma-none q-pl-lg'>{errors}</ul>",
+      "INVALID_FEATURES_LIST_FEATURES": " sur les éléments: ",
       "SAVING_LABEL": "Please wait while saving layer data,</br>processed {processed} over {total} features",
       "SAVE_DIALOG_TITLE": "Tiling layer {layer}",
       "SAVE_DIALOG_MESSAGE": "Your layer contains too much elements and has been optimized to be smoothly displayed.</br>As a consequence, it will only be visible at a local scale from a given zoom level.",
@@ -79,6 +92,8 @@
       "ZOOM_TO_LABEL": "Zoom to",
       "ZOOM_IN": "Zoom in",
       "ZOOM_OUT": "Zoom out",
+      "BRING_TO_FRONT_LABEL": "Display on top",
+      "BRING_TO_BACK_LABEL": "Display at bottom",
       "TOGGLE_CATALOG": "Catalog",
       "TOGGLE_MAP": "View in 2D",
       "TOGGLE_GLOBE": "View in 3D",
@@ -272,6 +287,7 @@
       "GEOLOCATE_LABEL": "Recenter the map on your location and display it using this button.",
       "SEARCH_LOCATION_LABEL": "Seek for an address using this button.",
       "LOCATION_SEARCHING_LABEL": "Type part of your address and select among the proposed locations to center the map on.",
+      "LOCATION_BACK_LABEL": "Close the coordinates widget by clicking this button.",
       "SEARCH_BACK_LABEL": "Then stop searching by going back to the actions.",
       "TOOLS_LABEL": "Select among available tools using this button.",
       "TRACK_LOCATION_LABEL": "Display the coordinates of a location using this button.",
@@ -294,7 +310,8 @@
       "MEASURE_BACK_LABEL": "Then stop measuring by going back to the actions.",
       "TOGGLE_VR_LABEL": "Switch to Virtual Reality (VR) mode with this button.",
       "TOGGLE_FULLSCREEN_LABEL": "Switch to fullscreen mode with this button.",
-      "TOGGLE_CATALOG_LABEL": "Open the catalog with this button."
+      "TOGGLE_CATALOG_LABEL": "Open the catalog with this button.",
+      "NORTH_ARROW_LABEL": "Display or hide the north arrow using this button."
     },
     "catalog-panel": {
       "CATALOG_LABEL": "The <b>catalog</b> allows to manage data displayed on your map.<br/>The catalogd is divided into 3 different tabs.",
@@ -581,10 +598,13 @@
     "INFOBOX": "Information box",
     "ADD_INFOBOX": "Select target properties to use as information box"
   },
-  "KLayersSelector": {
+  "KLayersList": {
     "NO_LAYER_AVAILABLE": "No layer available",
     "LAYER_DISABLED": "Zoom in to visualise this layer"
   },
+  "KLayersSelector": {
+    "SELECT_LAYERS": "Select layers"
+  },
   "KWeatherLayersSelector": {
     "FORECASTS_LABEL": "Forecasts",
     "ARCHIVES_LABEL": "Archives",
@@ -637,7 +657,8 @@
     "DESCRIPTION_FIELD_LABEL": "@:KAddLayer.DESCRIPTION_FIELD_LABEL",
     "FEATURE_ID_FIELD_LABEL": "@:KAddLayer.FEATURE_ID_FIELD_LABEL",
     "CATEGORY_FIELD_LABEL": "@:KAddLayer.CATEGORY_FIELD_LABEL",
-    "IMPORT_BUTTON": "Import"
+    "IMPORT_BUTTON": "Import",
+    "LAYER_ALREADY_EXISTS": "Layer {layer} already exists !"
   },
   "KConnectLayer": {
     "SERVICE_FIELD_LABEL": "Select or enter a query to get the capabilities of the remote service",
@@ -750,6 +771,7 @@
     "POINT_SECTION": "Point",
     "LINE_SECTION": "Line",
     "POLYGON_SECTION": "Polygon",
+    "ALL_SECTIONS_DISABLED": "Unable to apply this style because all types of features are disabled.",
     "STROKE_GROUP": "Stroke",
     "ICON_GROUP": "Icon",
     "COLOR": "Color",

package/map/client/i18n/map_fr.json

@@ -12,6 +12,7 @@
     "LEGEND": "Légende",
     "SELECTION_MANAGER": "Gestionnaire de sélection",
     "STYLES_MANAGER": "Gestionnaires de styles",
+    "TAGS_MANAGER": "Gestionnaire d'étiquettes",
     "TIME_SERIES": "Series temporelles",
     "POSITION": "Coordonnées géographiques",
     "NORTH_ARROW": "Flèche nord",
@@ -33,14 +34,26 @@
     "INVALID_GEOJSON_FILE": "{file} n'est pas un fichier GeoJSON valide",
     "INVALID_GEOJSON_CRS": "{file} a un système de coordonnées (CRS) non supporté",
     "INVALID_GPX_FILE": "{file} n'est pas un fichier GPX valide",
-    "INVALID_KML_FILE": "{file} n'est pas un fichier KML valide"
+    "INVALID_KML_FILE": "{file} n'est pas un fichier KML valide",
+    "GEOMETRY_ERROR": "<b>{total}</b> erreurs de validation de la topologie",
+    "GEOMETRY_REPEATED_POINT": "<b>{total}</b> erreurs de <b>points répétés</b>",
+    "GEOMETRY_HOLE_OUTSIDE_SHELL": "<b>{total}</b> erreurs de <b>trous à l'extérieur de la coquille</b>",
+    "GEOMETRY_NESTED_HOLES": "<b>{total}</b> erreurs de <b>trous imbriqués</b>",
+    "GEOMETRY_DISCONNECTED_INTERIOR": "<b>{total}</b> erreurs d'<b>intérieurs déconnectés</b>",
+    "GEOMETRY_SELF_INTERSECTION": "<b>{total}</b> erreurs d'<b>auto-intersection</b>",
+    "GEOMETRY_RING_SELF_INTERSECTION": "<b>{total}</b> erreurs d'<b>auto-intersection de l'anneau</b>",
+    "GEOMETRY_NESTED_SHELLS": "<b>{total}</b> erreurs de <b>coquilles imbriquées</b>",
+    "GEOMETRY_DUPLICATE_RINGS": "<b>{total}</b> erreurs d'<b>anneaux dupliqués</b>",
+    "GEOMETRY_TOO_FEW_POINTS": "<b>{total}</b> erreurs de <b>manque de points distincts</b>",
+    "GEOMETRY_INVALID_COORDINATES": "<b>{total}</b> erreurs de <b>coordonnées invalides</b>",
+    "GEOMETRY_RING_NOT_CLOSED": "<b>{total}</b> erreurs d'<b>anneaux non fermés</b>"
   },
   "utils": {
     "layers": {
       "INVALID_FEATURES_DIALOG_TITLE": "Elements invalides",
-      "INVALID_FEATURES_DIALOG_MESSAGE": "Votre couche comporte {total} éléments dont la géométrie est invalide (e.g. auto-intersection). En conséquence ces éléments seront supprimés avant la sauvegarde.",
-      "DOWNLOAD_INVALID_FEATURES_LABEL": "En sélectionnant cette option vos éléments invalides seront exportés dans un fichier avant l'enregistrement",
-      "INVALID_FEATURES_FILE": "ElementsInvalides.geojson",
+      "INVALID_FEATURES_DIALOG_MESSAGE": "Votre couche comporte {total} éléments dont la géométrie est invalide. En conséquence ces éléments seront supprimés avant la sauvegarde.",
+      "INVALID_FEATURES_LIST_ERRORS": "<div class='text-subtitle2 q-mt-xs'>Liste des erreurs : </div><ul class='q-ma-none q-pl-lg'>{errors}</ul>",
+      "INVALID_FEATURES_LIST_FEATURES": " sur les éléments: ",
       "SAVING_LABEL": "Veuillez patienter pendant l'enregistrement des données,</br>{processed} éléments traités sur {total}",
       "SAVE_DIALOG_TITLE": "Tuilage de la couche {layer}",
       "SAVE_DIALOG_MESSAGE": "Votre couche comportant de trop nombreux éléments a été optimisée pour un affichage fluide.</br>En conséquence elle ne sera visible qu'à une échelle locale à partir d'un certain niveau de zoom.",
@@ -79,6 +92,8 @@
       "ZOOM_TO_LABEL": "Zoomer sur",
       "ZOOM_IN": "Zoomer",
       "ZOOM_OUT": "Dézoomer",
+      "BRING_TO_FRONT_LABEL": "Afficher à l'avant",
+      "BRING_TO_BACK_LABEL": "Afficher à l'arrière",
       "TOGGLE_CATALOG": "Catalogue",
       "TOGGLE_MAP": "Visualiser en 2D",
       "TOGGLE_GLOBE": "Visualiser en 3D",
@@ -272,6 +287,7 @@
       "GEOLOCATE_LABEL": "Recentrez la carte sur <b>votre position</b> et affichez là avec ce bouton.",
       "SEARCH_LOCATION_LABEL": "Recherchez une <b>adresse</b> via ce bouton.",
       "LOCATION_SEARCHING_LABEL": "Tapez tout ou partie de votre adresse puis sélectionnez parmi les propositions pour recentrer la carte.",
+      "LOCATION_BACK_LABEL": "Fermez l'affichage des coordonnées via ce bouton.",
       "SEARCH_BACK_LABEL": "Arrêtez la recherche en retournant aux actions.",
       "TOOLS_LABEL": "Sélectionnez un outil parmi ceux disponibles via ce bouton.",
       "TRACK_LOCATION_LABEL": "Affichez les coordonnées d'une position via ce bouton.",
@@ -294,7 +310,8 @@
       "MEASURE_BACK_LABEL": "Arrêtez de mesurer en retournant aux actions.",
       "TOGGLE_VR_LABEL": "Basculez en mode <b>Réalité Virtuelle</b> (VR) avec ce bouton.",
       "TOGGLE_FULLSCREEN_LABEL": "Basculez en mode plein écran avec ce bouton.",
-      "TOGGLE_CATALOG_LABEL": "Ouvrez le <b>catalogue</b> avec ce bouton."
+      "TOGGLE_CATALOG_LABEL": "Ouvrez le <b>catalogue</b> avec ce bouton.",
+      "NORTH_ARROW_LABEL": "Affichez ou cachez la flèche nord avec ce bouton."
     },
     "catalog-panel": {
       "CATALOG_LABEL": "Le <b>catalogue</b> permet de gérer les données affichées sur votre carte.<br/>Le catalogue se décompose en 3 onglets.",
@@ -581,10 +598,13 @@
     "INFOBOX": "Boîte d'information",
     "ADD_INFOBOX": "Sélectionnez des propriétés à afficher dans la boîte"
   },
-  "KLayersSelector": {
+  "KLayersList": {
     "NO_LAYER_AVAILABLE": "Aucune couche disponible",
     "LAYER_DISABLED": "Zoomez davantage pour voir cette couche"
   },
+  "KLayersSelector": {
+    "SELECT_LAYERS": "Sélectionnez des couches"
+  },
   "KWeatherLayersSelector": {
     "FORECASTS_LABEL": "Prévisions",
     "ARCHIVES_LABEL": "Archives",
@@ -637,7 +657,8 @@
     "DESCRIPTION_FIELD_LABEL": "@:KAddLayer.DESCRIPTION_FIELD_LABEL",
     "FEATURE_ID_FIELD_LABEL": "@:KAddLayer.FEATURE_ID_FIELD_LABEL",
     "CATEGORY_FIELD_LABEL": "@:KAddLayer.CATEGORY_FIELD_LABEL",
-    "IMPORT_BUTTON": "Importer"
+    "IMPORT_BUTTON": "Importer",
+    "LAYER_ALREADY_EXISTS": "La couche {layer} existe déjà !"
   },
   "KConnectLayer": {
     "SERVICE_FIELD_LABEL": "Saisissez la requête pour récupérer les capacités du service distant",
@@ -750,6 +771,7 @@
     "POINT_SECTION": "Point",
     "LINE_SECTION": "Ligne",
     "POLYGON_SECTION": "Polygone",
+    "ALL_SECTIONS_DISABLED": "Impossible d'appliquer ce style car tous les types de géométries sont désactivées.",
     "STROKE_GROUP": "Contour",
     "ICON_GROUP": "Icône",
     "COLOR": "Couleur",

package/map/client/leaflet/GradientPath.js

@@ -10,7 +10,7 @@ import 'leaflet-pixi-overlay'
 // The svg points (inside the svg element) will be populated with coordinates in spherical mercator scaled between [0,1] on both x and y
 // We do this to prevent numerical issues affecting rendering due to spherical mercator coordinates being huge numbers.
 // The svg overlay will be placed in the map covering the bbox of the geojson
-function buildSVGOverlayFromGradientPath (geojson, style)
+function buildSVGFromGradientPath (geojson)
 {
   const defs = []  // We'll push every linearGradient we need here
   const lines = [] // and every line segment we need here
@@ -18,8 +18,12 @@ function buildSVGOverlayFromGradientPath (geojson, style)
   const bbox = turfbbox(geojson)
   // Grow the bbox a bit because we use it to position the svgOverlay. If it matches exaclty
   // it'll crop the svg lines when using a big stroke-width, they'll exceed the geojson bbox ...
-  const width = bbox[2] - bbox[0]
-  const height = bbox[3] - bbox[1]
+  // TODO: we should use stroke width * extent it represent at zoom level 2 or 3 ...
+  let width = bbox[2] - bbox[0]
+  let height = bbox[3] - bbox[1]
+  // This is to handle single points
+  if (width === 0) width = 0.1
+  if (height === 0) height = 0.1
   bbox[0] -= width * 0.1
   bbox[1] -= height * 0.1
   bbox[2] += width * 0.1
@@ -56,34 +60,62 @@ function buildSVGOverlayFromGradientPath (geojson, style)
   }
 
   // Create svg HTML element
-  var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+  var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg")
   // Viewbox is used to define which part of the svg must be displayed in it's html element, and is in svg coordinates.
   // For us it's 0 0 scale.x scale.y since we rescaled everything
   svgElement.setAttribute('viewBox', `0 0 ${scale.x} ${scale.y}`)
   // svg html content, round linecap + stroke-width
   svgElement.innerHTML = `<g stroke-linecap="round" stroke-width="${geojson.properties.weight}"><defs>${defs.join('')}</defs>${lines.join('')}</g>`
-  var svgElementBounds = [ [ bbox[1], bbox[0] ], [ bbox[3], bbox[2] ] ];
 
-  // Custom svgOverlay overload to make the svg html element interactive for leaflet
-  // We don't simply use the options.interactive constructor option since it also add 'leaflet-interactive' class
-  // on the svg html element and this requests 'pointer' cursor on the whole svg, even if there's nothing drawn.
-  // Instead we just declare the layer interactive for leaflet, without adding the 'leaflet-interactive' class.
-  // 'leaflet-interactive' is set in 'path' elements, which are actually rendered.
-  const SVGOverlayOverload = L.SVGOverlay.extend({
-    onAdd() {
-      L.SVGOverlay.prototype.onAdd.call(this)
-      this.addInteractiveTarget(this._image)
-    }
-  })
-  const layer = new SVGOverlayOverload(svgElement, svgElementBounds, { interactive: false })
-  const opacity = _.get(geojson.properties, 'opacity')
-  if (opacity !== undefined)
-    layer.setOpacity(opacity)
-  layer.getCenter = () => L.latLng((bbox[1]+bbox[3])/2,(bbox[0]+bbox[2])/2)
-  return layer
+  return { svg: svgElement, bounds: L.latLngBounds(L.latLng(bbox[1], bbox[0]), L.latLng(bbox[3], bbox[2])) }
 }
 
+const SVGGradientPath = L.SVGOverlay.extend({
+  initialize (geojson, options) {
+    const path = buildSVGFromGradientPath(geojson)
+
+    // We don't simply use the options.interactive constructor option since it also add 'leaflet-interactive' class
+    // on the svg html element and this requests 'pointer' cursor on the whole svg, even if there's nothing drawn.
+    // Instead we just declare the layer interactive for leaflet (see onAdd()), without adding the 'leaflet-interactive' class.
+    // 'leaflet-interactive' is set in 'path' elements of the svg element, which are actually rendered.
+    L.SVGOverlay.prototype.initialize.call(this, path.svg, path.bounds, Object.assign({ interactive: false }, options))
+
+    const opacity = _.get(geojson.properties, 'opacity')
+    if (opacity !== undefined)
+      this.setOpacity(opacity)
+  },
+
+  getCenter () {
+    return this._bounds.getCenter()
+  },
+
+  // This method is called when source data changes
+  setData (geojson) {
+    // Remove old svg
+    this.onRemove()
+
+    // Build new one
+    const path = buildSVGFromGradientPath(geojson)
+    // Mess with ImageOverlay and SVGOverlay internals to update element
+    this._url = path.svg
+    this._initImage()
+    this.setBounds(path.bounds)
+    const opacity = _.get(geojson.properties, 'opacity')
+    if (opacity !== undefined)
+      this.setOpacity(opacity)
+
+    // Add new svg
+    this.onAdd()
+  },
+
+  onAdd () {
+    L.SVGOverlay.prototype.onAdd.call(this)
+    // See constructor explanation
+    this.addInteractiveTarget(this._image)
+  }
+})
+
 const GradientPath = L.PixiOverlay.extend({
 
   initialize (geoJson, options) {
@@ -254,7 +286,12 @@ const GradientPath = L.PixiOverlay.extend({
 })
 
 L.GradientPath = GradientPath
+L.SVGGradientPath = SVGGradientPath
 L.gradientPath = function (options) {
   return new L.GradientPath(options)
 }
-export { GradientPath, buildSVGOverlayFromGradientPath }
+L.svgGradientPath = function (options) {
+  return new L.SVGGradientPath(options)
+}
+
+export { GradientPath, SVGGradientPath }

package/map/client/leaflet/ShapeMarker.js

@@ -4,13 +4,12 @@ import L from 'leaflet'
 import { utils as coreUtils } from '../../../core/client/index.js'
 
 export const ShapeMarker = L.Marker.extend({
-
   // Constructor
   initialize (latlng, options) {
     // Forward extra options for different purposes, i.e. clustering, panes, ...
     const markerOptions = _.get(options, 'options', {})
-    // We allow to specify panes directly at root level
-    Object.assign(markerOptions, _.pick(options, ['pane', 'shadowPane', 'interactive', 'draggable']))
+    // We allow to specify some like panes directly at root level, eg when options are coming from a layer definition.
+    Object.assign(markerOptions, _.pick(options, ['interactive', 'draggable', 'pane', 'shadowPane']))
     if (options.icon instanceof L.Icon) { // We allow to directly provide the icon
       L.Marker.prototype.initialize.call(this, latlng, {
         icon: options.icon,
@@ -33,9 +32,7 @@ export const ShapeMarker = L.Marker.extend({
         logger.warn(`[KDK] unable to create the shape with the options: ${options}` )
       }
     }
-    
   },
-
   getAnchor (position, size) {
     if (position === 'top-left') return [0, 0]
     if (position === 'top-center') return [size.width / 2, 0]
@@ -47,5 +44,15 @@ export const ShapeMarker = L.Marker.extend({
     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]
+  },
+  // Additional missing features
+  bringToFront() {
+    if (this._icon) L.DomUtil.toFront(this._icon)
+    if (this._shadow) L.DomUtil.toFront(this._shadow)
+  },
+  bringToBack() {
+    // See comment in bringToFront().
+    if (this._icon) L.DomUtil.toBack(this._icon)
+    if (this._shadow) L.DomUtil.toBack(this._shadow)
   }
 })

package/map/client/leaflet/TiledMeshLayer.js

@@ -191,7 +191,7 @@ const TiledMeshLayer = L.GridLayer.extend({
     if (!mesh) return
 
     mesh.zoomLevel = event.coords.z
-    mesh.visible = (mesh.zoomLevel === this._map.getZoom())
+    mesh.visible = mesh.zoomLevel === Math.round(this._map.getZoom())
     this.pixiRoot.addChild(mesh)
 
     if (this.conf.render.showWireframe) {
@@ -237,7 +237,7 @@ const TiledMeshLayer = L.GridLayer.extend({
     // zoom level 'n' tiles are still visible
     // and zoom level 'n+1' are being loaded on top of them
     // when alpha blending is used, this is annoying
-    const zoomLevel = this._map.getZoom()
+    const zoomLevel = Math.round(this._map.getZoom())
     for (const child of this.pixiRoot.children) {
       if (child.zoomLevel === zoomLevel) child.visible = false
     }
@@ -249,7 +249,7 @@ const TiledMeshLayer = L.GridLayer.extend({
     // on zoomstart event
     // this is important when quickly zoomin in and out
     // because some meshes may not have been evicted yet
-    const zoomLevel = this._map.getZoom()
+    const zoomLevel = Math.round(this._map.getZoom())
     for (const child of this.pixiRoot.children) {
       if (child.zoomLevel === zoomLevel) child.visible = true
     }

package/map/client/leaflet/utils/utils.geojson.js

@@ -1,23 +1,83 @@
 import L from 'leaflet'
 import _ from 'lodash'
 import 'leaflet-realtime'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+import 'leaflet.markercluster'
 import { lineOffset } from '@turf/turf'
-import { GradientPath, buildSVGOverlayFromGradientPath } from '../GradientPath.js'
+import { GradientPath, SVGGradientPath } from '../GradientPath.js'
+import { MaskLayer } from '../MaskLayer.js'
+
+// FIXME: Not sure why but using lodash _.values() function in Leaflet Realtime layer object does not work,
+// possibly due to some internal complex objects ?
+function getObjectValues(object) {
+  const values = []
+  const keys = Object.keys(object)
+  keys.forEach(key => values.push(object[key]))
+  return values
+}
 
-// Override default remove handler for leaflet-realtime due to
-// https://github.com/perliedman/leaflet-realtime/issues/177
 const Realtime = L.Realtime.extend({
-  remove: function (geojson) {
+  // Override default remove handler for leaflet-realtime due to
+  // https://github.com/perliedman/leaflet-realtime/issues/177
+  remove(geojson) {
     if (typeof geojson === 'undefined') {
       return L.Layer.prototype.remove.call(this)
     } else {
       return L.Realtime.prototype.remove.call(this, geojson)
     }
+  },
+  // Add FeatureGroup interface so that layer edition works as well
+  toGeoJSON() {
+    return { type: 'FeatureCollection', features: getObjectValues(this._features) }
+  },
+  clearLayers() {
+    this._onNewData(true, { type: 'FeatureCollection', features: [] })
+  },
+  getLayers() {
+    return getObjectValues(this._featureLayers)
+  },
+  addLayer(geoJsonLayer) {
+    this._onNewData(false, geoJsonLayer.toGeoJSON())
+  },
+  removeLayer(geoJsonLayer) {
+    this.remove(geoJsonLayer.toGeoJSON())
+  },
+  // Additional missing features
+  bringToFront() {
+    // If we get a custom pane we need to push it front to make it on top of others with the same z-index.
+    // Otherwise pushing container to front only in the parent pane will not have any effect on layers in others panes like the global default one.
+    if (this.options.pane !== 'overlayPane') {
+      L.DomUtil.toFront(this.getPane(this.options.pane))
+    } else if (this._container) { // Pushing container to front in the parent pane when its the global default one will be sufficient
+      this._container.bringToFront()
+    }
+  },
+  bringToBack() {
+    // See comments in bringToFront().
+    if (this.options.pane !== 'overlayPane') {
+      L.DomUtil.toBack(this.getPane(this.options.pane))
+    } else if (this._container) {
+      this._container.bringToBack()
+    }
   }
 })
 L.realtime = function (src, options) {
   return new Realtime(src, options)
 }
+const MarkerClusterGroup = L.MarkerClusterGroup.extend({
+  // Override invoke as used by eg bringToFront/bringToBack
+  invoke(methodName, ...args) {
+    L.MarkerClusterGroup.prototype.invoke.call(this, methodName, args)
+    this._featureGroup.invoke(methodName, args)
+    this._nonPointGroup.invoke(methodName, args)
+    return this
+  }
+})
+L.markerClusterGroup = function (options) {
+  return new MarkerClusterGroup(options)
+}
+
 // Override default Polyline simplify function to manage offset
 const simplifyPoints = L.Polyline.prototype._simplifyPoints
 L.Polyline.include({
@@ -63,10 +123,8 @@ L.GeoJSON.geometryToLayer = function (geojson, options) {
     }
   }
   if (geometry && properties && properties.gradient) {
-    if (geometry.type === 'LineString') {
-      const style = options.style(geojson)
-      return properties.svg ? buildSVGOverlayFromGradientPath(geojson, style) : new GradientPath(geojson, style)
-    }
+    const style = options.style(geojson)
+    return properties.svg ? new SVGGradientPath(geojson, style) : new GradientPath(geojson, style)
   }
   if (geometry && properties && properties.mask) {
     if (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon') {

package/map/client/leaflet/utils/utils.style.js

@@ -126,7 +126,9 @@ export function createMarkerFromPointStyle (latlng, style) {
     logger.warn(`[KDK] 'latlng' should be defined`)
     return
   }
-  return L.shapeMarker(latlng, style)
+  const shape = _.get(style, 'shape', 'circle')
+  if (shape === 'none' || _.has(kdkCoreUtils.Shapes, shape)) return L.shapeMarker(latlng, style)
+  return L[shape](latlng, style)
 }
 
 export function convertLineStyleToLeafletPath (style) {
@@ -147,12 +149,12 @@ export function convertPolygonStyleToLeafletPath (style) {
   return leafletStyle
 }
 
-function processStyle (style, feature, options, mappings) {
+function processStyle (style, feature, options, mappings, zoom) {
   if (!options) return
   const leafletOptions = options.leaflet || options
   // We allow to template style properties according to feature,
   // because it can be slow you have to specify a subset of properties
-  const context = Object.assign({ properties: feature.properties, feature, chroma, moment, Units, Time }, TemplateContext.get())
+  const context = Object.assign({ properties: feature.properties, feature, zoom, chroma, moment, Units, Time }, TemplateContext.get())
   if (leafletOptions.template) {
     // Create the map of variables
     if (options.variables) context.variables = _.reduce(options.variables,
@@ -180,29 +182,26 @@ function processStyle (style, feature, options, mappings) {
   return style
 }
 
-export function getDefaultPointStyle (feature, options, engine, engineStylePath = 'style.point') {
-  const engineStyle = _.get(engine, engineStylePath, {})
+export function getDefaultPointStyle (feature, options, engineStyle = {}, zoom) {
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPointStyle') : {}
-  const templateStyle = processStyle({ style: { point: _.merge({}, engineStyle, layerStyle) } }, feature, options, PointStyleTemplateMappings)
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
+  const templateStyle = processStyle({ style: { point: _.merge({}, engineStyle, layerStyle) } }, feature, options, PointStyleTemplateMappings, zoom)
+  const featureStyle = _.get(options, 'ignoreFeatureStyle') ? {} : feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
   const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.point : {}, featureStyle)
   return style
 }
 
-export function getDefaultLineStyle (feature, options, engine, engineStylePath = 'style.line') {
-  const engineStyle = _.get(engine, engineStylePath, {})
+export function getDefaultLineStyle (feature, options, engineStyle = {}, zoom) {
   const layerStyle = options ? _.get(options.leaflet || options, 'layerLineStyle') : {}
-  const templateStyle = processStyle({ style: { line: _.merge({}, engineStyle, layerStyle) } }, feature, options, LineStyleTemplateMappings)
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
+  const templateStyle = processStyle({ style: { line: _.merge({}, engineStyle, layerStyle) } }, feature, options, LineStyleTemplateMappings, zoom)
+  const featureStyle = _.get(options, 'ignoreFeatureStyle') ? {} : feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
   const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.line : {}, featureStyle)
   return convertLineStyleToLeafletPath(style)
 }
 
-export function getDefaultPolygonStyle (feature, options, engine, engineStylePath = 'style.polygon') {
-  const engineStyle = _.get(engine, engineStylePath, {})
+export function getDefaultPolygonStyle (feature, options, engineStyle = {}, zoom) {
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPolygonStyle') : {}
-  const templateStyle = processStyle({ style: { polygon: _.merge({}, engineStyle, layerStyle) } }, feature, options, PolygonStyleTemplateMappings)
-  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
+  const templateStyle = processStyle({ style: { polygon: _.merge({}, engineStyle, layerStyle) } }, feature, options, PolygonStyleTemplateMappings, zoom)
+  const featureStyle = _.get(options, 'ignoreFeatureStyle') ? {} : feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
   const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.polygon : {}, featureStyle)
   return convertPolygonStyleToLeafletPath(style)
 }