From 2e59beb52f7fb718abdf5fecfa44cf926558a60a Mon Sep 17 00:00:00 2001 From: prushforth Date: Thu, 9 Apr 2026 19:57:10 +0000 Subject: [PATCH] Add search control documentation --- docs/api/mapml-viewer-api.mdx | 103 +- docs/elements/link.md | 73 +- docs/elements/mapml-viewer.md | 11 +- docs/user-guide/custom-handlers.md | 326 + docs/user-guide/search.md | 145 + .../current/api/mapml-viewer-api.mdx | 89 +- .../current/elements/link.md | 68 +- .../current/elements/mapml-viewer.md | 9 +- .../current/user-guide/custom-handlers.md | 299 + .../current/user-guide/search.md | 108 + package-lock.json | 13704 ++++++++-------- sidebars.js | 11 +- static/demo/map-link-demo/index.html | 2 +- static/demo/mapml-viewer-demo/index.html | 2 +- static/demo/search-demo/index.html | 58 + static/dist/mapml.js | 2 +- static/dist/mapml.js.map | 2 +- 17 files changed, 8214 insertions(+), 6798 deletions(-) create mode 100644 docs/user-guide/custom-handlers.md create mode 100644 docs/user-guide/search.md create mode 100644 i18n/fr/docusaurus-plugin-content-docs/current/user-guide/custom-handlers.md create mode 100644 i18n/fr/docusaurus-plugin-content-docs/current/user-guide/search.md create mode 100644 static/demo/search-demo/index.html diff --git a/docs/api/mapml-viewer-api.mdx b/docs/api/mapml-viewer-api.mdx index 7d2d7c926..0c0e331e4 100644 --- a/docs/api/mapml-viewer-api.mdx +++ b/docs/api/mapml-viewer-api.mdx @@ -13,13 +13,13 @@ The HTMLMapmlViewerElement interface represents the `` element. | Property name | Description | |-------------- |-------------------------------------------------------- | -| [controls](#controls) | Turns native map controls on or off. Reflects the controls attribute. | -| [controlsList](#controlslist) | Allows to change the set of native controls. Reflects the controlslist attribute. | +| [controls](#controls) | Turns native map controls on or off. Reflects the `controls` attribute. | +| [controlsList](#controlslist) | Allows to change the set of native controls with script. Note use of camelCase of the property name vs lowercase attribute name. Reflects the `controlslist` attribute. | | [extent](#extent) | Returns the extent of the current map view. Read only. | | [lat](#lat) | Get or set the map's latitude. Reflects to the lat content attribute. No effect on map dynamic state. | | [lon](#lon) | Get or set the map's longitude. Reflects to the lon content attribute. No effect on map dynamic state. | -| [projection](#projection) | The map's projection. Reflects the projection attribute. | -| [zoom](#zoom) | Get or set the map's zoom level. Reflects to the zoom content attribute. No effect on map dynamic state. | +| [projection](#projection) | The map's projection. Reflects the `projection` attribute. | +| [zoom](#zoom) | Get or set the map's zoom level. Reflects to the `zoom` content attribute. No effect on map dynamic state. | ### controls @@ -45,8 +45,10 @@ that helps the user select what controls to display on the `mapml-viewer` elemen To set the controlslist attribute: ```js let map = document.querySelector('mapml-viewer'); -map.controlsList.value = "noreload nozoom"; // values can be noreload | nofullscreen | nozoom | nolayer +map.controlsList.value = "noreload nozoom"; // values can be noreload | nofullscreen | nozoom | nolayer | search | geolocation map.controlsList.add("nofullscreen"); // can also add using the 'add' method +map.controlsList.add("geolocation"); // adds the locate control +map.controlsList.add("search"); // adds the search control, disabled until a search URL template link is defined map.controlsList.toggle("nolayer"); // can also toggle using the 'toggle' method // view all methods here - https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList ``` @@ -221,7 +223,8 @@ let zoom = map.zoom; | [viewSource()](#viewsource) | View the source of the map. | | [defineCustomProjection(options)](#definecustomprojectionoptions) | Define a custom projection for use by the page. | | [zoomTo(lat, lon, zoom)](#zoomtolat-lon-zoom) | Fly or pan the map to a (new) location and zoom level.| -| [geojson2mapml(json, options)](#zoomtolat-lon-zoom) | Add a GeoJSON Layer to the map. | +| [zoomToExtent(west, south, east, north)](#zoomtoextentwest-south-east-north) | Fit the map view to a geographic extent. | +| [geojson2mapml(json, options)](#geojson2mapml) | Add a GeoJSON Layer to the map. | | [matchMedia(mediaQueryString)](#matchmediamediaquerystring) | Returns a [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList)-like object. @@ -328,6 +331,19 @@ navigator.geolocation.getCurrentPosition(success, error, options); --- +### zoomToExtent(west, south, east, north) + +Fit the map view to the geographic extent defined by the four coordinate values, +automatically choosing the appropriate maximum zoom level. + +```js +let map = document.querySelector('mapml-viewer'); +// Fit the map to show southern Ontario +map.zoomToExtent(-80, 43, -70, 48); +``` + +--- + ### geojson2mapml(json, options) Convert a GeoJSON feature or feature collection string or object to MapML [``](/web-map-doc/docs/elements/layer/) containing one or more [``](/web-map-doc/docs/elements/feature/) elements. Returns and adds the converted layer element to the map. @@ -406,6 +422,79 @@ state of the queried map properties (projection, zoom, extent); any change to th | zoomend | Fired after the map has changed zoom level | | preclick | Fired before a click on the map is triggered. May not be a primitive. | | contextmenu | Fired when user right-clicks or long presses on map. May not be a primitive.| +| [mapsearch](#mapsearch) | Fired after search responses arrive from all search-enabled layers. | +| [mapsuggestions](#mapsuggestions) | Fired after typeahead suggestion responses arrive from all search-enabled layers. | + +### mapsearch + +Fired on the `` element after search responses have been received +from all checked layers that contain a +[`