|
1 | 1 | <script lang="ts">
|
2 |
| - import { browser } from '$app/env'; |
3 |
| - import website from '$lib/config/website'; |
4 |
| - import type { Map, MapOptions, TileLayer, TileLayerOptions } from 'leaflet'; |
5 |
| - import { onMount } from 'svelte'; |
| 2 | + import { browser } from '$app/env'; |
| 3 | + import website from '$lib/config/website'; |
| 4 | + import type { Map, MapOptions, TileLayer, TileLayerOptions } from 'leaflet'; |
| 5 | + import { onMount } from 'svelte'; |
6 | 6 |
|
7 |
| - export let id: string; |
8 |
| - export let location: { |
9 |
| - latitude: number; |
10 |
| - longitude: number; |
11 |
| - }; |
12 |
| - export let zoom: number = 19; |
13 |
| - export let style: string = 'width:425px; height:350px'; |
| 7 | + export let id: string; |
| 8 | + export let location: { |
| 9 | + latitude: number; |
| 10 | + longitude: number; |
| 11 | + }; |
| 12 | + export let zoom: number = 19; |
| 13 | + export let style: string = 'width:425px; height:350px'; |
14 | 14 |
|
15 |
| - const { mapboxAccessToken } = website; |
16 |
| - const { latitude, longitude } = location; |
| 15 | + const { mapboxAccessToken } = website; |
| 16 | + const { latitude, longitude } = location; |
17 | 17 |
|
18 |
| - let leaflet: { |
19 |
| - map: (element: string | HTMLElement, options?: MapOptions) => Map; |
20 |
| - tileLayer: (urlTemplate: string, options?: TileLayerOptions) => TileLayer; |
21 |
| - }; |
| 18 | + let leaflet: { |
| 19 | + map: (element: string | HTMLElement, options?: MapOptions) => Map; |
| 20 | + tileLayer: (urlTemplate: string, options?: TileLayerOptions) => TileLayer; |
| 21 | + }; |
22 | 22 |
|
23 |
| - onMount(() => { |
24 |
| - if (browser) { |
25 |
| - leaflet = window.L; |
26 |
| - const map = leaflet.map(id).setView([latitude, longitude], zoom); |
27 |
| - leaflet |
28 |
| - .tileLayer( |
29 |
| - 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}{r}?access_token={accessToken}', |
30 |
| - { |
31 |
| - attribution: |
32 |
| - 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', |
33 |
| - maxZoom: 19, |
34 |
| - id: 'mapbox/streets-v11', |
35 |
| - tileSize: 512, |
36 |
| - zoomOffset: -1, |
37 |
| - accessToken: mapboxAccessToken, |
38 |
| - detectRetina: true |
39 |
| - } |
40 |
| - ) |
41 |
| - .addTo(map); |
42 |
| - } |
43 |
| - }); |
| 23 | + onMount(() => { |
| 24 | + if (browser) { |
| 25 | + leaflet = window.L; |
| 26 | + const map = leaflet.map(id).setView([latitude, longitude], zoom); |
| 27 | + leaflet |
| 28 | + .tileLayer( |
| 29 | + 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}{r}?access_token={accessToken}', |
| 30 | + { |
| 31 | + attribution: |
| 32 | + 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', |
| 33 | + maxZoom: 19, |
| 34 | + id: 'mapbox/streets-v11', |
| 35 | + tileSize: 512, |
| 36 | + zoomOffset: -1, |
| 37 | + accessToken: mapboxAccessToken, |
| 38 | + detectRetina: true, |
| 39 | + }, |
| 40 | + ) |
| 41 | + .addTo(map); |
| 42 | + } |
| 43 | + }); |
44 | 44 |
|
45 |
| - // onDestroy(() => { |
46 |
| - // if (leaflet) { |
47 |
| - // leaflet = undefined; |
48 |
| - // } |
49 |
| - // }); |
| 45 | + // onDestroy(() => { |
| 46 | + // if (leaflet) { |
| 47 | + // leaflet = undefined; |
| 48 | + // } |
| 49 | + // }); |
50 | 50 | </script>
|
51 | 51 |
|
52 | 52 | <svelte:head>
|
53 |
| - <link |
54 |
| - rel="stylesheet" |
55 |
| - href= "https://unpkg.com/[email protected]/dist/leaflet.css" |
56 |
| - integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" |
57 |
| - crossorigin="" |
58 |
| - /> |
59 |
| - <script |
60 |
| - src= "https://unpkg.com/[email protected]/dist/leaflet.js" |
61 |
| - integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" |
62 |
| - crossorigin=""></script> |
| 53 | + <link |
| 54 | + rel="stylesheet" |
| 55 | + href= "https://unpkg.com/[email protected]/dist/leaflet.css" |
| 56 | + integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" |
| 57 | + crossorigin="" |
| 58 | + /> |
| 59 | + <script |
| 60 | + src= "https://unpkg.com/[email protected]/dist/leaflet.js" |
| 61 | + integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" |
| 62 | + crossorigin=""></script> |
63 | 63 | </svelte:head>
|
64 | 64 |
|
65 | 65 | <div {id} {style} />
|
0 commit comments