Added Icon component to easily add dynamic composed marker icons

examples/src/App.vue

@@ -27,10 +27,14 @@
           @click="currentView='custom-url-params'">Custom Url Params</a>
       </li>
       <li>
-        <a href="#" @click="currentView='custom-control'">Custom Leaflet Control</a>
+        <a
+          href="#"
+          @click="currentView='custom-control'">Custom Leaflet Control</a>
       </li>
       <li>
-        <a href="#" @click="currentView='set-bounds'">Set bounds</a>
+        <a
+          href="#"
+          @click="currentView='set-bounds'">Set bounds</a>
       </li>
       <li>
         <a
@@ -77,6 +81,11 @@
           href="#"
           @click="currentView='stress'">Load Test</a>
       </li>
+      <li>
+        <a
+          href="#"
+          @click="currentView='icon'">Custom Marker Icons</a>
+      </li>
     </ul>
     <component
       id="full_div"
@@ -102,6 +111,7 @@ import Simple from './components/Simple';
 import WMSLayers from './components/WMSLayers';
 import WorldCopyJump from './components/WorldCopyJump';
 import LoadTest from './components/LoadTest';
+import Icon from './components/Icon';
 
 export default {
   name: 'App',
@@ -121,7 +131,8 @@ export default {
     'geo-json2': GeoJSON2,
     'wms-layers': WMSLayers,
     'crs': CRSAndImageOverlay,
-    stress: LoadTest
+    stress: LoadTest,
+    Icon
   },
   data () {
     return {

examples/src/components/Icon.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div style="height: 20%; overflow: auto;">
+      <h3>Custom Marker Icons</h3>
+      <label for="iconSize">Icon size:</label>
+      <input
+        id="iconSize"
+        v-model="iconSize"
+        type="range"
+        min="1"
+        max="200"
+        value="64">
+      <label for="customTextInput">Custom text: </label>
+      <input
+        id="customTextInput"
+        v-model="customText"
+        type="text">
+    </div>
+    <l-map
+      :zoom="zoom"
+      :center="center"
+      style="height: 80%">
+      <l-tile-layer
+        :url="url"
+        :attribution="attribution"/>
+
+      <!-- Use default icon -->
+      <l-marker :lat-lng="[47.413220, -1.219482]" />
+
+      <!-- Use icon given in icon property -->
+      <l-marker
+        :lat-lng="[47.413220, -1.209482]"
+        :icon="icon" />
+
+      <!-- Create image icon (L.icon) from l-icon tag -->
+      <l-marker :lat-lng="[47.413220, -1.199482]">
+        <l-icon
+          :icon-size="dynamicSize"
+          :icon-anchor="dynamicAnchor"
+          icon-url="static/images/baseball-marker.png" />
+      </l-marker>
+
+      <!-- Create HTML icon (L.divIcon) by providing content inside the l-icon tag -->
+      <l-marker :lat-lng="[47.413220, -1.189482]">
+        <l-icon
+          :icon-anchor="staticAnchor"
+          class-name="someExtraClass">
+          <div class="headline">{{ customText }}</div>
+          <img src="static/images/layers.png">
+        </l-icon>
+      </l-marker>
+
+    </l-map>
+  </div>
+</template>
+
+<script>
+import { LMap, LTileLayer, LMarker, LIcon } from 'vue2-leaflet';
+
+export default {
+  name: 'Icon',
+  components: {
+    LMap,
+    LTileLayer,
+    LMarker,
+    LIcon
+  },
+  data () {
+    return {
+      zoom: 13,
+      center: L.latLng(47.413220, -1.219482),
+      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+
+      icon: L.icon({
+        iconUrl: 'static/images/baseball-marker.png',
+        iconSize: [32, 37],
+        iconAnchor: [16, 37]
+      }),
+      staticAnchor: [16, 37],
+      customText: 'Foobar',
+      iconSize: 64
+    };
+  },
+  computed: {
+    dynamicSize () {
+      return [this.iconSize, this.iconSize * 1.15];
+    },
+    dynamicAnchor () {
+      return [this.iconSize / 2, this.iconSize * 1.15];
+    }
+  },
+  methods: {
+  }
+};
+</script>
+
+<style>
+  .someExtraClass {
+    background-color: aqua;
+    padding: 10px;
+    border: 1px solid #333;
+    border-radius: 0 20px 20px 20px;
+    box-shadow: 5px 3px 10px rgba(0,0,0,0.2);
+    text-align: center;
+    width: auto !important;
+    height: auto !important;
+    margin: 0 !important;
+  }
+</style>

src/components/LIcon.vue

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import propsBinder from '../utils/propsBinder.js';
+import findRealParent from '../utils/findRealParent.js';
+import { optionsMerger } from '../utils/optionsUtils.js';
+
+export default {
+  name: 'LIcon',
+  props: {
+    iconUrl: {
+      type: String,
+      custom: true,
+      default: null
+    },
+    iconRetinaUrl: {
+      type: String,
+      custom: true,
+      default: null
+    },
+    iconSize: {
+      type: [Object, Array],
+      custom: true,
+      default: null
+    },
+    iconAnchor: {
+      type: [Object, Array],
+      custom: true,
+      default: null
+    },
+    popupAnchor: {
+      type: [Object, Array],
+      custom: true,
+      default: () => [0, 0]
+    },
+    tooltipAnchor: {
+      type: [Object, Array],
+      custom: true,
+      default: () => [0, 0]
+    },
+    shadowUrl: {
+      type: String,
+      custom: true,
+      default: null
+    },
+    shadowRetinaUrl: {
+      type: String,
+      custom: true,
+      default: null
+    },
+    shadowSize: {
+      type: [Object, Array],
+      custom: true,
+      default: null
+    },
+    shadowAnchor: {
+      type: [Object, Array],
+      custom: true,
+      default: null
+    },
+    bgPos: {
+      type: [Object, Array],
+      custom: true,
+      default: () => [0, 0]
+    },
+    className: {
+      type: String,
+      custom: true,
+      default: ''
+    },
+    options: {
+      type: Object,
+      custom: true,
+      default: () => ({})
+    }
+  },
+
+  data () {
+    return {
+      parentContainer: null,
+      observer: null,
+      recreationNeeded: false,
+      swapHtmlNeeded: false
+    };
+  },
+
+  mounted () {
+    this.parentContainer = findRealParent(this.$parent);
+
+    propsBinder(this, null, this.$options.props);
+
+    this.observer = new MutationObserver(() => {
+      this.scheduleHtmlSwap();
+    });
+    this.observer.observe(
+      this.$el,
+      { attributes: true, childList: true, characterData: true, subtree: true }
+    );
+
+    this.scheduleCreateIcon();
+  },
+
+  beforeDestroy () {
+    if (this.parentContainer.mapObject) {
+      this.parentContainer.mapObject.setIcon(null);
+    }
+
+    this.observer.disconnect();
+  },
+
+  methods: {
+    scheduleCreateIcon () {
+      this.recreationNeeded = true;
+
+      this.$nextTick(this.createIcon);
+    },
+
+    scheduleHtmlSwap () {
+      this.htmlSwapNeeded = true;
+
+      this.$nextTick(this.createIcon);
+    },
+
+    createIcon () {
+      // If only html of a divIcon changed, we can just replace the DOM without the need of recreating the whole icon
+      if (this.htmlSwapNeeded && !this.recreationNeeded && this.iconObject) {
+        this.parentContainer.mapObject.getElement().innerHTML = this.$el.innerHTML;
+
+        this.htmlSwapNeeded = false;
+        return;
+      }
+
+      if (!this.recreationNeeded) {
+        return;
+      }
+
+      if (this.iconObject) {
+        L.DomEvent.off(this.iconObject, this.$listeners);
+      }
+
+      const options = optionsMerger({
+        iconUrl: this.iconUrl,
+        iconRetinaUrl: this.iconRetinaUrl,
+        iconSize: this.iconSize,
+        iconAnchor: this.iconAnchor,
+        popupAnchor: this.popupAnchor,
+        tooltipAnchor: this.tooltipAnchor,
+        shadowUrl: this.shadowUrl,
+        shadowRetinaUrl: this.shadowRetinaUrl,
+        shadowSize: this.shadowSize,
+        shadowAnchor: this.shadowAnchor,
+        bgPos: this.bgPos,
+        className: this.className,
+        html: this.$el.innerHTML || this.html
+      }, this);
+
+      if (options.html) {
+        this.iconObject = L.divIcon(options);
+      } else {
+        this.iconObject = L.icon(options);
+      }
+
+      L.DomEvent.on(this.iconObject, this.$listeners);
+
+      this.parentContainer.mapObject.setIcon(this.iconObject);
+
+      this.recreationNeeded = false;
+      this.htmlSwapNeeded = false;
+    },
+
+    setIconUrl () {
+      this.scheduleCreateIcon();
+    },
+    setIconRetinaUrl () {
+      this.scheduleCreateIcon();
+    },
+    setIconSize () {
+      this.scheduleCreateIcon();
+    },
+    setIconAnchor () {
+      this.scheduleCreateIcon();
+    },
+    setPopupAnchor () {
+      this.scheduleCreateIcon();
+    },
+    setTooltipAnchor () {
+      this.scheduleCreateIcon();
+    },
+    setShadowUrl () {
+      this.scheduleCreateIcon();
+    },
+    setShadowRetinaUrl () {
+      this.scheduleCreateIcon();
+    },
+    setShadowAnchor () {
+      this.scheduleCreateIcon();
+    },
+    setBgPos () {
+      this.scheduleCreateIcon();
+    },
+    setClassName () {
+      this.scheduleCreateIcon();
+    },
+    setHtml () {
+      this.scheduleCreateIcon();
+    }
+  },
+
+  render () {
+    return null;
+  }
+};
+</script>

src/main.js

@@ -10,6 +10,7 @@ exports.LControlScale = require('./components/LControlScale').default;
 exports.LControlZoom = require('./components/LControlZoom').default;
 exports.LFeatureGroup = require('./components/LFeatureGroup').default;
 exports.LGeoJson = require('./components/LGeoJson').default;
+exports.LIcon = require('./components/LIcon').default;
 exports.LIconDefault = require('./components/LIconDefault').default;
 exports.LImageOverlay = require('./components/LImageOverlay').default;
 exports.LLayerGroup = require('./components/LLayerGroup').default;