I am attempting to integrate leaflet into my Nuxt 3 project without relying on wrappers like @nuxtjs/leaflet. However, I encountered an issue where it says 'Could not find a declaration file for module 'leaflet', despite having installed the leaflet package from npm.
//template
<div id="map"></div>
//script
<script setup lang="ts">
import * as L from "leaflet";
onMounted(() => {
const map = L.map("map").setView([34.299074, -118.45949], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
L.marker([34.299074, -118.45949]).addTo(map);
});
</script>
Afterwards, I included a css file in nuxt.config.ts:
css: [
"leaflet/dist/leaflet.css",
],
Currently, all I see is an empty map with zoom buttons and the label 'Leaflet | © OpenStreetMap' in the bottom-right corner.
You can view the problem here: https://stackblitz.com/edit/nuxt-starter-jcj5xn?file=app%2Fpages%2Findex.vue,app%2Fapp.vue,app%2Fpages%2Fevents.vue. Clicking 'Go to Events' displays an empty map. When reloading the page, I encounter the error 'window' is not defined. In my actual project, I cannot interact with the map or see any markers. Additionally, I receive the message 'Attempted to load an infinite number of tiles', even though https://tile.openstreetmap.org/{z}/{x}/{y}.png is a valid tileLayer, according to the official documentation at leafletjs.com/examples/quick-start.
Seeking a potential solution.