Merge pull request #229 from camptocamp/icon_style

Change zIndex and scale instead of opacity when mouse over feature
camptocamp · Sep 1, 2020 · 7e6277c · 7e6277c
2 parents eed7a9b + 2697a1b
commit 7e6277c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/c2cgeoform/static/src/index.js b/c2cgeoform/static/src/index.js
@@ -20,7 +20,7 @@ export function initMap(target, options) {
   const source = new VectorSource()
   let vectorLayer = createVectorLayer(source)
   const context = { feature: null }
-  vectorLayer.setStyle(getStyleFunction({ opacity: 0.5, context }))
+  vectorLayer.setStyle(getStyleFunction({ context }))
 
   let map = new Map({
     layers: options.baseLayers

diff --git a/c2cgeoform/static/src/styles.js b/c2cgeoform/static/src/styles.js
@@ -30,14 +30,15 @@ export function getStyleFunction(options) {
       return defaultStyle
     }
     const src = feature.get('icon') || options.icon || defaultIconUrl
-    const opacity = feature == options.context?.feature ? 1 : options.opacity
-    const key = `${src}:${opacity}`
+    const hover = feature == options.context?.feature
+    const key = `${src}:${hover}`
     if (cache[key] === undefined) {
       cache[key] = new Style({
         image: new Icon({
           src: src,
-          opacity: opacity,
+          scale: hover ? 1.25 : 1,
         }),
+        zIndex: hover ? 100 : undefined,
       })
     }
     return cache[key]