diff --git a/src/components/App.svelte b/src/components/App.svelte index 4d14263..f782f97 100755 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -50,6 +50,7 @@ let showBottomPanel = false; let basemap = 'basic'; let bottomSplit: Split; + let secondarySplit: Split; // let mapLayers: string[] = []; // let mapSources: string[] = []; let unlistener: UnlistenFn; @@ -231,28 +232,24 @@ async function removeDataSource(key, source) { const resultMap = key === 'main' ? map : secondaryMap; const layers = source.layers; - console.log('removeDataSource', key, source, Object.keys(resultMap.style._layers)); const layerIds = Object.keys(resultMap.style._layers).filter( (s) => s.startsWith(`___${source.id}`) || s === `${source.id}-layer` ); - console.log('layerIds', layerIds); layerIds.forEach((s) => { resultMap.removeLayer(s); delete layers[s]; }); resultMap.removeSource(source.id); if (key === 'main') { - const index = mainSources.findIndex((s) => (s.id = source.id)); - console.log('index', index); + const index = mainSources.findIndex((s) => s.id === source.id); if (index !== -1) { mainSources.splice(index, 1); mainSources = mainSources; } updateMainSourcesCount(); } else { - const index = secondarySources.findIndex((s) => (s.id = source.id)); + const index = secondarySources.findIndex((s) => s.id === source.id); if (index !== -1) { - console.log('index', index); secondarySources.splice(index, 1); secondarySources = secondarySources; } @@ -275,6 +272,7 @@ sourceData = await (await fetch(json_url)).json(); } sourceData.path = path; + function onMapLoaded() { if (createSourceLayer) { resultMap.addSource(sourceData.id, { @@ -465,6 +463,11 @@ console.error(err); } secondaryMap = null; + secondaryFeatures = []; + secondarySources = []; + secondarySplit.setPercent(100); + } else { + addMBTiles('secondary'); } } @@ -479,25 +482,22 @@ key: string; source_id: string; }) { + // console.log('onMBTilesSet', path, json_url, source_id, key); // if (key === 'main') { // clearMainMap(); // } - clearSecondaryMap(); - if (compareMap) { - compareMap.remove(); - compareMap = null; - } + // clearSecondaryMap(); + // if (compareMap) { + // compareMap.remove(); + // compareMap = null; + // } if (path) { if (key === 'main') { if (!hasSources) { map = await createMap({ key, path, json_url, source_id }); } else { let sourceData = await (await fetch(json_url)).json(); - // console.log( - // 'onMBTilesSet main', - // sourceData.id, - // sourceData.vector_layers || sourceData.Laye - // ); + if (sourceData.vector_layers || sourceData.Layer) { addVectorMBtiles(map, { key, path, json_url, source_id }, sourceData); } else { @@ -505,38 +505,35 @@ } } } else if (key === 'secondary') { - secondaryMap = await createMap({ key, path, json_url, source_id }); - mainPopupOnClick = true; - secondaryPopupOnClick = true; - compareMap = new Compare(map, secondaryMap, '#comparison-container', { - // mousemove: true, // Optional. Set to true to enable swiping during cursor movement. - // orientation: 'horizontal', // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical - }); - compareMap.setSlider(500); + if (secondaryMap) { + let sourceData = await (await fetch(json_url)).json(); + if (sourceData.vector_layers || sourceData.Layer) { + addVectorMBtiles(secondaryMap, { key, path, json_url, source_id }, sourceData); + } else { + addRasterMBtiles(secondaryMap, { key, path, json_url, source_id }, sourceData); + } + } else { + secondaryMap = await createMap({ key, path, json_url, source_id }); + mainPopupOnClick = true; + secondaryPopupOnClick = true; + compareMap = new Compare(map, secondaryMap, '#comparison-container', { + // mousemove: true, // Optional. Set to true to enable swiping during cursor movement. + // orientation: 'horizontal', // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical + }); + compareMap.setSlider(500); + } } } } - async function addPrimaryMBTiles() { - try { - const resPath = await open({ - filters: [], - multiple: false, - directory: false, - }); - setupMBtiles(resPath, 'main'); - } catch (error) { - console.error(error); - } - } - async function selectSecondaryMBtiles() { + async function addMBTiles(key) { try { const resPath = await open({ filters: [], multiple: false, directory: false, }); - setupMBtiles(resPath, 'secondary'); + setupMBtiles(resPath, key); } catch (error) { console.error(error); } @@ -556,10 +553,6 @@ }); let theme: CarbonTheme = 'g90'; - $: { - console.log('theme changed', theme); - } - let bottomPanelPercent = 75; function onBottomSplitChanged(e) { if (showBottomPanel) { @@ -576,13 +569,25 @@ bottomSplit.setPercent(100); } } + function switchCompareView() { + if (compareMap) { + clearSecondaryMap(); + if (compareMap) { + compareMap.remove(); + compareMap = null; + } + } else { + addMBTiles('secondary'); + } + } + + let selectedFeaturesHeaders; + let selectedFeaturesData; - let mainFeaturesHeaders; - let mainFeaturesData; - $: { - if (mainFeatures?.length > 0) { - mainFeaturesData = []; - mainFeaturesHeaders = [ + function handleSelectedFeatures(features) { + if (features?.length > 0) { + selectedFeaturesData = []; + selectedFeaturesHeaders = [ { key: 'layer', value: 'layer', @@ -596,19 +601,19 @@ value: '$id', }, ]; - let seenKeys = mainFeaturesHeaders.map((h) => h.key); + let seenKeys = selectedFeaturesHeaders.map((h) => h.key); let seenFeatures = []; - mainFeatures.forEach((f) => { + features.forEach((f) => { Object.keys(f.properties).forEach((k) => { if (seenKeys.indexOf(k) === -1) { seenKeys.push(k); - mainFeaturesHeaders.push({ key: k, value: k }); + selectedFeaturesHeaders.push({ key: k, value: k }); } }); if (seenFeatures.indexOf(f.id) === -1) { seenFeatures.push(f.id); - mainFeaturesData.push({ + selectedFeaturesData.push({ id: f.id, layer: f.sourceLayer, $type: f.type, @@ -620,6 +625,8 @@ }); } } + $: handleSelectedFeatures(mainFeatures) + $: handleSelectedFeatures(secondaryFeatures) @@ -640,7 +647,7 @@ - -

{$_('settings')}

+
+

{$_('settings')}

- +
@@ -680,18 +687,18 @@ addPrimaryMBTiles()} + on:add_source={() => addMBTiles('main')} on:remove_source={(event) => removeDataSource('main', event.detail)} bind:wantPopup bind:wantTileBounds - bind:popupOnClick={mainPopupOnClick} bind:showBackgroundLayer={mainShowBackgroundLayer} /> @@ -743,11 +750,11 @@ removeDataSource('secondary', event.detail)} - mbtiles={secondarySources} + on:add_source={() => addMBTiles('secondary')} + sources={secondarySources} map={secondaryMap} bind:wantPopup bind:wantTileBounds - bind:popupOnClick={secondaryPopupOnClick} bind:showBackgroundLayer={secondaryShowBackgroundLayer} /> {/if} @@ -757,7 +764,13 @@
- + 1; + colors = sources.reduce((prev, source) => { - Object.keys(source.layers.colors).forEach((c) => { + source.layers.colors && Object.keys(source.layers.colors).forEach((c) => { if (!prev[c]) { prev[c] = source.layers.colors[c]; } diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte index f6c4331..203a731 100644 --- a/src/components/Menu.svelte +++ b/src/components/Menu.svelte @@ -16,12 +16,11 @@ import type { Map } from 'maplibre-gl'; import { createEventDispatcher } from 'svelte'; import { _ } from 'svelte-i18n'; - export let mbtiles; + export let sources; export let id; export let map: Map; export let wantPopup; export let wantTileBounds; - export let popupOnClick; export let showBackgroundLayer; const dispatch = createEventDispatcher(); @@ -34,7 +33,6 @@ const sid = source.id; const layerIds = source.vector_layers?.map((l) => l.id) || [`${source.id}-layer`]; mbtilesVisibility[sid] = visible; - console.log('switchSourceLayersVisibility', sid, source, layerIds); layerIds.forEach((layerId) => { applyLayerVisibility(source, layerId, visible); }); @@ -81,7 +79,8 @@ }; $: { - if (mbtiles) { + if (sources) { + mbtilesVisibility = {}; layersVisibility = {}; showingLayers = { points: 'visible', @@ -90,11 +89,6 @@ }; } } - $: { - if (mbtiles) { - mbtilesVisibility = {}; - } - } let filter = 'all'; $: { @@ -120,7 +114,7 @@ showingLayers.polygons = 'visible'; break; } - mbtiles.forEach((source) => { + sources.forEach((source) => { const layers = source.layers; Object.keys(layers).forEach((k) => { if (k !== 'colors' && k !== 'rasters') { @@ -166,7 +160,7 @@
- {#if mbtiles.length > 0} + {#if sources.length > 0} {#each options as option} @@ -182,11 +176,10 @@ - {/if} - {#each mbtiles as source} + {#each sources as source}