Zoom to Feature in Embedded Map

[JacobDeuel]

I am providing a web map to my co-worker (website administrator) for a project.  The location of the project is dynamic and I need the embedded map to zoom to a feature instead of a set extent.  Has anyone successfully done this?

[JacobDeuel]

My goal is to avoid having to recreate the code every day as the project location is dynamic and the extent is changing daily.  Zooming to feature would be awesome.

[JakeSkinner]

Hi Jacob,

You can configure the search widget within the web map to search by layer.  The user could search by an attribute and it will zoom to this feature.

Configure feature search—ArcGIS Online Help | ArcGIS

[KellyHutchins · Accepted solution]

Another option is to use the Minimalist configurable app. The Minimalist app is available in the configurable app gallery and can be configured to zoom to a specific feature via a url parameter.  This app uses the same source code as the default ArcGIS Online embed app so it looks and acts the same.

Once you choose the Minimalist app from the gallery you can use the 'Custom URL Parameter' portion of the configuration panel to define the layer and field that contains the value you want to search for. In the example below we have a layer that has information about wildlife closures and I want to have the app zoom in automatically to a particular closure id. So I specify a url parameter name (this can be anything you want) and then select the layer (WildlifeClosures) and search field (ClosureID).

And here's the resulting test app. Note that when it loads it zooms automatically to the polygon with a closureId of 45.

http://www.arcgis.com/apps/Minimalist/index.html?appid=caa4ee44b9f34602a0dfaed8c7642d87&closure=45

Note that if you change the id in the url param and refresh the app it will zoom to the  new location on page reload. For example here it zooms to closure # 16.

http://www.arcgis.com/apps/Minimalist/index.html?appid=caa4ee44b9f34602a0dfaed8c7642d87&closure=16

[NataliyaLys]

Kelly,

I am working with Minimalist template, and I got the zoom to url parameters set up an it works great. But when I embed my Minimalist app into the Hub Site page, the URL parameter search is not working any more? 

Here is a link to my minimalist app:

https://dogis.maps.arcgis.com/apps/Minimalist/index.html?appid=dfca485ecde1499593c31561d14425c2&site... 

And here is what it looks like when embedded:

Thank you,

Nataliya

[KellyHutchins]

I ran a quick test embedding Minimalist (and also another configurable app Media) and the url params still worked. Here's my test: 

https://codepen.io/kellyhutchins/pen/aeYdWR

Can you share the iframe you are using to embed? Mabye something is missing?

[NataliyaLys]

I wonder in its an issue with the Hub Site Page handles embeded Minimalist app with the url parameters. 

In my Site Page I just added an Iframe layout item, and them put the url in the Iframe Url field

Thanks,

Nataliya

[KellyHutchins]

I wonder if it perhaps strips the url parameters. Is your site public? If so can you share the url and I'll take a look.

[NataliyaLys]

Yes, It is a public site. (below is a link) Something else that I just noticed: I just tried this Page in the  "Incognito" window and it works as expected! However if I try it in the regular browser window, when I am still logged in to my AGO, it would not zoom to location. I wonder if it has something to do with me being logged it to AGO? And that was the only why I tested it.

DCHD Air Quality 

Thanks,

[KellyHutchins]

If I look at the embedded map I don't see any url params that zoom to a location: 

https://www.arcgis.com/sharing/tools/bridge?url=https://jsapi.maps.arcgis.com/apps/Embed/index.html?webmap=36398cdf4c6242638568050126a4ada0&extent=-96.7175,41.0222,-95.3613,41.6342&home=true&zoom=true&previewImage=false&scale=true&disable_scroll=true&theme=dark

The above parameters specify the web map, starting extent, add the zoom in and out buttons, disable a preview image, add a scalebar, disable zoom scrolling and set the theme to dark. One thing I did notice is that the app url is jsapi.maps.arcgis.com. Try changing it to www.arcgis.com so its not using an organization url. So your new url would look like this: 

https://www.arcgis.com/apps/Embed/index.html?webmap=36398cdf4c6242638568050126a4ada0&extent=-96.7175,41.0222,-95.3613,41.6342&home=true&zoom=true&previewImage=false&scale=true&disable_scroll=true&theme=dark