I'm having trouble loading Leaflet map tiles beyond the first row in my Vue 3 component. I've experimented with various ways to declare the vertical size of the div, and have attempted to use map.invalidateSize() on mount, but so far no luck.
<script setup lang="ts">
import { onMounted } from "vue";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
onMounted(() => {
var map = L.map("map", { attributionControl: false }).setView([0, 0], 0);
L.tileLayer("http://127.0.0.1:7800/{z}/{x}/{y}.jpeg", {
maxZoom: 0,
noWrap: true,
}).addTo(map);
});
</script>
<template>
<h1>Map Detail</h1>
<div id="map"></div>
</template>
<style>
#map {
width: 100%;
height: 512px;
}
</style>