Description
I am trying to use fitBounds but I am finding it either causes the map to be zoomed too far out and not fit to the bounds of the bbox or it adds extra grey and is off centered. I am not getting any errors in the console. I have tried importing either leaflet or "leaflet/dist/leaflet-src.esm" and neither work.
I would greatly appreciate any guidance or general thoughts. I am a bit stuck trying to resolve this and unsure if this is a bug or if I am misunderstanding something. Thank you
Expected Behavior
The first image shows the behavior I am having, namely the bbox of Korea zoomed out too much. The second shows what I expected, the map zoomed in the fit the bbox of korea.
This is another example with the northern hemisphere, but here there is Gray for some reason and the map is off centered.
If I check the bounds, it appears to be fine.
{
"_southWest": {
"lat": 41.15141612402135,
"lng": -180
},
"_northEast": {
"lat": 81.2504,
"lng": 180
}
}
Example Code
I have tried this both with and without the onMounted call and it does not seem to change. I have also tried validating the bounds with isValid() and I have not gotten any errors. I have no type errors in this ts code. I have tried getting rid of any of the leafletOptions but this did not affect the bounds.
<script setup lang="ts">
import { defineProps, ref, onMounted, nextTick } from "vue";
import type { Dataset } from "@/lib/types";
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LGeoJson } from "@vue-leaflet/vue-leaflet";
import type { Map } from "leaflet";
import L from "leaflet";
const props = defineProps<{ dataset: Dataset }>();
const loading = ref(true);
const center = ref<[number, number]>([0, 0]);
const leafletOptions = {
zoomControl: false,
doubleClickZoom: false,
dragging: false,
scrollWheelZoom: false,
zoomSnap: 0.25,
};
const map = ref<Map | null>(null);
const url = window.VUE_APP_BASEMAP_URL;
// Create a ref for the map component
const mapRef = ref<InstanceType<typeof LMap> | null>(null);
onMounted(() => {
// Trigger a resize event after a brief delay. Needed to fix a vue leaflet bug: https://github.com/vue-leaflet/Vue2Leaflet/issues/96#issuecomment-341459943
setTimeout(() => window.dispatchEvent(new Event("resize")), 250);
});
const onReady = () => {
nextTick(() => {
if (mapRef.value && mapRef.value["leafletObject"]) {
map.value = mapRef.value["leafletObject"];
if (map.value) {
map.value.fitBounds(L.geoJSON(props.dataset.geometry).getBounds());
map.value.attributionControl.setPrefix("");
loading.value = false;
}
}
});
};
</script>
<template>
<div v-if="loading">
<v-progress-linear striped indeterminate color="primary" />
</div>
<div v-show="!loading">
<l-map ref="mapRef" :center="center" :options="leafletOptions" :maxZoom="16" style="height: 160px; width: 256px"
@ready="onReady">
<l-geo-json :geojson="dataset.geometry" />
<l-tile-layer :url="url" />
</l-map>
</div>
</template>
Dependency Versions
"dependencies": {
"@mdi/js": "^7.4.47",
"@vue-leaflet/vue-leaflet": "^0.10.1",
"leaflet": "^1.9.4",
"leaflet.markercluster": "^1.5.3",
"pinia": "^2.2.4",
"plotly.js-cartesian-dist-min": "^2.35.2",
"vue": "^3.5.12",
"vue-i18n": "^10.0.4",
"vue-router": "^4.4.5",
"vuetify": "^3.7.3"
},
Activity