DEV Community

loading...
Cover image for 1 millions vue leaflet marker ? YES

1 millions vue leaflet marker ? YES

Ayrton
J'aime faire des choses inutiles 😅
・1 min read

Hi everyone !

1 million markers
1 Million Markers

Before read

I have use two scripts for initialize my own Vue components.
Thanks to :

Dependencies

  • vue2-leaflet
  • leaflet

Installation

npm package

npm i @simerca/vue2-leaflet-canvas-marker

Use

<template>
    <LMap>
        <LTileLayer :url="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
        <LCanvasMarker :markers="markers"/>
    </LMap>
</template>
Enter fullscreen mode Exit fullscreen mode
import L from leaflet;
import {LMap, LTileLayer} from 'vue2-leaflet';
import {LCanvasMarker} from 'vue2-leaflet-canvas-marker';
export default {
    computed:{
        markers(){
            let markers = []
            for(var i = 0; i < 1000; i++){
                let lat = Math.random()*360 - 180
                let lng = Math.random()*360 - 180
                var icon = L.icon({
                    iconUrl: 'img/marker-icon.png',
                    iconSize: [20, 18],
                    iconAnchor: [10, 9]
                });
                markers.push(L.marker([lat, lng], {icon:icon}).bindPopup(`Hello ${i}`))
            }
            return markers
        }
    }
    components:{
        LMap,
        LTileLayer,
        LCanvasMarker
    },
}
Enter fullscreen mode Exit fullscreen mode

Your welcome !

Star me on github !

https://github.com/Simerca/vue2-leaflet-canvas-marker

Discussion (2)

Collapse
prototowb profile image
Tobias Rauer

?

Collapse
simerca profile image
Ayrton Author

Can I help you ?