From d0e26bc280621eea2c19b525b002909c0c62d461 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Mon, 22 Apr 2024 21:13:17 +0200
Subject: [PATCH] Show how to combine a layer with a render function and a
 standard layer

---
 examples/svg-layer.css  |  4 ++++
 examples/svg-layer.html |  1 +
 examples/svg-layer.js   | 18 ++++++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/examples/svg-layer.css b/examples/svg-layer.css
index f1624f129ae..382288bc4d0 100644
--- a/examples/svg-layer.css
+++ b/examples/svg-layer.css
@@ -5,3 +5,7 @@
 .svg-layer path:hover {
   opacity: 0.4;
 }
+
+.ol-layer {
+  pointer-events: none;
+}
diff --git a/examples/svg-layer.html b/examples/svg-layer.html
index 2d5d0355d20..669c9b305be 100644
--- a/examples/svg-layer.html
+++ b/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>
diff --git a/examples/svg-layer.js b/examples/svg-layer.js
index 5ffe8b59fdf..eb02f4c0293 100644
--- a/examples/svg-layer.js
+++ b/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',
+    },
+  }),
+);