
'use strict'

export default {
    name: 'leaflet',
    props: ['id', 'lon', 'lat', 'zoom'],
    data() {
        return {
            marks: [],
            map: null,
            deflat: -1.669685500986571,
            deflon: 118.43261718750001,
            defzoom: 5,
            clon: null,
            clat: null,
            czoom: null
        }
    },
    mounted() {
        this.clon = this.lon || this.deflon;
        this.clat = this.lat || this.deflat;
        this.czoom = this.zoom || this.defzoom;
        this.map = L.map(this.id).setView([this.clat, this.clon], this.czoom);
        L.tileLayer("http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}", {
            maxZoom: 20,
            subdomains: ["mt0", "mt1", "mt2", "mt3"],
        }).addTo(this.map);
    },
    methods: {
        resetMarker() {
            this.marks.forEach((elem, key) => {
                this.map.removeLayer(elem.mark);
            })
        },
        renderMarker(marks,) {
            this.resetMarker();
            marks.forEach((elem, key) => {
                let a = L.marker([elem.lat, elem.lon]);
                if (elem.popup) {
                    a.bindPopup(elem.popup);
                }
                a.addTo(this.map);
                this.marks.push(a);
            });
        }
    },
    template: `
        <div :id="id"></div>
    `,
}
