[FEATURE] Zoom to extent in Geomap

[samer73]

I would like to ask how I can add zoom to extent feature here?

Here is my code:

<div id="sample_map"
	class="wb-geomap position"
	 data-filter= "AI restricted control zones"
	data-wb-geomap='{
	
    "overlays": [{
        "id": "bbox",
        "caption": "AI restricted control zones",
        "title": "AI restricted control zones",
		"tooltips": true,
		"tooltipText": true,
        "type": "geojson",
        "url": "https://inspection.canada.ca/active/AIGeomap/NAI_ON_2022_Control_Zone_March30_22_1732.json",
        "visible": true,
        "zoom": true
	      
    }]
}'>
  
	<div class="row">
		<div class="col-md-9">
			<div class="wb-geomap-map"></div>
		</div>
		<!-- Add optional map legend -->
		<div class="wb-geomap-legend col-md-3">
			<h2>Legend</h2>
			<!-- Geomap will insert legend here -->
		</div>
		<div class="row bbox">
			<!-- Add placeholder for overlays -->
			<div class="wb-geomap-layers col-md-12"></div>
		</div>
	</div>

</div>

Thank you!

[duboisp]

You will need to define the polygon where you want to zoom (aoi = Area Of Interest).

Working example: (See the first drop down) https://wet-boew.github.io/wet-boew/demos/geomap/geomap-en.html#filtering

For example you code can look like:

<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="sample_map_filter">
	<div class="form-group">
		<label for="gm_province">Zoom area:</label>
		<select id="gm_province" class="form-control" data-filter="aoi">
			<!-- The dimension bellow are approximative for this demo purpose only -->
			<option selected value="64.097 -10.63 34.692 -177.659">Canada</option>
			<option value="60 -120 48 -139">British columbia</option>
			<option value="60 -110 49 -120">Alberta</option>
			<option value="POLYGON((-78.30545265676142 62.84207638792185,-79.79959328176142 51.57292655739278,-79.18435890676142 46.810536399556135,-76.45974953176142 45.655468008018055,-75.58084328176142 45.961790800827984,-74.87771828176142 45.47086564114406,-74.96560890676142 44.97562684884711,-71.44998390676142 44.97562684884711,-69.16482765676142 47.349194267123444,-68.19803078176142 47.349194267123444,-64.33084328176142 48.35181916125691,-55.80545265676142 52.00783331541157,-67.31912453176142 52.16984334247954,-64.24295265676142 60.85236662687351,-78.30545265676142 62.84207638792185))">Québec</option>
		</select>
	</div>
	<button class="btn btn-primary" aria-controls="sample_map_filter" type="submit">Filter</button>
	<button class="btn btn-link" type="reset">Reset page to defaults</button>
</form>

If you are using GCWeb, you can leverage the doaction plugin or/and the urlmapping plugin to indicate to the wb-geomap plugin what is the AOI. Example: https://wet-boew.github.io/GCWeb/components/wb-urlmapping/geomap-en.html