Vue.js component

[vadim-popa]

Hi,

Please tell me how can I use this library on vuejs (vue2leaflet) project?

Thank you!

[Raruto]

I don't use vuejs, but according to their documentation, I think you will have to develop a dedicated plugin.

Let me know if you need a hand in "understanding" this plugin...

[vadim-popa]

Thanks @Raruto for answer! I have successfully included the library. I fixed some errors, but the following error remained:

RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer chunk-vendors.js line 13300 > eval:287:11
    _isZipped KMZLoader.js:285
    _parse KMZLoader.js:44
    _load KMZLoader.js:39
    <анонимный> self-hosted:1021
    onreadystatechange KMZLoader.js:338

How can we solve it?

[Raruto]

It could be that your kmz file is not correctly loaded by the browser, are you sure that there are no other warnings before this fatal error?

[vadim-popa]

Mozilla: no Chrome:

[Raruto]

There is a CORS error related to the file: capitals.kmz. Try loading this file directly from your server to solve.

[vadim-popa]

I loaded the file directly from my server. See the following errors below: Chrome:

Mozilla:

[Raruto]

From what I see it looks like you are trying to open it directly from the file manager. If you are testing on a localhost server you must access the html page in a similar way to the following: http://localhost/my-example-file.html

PS (as already recommended here) if you also provide code samples, we may also better understand how to help you.

[vadim-popa]

This is my code:

<template>
    <div id="app" style="height: 100%; width: 100%">
        <div>
            <l-map
                    style="height: 100%; width: 100%; position: absolute;"
                    :zoom="zoom"
                    :center="center"
                    @update:zoom="zoomUpdated"
                    @update:center="centerUpdated"
                    @update:bounds="boundsUpdated"
                    :options="{ zoomControl: false}"
                    ref="myMap"
            >
                <l-tile-layer :url="url"></l-tile-layer>
            </l-map>
        </div>
    </div>
</template>

javascript:

import {LMap, LTileLayer } from 'vue2-leaflet'
import { KMZParser }  from 'leaflet-kmz'
import L from 'leaflet'
import kmz from '../kmzFiles/regions.kmz'

export default {
 components: {
            'l-map': LMap,
            'l-tile-layer': LTileLayer,
        },
data () {
    url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
     },
      mounted () {
            this.$nextTick(() => {
                const map = this.$refs.myMap.mapObject
                const control = L.control.layers(null, null, { collapsed:false }).addTo(map);
                const kmzParser = new KMZParser({
                    onKMZLoaded: function(layer, name) {
                        control.addOverlay(layer, name);
                        layer.addTo(map);
                    }
                });
                kmzParser.load(kmz)

            })
        }
}

[Raruto]

I think you need to change these lines:

// REMOVE: import kmz from '../kmzFiles/regions.kmz'

kmzParser.load('../kmzFiles/regions.kmz') 

[DonNicoJs]

Sorry to hijack the issue :) @Raruto Would you be interested to write a plugin / collaborate on one? I mean for vue-leaflet if so I can add you to the org!

[Raruto]

Hi @DonNicoJs,

I don't usually use these types of frameworks, but let me know if you need some tips if you are planning to develop a wrapper plugin.