feat: add maplibre, custom astro components, overview section

README.md

@@ -1,3 +1,11 @@
 # End-to-End Mapping
 
 Docs for how to use HOT's tools in an End-to-End data mapping flow.
+
+## Installing Components From Other Projects
+
+- If we are using hotosm/ui to build components in other repos.
+- Then we can install the repo:
+    `pnpm install git+https://github.com/hotosm/fmtm#main&path:src/frontend`
+- And import the components to use from that repo:
+    `import SomeButton from 'fmtm/src/components/some-button.ts`

astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig, passthroughImageService } from 'astro/config';
+import UnoCSS from 'unocss/astro';
 import starlight from '@astrojs/starlight';
 
 // https://astro.build/config
@@ -17,6 +18,7 @@ export default defineConfig({
 		service: passthroughImageService(),
 	},
 	integrations: [
+		UnoCSS(),
 		starlight({
 			title: 'End-to-End Mapping',
 			logo: {
@@ -28,17 +30,9 @@ export default defineConfig({
 			sidebar: [
 				{
 					label: '0. Overview',
-					slug: '0-overview',
-					translations: {
-						fr: 'Placeholder',
-						es: 'Placeholder',
-					},
-				},
-				{
-					label: '1. Base Imagery',
 					items: [
-						{ label: '1a) Drone TM', slug: '1-imagery/a-drone-tm' },
-						{ label: '1b) OpenAerialMap', slug: '1-imagery/b-oam' },
+						{ label: '0a) Intro', slug: '0-overview/a-intro' },
+						{ label: '0b) Preparation', slug: '0-overview/b-preparation' },
 					],
 					translations: {
 						fr: 'Placeholder',

package.json

@@ -11,9 +11,17 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.8.3",
-    "@astrojs/starlight": "^0.25.2",
-    "astro": "^4.10.2",
-    "sharp": "^0.32.6",
-    "typescript": "^5.5.4"
+    "@astrojs/starlight": "^0.25.5",
+    "@hotosm/ui": "0.2.0-b6",
+    "astro": "^4.16.9",
+    "maplibre-gl": "^4.7.1",
+    "sharp": "^0.32.6"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "unocss": "^0.64.0"
+  },
+  "peerDependencies": {
+    "@shoelace-style/shoelace": "^2.17.1"
   }
 }

src/components/fmtm/geojson-properties.astro

@@ -0,0 +1,42 @@
+<script>
+  import '@hotosm/ui/dist/style.css';
+  import { Button } from '@hotosm/ui/dist/hotosm-ui';
+
+  const button = document.getElementById('geojsonProperties');
+  button?.addEventListener('click', async () => {
+    const endpoint = 'https://api.fmtm.hotosm.org/docs#/helper/append_required_geojson_properties_helper_append_geojson_properties_post';
+
+    const geojson = {
+      "type": "FeatureCollection",
+      "features": [
+        {
+          "type": "Feature",
+          "geometry": {
+            "type": "Point",
+            "coordinates": [125.6, 10.1]
+          }
+        }
+      ]
+    };
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(geojson)
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      const data = await response.json();
+      console.log('Success:', data);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  });
+</script>
+<hot-button id="geojsonProperties" variant="primary">Append GeoJSON Properties</hot-button>

src/components/map/maplibre.astro

@@ -0,0 +1,48 @@
+---
+export interface Props {
+  latitude: number
+  longitude: number
+  zoom: number
+  mapstyle: string
+  container: string
+
+  /** If `false`, the map will not respond to interaction.  This is a static map built with the full web map rendering API. */
+  interactive?: boolean
+  containerstyle?: string
+}
+
+const { latitude, longitude, zoom, mapstyle, container, interactive, containerstyle} = Astro.props
+---
+
+<maplibre-astro
+  data-latitude={latitude}
+  data-longitude={longitude}
+  data-zoom={zoom}
+  data-mapstyle={mapstyle}
+  data-container={container}
+  data-interactive={interactive}
+  data-containerstyle={containerstyle}
+>
+<div id={container} style={containerstyle}></div>
+
+<script>
+  import 'maplibre-gl/dist/maplibre-gl.css';
+  import maplibre from 'maplibre-gl';
+
+  class MapLibreMap extends HTMLElement {
+    constructor() {
+      super()
+
+      console.log(maplibre.Map)
+      const map = new maplibre.Map({
+        container: this.dataset.container,
+        interactive: JSON.parse(this.dataset.interactive),
+        center: [this.dataset.longitude, this.dataset.latitude],
+        zoom: this.dataset.zoom,
+        style: this.dataset.mapstyle
+      })
+    }
+  }
+
+  window.customElements.define("maplibre-astro", MapLibreMap);
+</script>

src/content/docs/0-overview/a-intro.md

@@ -0,0 +1,21 @@
+---
+title: E2E Mapping Overview
+description: An overview of the data flow in e2e mapping.
+---
+
+This is an overview of the end-to-end workflow that ties together all 
+of HOT's tools.
+
+The end goal is to enable communities to generate their own maps for their area
+of interest (neighbourhood, city, region), rich in data derived from local knowledge.
+
+<!-- diagrams.net e2e diagram -->
+<div
+    class="mxgraph"
+    style="max-width:100%;border:1px solid transparent;"
+    data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;lightbox&quot;:false,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;url&quot;:&quot;https://raw.githubusercontent.com/hotosm/docs/main/docs/diagrams/e2e-ecosystem.drawio&quot;}"
+></div>
+<script
+    type="text/javascript"
+    src="https://viewer.diagrams.net/embed2.js?&fetch=https%3A%2F%2Fraw.githubusercontent.com%2Fhotosm%2Fdocs%2Fmain%2Fdocs%2Fdiagrams%2Fe2e-ecosystem.drawio"
+></script>

src/content/docs/0-overview/b-preparation.mdx

@@ -0,0 +1,22 @@
+---
+title: E2E Mapping Preparation
+description: Get started with the E2E mapping workflow.
+---
+
+import Map from '../../../components/map/maplibre.astro';
+
+To create a map, the first thing you need is an area defined to map!
+
+## Select Your Area Of Interest (AOI)
+
+Here we will generate an AOI than you wish to create a map for.
+
+<Map
+  container="maplibremap"
+  latitude="32.795595"
+  longitude="-117.259191"
+  zoom="3"
+  interactive="true"
+  mapstyle="https://demotiles.maplibre.org/style.json"
+  containerstyle="width: 100%; height: 70vh;"
+></Map>

src/content/docs/3-field-map/a-fmtm.mdx

@@ -3,6 +3,8 @@ title: Field Mapping Tasking Manager
 description: Tag map features in the field.
 ---
 
+import AppendPropertiesToGeojsonButton from '../../../components/fmtm/geojson-properties.astro';
+
 :::tip[Summary]
 - Now we have validated, AI-generated features for an area, they can be field 
   validated and tagged.
@@ -19,6 +21,14 @@ the Vespucci mobile app.
 
 ## Step 1: Create an account
 
+## Step 2: Getting the features to map
+
+### Custom extract
+
+Appending properties:
+
+<AppendPropertiesToGeojsonButton></AppendPropertiesToGeojsonButton>
+
 ## Extra Resources
 
 - Read more about ground sampling distance [here](https://test.org)

src/content/docs/index.mdx

@@ -7,15 +7,15 @@ hero:
   image:
     file: ../../assets/fmtm-monrovia.jpg
   actions:
-    - text: 1. Images
+    - text: 1. Image
       link: 1-imagery/a-drone-tm/
       icon: right-arrow
       variant: primary
     - text: 2. Map
       link: 2-digitization/a-ml-training/
       icon: right-arrow
       variant: primary
-    - text: 3. Tags
+    - text: 3. Tag
       link: 3-field-map/a-fmtm/
       icon: right-arrow
       variant: primary