Skip to content

Commit 3b19c0f

Browse files
JinIgarashiJinIgarashi
authored
feat: introduced tourguide feature (#100)
1 parent 0c63219 commit 3b19c0f

20 files changed

+341
-129
lines changed

Diff for: ‎.vscode/settings.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
{
22
"editor.formatOnSave": true,
3-
"editor.defaultFormatter": "esbenp.prettier-vscode"
3+
"editor.defaultFormatter": "esbenp.prettier-vscode",
4+
"[svelte]": {
5+
"editor.defaultFormatter": "svelte.svelte-vscode",
6+
"editor.codeActionsOnSave": ["source.organizeImports"]
7+
}
48
}

Diff for: ‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@evilmartians/lefthook": "^1.5.0",
1717
"@maplibre/maplibre-gl-geocoder": "github:maplibre/maplibre-gl-geocoder",
1818
"@popperjs/core": "^2.11.8",
19+
"@sjmc11/tourguidejs": "^0.0.10",
1920
"@sveltejs/adapter-static": "^2.0.3",
2021
"@sveltejs/kit": "^1.25.1",
2122
"@types/events": "^3.0.1",
@@ -24,6 +25,7 @@
2425
"@typescript-eslint/parser": "^6.7.3",
2526
"@watergis/maplibre-center-icon": "^2.0.1",
2627
"@watergis/maplibre-gl-area-switcher": "^1.0.0",
28+
"@watergis/maplibre-gl-tour": "^1.0.1",
2729
"@watergis/svelte-collapsible-panel": "^1.0.1",
2830
"@watergis/svelte-maplibre-attribute-popup": "^2.0.2",
2931
"@watergis/svelte-maplibre-attribute-table": "^1.1.1",

Diff for: ‎pnpm-lock.yaml

+40
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/config.ts

+126
Original file line numberDiff line numberDiff line change
@@ -171,5 +171,131 @@ export const config: Config = {
171171
attributeTable: {
172172
rowsPerPage: 50,
173173
minZoom: 14
174+
},
175+
tour: {
176+
tourGuideOptions: {
177+
steps: [
178+
{
179+
title: 'Welcome to sveltekit watergis template!',
180+
content: `This tutorial is going to take you around the main features of the application. <br> Let's begin!`,
181+
target: document.body,
182+
order: 1
183+
},
184+
{
185+
title: 'Geospatial analytics tools',
186+
content: `
187+
<div style="max-height: 300px; overflow-y: auto">
188+
Click this button to start analysing the datasets.
189+
<br><br>
190+
In the <b>Layers</b> tab,
191+
<br>
192+
<img src="/assets/tutorial/style-switcher.png" height="32px"/>
193+
firstly you can switch base maps either OSM or aerial from the below select box.
194+
<br>
195+
<img src="/assets/tutorial/eye-solid.svg" width="24px"/>
196+
<br>
197+
You can also switch layer visibility by clicking this button.
198+
<br>
199+
<img src="/assets/tutorial/palette-solid.svg" width="24px"/>
200+
<br>
201+
From the above palette button, you can edit layer style as you want.
202+
<br><br>
203+
In <b>Advanced</b> tab, there are three main features:
204+
<br>
205+
<b>1) measuring tool</b>:
206+
<br>
207+
<img src="/assets/tutorial/measure-tool.png" width="100%"/>
208+
<br>
209+
Click "Start measure" button, then click locations on the map to query the distance and altitude.
210+
<br>
211+
<br>
212+
<b>2) routing tool</b>;
213+
<br>
214+
<img src="/assets/tutorial/routing-tool.png" width="100%"/>
215+
<br>
216+
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.
217+
<br>
218+
<br>
219+
<b>3)isochrone analysis tool</b>.
220+
<br>
221+
<img src="/assets/tutorial/isochrone-tool.png" width="100%"/>
222+
<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".
223+
<br>
224+
<img src="/assets/tutorial/isochrone-example.png" width="100%"/>
225+
</div>
226+
`,
227+
target: '.maplibregl-ctrl-menu',
228+
order: 2
229+
},
230+
{
231+
title: 'Attribute table tool',
232+
content: `<div style="max-height: 300px; overflow-y: auto">
233+
Click this button to start exploring attributes data of selected layer.
234+
You can also filter the data by keyword, and sort them, zoom to the select feature.
235+
<br>
236+
<img src="/assets/tutorial/attr-table-selectbox.png" width="100%"/>
237+
<br>
238+
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.
239+
<br>
240+
<img src="/assets/tutorial/magnifying-glass-plus-solid.svg" width="24px"/>
241+
<br>
242+
You can zoom to selected feature by clicking the above button.
243+
<br>
244+
<img src="/assets/tutorial/up-down-left-right-solid.svg" width="24px"/>
245+
<br>
246+
You can pan to selected feature by clicking the above button.
247+
</div>`,
248+
target: '.maplibregl-ctrl-attribute-table',
249+
order: 3
250+
},
251+
{
252+
title: 'Sharing tool',
253+
content:
254+
'This button enables you to copy and share URL of current map with your colleagues.',
255+
target: '.maplibregl-ctrl-share',
256+
order: 4
257+
},
258+
{
259+
title: 'Query tool',
260+
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.`,
261+
target: '.maplibregl-ctrl-identify',
262+
order: 5
263+
},
264+
{
265+
title: 'Export tool',
266+
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`,
267+
target: '.maplibregl-ctrl-export',
268+
order: 6
269+
},
270+
{
271+
title: 'Search features',
272+
content: `You can search features by typing keywords from the searching box.`,
273+
target: '.maplibregl-ctrl-geocoder',
274+
order: 7
275+
},
276+
{
277+
title: 'Area switching tool',
278+
content: `You can switch the map to the selected area instantly.`,
279+
target: '.maplibregl-area-switcher',
280+
order: 8
281+
},
282+
{
283+
title: 'Terrain tool',
284+
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)`,
285+
target: '.maplibregl-ctrl-terrain',
286+
order: 9
287+
},
288+
{
289+
title: 'GNSS positioning tool',
290+
content: `GNSS positioning your current location is available by clicking this button.`,
291+
target: '.maplibregl-ctrl-geolocate',
292+
order: 10
293+
}
294+
],
295+
rememberStep: true
296+
},
297+
tourControlOptions: {
298+
localStorageKey: `watergis-{url}`
299+
}
174300
}
175301
};

Diff for: ‎src/lib/components/AdvancedPanel.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script lang="ts">
2+
import { config as defaultConfig } from '$config';
3+
import { map } from '$lib/stores';
4+
import { CollapsiblePanel } from '@watergis/svelte-collapsible-panel';
25
import { MeasurePanel } from '@watergis/svelte-maplibre-measure';
36
import { ValhallaIsochronePanel, ValhallaRoutingPanel } from '@watergis/svelte-maplibre-valhalla';
4-
import { CollapsiblePanel } from '@watergis/svelte-collapsible-panel';
5-
import { map } from '$lib/stores';
6-
import { config as defaultConfig } from '$config';
77
88
const config = defaultConfig;
99

Diff for: ‎src/lib/components/DrawerContent.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
2-
import LayerListPanel from './LayerListPanel.svelte';
3-
import AdvancedPanel from './AdvancedPanel.svelte';
42
import { config } from '$config';
3+
import AdvancedPanel from './AdvancedPanel.svelte';
4+
import LayerListPanel from './LayerListPanel.svelte';
55
66
enum TabNames {
77
LAYERS = 'Layers',

Diff for: ‎src/lib/components/LayerListPanel.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
2-
import { map, selectedStyle } from '$lib/stores';
32
import { config } from '$config';
4-
import { LegendPanel, LegendHeader } from '@watergis/svelte-maplibre-legend';
3+
import { map, selectedStyle } from '$lib/stores';
4+
import { LegendHeader, LegendPanel } from '@watergis/svelte-maplibre-legend';
55
import { StyleSwitcher } from '@watergis/svelte-maplibre-style-switcher';
66
77
let onlyRendered = true;

0 commit comments

Comments
 (0)