Fix using SVG with the DeckGlView; fix onHover/onRightClick/onLeftCli…

source/core/ui/view/map/DeckGlView.js

@@ -170,7 +170,20 @@ class DeckGlView extends MapView {
                 sizeScale: props.iconScale,
                 _lighting: 'pbr'
             });
-        } else {
+        }  else {
+            let extraOpts = {};
+            if(props.icon.endsWith('svg')) {
+                extraOpts = {
+                    loadOptions: {
+                        imagebitmap: {
+                            resizeWidth: props.iconSize[0],
+                            resizeHeight: props.iconSize[1],
+                            resizeQuality: 'high'
+                        }
+                    }
+                };
+            }
+
             // in deck we create a new layer everytime => reactive programming
             iconLayer = new IconLayer({
                 id: id,
@@ -200,7 +213,8 @@ class DeckGlView extends MapView {
                 onHover: (info, event) => this.onMarkerHover(mId, info, props, event),
                 onClick: (info, event) => event.leftButton ? this.onMarkerLeftClick(mId, info, props, event) :
                     this.onMarkerRightClick(mId, info, props, event),
-                zIndex: props.zIndex
+                zIndex: props.zIndex,
+                ...extraOpts
             });
         }
 

source/core/ui/view/map/MapView.js

@@ -444,8 +444,8 @@ class MapView extends View {
      * @param {Object} event - the original Map View event
      */
     onMarkerLeftClick(markerId, markerObject, layer, event) {
-        if (isDefined(layer.props.onLeftClick)) {
-            layer.props.onLeftClick.call(layer,markerId, markerObject, event);
+        if (isDefined(layer.onLeftClick)) {
+            layer.onLeftClick.call(layer,markerId, markerObject, event);
         }
     }
 
@@ -457,8 +457,8 @@ class MapView extends View {
      * @param {Object} event - the original Map View event
      */
     onMarkerRightClick(markerId, markerObject, layer, event) {
-        if (isDefined(layer.props.onRightClick)) {
-            layer.props.onRightClick.call(layer,markerId, markerObject, event);
+        if (isDefined(layer.onRightClick)) {
+            layer.onRightClick.call(layer,markerId, markerObject, event);
         }
     }
 
@@ -483,8 +483,8 @@ class MapView extends View {
      * @param {Object} event - the original Map View event
      */
     onMarkerHover(markerId, markerObject, layer, event) {
-        if (isDefined(layer.props.onHover)) {
-            layer.props.onHover.call(layer,markerId, markerObject, event);
+        if (isDefined(layer.onHover)) {
+            layer.onHover.call(layer,markerId, markerObject, event);
         }
     }
 

source/core/utils/Utils.js

@@ -533,3 +533,11 @@ export function rgbaToArray(str) {
     let values = str.substr(startIdxValue, endIdxValue-startIdxValue);
     return values.split(',').map(Number);
 }
+
+export function svgToDataURL(svg) {
+    if(svg.endsWith('.svg')) {
+        return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+    } else {
+        return svg;
+    }
+}