Vue2Leaflet Demo

by tomik23

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue2-leaflet.js"></script>
<body>
  <div id="app">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker 
        v-for="(item, index) in markers"
        :key="'marker-' + index"
        :lat-lng="item.location"
        :icon="getIcon(item)"></l-marker>
    </l-map>
  </div>
</body>

CSS

html, body, #app {
  height: 100%;
  margin: 0;
}
.my-custom-pin{
   background-color: transparent;
}

JavaScript

var { LMap, LTileLayer, LMarker } = Vue2Leaflet;

new Vue({
  el: '#app',
  components: { LMap, LTileLayer, LMarker },
  data() {
    return {
      zoom:13,
      center: L.latLng(47.413220, -1.219482),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      class: 'test',
      attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      markers: [{
      	location:L.latLng(47.413220, -1.219482),
        color:'#c11a1a',
        strokeColor:'#d73534',
        circleColor:'#590000'
      },{
      	location:L.latLng(47.413210, -1.211160),
        color:'#38a938',
        strokeColor:'#157315',
        circleColor:'#ecc9c9'
      }]
    }
  },
  methods:{
  	getIcon(item){
    		return L.divIcon({
        className: "my-custom-pin",
	      html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 34.892337" height="60" width="40">
  <g transform="translate(-814.59595,-274.38623)">
    <g transform="matrix(1.1855854,0,0,1.1855854,-151.17715,-57.3976)">
      <path d="m 817.11249,282.97118 c -1.25816,1.34277 -2.04623,3.29881 -2.01563,5.13867 0.0639,3.84476 1.79693,5.3002 4.56836,10.59179 0.99832,2.32851 2.04027,4.79237 3.03125,8.87305 0.13772,0.60193 0.27203,1.16104 0.33416,1.20948 0.0621,0.0485 0.19644,-0.51262 0.33416,-1.11455 0.99098,-4.08068 2.03293,-6.54258 3.03125,-8.87109 2.77143,-5.29159 4.50444,-6.74704 4.56836,-10.5918 0.0306,-1.83986 -0.75942,-3.79785 -2.01758,-5.14062 -1.43724,-1.53389 -3.60504,-2.66908 -5.91619,-2.71655 -2.31115,-0.0475 -4.4809,1.08773 -5.91814,2.62162 z" style="stroke:${item.strokeColor};"/>
      <circle r="3.0355" cy="288.25278" cx="823.03064" id="path3049" style="display:inline;fill:${item.circleColor};"/>
    </g>
  </g>
</svg>`
  	    });
    }
  }
});