Select to view content in your preferred language

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

3458
8
Jump to solution
02-22-2018 08:19 AM
NinaRihn
Occasional Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
MarkHoyland
Occasional Contributor II

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.

View solution in original post

0 Kudos
8 Replies
KellyGerrow
Esri Frequent Contributor

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
Occasional Contributor III

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)

0 Kudos
NinaRihn
Occasional Contributor III

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

0 Kudos
NinaRihn
Occasional Contributor III

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!

0 Kudos
KellyGerrow
Esri Frequent Contributor

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
Occasional Contributor III

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?

0 Kudos
MarkHoyland
Occasional Contributor II

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.

0 Kudos
NinaRihn
Occasional Contributor III

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

0 Kudos