My web app's map zooms out automatically when embedded in web

[NinaRihn]

I embedded my web app on a web page, but for some reason when embedded, its web map automatically zooms way out so the user can't see the points unless they zoom in manually.   I tried adjusting the initial map extent in the app, but that didn't work.    How can I make it not automatically zoom the map out like that?

[KellyGerrow]

When you open the supporting web map, adjust the visible extent and zoom level to your desired view and save the web map. The embedded map should be using this extent when the map loads.

If this doesn't seem to be applying, can you share your web map link?

-Kelly

[NinaRihn]

Thank you for your response, Kelly....  that isn't working for me.   I can't send you the web link because it is on our development web server, however I below are snapshots of the three initial extents (app, map, and web page).    

do I need to maybe update the embed HTML string too or something?

Map:

App:

Web page  (it zooms out beyond the point layer's max extent so one can't even see them without zooming in)

[NinaRihn]

OK my images didn't come through so I am just going to attach them to this post

[NinaRihn]

actually Kelly, while I can't send you the web page link, I can send you the agol web map and web app links... I just misread your question....  here you go: 

map:   https://wi-dnr.maps.arcgis.com/home/webmap/viewer.html?webmap=4bba703f7c884f02a8c9f01c533de1bb

app:  https://wi-dnr.maps.arcgis.com/apps/webappviewer/index.html?id=b7b8ca7ec306401191006e08c7111446

any suggestions you might have would be much appreciated!

[KellyGerrow]

Hi Nina,

The app and the web map appear to have the extents set correctly. Are you inputting and url parameters to specify the extent when you embed the app?

-Kelly

[NinaRihn]

no, I didn't specify any extents because I figured it was an app I was embedding; not really a "map".....this is what we used to embed it: 

<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="WDNRLicenseAgents" src="https://wi-dnr.maps.arcgis.com/apps/webappviewer/index.html?id=0d603407ff7345ff9a3720841a4f82fe"</iframe></div>

But now in the map, when I click Embed in website , I get this extra stuff....

<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="WDNR License Agents Application - Map" src="//wi-dnr.maps.arcgis.com/apps/Embed/index.html?webmap=4bba703f7c884f02a8c9f01c533de1bb&amp;extent=-95.9926,41.3374,-82.2047,47.6448&zoom=false&previewImage=false&scale=false&disable_scroll=false&theme=light"></iframe></div>

even though it's an app I am embedding, am I supposed to leave this stuff in there?

[MarkHoyland · Accepted solution]

When you embed your map or app it maintains its extent. The problem is that the Zoom Level is changing. So on a smaller screen to maintain your extent, the zoom level might have to go to level 3. To overcome this you can use the 'level' url parameter when you embed the map or app within an iframe. Your points only start displaying at zoom level 7.

For your app:

<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="WDNR License Agents Application - Map" src="https://wi-dnr.maps.arcgis.com/apps/webappviewer/index.html?id=b7b8ca7ec306401191006e08c7111446&level=7"></iframe></div>

for your map:

<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="WDNR License Agents Application - Map" src="//wi-dnr.maps.arcgis.com/apps/Embed/index.html?webmap=4bba703f7c884f02a8c9f01c533de1bb&level=7&scale=true&disable_scroll=false&theme=light"></iframe></div>

You can test them out in Tryit Editor v3.5 play with some of the settings.

[NinaRihn]

Thank you Mark.....Using the &level=7 worked!