kopia lustrzana https://github.com/FacilMap/facilmap
Upgrade vuepress
Candid Dauth
rodzic
effcde8bd7
commit
aaa301c59d
|
|
@ -0,0 +1,9 @@
|
|||
src/.vuepress/.cache
|
||||
src/.vuepress/.temp
|
||||
src/.vuepress/*.js.*.mjs
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,7 @@
|
|||
nodeLinker: node-modules
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
spec: "@yarnpkg/plugin-interactive-tools"
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.6.3.cjs
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
"url": "https://github.com/FacilMap/facilmap.git"
|
||||
},
|
||||
"license": "AGPL-3.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev-server": "vuepress dev src",
|
||||
"build": "vuepress build src",
|
||||
|
|
@ -16,13 +17,13 @@
|
|||
},
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"markdown-it-footnote": "^3.0.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"vuepress": "^1.5.3",
|
||||
"vuepress-plugin-check-md": "^0.0.2"
|
||||
"@vuepress/plugin-search": "next",
|
||||
"rimraf": "^5.0.1",
|
||||
"vuepress": "next",
|
||||
"vuepress-plugin-check-md": "^0.0.3"
|
||||
},
|
||||
"packageManager": "yarn@3.6.3",
|
||||
"dependencies": {
|
||||
"qrcode": "^1.4.4",
|
||||
"vue-qrcode": "^0.4.0"
|
||||
"qrcode.vue": "^3.4.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import { defineClientConfig } from '@vuepress/client';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import Screencast from "./components/Screencast.vue";
|
||||
import Screenshot from "./components/Screenshot.vue";
|
||||
|
||||
export default defineClientConfig({
|
||||
enhance({ app, router, siteData }) {
|
||||
app.component("qrcode", QrcodeVue);
|
||||
app.component("Screencast", Screencast);
|
||||
app.component("Screenshot", Screenshot);
|
||||
|
||||
app.config.globalProperties.$resolveLink
|
||||
|
||||
router.addRoute({ path: '/users/hash/', redirect: '/users/share/' });
|
||||
}
|
||||
});
|
||||
|
|
@ -1,18 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
desktop: string;
|
||||
mobile: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<video controls style="height: 340px">
|
||||
<source :src="desktop">
|
||||
<div class="fm-screencast">
|
||||
<video controls>
|
||||
<source :src="props.desktop">
|
||||
</video>
|
||||
<video controls style="height: 340px">
|
||||
<source :src="mobile">
|
||||
<video controls>
|
||||
<source :src="props.mobile">
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
desktop: String,
|
||||
mobile: String
|
||||
|
||||
<style lang="scss">
|
||||
.fm-screencast {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
> :nth-child(1) {
|
||||
width: calc(66.5% - 3px);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
> :nth-child(2) {
|
||||
width: calc(33.5% - 3px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
desktop: string;
|
||||
mobile: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<img :src="desktop" style="height: 340px">
|
||||
<img :src="mobile" style="height: 340px">
|
||||
<div class="fm-screenshot">
|
||||
<img :src="props.desktop">
|
||||
<img :src="props.mobile">
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
desktop: String,
|
||||
mobile: String
|
||||
|
||||
<style lang="scss">
|
||||
.fm-screenshot {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
> :nth-child(1) {
|
||||
width: calc(68.5% - 3px);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
> :nth-child(2) {
|
||||
width: calc(31.5% - 3px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
const { description } = require('../../package')
|
||||
|
||||
module.exports = {
|
||||
title: 'FacilMap',
|
||||
description: description,
|
||||
head: [
|
||||
['meta', { name: 'theme-color', content: '#3eaf7c' }],
|
||||
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
|
||||
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
|
||||
],
|
||||
dest: `${__dirname}/../../dist`,
|
||||
themeConfig: {
|
||||
repo: '',
|
||||
editLinks: false,
|
||||
docsDir: '',
|
||||
editLinkText: '',
|
||||
lastUpdated: false,
|
||||
nav: [
|
||||
{
|
||||
text: 'Users',
|
||||
link: '/users/',
|
||||
},
|
||||
{
|
||||
text: 'Developers',
|
||||
link: '/developers/'
|
||||
}
|
||||
],
|
||||
sidebar: {
|
||||
'/users/': [
|
||||
{
|
||||
title: "Overview",
|
||||
collapsable: false,
|
||||
children: [
|
||||
"",
|
||||
"help/",
|
||||
"releases/",
|
||||
"contribute/"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'General functions',
|
||||
collapsable: false,
|
||||
children: [
|
||||
"ui/",
|
||||
"layers/",
|
||||
"search/",
|
||||
"pois/",
|
||||
"route/",
|
||||
"click-marker/",
|
||||
"files/",
|
||||
"locate/",
|
||||
"share/",
|
||||
"app/",
|
||||
"privacy/"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Collaborative maps',
|
||||
collapsable: false,
|
||||
children: [
|
||||
"collaborative/",
|
||||
"markers/",
|
||||
"lines/",
|
||||
"multiple/",
|
||||
"types/",
|
||||
"legend/",
|
||||
"views/",
|
||||
"filter/",
|
||||
"history/",
|
||||
"export/",
|
||||
"import/",
|
||||
"map-settings/"
|
||||
]
|
||||
},
|
||||
],
|
||||
'/developers/': [
|
||||
{
|
||||
title: "Developer guide",
|
||||
collapsable: false,
|
||||
children: [
|
||||
"",
|
||||
"embed"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Server",
|
||||
collapsable: true,
|
||||
children: [
|
||||
"server/",
|
||||
"server/docker",
|
||||
"server/standalone",
|
||||
"server/config"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Client',
|
||||
collapsable: true,
|
||||
children: [
|
||||
"client/",
|
||||
"client/properties",
|
||||
"client/events",
|
||||
"client/methods",
|
||||
"client/types",
|
||||
"client/advanced"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Leaflet components",
|
||||
collapsable: true,
|
||||
children: [
|
||||
"leaflet/",
|
||||
"leaflet/bbox",
|
||||
"leaflet/layers",
|
||||
"leaflet/markers",
|
||||
"leaflet/lines",
|
||||
"leaflet/route",
|
||||
"leaflet/search",
|
||||
"leaflet/overpass",
|
||||
"leaflet/icons",
|
||||
"leaflet/hash",
|
||||
"leaflet/views",
|
||||
"leaflet/filter",
|
||||
"leaflet/click-listener"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Frontend",
|
||||
collapsable: true,
|
||||
children: [
|
||||
"frontend/",
|
||||
"frontend/facilmap"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Development',
|
||||
collapsable: true,
|
||||
children: [
|
||||
"development/dev-setup",
|
||||
"development/documentation"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
'@vuepress/plugin-back-to-top',
|
||||
'@vuepress/plugin-medium-zoom',
|
||||
'check-md'
|
||||
],
|
||||
markdown: {
|
||||
extendMarkdown: (md) => {
|
||||
md.use(require("markdown-it-footnote"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
import { description } from '../../package.json';
|
||||
import { defaultTheme, defineUserConfig } from 'vuepress';
|
||||
import backToTopPlugin from '@vuepress/plugin-back-to-top';
|
||||
import mediumZoomPlugin from '@vuepress/plugin-medium-zoom';
|
||||
//import checkMdPluin from 'vuepress-plugin-check-md';
|
||||
import { searchPlugin } from '@vuepress/plugin-search';
|
||||
|
||||
export default defineUserConfig({
|
||||
title: 'FacilMap',
|
||||
description: description,
|
||||
head: [
|
||||
['meta', { name: 'theme-color', content: '#3eaf7c' }],
|
||||
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
|
||||
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
|
||||
],
|
||||
dest: `${__dirname}/../../dist`,
|
||||
theme: defaultTheme({
|
||||
repo: '',
|
||||
docsDir: '',
|
||||
editLinkText: '',
|
||||
lastUpdated: false,
|
||||
contributors: false,
|
||||
navbar: [
|
||||
{
|
||||
text: 'Users',
|
||||
link: '/users/',
|
||||
},
|
||||
{
|
||||
text: 'Developers',
|
||||
link: '/developers/'
|
||||
}
|
||||
],
|
||||
sidebar: {
|
||||
'/users/': [
|
||||
{
|
||||
text: "Overview",
|
||||
children: [
|
||||
"/users/",
|
||||
"/users/help/",
|
||||
"/users/releases/",
|
||||
"/users/contribute/"
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'General functions',
|
||||
children: [
|
||||
"/users/ui/",
|
||||
"/users/layers/",
|
||||
"/users/search/",
|
||||
"/users/pois/",
|
||||
"/users/route/",
|
||||
"/users/click-marker/",
|
||||
"/users/files/",
|
||||
"/users/locate/",
|
||||
"/users/share/",
|
||||
"/users/app/",
|
||||
"/users/privacy/"
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Collaborative maps',
|
||||
children: [
|
||||
"/users/collaborative/",
|
||||
"/users/markers/",
|
||||
"/users/lines/",
|
||||
"/users/multiple/",
|
||||
"/users/types/",
|
||||
"/users/legend/",
|
||||
"/users/views/",
|
||||
"/users/filter/",
|
||||
"/users/history/",
|
||||
"/users/export/",
|
||||
"/users/import/",
|
||||
"/users/map-settings/"
|
||||
]
|
||||
},
|
||||
],
|
||||
'/developers/': [
|
||||
{
|
||||
text: "Developer guide",
|
||||
children: [
|
||||
"/developers/",
|
||||
"/developers/embed"
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Server",
|
||||
children: [
|
||||
"/developers/server/",
|
||||
"/developers/server/docker",
|
||||
"/developers/server/standalone",
|
||||
"/developers/server/config"
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Client',
|
||||
children: [
|
||||
"/developers/client/",
|
||||
"/developers/client/properties",
|
||||
"/developers/client/events",
|
||||
"/developers/client/methods",
|
||||
"/developers/client/types",
|
||||
"/developers/client/advanced"
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Leaflet components",
|
||||
children: [
|
||||
"/developers/leaflet/",
|
||||
"/developers/leaflet/bbox",
|
||||
"/developers/leaflet/layers",
|
||||
"/developers/leaflet/markers",
|
||||
"/developers/leaflet/lines",
|
||||
"/developers/leaflet/route",
|
||||
"/developers/leaflet/search",
|
||||
"/developers/leaflet/overpass",
|
||||
"/developers/leaflet/icons",
|
||||
"/developers/leaflet/hash",
|
||||
"/developers/leaflet/views",
|
||||
"/developers/leaflet/filter",
|
||||
"/developers/leaflet/click-listener"
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Frontend",
|
||||
children: [
|
||||
"/developers/frontend/",
|
||||
"/developers/frontend/facilmap"
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Development',
|
||||
children: [
|
||||
"/developers/development/dev-setup",
|
||||
"/developers/development/documentation"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}),
|
||||
plugins: [
|
||||
//checkMdPlugin,
|
||||
searchPlugin,
|
||||
]
|
||||
});
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import NavLink from '@theme/components/NavLink.vue'
|
||||
|
||||
if (typeof window !== "undefined")
|
||||
window.global = window;
|
||||
|
||||
const qrcode = require("vue-qrcode").default;
|
||||
|
||||
export default ({ Vue, options, router, siteData }) => {
|
||||
Vue.component("qrcode", qrcode);
|
||||
Vue.component("NavLink", NavLink);
|
||||
|
||||
router.addRoutes([
|
||||
{ path: '/users/hash/', redirect: '/users/share/' }
|
||||
]);
|
||||
};
|
||||
|
|
@ -22,14 +22,14 @@ The existing recordings were created using [SimpleScreenRecorder](https://www.ma
|
|||
|
||||
To embed a video into the documentation, the custom `Screencast` component can be used in Markdown:
|
||||
```jsx
|
||||
<Screencast :desktop="require('./recording.mp4')" :mobile="require('./recording-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="recordingMp4" :mobile="recordingMobileMp4"></Screencast>
|
||||
```
|
||||
|
||||
## Embed screenshots
|
||||
|
||||
Screenshots should be saved as PNG, with a size of 1024×768 pixels for desktop and 320×480 pixels for mobile. To show the desktop and mobile screenshots next to each other, use the custom `Screenshot` component in Markdown:
|
||||
```jsx
|
||||
<Screenshot :desktop="require('./screenshot.png')" :mobile="require('./screenshot-mobile.png')"></Screenshot>
|
||||
<Screenshot :desktop="screenshot.png')" :mobile="screenshot-mobile.png')"></Screenshot>
|
||||
```
|
||||
|
||||
## Docker image
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<main class="home" aria-labelledby="main-title">
|
||||
<header class="hero">
|
||||
<img :src="$withBase('./logo_f.svg')" alt="" width="280" height="280">
|
||||
<h1 id="main-title">{{$title}}</h1>
|
||||
<p class="action">
|
||||
<NavLink class="action-button" :item="{ link: '/users/', text: 'User guide →' }"/>
|
||||
<NavLink class="action-button secondary" :item="{ link: '/developers/', text: 'Developer guide →' }"/>
|
||||
</p>
|
||||
</header>
|
||||
</main>
|
||||
---
|
||||
home: true
|
||||
heroImage: ./logo_f.svg
|
||||
tagline:
|
||||
actions:
|
||||
- text: User guide →
|
||||
link: /users/
|
||||
- text: Developer guide →
|
||||
link: /developers/
|
||||
type: secondary
|
||||
---
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import markerMp4 from "@source/users/click-marker/marker.mp4";
|
||||
import markerMobileMp4 from "@source/users/click-marker/marker-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Map point information
|
||||
|
||||
By pressing a specific point on the map and holding the mouse/finger for a second, you can find out more information about that point. A temporary marker appears on the map and a [search box](../ui/#search-box) tab with information about the place is opened.
|
||||
|
|
@ -8,7 +13,7 @@ The marker and search box tab will disappear again when you click somewhere else
|
|||
|
||||
At the bottom of the search box tab, you will find a “Use as” button to [use the map point as a route destination](../route/#use-map-points-as-destinations). If a collaborative map is open, you can use the “Add to map” button to add the point as a marker to the map (which will automatically prefill some fields).
|
||||
|
||||
<Screencast :desktop="require('./marker.mp4')" :mobile="require('./marker-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="markerMp4" :mobile="markerMobileMp4"></Screencast>
|
||||
|
||||
## Share a link
|
||||
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@ Financial contributions are very much appreciated and can be sent through the fo
|
|||
|
||||
<div style="display: flex; flex-wrap: wrap">
|
||||
<a href="https://liberapay.com/facilmap/" target="_blank" style="display: flex; flex-direction: column; align-items: center">
|
||||
<ClientOnly><qrcode value="https://liberapay.com/facilmap/" :width="164"></qrcode></ClientOnly>
|
||||
<qrcode value="https://liberapay.com/facilmap/" :size="164" :margin="5" level="M" render-as="svg"></qrcode>
|
||||
Liberapay
|
||||
</a>
|
||||
<a href="https://www.paypal.com/donate?hosted_button_id=FWR59UXY6HGGS" target="_blank" style="display: flex; flex-direction: column; align-items: center">
|
||||
<ClientOnly><qrcode value="https://www.paypal.com/donate?hosted_button_id=FWR59UXY6HGGS" :width="164"></qrcode></ClientOnly>
|
||||
<ClientOnly><qrcode value="https://www.paypal.com/donate?hosted_button_id=FWR59UXY6HGGS" :size="164" :margin="5" level="M" render-as="svg"></qrcode></ClientOnly>
|
||||
PayPal
|
||||
</a>
|
||||
<a href="https://www.patreon.com/facilmap" target="_blank" style="display: flex; flex-direction: column; align-items: center">
|
||||
<ClientOnly><qrcode value="https://www.patreon.com/facilmap" :width="164"></qrcode></ClientOnly>
|
||||
<ClientOnly><qrcode value="https://www.patreon.com/facilmap" :size="164" :margin="5" level="M" render-as="svg"></qrcode></ClientOnly>
|
||||
Patreon
|
||||
</a>
|
||||
<a href="bitcoin:1PEfenaGXC9qNGQSuL5o6f6doZMYXRFiCv" style="display: flex; flex-direction: column; align-items: center">
|
||||
<ClientOnly><qrcode value="bitcoin:1PEfenaGXC9qNGQSuL5o6f6doZMYXRFiCv" :width="164"></qrcode></ClientOnly>
|
||||
<ClientOnly><qrcode value="bitcoin:1PEfenaGXC9qNGQSuL5o6f6doZMYXRFiCv" :size="164" :margin="5" level="M" render-as="svg"></qrcode></ClientOnly>
|
||||
Bitcoin
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import detailsMp4 from "@source/users/files/details.mp4";
|
||||
import detailsMobileMp4 from "@source/users/files/details-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Open geographic files
|
||||
|
||||
With FacilMap you can open geographic files (such as GPX or KML) exported by other apps/devices or by FacilMap itself.
|
||||
|
|
@ -30,7 +35,7 @@ The search box tab shows a list of all geographic objects in the opened file. Cl
|
|||
|
||||
By clicking the arrow on the right side of an object in the list, you can show some details about this object. You also have the option there to [use it as a route destination](../route/#use-map-points-as-destinations) (only for markers) or to add them to the map (only for [collaborative maps](../collaborative/)). To get back from the details, click on the blue arrow on the left of the heading.
|
||||
|
||||
<Screencast :desktop="require('./details.mp4')" :mobile="require('./details-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="detailsMp4" :mobile="detailsMobileMp4"></Screencast>
|
||||
|
||||
## Open an OpenStreetMap object
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import customImportMp4 from "@source/users/import/custom-import.mp4";
|
||||
import customImportMobileMp4 from "@source/users/import/custom-import-mobile.mp4";
|
||||
import typesMp4 from "@source/users/import/types.mp4";
|
||||
import typesMobileMp4 from "@source/users/import/types-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Import geographic files
|
||||
|
||||
FacilMap allows you to [open geographic files](../files/) such as GeoJSON, GPX and KML. When opening a file on a collaborative map, some or all of the objects that are part of the file can be imported to be persisted on the map.
|
||||
|
|
@ -18,11 +25,11 @@ When [opening a file](../files/) created by FacilMap, FacilMap will offer some a
|
|||
|
||||
The saved views in the file will be shown at the top of the file objects and the types at the bottom. You can import them into the map by simply clicking the + on the right. The + will only be shown if an identical view/type does not exist yet on the map. Note that importing views/types will always add new ones rather than updating existing ones, so you might end up with two types called “Marker” and two types called “Line”, which you will have to resolve by hand. If you are importing into an empty map, you might want to [delete the existing types](../types/#delete-a-type) before the import to avoid confusion.
|
||||
|
||||
<Screencast :desktop="require('./types.mp4')" :mobile="require('./types-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="typesMp4" :mobile="typesMobileMp4"></Screencast>
|
||||
|
||||
To import all the markers/lines, click “Select all” at the bottom and then “Add selected items to map” and “Custom type mapping…”. This will open a dialog where you can define in detail which objects should be imported as what. If you have already import the types, you can choose the existing types, otherwise an option to import them is offered.
|
||||
|
||||
<Screencast :desktop="require('./custom-import.mp4')" :mobile="require('./custom-import-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="customImportMp4" :mobile="customImportMobileMp4"></Screencast>
|
||||
|
||||
The recommended workflow to import an exported map onto a new empty map is:
|
||||
1. Delete the default “Marker” and “Line” types on the map
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import layersMp4 from "@source/users/layers/layers.mp4";
|
||||
import layersMobileMp4 from "@source/users/layers/layers-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Map styles (layers)
|
||||
|
||||
FacilMap embeds the map styles of different OpenStreetMap-based services. Different styles present geographic features in a different way and are useful for different purposes.
|
||||
|
|
@ -7,7 +12,7 @@ You can switch the style of the map by clicking on the “Map style” item in t
|
|||
2. The second section are so-called “overlays”. These are shown on top of the base layer to show additional information on the map. Multiple overlays can be shown at the same time.
|
||||
3. The third section contains some links to open the current map area on another map service (such as Google Maps). Clicking these links will open a new browser tab.
|
||||
|
||||
<Screencast :desktop="require('./layers.mp4')" :mobile="require('./layers-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="layersMp4" :mobile="layersMobileMp4"></Screencast>
|
||||
|
||||
## Base layers
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import checkboxMp4 from "@source/users/legend/checkbox.mp4";
|
||||
import checkboxMobileMp4 from "@source/users/legend/checkbox-mobile.mp4";
|
||||
import fieldsMp4 from "@source/users/legend/fields.mp4";
|
||||
import fieldsMobileMp4 from "@source/users/legend/fields-mobile.mp4";
|
||||
import filterMp4 from "@source/users/legend/filter.mp4";
|
||||
import filterMobileMp4 from "@source/users/legend/filter-mobile.mp4";
|
||||
import typeMp4 from "@source/users/legend/type.mp4";
|
||||
import typeMobileMp4 from "@source/users/legend/type-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Legend
|
||||
|
||||
A legend describes the meaning of the different styles of items. FacilMap shows the legend as a box in the bottom right of the screen on big screens and as a [search box](../ui/#search-box) tab on small screens. The legend is shown if [custom legend text](#show-custom-text) is defined or if at least one type is configured to be [shown in the legend](#show-custom-types).
|
||||
|
|
@ -16,15 +27,15 @@ When editing a [type](../types/), checking “Show in legend” will add an item
|
|||
|
||||
If the type has any style properties that are set to “Fixed”, the legend item will represent this style. Otherwise, a generic style is chosen. For example, if a marker type is configured to have its colour fixed as yellow, its shape fixed as a circle and its icon fixed as a heart, the legend item will show a yellow circle marker with a heart. But if a marker has none of its style fixed, the legend item will show a rainbox drop marker without an icon.
|
||||
|
||||
<Screencast :desktop="require('./type.mp4')" :mobile="require('./type-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="typeMp4" :mobile="typeMobileMp4"></Screencast>
|
||||
|
||||
If a type has dropdown or checkbox fields that [control the style](../types/#styles-based-on-field-values), additional legend items are shown for each dropdown option / checkbox state that indicate its style.
|
||||
|
||||
<Screencast :desktop="require('./fields.mp4')" :mobile="require('./fields-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="fieldsMp4" :mobile="fieldsMobileMp4"></Screencast>
|
||||
|
||||
For a checkbox, two items are shown that represent the checked and unchecked state and by default have the label “~~Field name~~” (strikethrough) and “Field name”. You can change the labels by editing the checkbox field.
|
||||
|
||||
<Screencast :desktop="require('./checkbox.mp4')" :mobile="require('./checkbox-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="checkboxMp4" :mobile="checkboxMobileMp4"></Screencast>
|
||||
|
||||
## Using the legend
|
||||
|
||||
|
|
@ -32,4 +43,4 @@ Sometimes icons on legend items can be small to see. By hovering over a legend i
|
|||
|
||||
You can click individual items or headings in the legend to hide/show items of this type on the map. Internally, this sets a [filter](../filter/), so it is not persisted on the map and does not affect what other users are seeing, it only temporarily adjusts what you see on the map (unless you persist it as part of a [saved view](../views/)).
|
||||
|
||||
<Screencast :desktop="require('./filter.mp4')" :mobile="require('./filter-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="filterMp4" :mobile="filterMobileMp4"></Screencast>
|
||||
|
|
@ -1,3 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import addResultMp4 from "@source/users/lines/add-result.mp4";
|
||||
import addResultMobileMp4 from "@source/users/lines/add-result-mobile.mp4";
|
||||
import addResultsMp4 from "@source/users/lines/add-results.mp4";
|
||||
import addResultsMobileMp4 from "@source/users/lines/add-results-mobile.mp4";
|
||||
import addRouteMp4 from "@source/users/lines/add-route.mp4";
|
||||
import addRouteMobileMp4 from "@source/users/lines/add-route-mobile.mp4";
|
||||
import dragMp4 from "@source/users/lines/drag.mp4";
|
||||
import dragMobileMp4 from "@source/users/lines/drag-mobile.mp4";
|
||||
import drawMp4 from "@source/users/lines/draw.mp4";
|
||||
import drawMobileMp4 from "@source/users/lines/draw-mobile.mp4";
|
||||
import editDetailsMp4 from "@source/users/lines/edit-details.mp4";
|
||||
import editDetailsMobileMp4 from "@source/users/lines/edit-details-mobile.mp4";
|
||||
import removeMp4 from "@source/users/lines/remove.mp4";
|
||||
import removeMobileMp4 from "@source/users/lines/remove-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Lines
|
||||
|
||||
A line is a connection of two or more points on the map and has a name, a certain style (width, colour) and some data (such as a description). It can be a straight line or a calculated route, depending on its route mode. When you add a line to a map, it is permanently saved there and visible for anyone who is viewing the map.
|
||||
|
|
@ -10,7 +27,7 @@ One way to add a line to a map is to draw it on the map. In the [toolbox](../ui/
|
|||
|
||||
When you draw lines, they will always connect their line points using straight lines. You can, however, choose a route mode later in the [line details](#edit-line-details). This means that the line points that you added will become route destinations.
|
||||
|
||||
<Screencast :desktop="require('./draw.mp4')" :mobile="require('./draw-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="drawMp4" :mobile="drawMobileMp4"></Screencast>
|
||||
|
||||
After saving the line, it will be called “Untitled line”, will have the default style and no description. As a next step, you might want to [edit the line details](#edit-line-details) to give it a name and change its style.
|
||||
|
||||
|
|
@ -20,7 +37,7 @@ Another way to add a line to the map is to calculate a [route](../route/) first
|
|||
|
||||
On the map, the route will still look the same, but it is now saved as a line, as you can see from the fact that a new search box tab appeared for the line details, and the line is not draggable anymore.
|
||||
|
||||
<Screencast :desktop="require('./add-route.mp4')" :mobile="require('./add-route-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="addRouteMp4" :mobile="addRouteMobileMp4"></Screencast>
|
||||
|
||||
## Add a search result as a line
|
||||
|
||||
|
|
@ -28,11 +45,11 @@ Some [search results](../search/) are line or polygons (for example when the res
|
|||
|
||||
In the search box tab of the search result, click on “Add to map” and then “Line”. The line will be created with the name of the result. If the line is a [custom type](../types/), a mapping from the result info to the line data is attempted, for example if the line has a field “Address”, it will be filled with the address of the result.
|
||||
|
||||
<Screencast :desktop="require('./add-result.mp4')" :mobile="require('./add-result-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="addResultMp4" :mobile="addResultMobileMp4"></Screencast>
|
||||
|
||||
You can also add multiple results at once. In the search form, select multiple items by using the “Select all” button or clicking individual items while holding the Ctrl key. Then click “Add selected items to map” and then “Line/polygon items as Line”. (Those selected results that are markers and not lines/polygons will not be added.)
|
||||
|
||||
<Screencast :desktop="require('./add-results.mp4')" :mobile="require('./add-results-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="addResultsMp4" :mobile="addResultsMobileMp4"></Screencast>
|
||||
|
||||
## Show line details
|
||||
|
||||
|
|
@ -49,18 +66,18 @@ To edit the details of a line, select the line and then click “Edit data” in
|
|||
|
||||
Click “Save” to save your changes.
|
||||
|
||||
<Screencast :desktop="require('./edit-details.mp4')" :mobile="require('./edit-details-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="editDetailsMp4" :mobile="editDetailsMobileMp4"></Screencast>
|
||||
|
||||
## Edit line points
|
||||
|
||||
To change the course or the position of a line, select the line and then click “Edit waypoints” in its [search box](../ui/#search-box) tab. A message will appear on the top right of the screen and the tab will turn into a search form and the line will become draggable. You can now change the line in the same way that you would [change a route](../route/#drag-a-route), by changing the route destinations in the form or by dragging the line. When you are finished, click the “Finish” button in the message.
|
||||
|
||||
<Screencast :desktop="require('./drag.mp4')" :mobile="require('./drag-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="dragMp4" :mobile="dragMobileMp4"></Screencast>
|
||||
|
||||
## Remove a line
|
||||
|
||||
To remove a line from the map, select the line, click “Remove” and confirm the alert box. Note that removed lines will remain in the [edit history](../history/) of the map and can be seen and restored there by admins.
|
||||
|
||||
<Screencast :desktop="require('./remove.mp4')" :mobile="require('./remove-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="removeMp4" :mobile="removeMobileMp4"></Screencast>
|
||||
|
||||
You can also remove multiple lines at once by [handling multiple objects](../multiple/).
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import locateMp4 from "@source/users/locate/locate.mp4";
|
||||
import locateMobileMp4 from "@source/users/locate/locate-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Show your location
|
||||
|
||||
By clicking the crosshair icon on the top left of the screen (under the zoom buttons), FacilMap will attempt to zoom to your location on the map.
|
||||
|
|
@ -13,4 +18,4 @@ Clicking the cross-hair icon will enable the orange mode. As soon as you move th
|
|||
|
||||
Your location will be indicated as a blue circle with a blue dot at the center. Your location may be anywhere within the circle, it is not necessarily at its centre. If the circle is very small, it means that your browser could determine your location very accurately. If the circle is very big, it means that your browser had trouble to make an accurate guess about your location, and you may be anywhere within the circle.
|
||||
|
||||
<Screencast :desktop="require('./locate.mp4')" :mobile="require('./locate-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="locateMp4" :mobile="locateMobileMp4"></Screencast>
|
||||
|
|
@ -1,3 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import addMp4 from "@source/users/markers/add.mp4";
|
||||
import addMobileMp4 from "@source/users/markers/add-mobile.mp4";
|
||||
import addResultMp4 from "@source/users/markers/add-result.mp4";
|
||||
import addResultMobileMp4 from "@source/users/markers/add-result-mobile.mp4";
|
||||
import addResultsMp4 from "@source/users/markers/add-results.mp4";
|
||||
import addResultsMobileMp4 from "@source/users/markers/add-results-mobile.mp4";
|
||||
import moveMp4 from "@source/users/markers/move.mp4";
|
||||
import moveMobileMp4 from "@source/users/markers/move-mobile.mp4";
|
||||
import removeMp4 from "@source/users/markers/remove.mp4";
|
||||
import removeMobileMp4 from "@source/users/markers/remove-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Markers
|
||||
|
||||
A marker is a point on the map that has a name, a certain style (shape, icon, size, colour) and some data (such as a description). When you add a marker to a map, it is permanently saved there and visible for anyone who is viewing the map.
|
||||
|
|
@ -8,7 +21,7 @@ By default, a collaborative map has one type of marker called “Marker” that
|
|||
|
||||
To add a marker, click on “Add” in the [toolbox](../ui/#toolbox) and then “Marker”. A message will appear that asks you to click on the map to add a marker, along with a “Cancel” button to cancel the operation. Once you click somewhere on the map, a marker is added there and a [search box](../ui/#search-box) tab opens with information about the marker.
|
||||
|
||||
<Screencast :desktop="require('./add.mp4')" :mobile="require('./add-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="addMp4" :mobile="addMobileMp4"></Screencast>
|
||||
|
||||
The new marker is called “Untitled marker”, has the default style and no description. As a next step, you might want to [edit the marker details](#edit-marker-details) to give it a name and change its style.
|
||||
|
||||
|
|
@ -18,11 +31,11 @@ An alternative way to add a marker is to add a [search result](../search/), a [P
|
|||
|
||||
In the search box tab of that object, click on “Add to map” and then “Marker”. The marker will be created with the name of the result. If the marker is a [custom type](../types/), a mapping from the result info to the marker data is attempted, for example if the marker has a field “Address”, it will be filled with the address of the result.
|
||||
|
||||
<Screencast :desktop="require('./add-result.mp4')" :mobile="require('./add-result-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="addResultMp4" :mobile="addResultMobileMp4"></Screencast>
|
||||
|
||||
You can also add multiple results at once. In the search form, select multiple items by using the “Select all” button or clicking individual items while holding the Ctrl key. Then click “Add selected items to map” and then “Marker items as Marker”. (In case of an opened geographic file, some of the selected items may be polygons or polylines, these will not be added, as they are not “Marker items”.)
|
||||
|
||||
<Screencast :desktop="require('./add-results.mp4')" :mobile="require('./add-results-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="addResultsMp4" :mobile="addResultsMobileMp4"></Screencast>
|
||||
|
||||
## Show marker details
|
||||
|
||||
|
|
@ -44,12 +57,12 @@ Click “Save” to save your changes.
|
|||
|
||||
To change the position of a marker, select the marker and then click “Move” in its [search box](../ui/#search-box) tab. A message will appear at the top right of the screen. Now drag the marker to the desired position, and once you are done, click “Finish” in the message. To keep it at its old position, cancel the operation by clicking “Cancel”.
|
||||
|
||||
<Screencast :desktop="require('./move.mp4')" :mobile="require('./move-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="moveMp4" :mobile="moveMobileMp4"></Screencast>
|
||||
|
||||
## Remove a marker
|
||||
|
||||
To remove a marker from the map, select the marker, click “Remove” and confirm the alert box. Note that removed markers will remain in the [edit history](../history/) of the map and can be seen and restored there by admins.
|
||||
|
||||
<Screencast :desktop="require('./remove.mp4')" :mobile="require('./remove-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="removeMp4" :mobile="removeMobileMp4"></Screencast>
|
||||
|
||||
You can also remove multiple markers at once by [handling multiple objects](../multiple/).
|
||||
|
|
@ -1,3 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import metadataMp4 from "@source/users/pois/metadata.mp4";
|
||||
import metadataMobileMp4 from "@source/users/pois/metadata-mobile.mp4";
|
||||
import poisMp4 from "@source/users/pois/pois.mp4";
|
||||
import poisMobileMp4 from "@source/users/pois/pois-mobile.mp4";
|
||||
import zoomMp4 from "@source/users/pois/zoom.mp4";
|
||||
import zoomMobileMp4 from "@source/users/pois/zoom-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# POIs
|
||||
|
||||
Using the “POIs” menu in the [search box](../ui/#search-box), you can find amenities and points of interest (POIs) on the map. You can use it for example to show all post boxes, parking places, supermarkets or bus stops in an area.
|
||||
|
|
@ -6,14 +15,14 @@ Choose a category of POIs and then check some of the POI types to show them on t
|
|||
|
||||
When one or more checkboxes are checked, the POIs of this type are shown as black square markers on the map. Only the POIs in the current map view are loaded, so only when you move to a particular area on the map, the POIs for that area are loaded. A maximum of 50 POIs are loaded. If the current area of the map contains more than 50 POIs of the selected type, a yellow message will be shown on the top of the map (see more details [below](#zoom-limitations)). In that case none or only some of the available POIs are shown. Zoom in further to get a complete overview of POIs.
|
||||
|
||||
<Screencast :desktop="require('./pois.mp4')" :mobile="require('./pois-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="poisMp4" :mobile="poisMobileMp4"></Screencast>
|
||||
|
||||
|
||||
## Show details
|
||||
|
||||
Clicking on a POI marker will open an additional search box tab with some metadata, such as opening hours, access restrictions and contact details. The metadata tab can be closed by clicking on the X or clicking somewhere else on the map.
|
||||
|
||||
<Screencast :desktop="require('./metadata.mp4')" :mobile="require('./metadata-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="metadataMp4" :mobile="metadataMobileMp4"></Screencast>
|
||||
|
||||
|
||||
## Zoom limitations
|
||||
|
|
@ -22,7 +31,7 @@ To avoid overloading the server or your browser, a maximum of 50 POIs are shown
|
|||
* “Zoom in to show POIs.” – This is shown when you are zoomed out so far that the server took more than 2 seconds to look for POIs. To avoid overloading the server, the request was canceled and no POIs are shown.
|
||||
* “Not all POIs are shown because there are too many results. Zoom in to show all results.” – This means that the server found more than 50 POIs. To save resources, only the first 50 POIs found are shown on the map. This means that the results shown are not all that exist. To get a complete overview of the existing POIs, zoom in further.
|
||||
|
||||
<Screencast :desktop="require('./zoom.mp4')" :mobile="require('./zoom-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="zoomMp4" :mobile="zoomMobileMp4"></Screencast>
|
||||
|
||||
|
||||
## Share a link
|
||||
|
|
|
|||
|
|
@ -1,10 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import additionalMp4 from "@source/users/route/additional.mp4";
|
||||
import additionalMobileMp4 from "@source/users/route/additional-mobile.mp4";
|
||||
import clickMarkerMp4 from "@source/users/route/click-marker.mp4";
|
||||
import clickMarkerMobileMp4 from "@source/users/route/click-marker-mobile.mp4";
|
||||
import dragMp4 from "@source/users/route/drag.mp4";
|
||||
import dragMobileMp4 from "@source/users/route/drag-mobile.mp4";
|
||||
import elevationMp4 from "@source/users/route/elevation.mp4";
|
||||
import elevationMobileMp4 from "@source/users/route/elevation-mobile.mp4";
|
||||
import modeMp4 from "@source/users/route/mode.mp4";
|
||||
import modeMobileMp4 from "@source/users/route/mode-mobile.mp4";
|
||||
import queryMp4 from "@source/users/route/query.mp4";
|
||||
import queryMobileMp4 from "@source/users/route/query-mobile.mp4";
|
||||
import routeMp4 from "@source/users/route/route.mp4";
|
||||
import routeMobileMp4 from "@source/users/route/route-mobile.mp4";
|
||||
import suggestionsMp4 from "@source/users/route/suggestions.mp4";
|
||||
import suggestionsMobileMp4 from "@source/users/route/suggestions-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Calculate a route
|
||||
|
||||
FacilMap can calculate the shortest or fastest way to get from one point for another. To calculate a route, open the “Route” tab of the [search box](../ui/#search-box), enter a start and a destination, and press “Go!”.
|
||||
|
||||
The route will show up in blue on the map, and information about the distance and duration are shown at the bottom of the route form. The start of the route will be indicated with a green marker and its destination with a red marker. If there are intermediate destinations (see [Add additional destinations](#add-additional-destinations)), these will have yellow markers.
|
||||
|
||||
<Screencast :desktop="require('./route.mp4')" :mobile="require('./route-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="routeMp4" :mobile="routeMobileMp4"></Screencast>
|
||||
|
||||
## Pick destinations
|
||||
|
||||
|
|
@ -14,7 +33,7 @@ In each destination field, you have the option to type one of the following:
|
|||
|
||||
If there are multiple places with the same name that you have typed in, FacilMap will choose the first match. You can change the match by clicking on the dropdown button to the right of the destination. If you are unsure which suggestion is the right one, hovering one will show a temporary yellow marker in its place, and clicking the zoom icon on its left will zoom the map to it.
|
||||
|
||||
<Screencast :desktop="require('./suggestions.mp4')" :mobile="require('./suggestions-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="suggestionsMp4" :mobile="suggestionsMobileMp4"></Screencast>
|
||||
|
||||
## Add additional destinations
|
||||
|
||||
|
|
@ -22,7 +41,7 @@ You can add additional destinations, for example if you want to calculate a rout
|
|||
|
||||
To add an additional destination, click on the plus icon in the bottom left of the route form. To remove a destination, click on the minus icon on the right of the destination. You can rearrange the destinations by dragging the up/down arrow icon on the left of a destination.
|
||||
|
||||
<Screencast :desktop="require('./additional.mp4')" :mobile="require('./additional-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="additionalMp4" :mobile="additionalMobileMp4"></Screencast>
|
||||
|
||||
## Use map points as destinations
|
||||
|
||||
|
|
@ -30,7 +49,7 @@ If you would like to use a specific point on the map as a route destination, you
|
|||
|
||||
You can also use [search results](../search/#show-result-details), [POIs](../pois/#show-details), [points from an opened file](../files/#show-details) and [markers](../markers/) (on a [collaborative map](../collaborative/)) as route destinations through their own “Use as” menu.
|
||||
|
||||
<Screencast :desktop="require('./click-marker.mp4')" :mobile="require('./click-marker-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="clickMarkerMp4" :mobile="clickMarkerMobileMp4"></Screencast>
|
||||
|
||||
## Drag a route
|
||||
|
||||
|
|
@ -42,7 +61,7 @@ As an alternative to changing the destinations in the route form, you can also d
|
|||
|
||||
To make it more clear which part of the route you are dragging, when you hover a destination field or its corresponding marker, both get a dark outline. When hovering a part of the route, a dashed line appears in the route form that indicates where a destination would be inserted if you started dragging the route here.
|
||||
|
||||
<Screencast :desktop="require('./drag.mp4')" :mobile="require('./drag-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="dragMp4" :mobile="dragMobileMp4"></Screencast>
|
||||
|
||||
## Route modes
|
||||
|
||||
|
|
@ -52,7 +71,7 @@ Clicking the cog icon opens a menu where some more specific route modes (for exa
|
|||
|
||||
For simple driving, cycling or walking, FacilMap uses [Mapbox](https://docs.mapbox.com/api/navigation/directions/) (based on [OSRM](https://www.project-osrm.org/)) to calculate routes. If any advanced settings from the dropdown menu are selected, [OpenRouteService](https://openrouteservice.org/) is used. Mapbox is faster, but OpenRouteService provides more options. If one of the two services doesn’t work properly, it might be worth changing the route mode to make FacilMap use the other.
|
||||
|
||||
<Screencast :desktop="require('./mode.mp4')" :mobile="require('./mode-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="modeMp4" :mobile="modeMobileMp4"></Screencast>
|
||||
|
||||
## Elevation profile
|
||||
|
||||
|
|
@ -64,13 +83,13 @@ An elevation graph is shown under the route information. Hovering the elevation
|
|||
|
||||
By default, the elevation graph also highlights different road surfaces (asphalt, gravel, ...) in different colours. Hover “Legend” in the bottom left of the graph to see what the different colours mean, or hover a specific point on the graph to see more details. You can use the arrows on the bottom right of the graph to switch the highlighting from road surfaces to waytypes (road, track, path, ...), steepness or toll roads (only for car routing).
|
||||
|
||||
<Screencast :desktop="require('./elevation.mp4')" :mobile="require('./elevation-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="elevationMp4" :mobile="elevationMobileMp4"></Screencast>
|
||||
|
||||
## Use a route query
|
||||
|
||||
You can type a route description in the shape of `A to B` into the search form. This will automatically switch to the routing form with the specified destinations.
|
||||
|
||||
<Screencast :desktop="require('./query.mp4')" :mobile="require('./query-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="queryMp4" :mobile="queryMobileMp4"></Screencast>
|
||||
|
||||
If you have [configured FacilMap as a search engine](../search/#configure-a-browser-search-engine) in your browser, this can be a useful shortcut to calculate a route by typing something like `facilmap.org Berlin to Hamburg` or `fm Berlin to Hamburg` into the address bar of your browser (depending which keyword you have configured).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import detailsMp4 from "@source/users/search/details.mp4";
|
||||
import detailsMobileMp4 from "@source/users/search/details-mobile.mp4";
|
||||
import searchMp4 from "@source/users/search/search.mp4";
|
||||
import searchMobileMp4 from "@source/users/search/search-mobile.mp4";
|
||||
import zoomMp4 from "@source/users/search/zoom.mp4";
|
||||
import zoomMobileMp4 from "@source/users/search/zoom-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Search for places
|
||||
|
||||
The “Search” tab of the search box provides a simple form to search for addresses, amenities and geographic features. See [UI elements](../ui/#search-box) for an introduction how to use the search box.
|
||||
|
||||
When typing a query into the search field and hitting the search button, a list of results is shown in the search form. Each result corresponds to a black marker and/or a blue shape on the map. The markers/shapes on the map are only temporary, when clearing the search form by clicking the X or when searching for something else, they will disappear again. Clicking a result in the list will zoom to that result (unless the [zoom settings](#zoom-settings) have been changed), and clicking a result marker/shape on the map will highlight that result in the list of results.
|
||||
|
||||
<Screencast :desktop="require('./search.mp4')" :mobile="require('./search-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="searchMp4" :mobile="searchMobileMp4"></Screencast>
|
||||
|
||||
A variety of different queries can be typed into the search field:
|
||||
* Typing an address or the name of a place will [search for that place](#search-for-a-place).
|
||||
|
|
@ -54,7 +63,7 @@ A URL generated by the “Share” functionality of OpenStreetMap can also be pa
|
|||
|
||||
Clicking on the right arrow next to a search result will open some details about this result. You can navigate back to the list of results by clicking the left arrow next to the heading.
|
||||
|
||||
<Screencast :desktop="require('./details.mp4')" :mobile="require('./details-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="detailsMp4" :mobile="detailsMobileMp4"></Screencast>
|
||||
|
||||
## Configure a browser search engine
|
||||
|
||||
|
|
@ -78,7 +87,7 @@ You can change the zoom behaviour by adjusting the search settings under the dro
|
|||
|
||||
The zoom settings are persisted in your browser (using local storage), so next time you open FacilMap the settings will still be the same.
|
||||
|
||||
<Screencast :desktop="require('./zoom.mp4')" :mobile="require('./zoom-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="zoomMp4" :mobile="zoomMobileMp4"></Screencast>
|
||||
|
||||
## Share a link
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import dropdownMp4 from "@source/users/types/dropdown.mp4";
|
||||
import dropdownMobileMp4 from "@source/users/types/dropdown-mobile.mp4";
|
||||
import fieldMp4 from "@source/users/types/field.mp4";
|
||||
import fieldMobileMp4 from "@source/users/types/field-mobile.mp4";
|
||||
import fieldStyleMp4 from "@source/users/types/field-style.mp4";
|
||||
import fieldStyleMobileMp4 from "@source/users/types/field-style-mobile.mp4";
|
||||
import stylesMp4 from "@source/users/types/styles.mp4";
|
||||
import stylesMobileMp4 from "@source/users/types/styles-mobile.mp4";
|
||||
import switchTypeMp4 from "@source/users/types/switch-type.mp4";
|
||||
import switchTypeMobileMp4 from "@source/users/types/switch-type-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# Custom types
|
||||
|
||||
By default, a collaborative map has two object types, “Marker” and “Line”. Their styles are freely adjustable and they have one description field. FacilMap allows you to define custom types in addition or in place of the two default types. While geographically, custom types are the same as the default type, they allow you to do the following:
|
||||
|
|
@ -22,7 +35,7 @@ Using custom types, you can change these defaults. You can also make some or all
|
|||
|
||||
Change the default styles by editing the type and adjusting the “Default …” fields. Each field has a “Fixed” checkbox next to it. If that checkbox is checked, this value cannot be adjusted for an individual object of this type and the field will not be shown when editing its data. If the checkbox is unchecked, the value can still be adjustd and what you configure here will only be the initial value.
|
||||
|
||||
<Screencast :desktop="require('./styles.mp4')" :mobile="require('./styles-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="stylesMp4" :mobile="stylesMobileMp4"></Screencast>
|
||||
|
||||
## Show in legend
|
||||
|
||||
|
|
@ -43,7 +56,7 @@ To create a field, edit the type and click the + icon at the bottom of the field
|
|||
|
||||
You can rearrange the order of the fields by dragging the up/down arrow icon on the right.
|
||||
|
||||
<Screencast :desktop="require('./field.mp4')" :mobile="require('./field-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="fieldMp4" :mobile="fieldMobileMp4"></Screencast>
|
||||
|
||||
### Dropdown fields
|
||||
|
||||
|
|
@ -51,7 +64,7 @@ When you create a dropdown field, you need to specify its options by using the
|
|||
|
||||
To add dropdown options, edit the dropdown and click the + icon under the option list. You can drag the up/down arrows on the right to rearrange the options. Two options of the same dropdown cannot have the same value.
|
||||
|
||||
<Screencast :desktop="require('./dropdown.mp4')" :mobile="require('./dropdown-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="dropdownMp4" :mobile="dropdownMobileMp4"></Screencast>
|
||||
|
||||
## Change a field
|
||||
|
||||
|
|
@ -78,7 +91,7 @@ Click the “Edit” button next to the field type and check one or more of the
|
|||
|
||||
Note that when one field is controlling a style property, no other field can control that property and no default value can be defined for it anymore (those fields will be disabled). Also, the property cannot be adjusted for an individual object anymore. For example, when a dropdown field controls the colour, when editing the marker, no colour field is shown. The colour of the marker can only be changed by selecting an option from the dropdown field.
|
||||
|
||||
<Screencast :desktop="require('./field-style.mp4')" :mobile="require('./field-style-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="fieldStyleMp4" :mobile="fieldStyleMobileMp4"></Screencast>
|
||||
|
||||
## Change the type of an object
|
||||
|
||||
|
|
@ -86,7 +99,7 @@ If you have multiple marker types or multiple line types, you can change the typ
|
|||
|
||||
Note that objects keep their data internally when you change the type to one that doesn’t have the same fields. If you change the type back later, the values will still be there.
|
||||
|
||||
<Screencast :desktop="require('./switch-type.mp4')" :mobile="require('./switch-type-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="switchTypeMp4" :mobile="switchTypeMobileMp4"></Screencast>
|
||||
|
||||
## Delete a type
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import uiPng from "@source/users/ui/ui.png";
|
||||
import uiMobilePng from "@source/users/ui/ui-mobile.png";
|
||||
import searchboxMp4 from "@source/users/ui/searchbox.mp4";
|
||||
import searchboxMobileMp4 from "@source/users/ui/searchbox-mobile.mp4";
|
||||
import toolboxMp4 from "@source/users/ui/toolbox.mp4";
|
||||
import toolboxMobileMp4 from "@source/users/ui/toolbox-mobile.mp4";
|
||||
</script>
|
||||
|
||||
# UI elements
|
||||
|
||||
When opening FacilMap, you can see the following elements on your screen:
|
||||
|
||||
<Screenshot :desktop="require('./ui.png')" :mobile="require('./ui-mobile.png')"></Screenshot>
|
||||
<Screenshot :desktop="uiPng" :mobile="uiMobilePng"></Screenshot>
|
||||
|
||||
1. The locate button. See [Show your location](../locate/).
|
||||
2. The [zoom buttons](#zoom-buttons)
|
||||
|
|
@ -23,7 +32,7 @@ On top of the search box, you can click the different tabs to switch between dif
|
|||
On big screens, you can drag the resize handle on the bottom right of the search box to resize it. Click the resize handle to bring it back to its original size.\
|
||||
On small screens, the search box appears at the bottom of the screen. You can drag it into and out of view as it fits by dragging the tab bar on top of the search box.
|
||||
|
||||
<Screencast :desktop="require('./searchbox.mp4')" :mobile="require('./searchbox-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="searchboxMp4" :mobile="searchboxMobileMp4"></Screencast>
|
||||
|
||||
## Toolbox
|
||||
|
||||
|
|
@ -31,4 +40,4 @@ The toolbox offers a variety of actions organized into different dropdown menus.
|
|||
|
||||
On small screens, the toolbox hides behind the menu button on the top right of the screen. Once the toolbox has been opened, it can be closed by swiping it out of the screen, by clicking the X, or by clicking in the empty space to the left of it.
|
||||
|
||||
<Screencast :desktop="require('./toolbox.mp4')" :mobile="require('./toolbox-mobile.mp4')"></Screencast>
|
||||
<Screencast :desktop="toolboxMp4" :mobile="toolboxMobileMp4"></Screencast>
|
||||
12256
docs/yarn.lock
12256
docs/yarn.lock
Plik diff jest za duży
Load Diff
Ładowanie…
Reference in New Issue