diff --git a/astro.config.mjs b/astro.config.mjs
index c80395d..6d4a68f 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -39,6 +39,17 @@ export default defineConfig({
 						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' },
+					],
+					translations: {
+						fr: 'Placeholder',
+						es: 'Placeholder',
+					},
+				},
 				{
 					label: '2. Digitization',
 					items: [
diff --git a/package.json b/package.json
index 4374111..4c7cf57 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
     "@astrojs/check": "^0.8.3",
     "@astrojs/starlight": "^0.25.5",
     "@hotosm/ui": "0.2.0-b6",
+    "@maplibre/maplibre-gl-geocoder": "^1.7.0",
     "astro": "^4.16.9",
     "maplibre-gl": "^4.7.1",
-    "sharp": "^0.32.6"
+    "sharp": "^0.32.6",
+    "terra-draw": "1.0.0-beta.8"
   },
   "devDependencies": {
     "typescript": "^5.6.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d58394..a5b80df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@hotosm/ui':
         specifier: 0.2.0-b6
         version: 0.2.0-b6(@types/react@18.3.3)
+      '@maplibre/maplibre-gl-geocoder':
+        specifier: ^1.7.0
+        version: 1.7.0(maplibre-gl@4.7.1)
       '@shoelace-style/shoelace':
         specifier: ^2.17.1
         version: 2.18.0(@types/react@18.3.3)
@@ -29,6 +32,9 @@ importers:
       sharp:
         specifier: ^0.32.6
         version: 0.32.6
+      terra-draw:
+        specifier: 1.0.0-beta.8
+        version: 1.0.0-beta.8
     devDependencies:
       typescript:
         specifier: ^5.6.3
@@ -683,6 +689,12 @@ packages:
     resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
     engines: {node: '>=6.0.0'}
 
+  '@maplibre/maplibre-gl-geocoder@1.7.0':
+    resolution: {integrity: sha512-w6WnEPf+sIzcyRzTcI7mYNkz8MKjepZf/sROqBUwDX/hb0BvhrhwaDSRa2e+jGQ3RYdKWvxLDjmszn4bVJyESQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      maplibre-gl: '>=4.0.0'
+
   '@maplibre/maplibre-gl-style-spec@20.4.0':
     resolution: {integrity: sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==}
     hasBin: true
@@ -1483,6 +1495,10 @@ packages:
   eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
   expand-template@2.0.3:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
@@ -1548,6 +1564,10 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  fuzzy@0.1.3:
+    resolution: {integrity: sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==}
+    engines: {node: '>= 0.6.0'}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -1859,6 +1879,9 @@ packages:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
 
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
@@ -2526,6 +2549,12 @@ packages:
   style-to-object@1.0.8:
     resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
 
+  subtag@0.5.0:
+    resolution: {integrity: sha512-CaIBcTSb/nyk4xiiSOtZYz1B+F12ZxW8NEp54CdT+84vmh/h4sUnHGC6+KQXUfED8u22PQjCYWfZny8d2ELXwg==}
+
+  suggestions-list@0.0.2:
+    resolution: {integrity: sha512-Yw0fdq14c6RQWQIfE1/8WEi9Dp8rjyCD6FhYA/Tit2/ADbE9Y4ADG4ezlvivsa8Civ5nz++pyVVBMjOMlgIUJw==}
+
   supercluster@8.0.1:
     resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
 
@@ -2542,6 +2571,9 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
+  terra-draw@1.0.0-beta.8:
+    resolution: {integrity: sha512-40kOjgOQkDDmRIkz7QZ4urjwb9v/+Zm7tPf3RqeDY4UtKm3JodZ5iz3fFm93u3nzd+QVQlOZF0VF15ew0esQ7A==}
+
   text-decoder@1.2.1:
     resolution: {integrity: sha512-x9v3H/lTKIJKQQe7RPQkLfKAnc9lUTkWDypIQgTzPJAq+5/GCDHonmshfvlsNSj58yyshbIJJDLmU15qNERrXQ==}
 
@@ -2869,6 +2901,10 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
   xxhash-wasm@1.0.2:
     resolution: {integrity: sha512-ibF0Or+FivM9lNrg+HGJfVX8WJqgo+kCLDc4vx6xMeTce7Aj+DLttKbxxRR/gNLSAelRc1omAPlJ77N/Jem07A==}
 
@@ -3540,6 +3576,15 @@ snapshots:
 
   '@mapbox/whoots-js@3.1.0': {}
 
+  '@maplibre/maplibre-gl-geocoder@1.7.0(maplibre-gl@4.7.1)':
+    dependencies:
+      events: 3.3.0
+      lodash.debounce: 4.0.8
+      maplibre-gl: 4.7.1
+      subtag: 0.5.0
+      suggestions-list: 0.0.2
+      xtend: 4.0.2
+
   '@maplibre/maplibre-gl-style-spec@20.4.0':
     dependencies:
       '@mapbox/jsonlint-lines-primitives': 2.0.2
@@ -4555,6 +4600,8 @@ snapshots:
 
   eventemitter3@5.0.1: {}
 
+  events@3.3.0: {}
+
   expand-template@2.0.3: {}
 
   expressive-code@0.35.6:
@@ -4615,6 +4662,8 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
+  fuzzy@0.1.3: {}
+
   gensync@1.0.0-beta.2: {}
 
   geojson-vt@4.0.2: {}
@@ -5011,6 +5060,8 @@ snapshots:
     dependencies:
       p-locate: 4.1.0
 
+  lodash.debounce@4.0.8: {}
+
   lodash@4.17.21: {}
 
   log-symbols@6.0.0:
@@ -6143,6 +6194,13 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.4
 
+  subtag@0.5.0: {}
+
+  suggestions-list@0.0.2:
+    dependencies:
+      fuzzy: 0.1.3
+      xtend: 4.0.2
+
   supercluster@8.0.1:
     dependencies:
       kdbush: 4.0.2
@@ -6176,6 +6234,8 @@ snapshots:
       fast-fifo: 1.3.2
       streamx: 2.20.1
 
+  terra-draw@1.0.0-beta.8: {}
+
   text-decoder@1.2.1: {}
 
   tinyexec@0.3.1: {}
@@ -6514,6 +6574,8 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  xtend@4.0.2: {}
+
   xxhash-wasm@1.0.2: {}
 
   y18n@5.0.8: {}
diff --git a/src/components/map/maplibre.astro b/src/components/map/maplibre.astro
index f5f9715..d763905 100644
--- a/src/components/map/maplibre.astro
+++ b/src/components/map/maplibre.astro
@@ -3,44 +3,150 @@ 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
+  interactive?: boolean
+  mapstyle?: object
+  geocode?: boolean
+  draw?: boolean
 }
 
-const { latitude, longitude, zoom, mapstyle, container, interactive, containerstyle} = Astro.props
+const {
+  latitude,
+  longitude,
+  zoom,
+  container,
+  containerstyle,
+  interactive = true,
+  // Use OSM as default style, unless specified
+  mapstyle = {
+    id: 'OSM Raster',
+    version: 8,
+    name: 'OpenStreetMap',
+    sources: {
+      osm: {
+        type: 'raster',
+        tiles: [
+          'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+          'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
+          'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        ],
+        minzoom: 0,
+        maxzoom: 19,
+        attribution: '© <a target="_blank" rel="noopener" href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
+      },
+    },
+    layers: [
+      {
+        id: 'osm',
+        type: 'raster',
+        source: 'osm',
+        layout: {
+          visibility: 'visible',
+        },
+      },
+    ],
+  },
+  geocode,
+  draw,
+} = 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}
+  data-interactive={interactive}
+  data-mapstyle={JSON.stringify(mapstyle)}
+  data-geocode={geocode}
+  data-draw={draw}
 >
-<div id={container} style={containerstyle}></div>
+  <div id={container} style={containerstyle}></div>
 
 <script>
   import 'maplibre-gl/dist/maplibre-gl.css';
+  import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
   import maplibre from 'maplibre-gl';
+  import MaplibreGeocoder from '@maplibre/maplibre-gl-geocoder';
+  import { MapLibreGL as lib } from "maplibre-gl";
+  import { TerraDraw, TerraDrawMapLibreGLAdapter, TerraDrawPolygonMode } from "terra-draw";
 
   class MapLibreMap extends HTMLElement {
     constructor() {
-      super()
+      super();
+      this.map = null;
+      this.draw = null;
+      this.geocoder = null;
+    }
 
-      console.log(maplibre.Map)
-      const map = new maplibre.Map({
+    _initMap() {
+      this.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
-      })
+        center: [parseFloat(this.dataset.longitude), parseFloat(this.dataset.latitude)],
+        zoom: parseFloat(this.dataset.zoom),
+        style: JSON.parse(this.dataset.mapstyle) // Parse stringified JSON back to object
+      });
+    }
+
+    _initDraw() {
+      this.draw = new TerraDraw({
+        adapter: new TerraDrawMapLibreGLAdapter({ map: this.map, lib }),
+        modes: [new TerraDrawPolygonMode()],
+      });
+
+      this.draw.start();
+      this.draw.setMode("polygon");
+    }
+
+    _initGeocoder() {
+      const geocoderApi = {
+        forwardGeocode: async (config) => {
+          const features = [];
+          try {
+            const request = `https://nominatim.openstreetmap.org/search?q=${config.query}&format=geojson&polygon_geojson=1&addressdetails=1`;
+            const response = await fetch(request);
+            const geojson = await response.json();
+            
+            for (const feature of geojson.features) {
+              const center = [
+                feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2,
+                feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2
+              ];
+              const point = {
+                type: 'Feature',
+                geometry: { type: 'Point', coordinates: center },
+                place_name: feature.properties.display_name,
+                properties: feature.properties,
+                text: feature.properties.display_name,
+                place_type: ['place'],
+                center
+              };
+              features.push(point);
+            }
+          } catch (e) {
+            console.error(`Failed to forwardGeocode with error: ${e}`);
+          }
+          
+          return { features };
+        }
+      };
+      const geocoderControl = new MaplibreGeocoder(geocoderApi, { maplibregl: maplibre });
+      this.map.addControl(geocoderControl);
+    }
+
+    connectedCallback() {
+      this._initMap();
+
+      if (this.dataset.draw && JSON.parse(this.dataset.draw)) {
+        this._initDraw();
+      }
+
+      if (this.dataset.geocode && JSON.parse(this.dataset.geocode)) {
+        this._initGeocoder();
+      }
     }
   }
 
diff --git a/src/content/docs/0-overview/b-preparation.mdx b/src/content/docs/0-overview/b-preparation.mdx
index 654f677..84ba622 100644
--- a/src/content/docs/0-overview/b-preparation.mdx
+++ b/src/content/docs/0-overview/b-preparation.mdx
@@ -11,12 +11,56 @@ To create a map, the first thing you need is an area defined to map!
 
 Here we will generate an AOI than you wish to create a map for.
 
+Draw polygon on the map and it will be downloaded automatically.
+
 <Map
   container="maplibremap"
-  latitude="32.795595"
-  longitude="-117.259191"
-  zoom="3"
+  latitude="0"
+  longitude="0"
+  zoom="0"
   interactive="true"
-  mapstyle="https://demotiles.maplibre.org/style.json"
-  containerstyle="width: 100%; height: 70vh;"
+  draw="true"
+  geocode="true"
+  containerstyle="width: 100%; height: 70vh; margin-top: 1.5rem;"
 ></Map>
+
+{/*
+  Comment:
+  This logic could be embedded in maplibre.astro, but instead
+  we want the flexibility to swap out this component with a
+  generic web component. So instead we get the mapContainer
+  div element and then get the draw attribute from it.
+*/}
+<script>{`
+  window.addEventListener('DOMContentLoaded', () => {
+      const mapElement = document.querySelector('maplibre-astro');
+
+      const draw = mapElement.draw;
+
+      draw.on('finish', (id, context) => {
+        // Remove existing features when drawing a new one
+        let features = draw.getSnapshot();
+        if (features.length > 1) {
+          draw.removeFeatures([features[0].id]);
+        }
+
+        // Download the geojson immediately when finished drawing
+        features = draw.getSnapshot();
+        if (features.length === 1) {
+          // Remove the properties added by terra-draw, add crs key
+          const firstGeom = features[0].geometry;
+          const crsKey = {'crs': {'properties': {'name': 'urn:ogc:def:crs:EPSG::4326'}}}
+
+          const geojson = JSON.stringify({...firstGeom, ...crsKey});
+          const blob = new Blob([geojson], { type: 'application/json' });
+          const url = URL.createObjectURL(blob);
+          
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'hotosm_e2e_aoi.geojson';
+          a.click();
+          URL.revokeObjectURL(url);
+        }
+      });
+  })
+`}</script>