Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/main'
Browse files Browse the repository at this point in the history
  • Loading branch information
@JinIgarashi
JinIgarashi committed Sep 30, 2023
2 parents e559141 + 2a0b4ed commit 105cd9e
Show file tree
Hide file tree
Showing 21 changed files with 468 additions and 221 deletions.
6 changes: 5 additions & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode",
"editor.codeActionsOnSave": ["source.organizeImports"]
}
}
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,16 @@
"@evilmartians/lefthook": "^1.5.0",
"@maplibre/maplibre-gl-geocoder": "github:maplibre/maplibre-gl-geocoder",
"@popperjs/core": "^2.11.8",
"@sjmc11/tourguidejs": "^0.0.10",
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.25.1",
"@types/events": "^3.0.1",
"@types/node": "^20.7.2",
"@types/node": "^20.8.0",
"@typescript-eslint/eslint-plugin": "^6.7.3",
"@typescript-eslint/parser": "^6.7.3",
"@watergis/maplibre-center-icon": "^2.0.1",
"@watergis/maplibre-gl-area-switcher": "^1.0.0",
"@watergis/maplibre-gl-tour": "^1.0.2",
"@watergis/svelte-collapsible-panel": "^1.0.1",
"@watergis/svelte-maplibre-attribute-popup": "^2.0.2",
"@watergis/svelte-maplibre-attribute-table": "^1.1.1",
Expand Down
62 changes: 51 additions & 11 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

125 changes: 125 additions & 0 deletions src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,5 +209,130 @@ export const config: Config = {
},
adminBoundary: {
url: 'https://wasac.github.io/rw-admin-boundary'
},
tour: {
tourGuideOptions: {
steps: [
{
title: 'Welcome to Rural Water Map in WASAC!',
content: `This tutorial is going to take you around the main features of the application. <br> Let's begin!`,
order: 1
},
{
title: 'Geospatial analytics tools',
content: `
<div style="max-height: 300px; overflow-y: auto">
Click this button to start analysing the datasets.
<br><br>
In the <b>Layers</b> tab,
<br>
<img src="/assets/tutorial/style-switcher.png" height="32px"/>
firstly you can switch base maps either OSM or aerial from the below select box.
<br>
<img src="/assets/tutorial/eye-solid.svg" width="24px"/>
<br>
You can also switch layer visibility by clicking this button.
<br>
<img src="/assets/tutorial/palette-solid.svg" width="24px"/>
<br>
From the above palette button, you can edit layer style as you want.
<br><br>
In <b>Advanced</b> tab, there are three main features:
<br>
<b>1) measuring tool</b>:
<br>
<img src="/assets/tutorial/measure-tool.png" width="100%"/>
<br>
Click "Start measure" button, then click locations on the map to query the distance and altitude.
<br>
<br>
<b>2) routing tool</b>;
<br>
<img src="/assets/tutorial/routing-tool.png" width="100%"/>
<br>
Click "Start routing" button, then you can calculate the shortest route by clicking on the route on the map with your prefered means of transport.
<br>
<br>
<b>3)isochrone analysis tool</b>.
<br>
<img src="/assets/tutorial/isochrone-tool.png" width="100%"/>
<br>Isochrone is a very powerful tool to estimate contours by certain time or distance by selected transport option. It can be used for some SDG indicator such as "Water access within 30 minute round trip".
<br>
<img src="/assets/tutorial/isochrone-example.png" width="100%"/>
</div>
`,
target: '.maplibregl-ctrl-menu',
order: 2
},
{
title: 'Attribute table tool',
content: `<div style="max-height: 300px; overflow-y: auto">
Click this button to start exploring attributes data of selected layer.
You can also filter the data by keyword, and sort them, zoom to the select feature.
<br>
<img src="/assets/tutorial/attr-table-selectbox.png" width="100%"/>
<br>
Firstly, select a layer to show attribute table. The table will show all records within current map extent. Please refresh table if you move map.
<br>
<img src="/assets/tutorial/magnifying-glass-plus-solid.svg" width="24px"/>
<br>
You can zoom to selected feature by clicking the above button.
<br>
<img src="/assets/tutorial/up-down-left-right-solid.svg" width="24px"/>
<br>
You can pan to selected feature by clicking the above button.
</div>`,
target: '.maplibregl-ctrl-attribute-table',
order: 3
},
{
title: 'Sharing tool',
content:
'This button enables you to copy and share URL of current map with your colleagues.',
target: '.maplibregl-ctrl-share',
order: 4
},
{
title: 'Query tool',
content: `This button enables you to query details information of selected features on the map. If the tool is enabled, you can click the feature on the map to enquiry details information.`,
target: '.maplibregl-ctrl-identify',
order: 5
},
{
title: 'Export tool',
content: `This button enables you to export images with your preferences.<br>You can choose file size, image format (png, jpeg, pdf and svg), and DPI resolution, orientation of the exported image`,
target: '.maplibregl-ctrl-export',
order: 6
},
{
title: 'Search features',
content: `You can search features by typing keywords from the searching box.`,
target: '.maplibregl-ctrl-geocoder',
order: 7
},
{
title: 'Area switching tool',
content: `You can switch the map to the selected area instantly.`,
target: '.maplibregl-area-switcher',
order: 8
},
{
title: 'Terrain tool',
content: `If this is enabled, 3D terrain landscape will be shown. In order to use this, you can tilt the map by holding right-click (mouse) or two fingers (smartphone or tablet)`,
target: '.maplibregl-ctrl-terrain',
order: 9
},
{
title: 'GNSS positioning tool',
content: `GNSS positioning your current location is available by clicking this button.`,
target: '.maplibregl-ctrl-geolocate',
order: 10
}
],
rememberStep: true
},
tourControlOptions: {
localStorageKey: `watergis-wasac-{url}`
}
}
};
20 changes: 13 additions & 7 deletions src/lib/components/AdvancedPanel.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
<script lang="ts">
import { config as defaultConfig } from '$config';
import { map } from '$lib/stores';
import { CollapsiblePanel } from '@watergis/svelte-collapsible-panel';
import { MeasurePanel } from '@watergis/svelte-maplibre-measure';
import { ValhallaIsochronePanel, ValhallaRoutingPanel } from '@watergis/svelte-maplibre-valhalla';
import { CollapsiblePanel } from '@watergis/svelte-collapsible-panel';
import { map } from '$lib/stores';
import { config as defaultConfig } from '$config';
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
const config = defaultConfig;
let windowHeight: number;
let tabHeight: Writable<number> = getContext('tab-height');
$: contentHeight = windowHeight - $tabHeight - 20;
let panelColor:
| ''
| 'is-link'
Expand Down Expand Up @@ -55,7 +62,9 @@
};
</script>

<div class="panel-content">
<svelte:window bind:innerHeight={windowHeight} />

<div class="panel-content" style="height:{contentHeight}px;">
{#if config.elevation}
<CollapsiblePanel title="Measuring tool" bind:isPanelOpen={panelMeasureOpen} color={panelColor}>
<div class="accordion-content">
Expand Down Expand Up @@ -94,11 +103,8 @@
</div>

<style lang="scss">
$height: calc(100vh - 40px);
.panel-content {
overflow-y: auto;
height: $height;
}
.accordion-content {
Expand Down
14 changes: 10 additions & 4 deletions src/lib/components/DrawerContent.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<script lang="ts">
import LayerListPanel from './LayerListPanel.svelte';
import { config } from '$config';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
import AdvancedPanel from './AdvancedPanel.svelte';
import LayerListPanel from './LayerListPanel.svelte';
import SearchPanel from './SearchPanel.svelte';
import { config } from '$config';
enum TabNames {
LAYERS = 'Layers',
Expand All @@ -25,14 +27,18 @@
}
];
let activeTab = tabs[0];
let tabHeight = writable<number>(0);
setContext('tab-height', tabHeight);
</script>

<div class="drawer-content">
<div class="header">
<div class="header" bind:clientHeight={$tabHeight}>
<a class="icon logo" href={config.url}>
<img src={config.logo} alt="logo" />
</a>
<div class="tabs is-centered is-small">
<div class="tabs is-centered is-small mb-0">
<ul>
{#each tabs as tab}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
Expand Down
Loading

0 comments on commit 105cd9e

Please sign in to comment.