Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-02-05 21:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix map not rendering correctly when div starts as hidden

Browse source
This commit is contained in:
Michał 2024-05-18 18:33:04 +01:00
parent 5439333cc5
commit dcfec1e2db
2 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
front/src/pages/Checkout.svelte
View file

@ -2,7 +2,7 @@
import { onMount } from "svelte";
import { link } from "svelte-spa-router";
import { ArrowLeft, SealWarning, ArrowRight } from "phosphor-svelte";
import L from "leaflet";
import L, { type Map } from "leaflet";
import { type CartItem, type Checkout } from '../lib/types';
import { expandOnTyping } from "../lib/utils";
@ -14,7 +14,7 @@
email: "",
},
message: "",
delivery: false,
delivery: true,
address: {
line1: "",
line2: "",
@ -30,28 +30,33 @@
let items: [string, CartItem][];
let totalPrice: number;
let unavailableItems = false;
let unavailableItems: boolean;
Cart.subscribe(() => {
items = Cart.getEntries();
totalPrice = Cart.getTotalPrice();
Cart.getEntries().forEach(([_, item]) => {
if (!item.data.availability) unavailableItems = true;
});
unavailableItems = Cart.getEntries().some(([_, item]) => item.data.availability === false);
});
let leafletMap: Map;
onMount(() => {
leafletMap = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
L.tileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 20,
attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
},
).addTo(leafletMap);
L.marker([50.82304922105467, -0.432780150496344]).addTo(leafletMap);
});
$: if (!CheckoutData.delivery) {
// Rendering maybe off-centered since map was initialized when div was hidden
setTimeout(() => { leafletMap.invalidateSize() }, 1);
}
function onSubmit() {
console.log(CheckoutData);
}
onMount(() => {
const maxZoom = 20;
const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map);
L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
});
</script>
<a href="/cart" use:link id="cancel-button"><ArrowLeft />&nbsp;Cancel</a>

15
front/src/pages/Index.svelte
View file

@ -12,12 +12,15 @@
let items = getPopularToday();
onMount(() => {
const maxZoom = 20;
const attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>";
const map = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom, attribution}).addTo(map);
L.marker([50.82304922105467, -0.432780150496344]).addTo(map);
const leafletMap = L.map('map').setView([50.82304922105467, -0.432780150496344], 13);
L.tileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 20,
attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
},
).addTo(leafletMap);
L.marker([50.82304922105467, -0.432780150496344]).addTo(leafletMap);
});
</script>