[Vuejs]-How to access and add polylines to multiple maps using vue2leaflet

by

0👍

✅

Ok I figured it out. When inside a v-for you can use the same ref and it will create an array using that ref. Then by using an index, it’s possible to step through the array and add the polylines

Here’s the code

<template>
    <div>
        <div v-for="n in numberOfMaps" :key="n.id">
            <l-map ref="map" style="height:500px; width:500px" 
                   @leaflet:load="insertPolyline">
                <l-tile-layer :url="url" :attribution="attribution"/>
            </l-map>
        </div>
    </div>
</template>

<script >
import { LMap, LPolyline, LTileLayer} from 'vue2-leaflet';

export default {
components: {
    LMap,
    LPolyline,
    LTileLayer
  },
data() {
    return {
        mapsLoaded: false,
        url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        attribution:'&copy; <a 
        href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        numberOfMaps: 0,
        mapIndex: 0
    }
},

mounted() {
    this.numberOfMaps = 5
},

methods: {
    insertPolyline: function() {
        var map = this.$refs.map[this.mapIndex++].mapObject
        var polyline = require( 'google-polyline' )
        var points = polyline.decode( '_p~iF~ps|U_ulLnnqC_mqNvxq`@' )
        L.polyline(points, {
        color: 'blue',
        weight: 5,
        opacity: .7,
        lineJoin: 'round'
        }).addTo(map);
        map.fitBounds(points);
    }
}
}
</script>
<style>
 @import "~leaflet/dist/leaflet.css";
</style>
👤benjinne

Leave a comment