Merge pull request #15762 from ahocevar/svg-layer-opacity

Show how to combine a layer with a render function and a standard layer

examples/svg-layer.css

@@ -5,3 +5,7 @@
 .svg-layer path:hover {
   opacity: 0.4;
 }
+
+.ol-layer {
+  pointer-events: none;
+}

examples/svg-layer.html

@@ -4,6 +4,7 @@
 shortdesc: Example of a map with an interactive svg layer.
 docs: >
   With a plain `ol/Layer` and a `render` function, we can use an interactive svg as layer. Hover over countries to see the interactivity that is defined purely with a css `:hover` pseudo-class.
+  Other layers can be added to the same map. The blue circle is a vector feature on a separate layer.
 tags: "svg, layer, render, transform"
 ---
 <div id="map" class="map"></div>

examples/svg-layer.js

@@ -1,6 +1,10 @@
+import Feature from '../src/ol/Feature.js';
 import Layer from '../src/ol/layer/Layer.js';
 import Map from '../src/ol/Map.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
+import {Point} from '../src/ol/geom.js';
+import {Vector} from '../src/ol/layer.js';
 import {composeCssTransform} from '../src/ol/transform.js';
 
 const map = new Map({
@@ -30,6 +34,7 @@ svgContainer.style.width = width + 'px';
 svgContainer.style.height = height + 'px';
 svgContainer.style.transformOrigin = 'top left';
 svgContainer.className = 'svg-layer';
+svgContainer.style.position = 'absolute';
 
 map.addLayer(
   new Layer({
@@ -52,3 +57,16 @@ map.addLayer(
     },
   }),
 );
+
+map.addLayer(
+  new Vector({
+    source: new VectorSource({
+      features: [new Feature(new Point([0, 0]))],
+    }),
+    style: {
+      'circle-fill-color': 'blue',
+      'circle-radius': 10,
+      'circle-stroke-color': 'white',
+    },
+  }),
+);