sharing and embedding ui

scripts/wordlist.txt

@@ -346,3 +346,4 @@ JavaScript
 EOS
 Skadi
 TCP
+geolocation

src/manage/webmaps-sharing/index.md

@@ -5,34 +5,50 @@ description: Mergin Maps webmaps can be shared using a URL link. You can also em
 # Sharing and Embedding Webmaps <Badge text="Early access" type="warning"/>
 
 ::: warning Early access feature
-Map sharing is currently available as an early access feature. If you would like to try it out, ask your workspace admin or owner to enable map sharing early access program in your [workspace settings](https://app.merginmaps.com/settings). The availability of the feature might change in the future.
+Map sharing is currently available as an early access feature. If you would like to try it out, ask your workspace admin or owner to enable the map sharing early access program in your [workspace settings](https://app.merginmaps.com/settings). The availability of this feature may change in the future.
 :::
 
 ## Sharing maps via URL 
 
-You can share webmaps via a direct URL. [Admins or owners](../permissions/) can enable map sharing for a project, allowing anyone with the link can display and explore it in a web browser, without the need to log in to <MainPlatformNameLink /> or make the project [public](../project-advanced/#make-your-project-public-private).
+You can share webmaps via a direct URL. [Admins or owners](../permissions/) can enable map sharing for a project, allowing anyone with the link to display and explore it in a web browser without the need to log in to <MainPlatformNameLink /> or make the project [public](../project-advanced/#make-your-project-public-private).
 
-1. Navigate to your project on the <DashboardShortLink />
-2. Click the **Open map** button to open the [webmap](../dashboard-maps/)
-3. Click the **Share map** button to display the public map link
-4. Copy and share the link to provide access to your webmap
+1. Navigate to your project on the <DashboardShortLink />.
 
-![Sharing maps via URL](./map-sharing-url.webp "Sharing maps via URL")
+2. Click the **Open map** button to open the [webmap](../dashboard-maps/).
+![Mergin Maps dashboard Open webmap](../dashboard-maps/dashboard-open-map.webp "Mergin Maps dashboard Open webmap")
 
-To see this feature in action, you can try a link to our [sample webmap](https://app.merginmaps.com/maps/grDTleg8yCdSracIxs-hmFIGdDs).
+3. Click the **Share map** button to display the sharing options.
 
-To disable the map sharing, click the **Stop sharing** button.
+   Set the *Share via link* option to **Anyone with the link**.
+
+   ![Sharing maps via URL](./map-sharing-url.webp "Sharing maps via URL")
+
+4. **Copy the link** using the button and share it to provide access to your webmap.
+
+To disable map sharing, change the *Share via link* option to **Disabled**.
+
+::: tip Sample webmap link
+To see this feature in action, try the link to our [sample webmap](https://app.merginmaps.com/maps/grDTleg8yCdSracIxs-hmFIGdDs).
+:::
 
 ## Embedding webmaps using HTML
 
-Webmaps that are shared can also be embedded on a website using the HTML `iframe` element with the [URL link](#sharing-maps-via-url) of the webmap.
+Shared webmaps can also be embedded on a website using the HTML `iframe` element.
 
-For example, this code
+1. Navigate to your project on the <DashboardShortLink />.
+2. Click the **Open map** button to open the [webmap](../dashboard-maps/).
+3. Click the **Share map** button to display the sharing options, then select **Embed this map**.
+
+   ![Embedding webmaps](./map-embedding.webp "Embedding webmaps")
 
-```
-<iframe src="https://app.merginmaps.com/maps/grDTleg8yCdSracIxs-hmFIGdDs" height="500" width="700" title="Mergin Maps Webmaps Iframe Example"></iframe>
-```
+4. The **Embed configuration** will open. Here, you can define:
+   - The default location and zoom level of the map
+   - The basemap style (default, light, dark)
+   - The map theme (if [map themes](../../gis/setup_themes/) are defined for your project)
+   - The controls for the embedded map (zoom buttons, scale bar, geolocation, layers)
+
+   ![Mergin Maps webmaps embed configuration](./map-embed-configuration.webp "Mergin Maps webmaps embed configuration")
 
-produces this map:
+5. **Copy the iframe code** and use it on your website.
 
-<iframe src="https://app.merginmaps.com/maps/grDTleg8yCdSracIxs-hmFIGdDs" height="500" width="700" title="Mergin Maps Webmaps Iframe Example"></iframe>
+   If you want to share a direct link instead, use the **Copy URL**  button.