diff --git a/scripts/markdown_style.bash b/scripts/markdown_style.bash index 6d7370bd..24428778 100755 --- a/scripts/markdown_style.bash +++ b/scripts/markdown_style.bash @@ -23,7 +23,7 @@ for i in \ do echo "Checking for $i" # exclude HTML tags inside QGIS expressions in documentation - A1=`grep --line-number -r -e "$i" $SCRIPT_DIR/../src/ --include \*.md | grep -v 'expression.evaluate'` + A1=`grep --line-number -r -e "$i" $SCRIPT_DIR/../src/ --include \*.md | grep -v 'expression.evaluate' | grep -v 'app.merginmaps.com/maps/'` if [ ! -z "$A1" ] then echo $A1 diff --git a/scripts/wordlist.txt b/scripts/wordlist.txt index 0b551828..34161dd5 100644 --- a/scripts/wordlist.txt +++ b/scripts/wordlist.txt @@ -204,6 +204,7 @@ hotline html http https +iframe interoperable integration integrations @@ -289,6 +290,8 @@ vCPUS xcf xyz yml +webmap +WebMap webmaps WebMaps webp diff --git a/src/.vitepress/sidebar/en.js b/src/.vitepress/sidebar/en.js index 5ffaedf7..7929f13b 100644 --- a/src/.vitepress/sidebar/en.js +++ b/src/.vitepress/sidebar/en.js @@ -31,6 +31,11 @@ export default { { text: 'Member Roles and Permissions', link: '/manage/permissions/' }, { text: 'Synchronisation', link: '/manage/synchronisation/' }, { text: 'Mergin Maps Project', link: '/manage/project/' }, + { text: 'Webmaps', link: '/manage/dashboard-maps/', + items: [ + { text: 'Sharing and Embedding', link: '/manage/webmaps-sharing/' }, + { text: 'Troubleshooting', link: '/manage/webmaps-troubleshooting/' } + ] }, { text: 'How to Create a New Project', link: '/manage/create-project/' }, { text: 'How to Share, Transfer or Delete Projects', link: '/manage/project-advanced/' }, { text: 'How to Delete Files', link: '/manage/delete-files/' }, @@ -38,7 +43,6 @@ export default { { text: 'How to Recover Missing Data', link: '/manage/missing-data/' }, { text: 'Mergin Maps QGIS Plugin Overview', link: '/manage/plugin/' }, { text: 'Mergin Maps Dashboard', link: '/manage/dashboard/' }, - { text: 'Webmaps', link: '/manage/dashboard-maps/' }, { text: 'Project History and Versions', link: '/manage/project-history/' }, { text: 'Selective Synchronisation', link: '/manage/selective_sync/' } ] }, diff --git a/src/index.md b/src/index.md index ae4f0388..973431be 100644 --- a/src/index.md +++ b/src/index.md @@ -45,6 +45,9 @@ The ecosystem consist of various components: - [Member Roles and Permissions](./manage/permissions/) - [Synchronisation](./manage/synchronisation/) - [Mergin Maps Project](./manage/project/) +- [Webmaps](./manage/dashboard-maps/) + - [Sharing and Embedding](./manage/webmaps-sharing/) + - [Troubleshooting](./manage/webmaps-troubleshooting/) - [How to Create a New Project](./manage/create-project/) - [How to Share, Transfer or Delete Projects](./manage/project-advanced/) - [How to Delete Files](./manage/delete-files) @@ -52,7 +55,6 @@ The ecosystem consist of various components: - [How to Recover Missing Data](./manage/missing-data/) - [ Overview](./manage/plugin/) - [Mergin Maps Dashboard](./manage/dashboard/) -- [Webmaps](./manage/dashboard-maps/) - [Project History and Versions](./manage/project-history/) - [Selective Synchronisation](./manage/selective_sync/) diff --git a/src/manage/dashboard-maps/dashboard-map-properties.webp b/src/manage/dashboard-maps/dashboard-map-properties.webp index f67fe1f9..77923ad6 100644 Binary files a/src/manage/dashboard-maps/dashboard-map-properties.webp and b/src/manage/dashboard-maps/dashboard-map-properties.webp differ diff --git a/src/manage/dashboard-maps/dashboard-map-properties.xcf b/src/manage/dashboard-maps/dashboard-map-properties.xcf index f5e8aa6a..85e80134 100644 Binary files a/src/manage/dashboard-maps/dashboard-map-properties.xcf and b/src/manage/dashboard-maps/dashboard-map-properties.xcf differ diff --git a/src/manage/dashboard-maps/index.md b/src/manage/dashboard-maps/index.md index f7c9b198..f65a0e23 100644 --- a/src/manage/dashboard-maps/index.md +++ b/src/manage/dashboard-maps/index.md @@ -1,5 +1,6 @@ --- description: Webmaps display the map overview of your project's spatial data directly in your web browser, on Mergin Maps dashboard. +outline: deep --- # Webmaps @@ -17,38 +18,53 @@ Webmaps are **not** available for . ## Webmaps content -On the webmaps, you will see your survey layers or raster layers that are [packaged](../project/#packaging-qgis-project) with the project. Other layers, such as online [background maps](../../gis/settingup_background_map/#background-maps) or PostgreSQL layers are not displayed. The extent of maps is defined by the [extent set in the QGIS project](../../gis/features/#project-extent). +### Project layers +- On the webmaps, you will see your survey layers or raster layers that are [packaged](../project/#packaging-qgis-project) with the project. Other layers, such as online [background maps](../../gis/settingup_background_map/#background-maps) or PostgreSQL layers are not displayed. The extent of maps is defined by the [extent set in the QGIS project](../../gis/features/#project-extent). +- All maps on the use [ vector tile service](../../gis/settingup_background_map/#online-services-1) as a background map. +- The content of the maps and of the **Layers** panel is refreshed after every synchronisation of the project. This means you should always see your current spatial data here. -All maps on the use [ vector tile service](../../gis/settingup_background_map/#online-services-1) as a background map. +Click on a feature on the map to display its properties. -The content of the maps and of the **Layers** panel is refreshed after every synchronisation of the project. This means you should always see your current spatial data here. +![Mergin Maps dashboard maps](./dashboard-map-properties.webp "Mergin Maps dashboard maps") -The **Layers** panel lists all layers displayed on the map. The check button :white_check_mark: controls the visibility of layers. +The **Layers** panel lists all layers displayed on the map. -Click on a feature on the map to display its properties. +Control the layer's visibility by clicking the button that appears when you hover over the layer. -![Mergin Maps dashboard maps](./dashboard-map-properties.webp "Mergin Maps dashboard maps") +![Mergin Maps webmaps toggle layer visibility](./webmaps-toggle-layer-visibility.webp "Mergin Maps webmaps toggle layer visibility") -## Sharing maps via URL -::: tip Early access feature -Map sharing is in early access. If you would like to try it out, fill in [this form](https://wishlist.merginmaps.com/f/share-maps-via-url) to gain access to this feature. +### Adding background maps +By default, the online background maps from your project are not displayed on the webmaps. However, they can be added to your webmaps using a JavaScript file with the map definition to your project through . -Try out this to see how shared maps work. +:::warning Background maps licensing +Keep in mind that background maps services and data sources come with their own terms of use, especially if they are to be publicly shared. You should comply with any terms and conditions of the services of your choice. ::: -Webmaps can be shared via URL. [Admins or owners](../permissions/) can enable map sharing for a project, so that anyone with the link can display and explore your project in a web browser, without the need to log into or making the project [public](../project-advanced/#make-your-project-public-private). +1. Create a file named `map-script.js` with the following structure: + +```import TileLayer from 'https://esm.sh/ol@10.8.0/layer/Tile' +import { fromLonLat } from 'https://esm.sh/ol@10.8.0/proj' +import XYZ from 'https://esm.sh/ol@10.8.0/source/XYZ' -1. Navigate to your project on the . -2. In the **Map** tab, click on the **Share map** button to generate a shareable link -3. Send the link to anyone to share your project +const layer = new TileLayer({ + name: 'Map Name', + source: new XYZ({ + url: 'https://server.my-maps.com/tile/{z}/{y}/{x}', + attributions: + 'Tiles © copyright' + }) +}) -To disable the map sharing, click on the **Revoke sharing** button. +MerginMaps.getMap().addLayer(layer) +``` + This is a JavaScript file that defines background maps that should be added to your webmap. -![Sharing maps via URL](./map-sharing-url.webp "Sharing maps via URL") +2. Add the `map-script.js` to your project through -::: tip Blog about shared maps -You can read about this functionality in our blog post . -::: +After syncing the project, the background map will be added to your webmap. + +### Customisation +Webmaps can be further customised using JavaScript in the `map-script.js` file. ## Webmaps extent @@ -64,13 +80,9 @@ If this parameter is not defined, the map extent will be set as the *Advertised If there are no extent settings in the QGIS project, will calculate the extent from layers in the project. -## Troubleshooting - -### Map config does not exist -The **Map** tab of a project on the may display this error message: -`Map config does not exist, please try update the project` - -![Mergin Maps webmap Map config does not exist](./webmap-map-config-issue.webp "Mergin Maps webmap Map config does not exist") +## Sharing maps via URL -This usually happens when the map was not initiated. All you need to do is to create a new version of the project: synchronisation of the project will activate the map content. +Webmaps can be shared via URL or embedded on a website. You can find more details about this early access feature in [Sharing and Embedding Webmaps](../webmaps-sharing/). +## Troubleshooting +Troubleshooting tips for webmaps can be found [here](../webmaps-troubleshooting/). diff --git a/src/manage/dashboard-maps/webmaps-toggle-layer-visibility.webp b/src/manage/dashboard-maps/webmaps-toggle-layer-visibility.webp new file mode 100644 index 00000000..f0d8c866 Binary files /dev/null and b/src/manage/dashboard-maps/webmaps-toggle-layer-visibility.webp differ diff --git a/src/manage/dashboard-maps/webmaps-toggle-layer-visibility.xcf b/src/manage/dashboard-maps/webmaps-toggle-layer-visibility.xcf new file mode 100644 index 00000000..629bbdae Binary files /dev/null and b/src/manage/dashboard-maps/webmaps-toggle-layer-visibility.xcf differ diff --git a/src/manage/dashboard/mergin-maps-web-map.webp b/src/manage/dashboard/mergin-maps-web-map.webp index 1e91e01d..10a83bbf 100644 Binary files a/src/manage/dashboard/mergin-maps-web-map.webp and b/src/manage/dashboard/mergin-maps-web-map.webp differ diff --git a/src/manage/dashboard/mergin-maps-web-map.xcf b/src/manage/dashboard/mergin-maps-web-map.xcf index 609ec5b8..673f4652 100644 Binary files a/src/manage/dashboard/mergin-maps-web-map.xcf and b/src/manage/dashboard/mergin-maps-web-map.xcf differ diff --git a/src/manage/webmaps-sharing/index.md b/src/manage/webmaps-sharing/index.md new file mode 100644 index 00000000..901f0ecc --- /dev/null +++ b/src/manage/webmaps-sharing/index.md @@ -0,0 +1,52 @@ +--- +description: Mergin Maps webmaps can be shared using a URL link. You can also embed them directly on your website with a simple HTML code for seamless integration. +--- + +# Sharing and Embedding Webmaps +[[toc]] + +::: warning Early access feature +Map sharing is in early access. If you would like to try it out, fill in [this form](https://wishlist.merginmaps.com/f/share-maps-via-url) to gain access to this feature. +::: + +The spatial data of your project can be displayed and explored in the **Map** tab of the project on the . As an early access feature, they can also be [shared via URL](#sharing-maps-via-url). + + +:::tip Usage details +Webmaps are available for cloud and users. + +Webmaps are **not** available for . +::: + + +## Sharing maps via URL + +Webmaps can be shared via URL. [Admins or owners](../permissions/) can enable map sharing for a project, so that anyone with the link can display and explore your project in a web browser, without the need to log into or making the project [public](../project-advanced/#make-your-project-public-private). + +1. Navigate to your project on the . +2. In the **Map** tab, click on the **Share map** button to generate a shareable link +3. Send the link to anyone to share your project + +To see how this works, you can try a link to our [sample webmap](https://app.merginmaps.com/maps/grDTleg8yCdSracIxs-hmFIGdDs). + +To disable the map sharing, click on the **Revoke sharing** button. + +![Sharing maps via URL](./map-sharing-url.webp "Sharing maps via URL") + +::: tip Blog about shared maps +You can read about this functionality in our blog post . +::: + +## Embedding webmaps using HTML + +Webmaps that are shared can be also embedded on a website using HTML element `iframe` by using the [URL link](#sharing-maps-via-url) of the webmap. + +For example, this code + +``` + +``` + +produces this map: + + diff --git a/src/manage/webmaps-sharing/map-sharing-url.webp b/src/manage/webmaps-sharing/map-sharing-url.webp new file mode 100644 index 00000000..d932f096 Binary files /dev/null and b/src/manage/webmaps-sharing/map-sharing-url.webp differ diff --git a/src/manage/webmaps-sharing/map-sharing-url.xcf b/src/manage/webmaps-sharing/map-sharing-url.xcf new file mode 100644 index 00000000..434cb3b6 Binary files /dev/null and b/src/manage/webmaps-sharing/map-sharing-url.xcf differ diff --git a/src/manage/webmaps-troubleshooting/index.md b/src/manage/webmaps-troubleshooting/index.md new file mode 100644 index 00000000..f23253b2 --- /dev/null +++ b/src/manage/webmaps-troubleshooting/index.md @@ -0,0 +1,14 @@ +--- +description: Troubleshooting tips for Mergin Maps dashboard maps. +--- + +# Troubleshooting webmaps + +## Map config does not exist +The **Map** tab of a project on the may display this error message: +`Map config does not exist, please try update the project` + +![Mergin Maps webmap Map config does not exist](./webmap-map-config-issue.webp "Mergin Maps webmap Map config does not exist") + +This usually happens when the map was not initiated. All you need to do is to create a new version of the project: synchronisation of the project will activate the map content. + diff --git a/src/manage/webmaps-troubleshooting/webmap-map-config-issue.webp b/src/manage/webmaps-troubleshooting/webmap-map-config-issue.webp new file mode 100644 index 00000000..57dd0e16 Binary files /dev/null and b/src/manage/webmaps-troubleshooting/webmap-map-config-issue.webp differ diff --git a/src/manage/webmaps-troubleshooting/webmap-map-config-issue.xcf b/src/manage/webmaps-troubleshooting/webmap-map-config-issue.xcf new file mode 100644 index 00000000..272315be Binary files /dev/null and b/src/manage/webmaps-troubleshooting/webmap-map-config-issue.xcf differ