vue-leaflet · mandryllo · Jul 21, 2021 · Jul 21, 2021 · Jul 21, 2021 · Jul 21, 2021
diff --git a/docs/components/LImageOverlay.md b/docs/components/LImageOverlay.md
@@ -59,7 +59,6 @@ export default {
 | visible             |                                                      | boolean | -      | true          |
 | interactive         |                                                      | boolean | -      | false         |
 | bubblingMouseEvents |                                                      | boolean | -      | true          |
-| url                 |                                                      | string  | -      |               |
 | bounds              |                                                      |         | -      |               |
 | opacity             |                                                      | number  | -      | 1.0           |
 | alt                 |                                                      | string  | -      | ''            |
@@ -68,6 +67,7 @@ export default {
 | zIndex              |                                                      | number  | -      | 1             |
 | className           |                                                      | string  | -      | ''            |
 | options             | Leaflet options to pass to the component constructor | object  | -      | {}            |
+| url                 |                                                      | string  | -      | null          |
 
 ## Events
 

diff --git a/docs/components/LSVGOverlay.md b/docs/components/LSVGOverlay.md
@@ -0,0 +1,87 @@
+---
+title: LSVGOverlay
+---
+
+# LSVGOverlay
+
+> Easily display a svg overlay.
+
+---
+
+## Demo
+
+::: demo
+<template>
+<l-map style="height: 350px" :zoom="zoom" :center="center">
+<l-tile-layer :url="url"></l-tile-layer>
+<l-svg-overlay :svg="svg" :bounds="bounds"></l-svg-overlay>
+</l-map>
+</template>
+
+<script>
+import {LMap, LSVGOverlay, LTileLayer} from 'vue2-leaflet';
+
+const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+svgElement.setAttribute('viewBox', "0 0 200 200");
+svgElement.innerHTML = `
+  <rect width="200"
+    height="200"/>
+  <rect x="75"
+    y="23"
+    width="50"
+    height="50"
+    style="fill:red"/>
+  <rect x="75"
+    y="123"
+    width="50"
+    height="50"
+    style="fill:#0013ff"/>`;
+
+export default {
+  components: {
+    LMap,
+    'l-svg-overlay': LSVGOverlay,
+    LTileLayer
+  },
+  data () {
+    return {
+      zoom: 4,
+      center: [25, -110],
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      svg: svgElement,
+      bounds: [[ 32, -130], [ 13, -100]]
+    };
+  }
+}
+</script>
+
+:::
+
+## Props
+
+| Prop name           | Description                                          | Type               | Values | Default       |
+| ------------------- | ---------------------------------------------------- | ------------------ | ------ | ------------- |
+| pane                |                                                      | string             | -      | 'overlayPane' |
+| attribution         |                                                      | string             | -      | null          |
+| name                |                                                      | string             | -      | undefined     |
+| layerType           |                                                      | string             | -      | undefined     |
+| visible             |                                                      | boolean            | -      | true          |
+| interactive         |                                                      | boolean            | -      | false         |
+| bubblingMouseEvents |                                                      | boolean            | -      | true          |
+| bounds              |                                                      |                    | -      |               |
+| opacity             |                                                      | number             | -      | 1.0           |
+| alt                 |                                                      | string             | -      | ''            |
+| crossOrigin         |                                                      | boolean            | -      | false         |
+| errorOverlayUrl     |                                                      | string             | -      | ''            |
+| zIndex              |                                                      | number             | -      | 1             |
+| className           |                                                      | string             | -      | ''            |
+| options             | Leaflet options to pass to the component constructor | object             | -      | {}            |
+| svg                 |                                                      | string\|SVGElement | -      | null          |
+
+## Events
+
+| Event name     | Type    | Description                                        |
+| -------------- | ------- | -------------------------------------------------- |
+| update:visible | boolean | Triggers when the visible prop needs to be updated |
+| ready          | object  | Triggers when the component is ready               |
diff --git a/src/components/LImageOverlay.vue b/src/components/LImageOverlay.vue
@@ -10,6 +10,13 @@ import { imageOverlay, DomEvent } from 'leaflet';
 export default {
   name: 'LImageOverlay',
   mixins: [ImageOverlayMixin, Options],
+  props: {
+    url: {
+      type: String,
+      custom: true,
+      default: null
+    }
+  },
   mounted() {
     const options = optionsMerger(this.imageOverlayOptions, this);
     this.mapObject = imageOverlay(this.url, this.bounds, options);

diff --git a/src/components/LSVGOverlay.vue b/src/components/LSVGOverlay.vue
@@ -0,0 +1,88 @@
+<script>
+import { optionsMerger, propsBinder, findRealParent } from '../utils/utils.js';
+import SVGOverlayMixin from '../mixins/SVGOverlay.js';
+import Options from '../mixins/Options.js';
+import { svgOverlay, DomEvent } from 'leaflet';
+/**
+ * Easily display a svg overlay.
+ */
+export default {
+  name: 'LSVGOverlay',
+  mixins: [SVGOverlayMixin, Options],
+  props: {
+    svg: {
+      type: [String, SVGElement],
+      default: null
+    }
+  },
+  mounted() {
+    const options = optionsMerger(this.svgOverlayOptions, this);
+    this.mapObject = svgOverlay(this.svg, this.bounds, options);
+    DomEvent.on(this.mapObject, this.$listeners);
+    propsBinder(this, this.mapObject, this.$options.props);
+    this.parentContainer = findRealParent(this.$parent);
+    this.parentContainer.addLayer(this, !this.visible);
+    this.$nextTick(() => {
+      /**
+       * Triggers when the component is ready
+       * @type {object}
+       * @property {object} mapObject - reference to leaflet map object
+       */
+      this.$emit('ready', this.mapObject);
+    });
+  },
+  render() {
+    return null;
+  },
+};
+</script>
+
+<docs>
+## Demo
+::: demo
+<template>
+  <l-map style="height: 350px" :zoom="zoom" :center="center">
+    <l-tile-layer :url="url"></l-tile-layer>
+    <l-svg-overlay :svg="svg" :bounds="bounds"></l-svg-overlay>
+  </l-map>
+</template>
+
+<script>
+import {LMap, LSVGOverlay, LTileLayer} from 'vue2-leaflet';
+
+const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+svgElement.setAttribute('viewBox', "0 0 200 200");
+svgElement.innerHTML = `
+  <rect width="200"
+    height="200"/>
+  <rect x="75"
+    y="23"
+    width="50"
+    height="50"
+    style="fill:red"/>
+  <rect x="75"
+    y="123"
+    width="50"
+    height="50"
+    style="fill:#0013ff"/>`;
+
+export default {
+  components: {
+    LMap,
+    'l-svg-overlay': LSVGOverlay,
+    LTileLayer
+  },
+  data () {
+    return {
+      zoom: 4,
+      center: [25, -110],
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      svg: svgElement,
+      bounds: [[ 32, -130], [ 13, -100]]
+    };
+  }
+}
+</script>
+:::
+</docs>
diff --git a/src/index.js b/src/index.js
@@ -35,6 +35,7 @@ export { default as LPolygon } from './components/LPolygon';
 export { default as LPolyline } from './components/LPolyline';
 export { default as LPopup } from './components/LPopup';
 export { default as LRectangle } from './components/LRectangle';
+export { default as LSVGOverlay } from './components/LSVGOverlay';
 export { default as LTileLayer } from './components/LTileLayer';
 export { default as LTooltip } from './components/LTooltip';
 export { default as LWMSTileLayer } from './components/LWMSTileLayer';
diff --git a/src/mixins/ImageOverlay.js b/src/mixins/ImageOverlay.js
@@ -4,10 +4,6 @@ import InteractiveLayer from './InteractiveLayer';
 export default {
   mixins: [Layer, InteractiveLayer],
   props: {
-    url: {
-      type: String,
-      custom: true
-    },
     bounds: {
       custom: true
     },

diff --git a/src/mixins/SVGOverlay.js b/src/mixins/SVGOverlay.js
@@ -0,0 +1,16 @@
+import ImageOverlay from './ImageOverlay.js';
+
+export default {
+  mixins: [ImageOverlay],
+  mounted () {
+    this.svgOverlayOptions = this.imageOverlayOptions;
+  },
+  methods: {
+    getElement () {
+      return this.mapObject.getElement();
+    }
+  },
+  render () {
+    return null;
+  }
+};
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -71,10 +71,6 @@ declare module "vue2-leaflet" {
   }
   class ImageOverlay extends Mixins(Layer, InteractiveLayer) {
     // props
-    url: string;
-    /**
-     * @default true
-     */
     bounds: boolean;
     /**
      * @default 1.0
@@ -307,6 +303,10 @@ declare module "vue2-leaflet" {
      */
     upperCase: boolean;
   }
+  class SVGOverlay extends Mixins(ImageOverlay) {
+    // methods
+    getElement(): SVGElement;
+  }
 
   // components
   class LCircle extends Mixins(Circle) {
@@ -489,6 +489,13 @@ declare module "vue2-leaflet" {
     setImagePath(newVal: string, oldVal?: string): void;
   }
   class LImageOverlay extends Mixins(ImageOverlay) {
+    // props
+    /**
+     * @default null
+     */
+    url: string | null;
+
+    // data
     mapObject: L.ImageOverlay;
     parentContainer: any;
   }
@@ -699,6 +706,17 @@ declare module "vue2-leaflet" {
     mapObject: L.TileLayer.WMS;
     parentContainer: any;
   }
+  class LSVGOverlay extends Mixins(SVGOverlay) {
+    // props
+    /**
+     * @default null
+     */
+    svg: string | SVGElement | null;
+
+    // data
+    mapObject: L.SVGOverlay;
+    parentContainer: any;
+  }
 
   // utils
   function findRealParent(firstVueParent: Vue): any;
@@ -734,6 +752,7 @@ declare module "vue2-leaflet" {
     LRectangle,
     LTileLayer,
     LTooltip,
-    LWMSTileLayer
+    LWMSTileLayer,
+    LSVGOverlay
   };
 }