Studio: Add introductory slideshow to Studio
This commit is contained in:
parent
b7a88ced70
commit
0d25a7fa7b
11 changed files with 359 additions and 2 deletions
116
Docs/Studio/Introduction.md
Normal file
116
Docs/Studio/Introduction.md
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
# Welcome to MapComplete Studio
|
||||
|
||||
Hi!
|
||||
|
||||
Welcome to MapComplete Studio.
|
||||
|
||||
These slides will walk you through the most important concepts to use MapComplete Studio effectively
|
||||
|
||||
# What is OpenStreetMap?
|
||||
|
||||
[OpenStreetMap](https://openstreetmap.org) is a worldwide, collaborative project where we map the world together.
|
||||
|
||||
People worldwide do add data about features around the world, such as streets, shops, toilets, infrastructure, ...
|
||||
|
||||
All type of objects are welcome to be added into OpenStreetMap, as long as:
|
||||
|
||||
1. *The object can be verified on the ground and is present*
|
||||
2. *The object is permanent*
|
||||
|
||||
<img src="../../assets/svg/osm-logo.svg" class="h-48"/>
|
||||
|
||||
The following items are thus *not* welcome: events such as a festival, measurements of e.g. air quality or historic data are *not* welcome.
|
||||
Have a look at [Sensor.Community](https://sensor.community/) or to [OpenHistoricalMap](https://www.openhistoricalmap.org/) instead.
|
||||
|
||||
# How can OpenStreetMap data be reused?
|
||||
|
||||
OpenStreetMap data can be reused freely, including for commercial purposes. However, you have to:
|
||||
|
||||
1. Give attribution
|
||||
2. Keep the data open - changes to data based on OpenStreetMap must be published under the same license.
|
||||
|
||||
You can read the [full copyright notice here](https://osm.org/copyright)
|
||||
|
||||
This also means that we are *not* allowed to copy data from other maps. Do not enter data based on Google Maps!
|
||||
|
||||
# How does OpenStreetMap organise the data?
|
||||
|
||||
In OpenStreetMap, the geodata can be one of three types:
|
||||
|
||||
- **Points** which have a geocoordinate
|
||||
- **Lines** which are a _list_ of points. Closed lines are used to represent polygons
|
||||
- **Relations** which are a _list_ of points, lines and/or other relations.
|
||||
|
||||
All of those objects have a set of **attributes**. These are pairs of a **key** and a **value** which tell us what a point or line does represent. For example, `amenity=bench` represents a sitting bench.
|
||||
|
||||
You can find the meaning of all those keys and values on the [OpenStreetMap-wiki](https://wiki.openstreetmap.org/)
|
||||
|
||||
|
||||
<img src="../../public/assets/docs/NodesAndLines.svg" class="mt-8">
|
||||
|
||||
# OpenStreetMap does **not** have layers
|
||||
|
||||
Many traditional GIS-applications organise the data into layers.
|
||||
|
||||
OpenStreetMap does not do this. Consider this shop:
|
||||
|
||||
|
||||
|
||||
This place has three functions:
|
||||
|
||||
- It is a shop, selling boardgames
|
||||
- It is a café, where one can drink a tea (while testing one of the board games)
|
||||
- It is a social inclusion project for people with a mental disability
|
||||
|
||||
In a traditional system with layers, one would either have to choose the most fitting layer (e.g. the layer `pub`, `shops` or `social facility`? ) losing the multi-facetted aspect of the place.
|
||||
Another approach could be to add it to all three layers, duplicating the data. However, this makes maintaining the data harder.
|
||||
|
||||
# What is MapComplete?
|
||||
|
||||
MapComplete is a map viewer and editor. A contributor is presented a *thematic map* with features that are relevant to this topic.
|
||||
|
||||
These features are based on OpenStreetMap. If some data is not known, the user will be asked some **questions** and is invited to answer them. These answers are sent back to OpenStreetMap, updating it there.
|
||||
|
||||
<img src="../../public/assets/docs/UIExample.png" class="w-1/2"/>
|
||||
|
||||
Data can also be loaded and visualised from external sources. No changes can be made to the data in that case.
|
||||
|
||||
|
||||
|
||||
# MapComplete _does_ have layers
|
||||
|
||||
A layer in mapcomplete describes a single type of object, e.g. _shops_, _toilets_, _benches_, _public bookcases_.
|
||||
|
||||
A layer tells us:
|
||||
|
||||
- What features to load from OpenStreetMap - thus what attributes the displayed data should have
|
||||
- (Or where to find the data if we are using an external datasource)
|
||||
- How these should be displayed on the map
|
||||
- What should be shown in the popup...
|
||||
- ... and what questions should be asked
|
||||
- How to create a _new point_ onto the map
|
||||
|
||||
# MapComplete does have themes
|
||||
|
||||
A _theme_ is a **collection of layers**, with a title and a description.
|
||||
|
||||
For example, [cyclofix](https://mapcomplete.org/cyclofix) has many bicycle-related layers (of which items are shown on the map) and an introduction.
|
||||
|
||||
<div class="flex mt-8">
|
||||
<img src="../../public/assets/docs/CyclofixMap.png">
|
||||
<img src="../../public/assets/docs/CyclofixIntro.png">
|
||||
<img src="../../public/assets/docs/CyclofixLayers.png">
|
||||
</div>
|
||||
|
||||
|
||||
# Studio
|
||||
|
||||
In MapComplete Studio, you can create and edit layers and themes to tweak it for your needs.
|
||||
|
||||
As a reminder:
|
||||
|
||||
- [OpenStreetMap](https://openstreetmap.org) is an open, geographical database which can be reused under [a permissive license](https://openstreetmap.org/copyright)
|
||||
- MapComplete visualises data (mostly) from OpenStreetMap and can add new points and attributes to OpenStreetMap
|
||||
- MapComplete works with layers; which can be bundled into a theme
|
||||
|
||||
Have fun creating your custom MapComplete-map!
|
||||
BIN
public/assets/docs/CyclofixIntro.png
Normal file
BIN
public/assets/docs/CyclofixIntro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
public/assets/docs/CyclofixLayers.png
Normal file
BIN
public/assets/docs/CyclofixLayers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
public/assets/docs/CyclofixMap.png
Normal file
BIN
public/assets/docs/CyclofixMap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 KiB |
151
public/assets/docs/NodesAndLines.svg
Normal file
151
public/assets/docs/NodesAndLines.svg
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="220.00101mm"
|
||||
height="45.566071mm"
|
||||
viewBox="0 0 220.001 45.566072"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
||||
sodipodi:docname="NodesAndLines.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:pageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.1208049"
|
||||
inkscape:cx="570.12597"
|
||||
inkscape:cy="16.505994"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="995"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2">
|
||||
<rect
|
||||
x="312.03925"
|
||||
y="291.13016"
|
||||
width="463.35043"
|
||||
height="200.43016"
|
||||
id="rect3644" />
|
||||
<rect
|
||||
x="312.03925"
|
||||
y="291.13016"
|
||||
width="463.35043"
|
||||
height="200.43016"
|
||||
id="rect3644-6" />
|
||||
<rect
|
||||
x="312.03925"
|
||||
y="291.13016"
|
||||
width="463.35043"
|
||||
height="200.43016"
|
||||
id="rect3644-4" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(3.275224,-190.14239)">
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:0.747356;stroke-width:0.264583;stroke-opacity:0.503144"
|
||||
id="path846"
|
||||
cx="155.23045"
|
||||
cy="200.73116"
|
||||
r="3.4037676" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,78.602949,114.21329)"
|
||||
id="text3642"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:24px;line-height:1.05;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect3644);fill:#000000;fill-opacity:0.747356;stroke-opacity:0.503144"><tspan
|
||||
x="312.03906"
|
||||
y="309.96523"
|
||||
id="tspan27475">amenity=bench
|
||||
</tspan><tspan
|
||||
x="312.03906"
|
||||
y="335.16525"
|
||||
id="tspan27477">backrest=yes
|
||||
</tspan><tspan
|
||||
x="312.03906"
|
||||
y="360.36526"
|
||||
id="tspan27479">material=wood
|
||||
</tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,2.4768353,112.99054)"
|
||||
id="text3642-6"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:18.6667px;line-height:1.05;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect3644-6);fill:#000000;fill-opacity:0.747356;stroke-opacity:0.503144"><tspan
|
||||
x="312.03906"
|
||||
y="305.77984"
|
||||
id="tspan27481">highway=path
|
||||
</tspan><tspan
|
||||
x="312.03906"
|
||||
y="325.37988"
|
||||
id="tspan27483">surface=ground
|
||||
</tspan><tspan
|
||||
x="312.03906"
|
||||
y="344.97992"
|
||||
id="tspan27485">
|
||||
</tspan></text>
|
||||
<g
|
||||
id="g19865"
|
||||
transform="rotate(84.297077,64.79351,209.1754)">
|
||||
<path
|
||||
style="fill:none;fill-opacity:0.747356;stroke:#000000;stroke-width:1.32292;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 86.700218,145.8218 -36.849626,62.33481 28.836665,43.62417 -35.409216,20.64427"
|
||||
id="path10150"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<g
|
||||
id="g19857">
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:0.747356;stroke-width:0.264583;stroke-opacity:0.503144"
|
||||
id="path846-9"
|
||||
cx="43.050552"
|
||||
cy="271.99066"
|
||||
r="3.4037676" />
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:0.747356;stroke-width:0.264583;stroke-opacity:0.503144"
|
||||
id="path846-3"
|
||||
cx="86.536469"
|
||||
cy="146.36014"
|
||||
r="3.4037676" />
|
||||
<circle
|
||||
style="fill:#000000;fill-opacity:0.747356;stroke-width:0.264583;stroke-opacity:0.503144"
|
||||
id="path846-38"
|
||||
cx="49.70155"
|
||||
cy="207.84285"
|
||||
r="3.4037676" />
|
||||
<circle
|
||||
style="fill:#ff0000;fill-opacity:0.747356;stroke-width:0.264583;stroke-opacity:0.503144"
|
||||
id="path846-0"
|
||||
cx="78.066574"
|
||||
cy="250.76691"
|
||||
r="3.4037676" />
|
||||
</g>
|
||||
</g>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,-55.957701,153.7383)"
|
||||
id="text3642-0"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:18.6667px;line-height:1.05;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect3644-4);fill:#ff0900;fill-opacity:0.747356;stroke-opacity:0.503144"><tspan
|
||||
x="312.03906"
|
||||
y="305.77984"
|
||||
id="tspan27487">barrier=gate
|
||||
</tspan><tspan
|
||||
x="312.03906"
|
||||
y="325.37988"
|
||||
id="tspan27489">
|
||||
</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
BIN
public/assets/docs/UIExample.png
Normal file
BIN
public/assets/docs/UIExample.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
import Combine from "../src/UI/Base/Combine"
|
||||
import BaseUIElement from "../src/UI/BaseUIElement"
|
||||
import { existsSync, mkdirSync, writeFile, writeFileSync } from "fs"
|
||||
import { existsSync, mkdirSync, readFileSync, writeFile, writeFileSync } from "fs"
|
||||
import { AllKnownLayouts } from "../src/Customizations/AllKnownLayouts"
|
||||
import TableOfContents from "../src/UI/Base/TableOfContents"
|
||||
import SimpleMetaTaggers from "../src/Logic/SimpleMetaTagger"
|
||||
|
|
@ -310,10 +310,32 @@ function generateWikipage() {
|
|||
})
|
||||
}
|
||||
|
||||
function studioDocs() {
|
||||
const lines = readFileSync("./Docs/Studio/Introduction.md", "utf8").split("\n")
|
||||
|
||||
const sections: string[][] = []
|
||||
let currentSection: string[] = []
|
||||
for (let line of lines) {
|
||||
if (line.trim().startsWith("# ")) {
|
||||
sections.push(currentSection)
|
||||
currentSection = []
|
||||
}
|
||||
line = line.replace('src="../../public/', 'src="./')
|
||||
line = line.replace('src="../../', 'src="./')
|
||||
currentSection.push(line)
|
||||
}
|
||||
writeFileSync(
|
||||
"./src/assets/studio_introduction.json",
|
||||
JSON.stringify({
|
||||
sections: sections.map((s) => s.join("\n")).filter((s) => s.length > 0),
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
console.log("Starting documentation generation...")
|
||||
ScriptUtils.fixUtils()
|
||||
studioDocs()
|
||||
generateWikipage()
|
||||
|
||||
GenOverviewsForSingleLayer((layer, element, inlineSource) => {
|
||||
ScriptUtils.erasableLog("Exporting layer documentation for", layer.id)
|
||||
if (!existsSync("./Docs/Layers")) {
|
||||
|
|
@ -426,4 +448,5 @@ QueryParameters.GetQueryParameter(
|
|||
new ThemeViewState(new LayoutConfig(<any>bookcases))
|
||||
WriteFile("./Docs/Hotkeys.md", Hotkeys.generateDocumentation(), [])
|
||||
}
|
||||
|
||||
console.log("Generated docs")
|
||||
|
|
|
|||
0
src/UI/Studio/ChooseLayerToEdit.svelte
Normal file
0
src/UI/Studio/ChooseLayerToEdit.svelte
Normal file
32
src/UI/Walkthrough/Walkthrough.svelte
Normal file
32
src/UI/Walkthrough/Walkthrough.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script lang="ts">
|
||||
|
||||
import * as nmd from "nano-markdown";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import WalkthroughStep from "./WalkthroughStep.svelte";
|
||||
import FromHtml from "../Base/FromHtml.svelte";
|
||||
|
||||
/**
|
||||
* Markdown
|
||||
*/
|
||||
export let pages: string[];
|
||||
|
||||
let currentPage: number = 0;
|
||||
|
||||
const dispatch = createEventDispatcher<{ done }>();
|
||||
|
||||
function step(incr: number) {
|
||||
if (incr > 0 && currentPage + 1 === pages.length) {
|
||||
dispatch("done");
|
||||
currentPage = 0
|
||||
return
|
||||
}
|
||||
currentPage = Math.min(Math.max(0, currentPage + incr), pages.length);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<WalkthroughStep on:back={() => step(-1)} on:next={() => step(1)}>
|
||||
<FromHtml src={nmd(pages[currentPage])} />
|
||||
</WalkthroughStep>
|
||||
|
||||
34
src/UI/Walkthrough/WalkthroughStep.svelte
Normal file
34
src/UI/Walkthrough/WalkthroughStep.svelte
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script lang="ts">
|
||||
|
||||
import BackButton from "../Base/BackButton.svelte";
|
||||
import NextButton from "../Base/NextButton.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher<{ back, next }>();
|
||||
export let islast = false;
|
||||
export let isFirst = false
|
||||
</script>
|
||||
|
||||
|
||||
<div class="flex flex-col h-full w-full justify-between">
|
||||
|
||||
<div class="overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="flex w-full">
|
||||
{#if !isFirst}
|
||||
<BackButton clss="w-full" on:click={() => dispatch("back")}>
|
||||
Back
|
||||
</BackButton>
|
||||
{/if}
|
||||
<NextButton clss="primary w-full" on:click={() => dispatch("next")}>
|
||||
{#if islast}
|
||||
Finish
|
||||
{:else}
|
||||
Next
|
||||
{/if}
|
||||
</NextButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
1
src/assets/studio_introduction.json
Normal file
1
src/assets/studio_introduction.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"sections":["# Welcome to MapComplete Studio\n\nHi!\n\nWelcome to MapComplete Studio.\n\nThese slides will walk you through the most important concepts to use MapComplete Studio effectively\n","# What is OpenStreetMap?\n\n[OpenStreetMap](https://openstreetmap.org) is a worldwide, collaborative project where we map the world together.\n\nPeople worldwide do add data about features around the world, such as streets, shops, toilets, infrastructure, ...\n\nAll type of objects are welcome to be added into OpenStreetMap, as long as:\n\n1. *The object can be verified on the ground and is present*\n2. *The object is permanent*\n\n<img src=\"./assets/svg/osm-logo.svg\" class=\"h-48\"/>\n\nThe following items are thus *not* welcome: events such as a festival, measurements of e.g. air quality or historic data are *not* welcome.\nHave a look at [Sensor.Community](https://sensor.community/) or to [OpenHistoricalMap](https://www.openhistoricalmap.org/) instead.\n","# How can OpenStreetMap data be reused?\n\nOpenStreetMap data can be reused freely, including for commercial purposes. However, you have to:\n\n1. Give attribution\n2. Keep the data open - changes to data based on OpenStreetMap must be published under the same license.\n\nYou can read the [full copyright notice here](https://osm.org/copyright)\n\nThis also means that we are *not* allowed to copy data from other maps. Do not enter data based on Google Maps!\n","# How does OpenStreetMap organise the data?\n\nIn OpenStreetMap, the geodata can be one of three types:\n\n- **Points** which have a geocoordinate\n- **Lines** which are a _list_ of points. Closed lines are used to represent polygons\n- **Relations** which are a _list_ of points, lines and/or other relations.\n\nAll of those objects have a set of **attributes**. These are pairs of a **key** and a **value** which tell us what a point or line does represent. For example, `amenity=bench` represents a sitting bench. \n\nYou can find the meaning of all those keys and values on the [OpenStreetMap-wiki](https://wiki.openstreetmap.org/)\n\n\n<img src=\"./assets/docs/NodesAndLines.svg\" class=\"mt-8\">\n","# OpenStreetMap does **not** have layers\n\nMany traditional GIS-applications organise the data into layers.\n\nOpenStreetMap does not do this. Consider this shop:\n\n\n\nThis place has three functions:\n\n- It is a shop, selling boardgames\n- It is a café, where one can drink a tea (while testing one of the board games)\n- It is a social inclusion project for people with a mental disability\n\nIn a traditional system with layers, one would either have to choose the most fitting layer (e.g. the layer `pub`, `shops` or `social facility`? ) losing the multi-facetted aspect of the place. \nAnother approach could be to add it to all three layers, duplicating the data. However, this makes maintaining the data harder.\n","# What is MapComplete?\n\nMapComplete is a map viewer and editor. A contributor is presented a *thematic map* with features that are relevant to this topic.\n\nThese features are based on OpenStreetMap. If some data is not known, the user will be asked some **questions** and is invited to answer them. These answers are sent back to OpenStreetMap, updating it there.\n\n<img src=\"./assets/docs/UIExample.png\" class=\"w-full\"/>\n\nData can also be loaded and visualised from external sources. No changes can be made to the data in that case.\n\n\n","# MapComplete _does_ have layers\n\nA layer in mapcomplete describes a single type of object, e.g. _shops_, _toilets_, _benches_, _public bookcases_.\n\nA layer tells us:\n\n- What features to load from OpenStreetMap - thus what attributes the displayed data should have\n - (Or where to find the data if we are using an external datasource)\n- How these should be displayed on the map\n- What should be shown in the popup...\n- ... and what questions should be asked\n- How to create a _new point_ onto the map\n","# MapComplete does have themes\n\nA _theme_ is a **collection of layers**, with a title and a description.\n\nFor example, [cyclofix](https://mapcomplete.org/cyclofix) has many bicycle-related layers.\n\n<div class=\"flex\">\n<img src=\"./assets/docs/CyclofixMap.png\">\n<img src=\"./assets/docs/CyclofixIntro.png\">\n<img src=\"./assets/docs/CyclofixLayers.png\">\n</div>\n","# Studio\n\nIn MapComplete Studio, you can create and edit layers and themes to tweak it for your needs. \n\nHowever, remember that **only permanent and present** items should be added to OpenStreetMap.\n"]}
|
||||
Loading…
Reference in a new issue