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

map controls doc

Browse Source
This commit is contained in:
vcoppe
2024-07-10 16:39:48 +02:00
parent 7daf26aa5f
commit 87b63b45b1
4 changed files with 76 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/lib/assets/layers.ts
View File

@@ -644,7 +644,7 @@ export const defaultOverlayTree: LayerTreeType = {
overlays: {
world: {
cyclOSM: {
cyclOSMlite: true,
cyclOSMlite: false,
},
/*strava: {
stravaHeatmapRun: true,

13
website/src/lib/components/docs/DocsLayers.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
</script>
<div class="relative h-80 aspect-square rounded-2xl shadow-xl overflow-clip">
<enhanced:img src={mapboxOutdoorsMap} alt="Mapbox Outdoors map screenshot." class="absolute" />
<enhanced:img
src={waymarkedMap}
alt="Waymarked Trails map screenshot."
class="absolute opacity-0 hover:opacity-100 transition-opacity duration-200"
/>
</div>

16
website/src/lib/components/layer-control/LayerControlSettings.svelte
View File

@@ -140,14 +140,6 @@
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
<Accordion.Content>
<ScrollArea>
<CustomLayers />
</ScrollArea>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
<Accordion.Content class="flex flex-col gap-3 overflow-visible">
<Label class="flex flex-row gap-2 items-center">
@@ -195,6 +187,14 @@
</Label>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>{$_('layers.custom_layers.title')}</Accordion.Trigger>
<Accordion.Content>
<ScrollArea>
<CustomLayers />
</ScrollArea>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-4">
<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
<Accordion.Content class="overflow-visible">

54
website/src/lib/docs/en/map-controls.mdx
View File

@@ -2,4 +2,58 @@
title: Map controls
---
<script>
import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers3 } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
</script>
# { title }
### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
The controls at the top allow to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.
To control the orientation and tilt of the map, you can also drag the map while holding <kbd>Ctrl</kbd>.
### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> Search bar
You can use the search bar to look for an address and navigate to it on the map.
### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> Locate button
The locate button will center the map on your current location.
<DocsNote>
This only works if you have allowed your browser and the website to access your location.
</DocsNote>
### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> Street view
This button can be used to enable the street view mode on the map.
Depending on the street view source chosen in the [settings](./menu/settings), street view imagery can be accessed differently.
- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>: the street view coverage will appear as green lines on the map. When zoomed in enough, green dots will show the exact locations where street view imagery is available. Hovering over a green dot will the street view image at that location.
- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>: click on the map to open a new tab with the street view imagery at that location.
### <Layers3 size="16" class="inline-block" style="margin-bottom: 2px" /> Map layers
The map layers button allows to switch between different basemaps and toggle map overlays.
- **Basemaps** are the background maps that each have a different style and purpose.
Only one basemap can be displayed at a time.
- **Overlays** are additional layers that can be displayed on top of the basemap to provide more information.
<div class="flex flex-col items-center">
<DocsLayers />
<span class="text-sm text-center mt-2">
Hover over the map to show the <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> overlay on top of the <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> basemap.
</span>
</div>
A large collection of global and local basemaps and overlays is available in **gpx.studio**.
They can be enabled in the [map layer settings dialog](./menu/settings).
In these settings, you can also manage the opacity of the overlays.
For advanced users, it is possible to add custom basemaps and overlays by providing <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>, <a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a> or <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> URLs.