steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-01 08:12:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

use store to access map object

Browse Source
This commit is contained in:
vcoppe
2024-04-17 11:44:37 +02:00
parent bd2d3eed66
commit ab0b425243
7 changed files with 48 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/src/lib/components/Data.svelte
View File

@@ -1,11 +1,7 @@
<script lang="ts"> <script lang="ts">
import mapboxgl from 'mapbox-gl';
import GPX from './GPX.svelte'; import GPX from './GPX.svelte';
import { GPXFile, parseGPX } from 'gpx'; import { GPXFile, parseGPX } from 'gpx';
export let map: mapboxgl.Map | null;
let files: GPXFile[] = [ let files: GPXFile[] = [
parseGPX(`<?xml version="1.0" encoding="UTF-8"?> parseGPX(`<?xml version="1.0" encoding="UTF-8"?>
<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" <gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
@@ -271,5 +267,5 @@
</script> </script>
{#each files as file} {#each files as file}
<GPX {map} {file} /> <GPX {file} />
{/each} {/each}

15
website/src/lib/components/GPX.svelte
View File

@@ -1,18 +1,17 @@
<script lang="ts"> <script lang="ts">
import mapboxgl from 'mapbox-gl';
import { GPXFile } from 'gpx'; import { GPXFile } from 'gpx';
export let file: GPXFile; import { map } from '$lib/stores';
export let map: mapboxgl.Map | null;
$: if (map) { export let file: GPXFile;
map.on('load', () => {
console.log(map?.isStyleLoaded()); $: if ($map) {
map.addSource('gpx', { $map.on('load', () => {
$map.addSource('gpx', {
type: 'geojson', type: 'geojson',
data: file.toGeoJSON() data: file.toGeoJSON()
}); });
map.addLayer({ $map.addLayer({
id: 'gpx', id: 'gpx',
type: 'line', type: 'line',
source: 'gpx', source: 'gpx',

23
website/src/lib/components/Map.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from 'svelte'; import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl'; import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css'; import 'mapbox-gl/dist/mapbox-gl.css';
@@ -7,14 +7,15 @@
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'; import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import { map } from '$lib/stores';
mapboxgl.accessToken = mapboxgl.accessToken =
'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg'; 'pk.eyJ1IjoiZ3B4c3R1ZGlvIiwiYSI6ImNrdHVoM2pjNTBodmUycG1yZTNwcnJ3MzkifQ.YZnNs9s9oCQPzoXAWs_SLg';
export let map: mapboxgl.Map | null = null;
export let distanceUnits: 'metric' | 'imperial' = 'metric'; export let distanceUnits: 'metric' | 'imperial' = 'metric';
onMount(() => { onMount(() => {
map = new mapboxgl.Map({ $map = new mapboxgl.Map({
container: 'map', container: 'map',
style: { version: 8, sources: {}, layers: [] }, style: { version: 8, sources: {}, layers: [] },
projection: { name: 'mercator' }, projection: { name: 'mercator' },
@@ -24,15 +25,15 @@
logoPosition: 'bottom-right' logoPosition: 'bottom-right'
}); });
map.addControl( $map.addControl(
new mapboxgl.AttributionControl({ new mapboxgl.AttributionControl({
compact: true compact: true
}) })
); );
map.addControl(new mapboxgl.NavigationControl()); $map.addControl(new mapboxgl.NavigationControl());
map.addControl( $map.addControl(
new MapboxGeocoder({ new MapboxGeocoder({
accessToken: mapboxgl.accessToken, accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl, mapboxgl: mapboxgl,
@@ -40,7 +41,7 @@
}) })
); );
map.addControl( $map.addControl(
new mapboxgl.GeolocateControl({ new mapboxgl.GeolocateControl({
positionOptions: { positionOptions: {
enableHighAccuracy: true enableHighAccuracy: true
@@ -50,18 +51,12 @@
}) })
); );
map.addControl( $map.addControl(
new mapboxgl.ScaleControl({ new mapboxgl.ScaleControl({
unit: distanceUnits unit: distanceUnits
}) })
); );
}); });
onDestroy(() => {
if (map) {
map.remove();
}
});
</script> </script>
<div {...$$restProps}> <div {...$$restProps}>

10
website/src/lib/components/custom-control/CustomControl.svelte
View File

@@ -1,18 +1,20 @@
<script lang="ts"> <script lang="ts">
import CustomControl from './CustomControl'; import CustomControl from './CustomControl';
import mapboxgl from 'mapbox-gl';
export let map: mapboxgl.Map | null; import { map } from '$lib/stores';
export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right'; export let position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'top-right';
let container: HTMLDivElement | null = null; let container: HTMLDivElement | null = null;
$: if (map && container) { $: if ($map && container) {
$map.on('load', () => {
if (position.includes('right')) container.classList.add('float-right'); if (position.includes('right')) container.classList.add('float-right');
else container.classList.add('float-left'); else container.classList.add('float-left');
container.classList.remove('hidden'); container.classList.remove('hidden');
let control = new CustomControl(container); let control = new CustomControl(container);
map.addControl(control, position); $map.addControl(control, position);
});
} }
</script> </script>

26
website/src/lib/components/layer-control/LayerControl.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import mapboxgl from 'mapbox-gl';
import CustomControl from '$lib/components/custom-control/CustomControl.svelte'; import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import LayerTree from './LayerTree.svelte'; import LayerTree from './LayerTree.svelte';
import LayerControlSettings from './LayerControlSettings.svelte'; import LayerControlSettings from './LayerControlSettings.svelte';
@@ -19,14 +17,16 @@
defaultBasemap defaultBasemap
} from '$lib/assets/layers'; } from '$lib/assets/layers';
export let map: mapboxgl.Map | null; import { map } from '$lib/stores';
$: if (map) { $: if ($map) {
map?.setStyle(basemaps[defaultBasemap]); $map.on('load', () => {
$map.setStyle(basemaps[defaultBasemap]);
});
} }
</script> </script>
<CustomControl {map} class="group min-w-[29px] min-h-[29px] overflow-hidden"> <CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
<div <div
class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0" class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
> >
@@ -42,8 +42,8 @@
layerTree={basemapTree} layerTree={basemapTree}
name="basemaps" name="basemaps"
onValueChange={(id) => { onValueChange={(id) => {
if (map) { if ($map) {
map.setStyle(basemaps[id]); $map.setStyle(basemaps[id]);
} }
}} }}
/> />
@@ -55,12 +55,12 @@
name="overlays" name="overlays"
multiple={true} multiple={true}
onValueChange={(id, checked) => { onValueChange={(id, checked) => {
if (map) { if ($map) {
if (checked) { if (checked) {
if (!map.getSource(id)) { if (!$map.getSource(id)) {
map.addSource(id, overlays[id]); $map.addSource(id, overlays[id]);
} }
map.addLayer({ $map.addLayer({
id, id,
type: overlays[id].type === 'raster' ? 'raster' : 'line', type: overlays[id].type === 'raster' ? 'raster' : 'line',
source: id, source: id,
@@ -73,7 +73,7 @@
} }
}); });
} else { } else {
map.removeLayer(id); $map.removeLayer(id);
} }
} }
}} }}

5
website/src/lib/stores.ts Normal file
View File

@@ -0,0 +1,5 @@
import { writable } from 'svelte/store';
import mapboxgl from 'mapbox-gl';
export const map = writable<mapboxgl.Map | null>(null);

10
website/src/routes/+page.svelte
View File

@@ -1,22 +1,18 @@
<script lang="ts"> <script lang="ts">
import mapboxgl from 'mapbox-gl';
import Data from '$lib/components/Data.svelte'; import Data from '$lib/components/Data.svelte';
import Map from '$lib/components/Map.svelte'; import Map from '$lib/components/Map.svelte';
import Menu from '$lib/components/Menu.svelte'; import Menu from '$lib/components/Menu.svelte';
import Toolbar from '$lib/components/Toolbar.svelte'; import Toolbar from '$lib/components/Toolbar.svelte';
import LayerControl from '$lib/components/layer-control/LayerControl.svelte'; import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
let map: mapboxgl.Map | null = null;
</script> </script>
<div class="flex flex-col w-screen h-screen"> <div class="flex flex-col w-screen h-screen">
<div class="grow relative"> <div class="grow relative">
<Menu /> <Menu />
<Toolbar /> <Toolbar />
<Map class="h-full" bind:map /> <Map class="h-full" />
<LayerControl {map} /> <LayerControl />
<Data {map} /> <Data />
</div> </div>
<div class="h-12">Test</div> <div class="h-12">Test</div>
</div> </div>