feat: Dynamically load leaflet to improve first-screen loading speed

This commit is contained in:
Shirasawa 2025-09-17 08:20:56 +00:00
parent 980019bb50
commit 382299d549
1 changed files with 28 additions and 25 deletions

View File

@ -1,6 +1,4 @@
<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { onMount, onDestroy } from 'svelte';
let map;
@ -13,6 +11,28 @@
let markerGroupLayer = null;
onMount(async () => {
const [{ default: L }] = await Promise.all([
import('leaflet'),
import('leaflet/dist/leaflet.css')
]);
map = L.map(mapElement).setView(setViewLocation ? setViewLocation : [51.505, -0.09], 10);
if (setViewLocation) {
points = [
{
coords: setViewLocation,
content: `Lat: ${setViewLocation[0]}, Lng: ${setViewLocation[1]}`
}
];
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const setMarkers = (points) => {
if (map) {
if (markerGroupLayer) {
@ -36,23 +56,6 @@
}
};
onMount(async () => {
map = L.map(mapElement).setView(setViewLocation ? setViewLocation : [51.505, -0.09], 10);
if (setViewLocation) {
points = [
{
coords: setViewLocation,
content: `Lat: ${setViewLocation[0]}, Lng: ${setViewLocation[1]}`
}
];
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
setMarkers(points);
map.on('click', (e) => {