Menu
I am trying to integrate Leaflet with a Vue 3 project but I need some help integrating a pure JS library with a Vue project (not sure if it is even possible without using a dedicated NPM package). As per the Leaftlet documentation, I have included the .css and .js files in my index.html file and I have done everything described in the instructions but whenever I try to recreate their example code in a Vue context I get the following error:
runtime-core.esm-bundler.js?5c40:540 Error: Map container not found.
at NewClass._initContainer (leaflet-src.js?e11e:4066)
at NewClass.initialize (leaflet-src.js?e11e:3099)
at new NewClass (leaflet-src.js?e11e:296)
at Object.createMap [as map] (leaflet-src.js?e11e:4691)
at setup (VM2010 App.vue:14)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6542)
at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
at processComponent (runtime-core.esm-bundler.js?5c40:4182)
My project is very simple. This is my index.html file:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="js/main.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
I've included the leaflet.js file both in the head and body sections just in case...
This is my App.vue file:
<template>
<div id="mapid"></div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
export default {
name: "App",
setup() {
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
return {
mymap
}
}
};
</script>
<style>
#mapid { height: 180px; }
</style>
Apologies if my question is dumb. Any advice would be appreciated since I've tried several wrappers for the library and they all have compatibility issues with Vue 3.
317
Try out to mount the map in its container in the onMounted hook because in the setup hook the DOM tree is not ready yet :
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import {onMounted,ref} from 'vue'
export default {
name: "App",
setup() {
var mymap =ref(null)
onMounted(()=>{
mymap.value= L.map('mapid').setView([51.505, -0.09], 13);
})
return {
mymap
}
}
};
</script
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
