Zoom to Feature in Embedded Map

8321
11
Jump to solution
06-20-2016 06:47 AM
JacobDeuel
New Contributor II

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?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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).

Screen Shot 2016-06-20 at 12.50.40 PM.png

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

View solution in original post

0 Kudos
11 Replies
JacobDeuel
New Contributor II

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.

0 Kudos
JakeSkinner
Esri Esteemed Contributor

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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).

Screen Shot 2016-06-20 at 12.50.40 PM.png

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

0 Kudos
NataliyaLys
Occasional Contributor II

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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?

0 Kudos
NataliyaLys
Occasional Contributor II

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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.

0 Kudos
NataliyaLys
Occasional Contributor II

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,

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

0 Kudos