diff --git a/Docs/Studio/Introduction.md b/Docs/Studio/Introduction.md new file mode 100644 index 000000000..104042143 --- /dev/null +++ b/Docs/Studio/Introduction.md @@ -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* + + + +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/) + + + + +# OpenStreetMap does **not** have layers + +Many traditional GIS-applications organise the data into layers. + +OpenStreetMap does not do this. Consider this shop: + +!['t spel op de wagen](TODO) + +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. + + + +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. + +
+ + + +
+ + +# 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! diff --git a/public/assets/docs/CyclofixIntro.png b/public/assets/docs/CyclofixIntro.png new file mode 100644 index 000000000..e0c9b64cb Binary files /dev/null and b/public/assets/docs/CyclofixIntro.png differ diff --git a/public/assets/docs/CyclofixLayers.png b/public/assets/docs/CyclofixLayers.png new file mode 100644 index 000000000..8e4bd9036 Binary files /dev/null and b/public/assets/docs/CyclofixLayers.png differ diff --git a/public/assets/docs/CyclofixMap.png b/public/assets/docs/CyclofixMap.png new file mode 100644 index 000000000..a17786c9e Binary files /dev/null and b/public/assets/docs/CyclofixMap.png differ diff --git a/public/assets/docs/NodesAndLines.svg b/public/assets/docs/NodesAndLines.svg new file mode 100644 index 000000000..db1bcb385 --- /dev/null +++ b/public/assets/docs/NodesAndLines.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + amenity=bench +backrest=yes +material=wood + + highway=path +surface=ground + + + + + + + + + + + + barrier=gate + + + + diff --git a/public/assets/docs/UIExample.png b/public/assets/docs/UIExample.png new file mode 100644 index 000000000..1bfeea827 Binary files /dev/null and b/public/assets/docs/UIExample.png differ diff --git a/scripts/generateDocs.ts b/scripts/generateDocs.ts index c9a11c360..01a68e3c9 100644 --- a/scripts/generateDocs.ts +++ b/scripts/generateDocs.ts @@ -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(bookcases)) WriteFile("./Docs/Hotkeys.md", Hotkeys.generateDocumentation(), []) } + console.log("Generated docs") diff --git a/src/UI/Studio/ChooseLayerToEdit.svelte b/src/UI/Studio/ChooseLayerToEdit.svelte new file mode 100644 index 000000000..e69de29bb diff --git a/src/UI/Walkthrough/Walkthrough.svelte b/src/UI/Walkthrough/Walkthrough.svelte new file mode 100644 index 000000000..03858d84b --- /dev/null +++ b/src/UI/Walkthrough/Walkthrough.svelte @@ -0,0 +1,32 @@ + + + + step(-1)} on:next={() => step(1)}> + + + diff --git a/src/UI/Walkthrough/WalkthroughStep.svelte b/src/UI/Walkthrough/WalkthroughStep.svelte new file mode 100644 index 000000000..77bbd833f --- /dev/null +++ b/src/UI/Walkthrough/WalkthroughStep.svelte @@ -0,0 +1,34 @@ + + + +
+ +
+ +
+ +
+ {#if !isFirst} + dispatch("back")}> + Back + + {/if} + dispatch("next")}> + {#if islast} + Finish + {:else} + Next + {/if} + +
+ +
diff --git a/src/assets/studio_introduction.json b/src/assets/studio_introduction.json new file mode 100644 index 000000000..2e045532a --- /dev/null +++ b/src/assets/studio_introduction.json @@ -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\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\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!['t spel op de wagen](TODO)\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\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
\n\n\n\n
\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"]} \ No newline at end of file