Add HTMLMapmlViewerElement.zoomToExtent(xmin,ymin,xmax,ymax) to support documentation change for custom search handler development

Author: prushforth

index.html

@@ -249,7 +249,17 @@
 
         viewer.addEventListener('mapsearch', (e) => {
           e.preventDefault();
-          e.detail.setResults(toItems(e.detail.responses, false));
+          const items = toItems(e.detail.responses, false);
+          e.detail.setResults(items);
+          // Auto-navigate to the first result (matches default handler behaviour)
+          if (items.length > 0) {
+            const first = items[0];
+            if (first.bbox && first.bbox.length === 4) {
+              viewer.zoomToExtent(...first.bbox);
+            } else if (first.lat != null && first.lng != null) {
+              viewer.zoomTo(first.lat, first.lng, 14);
+            }
+          }
         });
 
       });

src/mapml-viewer.js

@@ -1082,6 +1082,10 @@ export class HTMLMapmlViewerElement extends HTMLElement {
     this.lat = location.lat;
     this.lon = location.lng;
   }
+  zoomToExtent(west, south, east, north) {
+    this._map.fitBounds(latLngBounds([+south, +west], [+north, +east]));
+    this._updateMapCenter();
+  }
   _updateMapCenter() {
     // remember to tell Leaflet event handler that 'this' in here refers to
     //  something other than the map in this case the custom polymer element

src/web-map.js

@@ -1125,6 +1125,10 @@ export class HTMLWebMapElement extends HTMLMapElement {
     this.lat = location.lat;
     this.lon = location.lng;
   }
+  zoomToExtent(west, south, east, north) {
+    this._map.fitBounds(latLngBounds([+south, +west], [+north, +east]));
+    this._updateMapCenter();
+  }
   _updateMapCenter() {
     // remember to tell Leaflet event handler that 'this' in here refers to
     //  something other than the map in this case the custom polymer element

test/e2e/mapml-viewer/mapml-viewer.test.js

@@ -77,6 +77,25 @@ test.describe('Playwright mapml-viewer Element Tests', () => {
     expect(extent.topLeft.tcrs[0]).toEqual(expectedFirstTCRS[1]);
   });
 
+  test('zoomToExtent fits the map to the given bounds', async () => {
+    // zoom to a known bbox (west, south, east, north) and verify the map
+    // center and zoom update accordingly
+    await page.$eval('body > mapml-viewer', (map) =>
+      map.zoomToExtent(-80, 43, -70, 48)
+    );
+    await page.waitForTimeout(500);
+    const result = await page.$eval('body > mapml-viewer', (map) => ({
+      lat: map.lat,
+      lon: map.lon,
+      zoom: map.zoom
+    }));
+    // center should be approximately (45.5, -75) — the midpoint of the bbox
+    expect(result.lat).toBeCloseTo(45.5, 0);
+    expect(result.lon).toBeCloseTo(-75, 0);
+    // zoom should have increased from the previous zoom level
+    expect(result.zoom).toBeGreaterThan(1);
+  });
+
   test.describe('Attributes Tests', () => {
     for (let i in controls) {
       test.describe('Controls List ' + options[i] + ' Attribute Tests', () => {

test/e2e/web-map/map.test.js

@@ -146,6 +146,21 @@ test.describe('Playwright web-map Element Tests', () => {
     expect(currPos).toEqual(0);
   });
 
+  test('zoomToExtent fits the map to the given bounds', async () => {
+    await page.$eval('body > map', (map) => map.zoomToExtent(-80, 43, -70, 48));
+    await page.waitForTimeout(500);
+    const result = await page.$eval('body > map', (map) => ({
+      lat: map.lat,
+      lon: map.lon,
+      zoom: map.zoom
+    }));
+    // center should be approximately (45.5, -75) — the midpoint of the bbox
+    expect(result.lat).toBeCloseTo(45.5, 0);
+    expect(result.lon).toBeCloseTo(-75, 0);
+    // zoom should have increased from the initial zoom level
+    expect(result.zoom).toBeGreaterThan(1);
+  });
+
   test.describe('Controls List search Attribute Tests', () => {
     test('controlslist=search shows search control', async () => {
       await page.$eval('body > map', (map) =>