ReferenceError: map is not defined
will4906 opened this issue · comments
树华 commented
Hi, I use vue.js to implement the library. But when i use it in the template, i get an exception.
vue.runtime.esm.js?2b0e:1888 ReferenceError: map is not defined
at NewClass.initialize (leaflet-deepzoom.js?94c2:47)
at new NewClass (leaflet-src.js?e11e:301)
at Function.L.tileLayer.deepzoom (leaflet-deepzoom.js?94c2:103)
at VueComponent.mounted (Home.vue?76f2:19)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at callHook (vue.runtime.esm.js?2b0e:4213)
at Object.insert (vue.runtime.esm.js?2b0e:3139)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6340)
at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6559)
at Vue._update (vue.runtime.esm.js?2b0e:3939)
My code is here. Do i have any wrong action.
<template>
<div id="mapid"></div>
</template>
<script>
import L from 'leaflet'
import 'leaflet-deepzoom'
export default {
data () {
return {}
},
mounted () {
var map = L.map('mapid').setView(new L.LatLng(0,0), 0);
var dzLayer = L.tileLayer.deepzoom('DeepZoomImage/hubble_files/', {
width: 2400,
height: 3000
}).addTo(map)
map.fitBounds(dzLayer.options.bounds)
}
}
</script>
<style>
#mapid {
height: 512px;
}
</style>
hlovdal commented
We have the following workaround
// Workaround for the deepzoom-plugin. The plugin accesses the map through a global variable called map.
// We have to define it manually here, because it is not available when using the leaflet angular module.
(<any>window).map = map;
in our code.
The problem is the call to map.unproject
in leaflet-deepzoom.js where map
is not declared or imported in any way, just assumed to exist (globally).
aMadReason commented
@hlovdal Thanks, I've done the same in my codebase.