feat(ol-style-icon): allow to place icon content in slot

closes #295

Author: d-koppenhagen

docs/componentsguide/styles/icon/index.md

@@ -6,32 +6,51 @@ Use it inside ol-style to style points
 
 [[toc]]
 
-## Demo
-
 <script setup>
 import IconDemo from "@demos/IconDemo.vue"
+import IconDemoHtmlContent from "@demos/IconDemoHtmlContent.vue"
 </script>
 
-<ClientOnly>
-<IconDemo />
-</ClientOnly>
-
 ## Setup
 
 <!--@include: ../../styles.plugin.md-->
 
 ## Usage
 
 | Plugin Usage      |    Explicit Import     |
-| ----------------- | :--------------------: |
+|-------------------|:----------------------:|
 | `<ol-style-icon>` | `<Styles.OlStyleIcon>` |
 
+### `src` URL
+
+You can pass an icon image by setting the `src` attribute as shown below.
+
+<ClientOnly>
+<IconDemo />
+</ClientOnly>
+
 ::: code-group
 
 <<< ../../../../src/demos/IconDemo.vue
 
 :::
 
+### Slot
+
+If no `src` Attribute is set, the component will render the HTML content within the slot into an image data URL and use the generated image as icon.
+
+<ClientOnly>
+<IconDemoHtmlContent />
+</ClientOnly>
+
+::: code-group
+
+<<< ../../../../src/demos/IconDemoHtmlContent.vue
+
+:::
+
+## Properties
+
 ### Props from OpenLayers
 
 Properties are passed-trough from OpenLayers directly.

package-lock.json

@@ -77,6 +77,7 @@
   "dependencies": {
     "@turf/buffer": "^6.5.0",
     "@turf/helpers": "^6.5.0",
+    "dom-to-image-more": "^3.3.0",
     "file-saver": "^2.0.5",
     "jspdf": "^2.5.1",
     "ol": "^9.1.0",

package.json

@@ -1,14 +1,29 @@
 <template>
-  <div v-if="false"></div>
+  <div
+    ref="htmlContent"
+    v-if="!srcImageUrl"
+    style="display: flex; position: absolute; z-index: -1000"
+  >
+    <slot />
+  </div>
 </template>
 <script setup lang="ts">
 import Icon, { type Options } from "ol/style/Icon";
 import type { Ref } from "vue";
-import { inject, watch, onMounted, onUnmounted, computed } from "vue";
+import {
+  inject,
+  watch,
+  onMounted,
+  onUnmounted,
+  ref,
+  useSlots,
+  computed,
+} from "vue";
 import type Style from "ol/style/Style";
 import type Draw from "ol/interaction/Draw";
 import type Modify from "ol/interaction/Modify";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
+import domtoimage from "dom-to-image-more";
 
 const props = withDefaults(defineProps<Options>(), {
   anchorOrigin: "top-left",
@@ -21,6 +36,11 @@ const props = withDefaults(defineProps<Options>(), {
   rotation: 0,
 });
 
+const slots = useSlots();
+
+const htmlContent = ref<HTMLElement>();
+const srcImageUrl = ref<string>("");
+
 const style = inject<Ref<Style | null> | null>("style", null);
 const styledObj = inject<Ref<Draw | Modify | Style | null> | null>(
   "styledObj",
@@ -30,7 +50,10 @@ const styledObj = inject<Ref<Draw | Modify | Style | null> | null>(
 const properties = usePropsAsObjectProperties(props);
 
 const icon = computed(() => {
-  const ic = new Icon(properties);
+  const ic = new Icon({
+    ...properties,
+    src: properties.src || srcImageUrl.value,
+  });
   ic.load();
   return ic;
 });
@@ -47,15 +70,19 @@ watch(properties, () => {
   applyStyle();
 });
 
-watch(
-  () => style?.value,
-  () => {
-    applyStyle();
-  },
-);
+watch(style, () => {
+  applyStyle();
+});
 
-onMounted(() => {
-  style?.value?.setImage(icon.value);
+onMounted(async () => {
+  if (slots.default && htmlContent.value) {
+    srcImageUrl.value = await domtoimage.toSvg(htmlContent.value, {
+      width: htmlContent.value.offsetWidth,
+      height: htmlContent.value.offsetHeight,
+      copyDefaultStyles: true,
+    });
+  }
+  applyStyle();
 });
 
 onUnmounted(() => {

src/components/styles/OlStyleIcon.vue

@@ -0,0 +1,55 @@
+<template>
+  <ol-map
+    ref="map"
+    :loadTilesWhileAnimating="true"
+    :loadTilesWhileInteracting="true"
+    style="height: 400px"
+  >
+    <ol-view
+      ref="view"
+      :center="center"
+      :zoom="zoom"
+      :projection="projection"
+    />
+
+    <ol-tile-layer>
+      <ol-source-osm />
+    </ol-tile-layer>
+
+    <ol-vector-layer>
+      <ol-source-vector
+        url="https://raw.githubusercontent.com/alpers/Turkey-Maps-GeoJSON/master/tr-cities-airports.json"
+        :format="geoJson"
+        :projection="projection"
+      >
+      </ol-source-vector>
+      <ol-style>
+        <ol-style-stroke color="red" :width="2"></ol-style-stroke>
+        <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>
+        <ol-style-icon :scale="1">
+          <span class="marker">📍</span>
+        </ol-style-icon>
+      </ol-style>
+    </ol-vector-layer>
+  </ol-map>
+</template>
+
+<script setup>
+import { ref, inject } from "vue";
+
+const center = ref([34, 39.13]);
+const projection = ref("EPSG:4326");
+const zoom = ref(6.8);
+const format = inject("ol-format");
+const geoJson = new format.GeoJSON();
+</script>
+
+<style scoped>
+.marker {
+  background-color: #ffddaa;
+  padding: 10px;
+  border-radius: 25px;
+  margin: 5px;
+  font-size: 25px;
+}
+</style>

src/demos/IconDemoHtmlContent.vue

@@ -0,0 +1 @@
+declare module "dom-to-image-more";

src/dom-to-image.d.ts

@@ -43,13 +43,20 @@ test.describe("ol-style-flowline", () => {
 });
 
 test.describe("ol-style-icon", () => {
-  test("should render", async ({ page }) => {
+  test("should render icons defined by src URL", async ({ page }) => {
     const map = new MapPage(page);
     await map.goto("/componentsguide/styles/icon/");
     await map.waitUntilReady();
     await map.waitUntilCanvasLoaded();
     await map.checkCanvasScreenshot();
   });
+  test("should render icons from slot conent", async ({ page }) => {
+    const map = new MapPage(page, 1);
+    await map.goto("/componentsguide/styles/icon/");
+    await map.waitUntilReady();
+    await map.waitUntilCanvasLoaded();
+    await map.checkCanvasScreenshot();
+  });
 });
 
 test.describe("ol-style-stroke", () => {