Community

Embedded map in Sharepoint using an <iframe> tag?

5170
4
Jump to solution
12-23-2014 11:32 AM
VenusScott
by
Occasional Contributor III
‎12-23-2014 11:32 AM

I created a map using AGOL WAB online and had the user embed the map the City's website. When the map is viewed on a tablet or phone, the locator defaults to the right side of the map as opposed to the left. When building a map and displaying on a PC, it defaults to the left side of the map? Is there something in the <iframe> tag that changes the location of the locator object? Here is the code:

<iframe width="940" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://phoenix.maps.arcgis.com/apps/Embed/index.html?webmap=8ade120d5a374e399fd23be95de852a9&extent=..."></iframe><br /><small><a href="http://phoenix.maps.arcgis.com/apps/webappviewer/index.html?id=e91cf487650749499ee5ebef709d2ef0" target="_blank">View Mobile / Larger Map</a></small>

Nothing is jumping out at me as to why on a mobile device it would display differently?

WAB_Locator.jpg

0 Kudos
1 Solution

Accepted Solutions
VenusScott
by
Occasional Contributor III
‎01-08-2015 08:09 AM

I got with ESRI support and this issue was submitted as an ''enhancement'' for future release.

View solution in original post

0 Kudos
4 Replies
VenusScott
by
Occasional Contributor III
‎12-30-2014 08:47 AM

Can anyone provide me with insight on the "webappviewer" and maybe this is my issue?

0 Kudos
VenusScott
by
Occasional Contributor III
‎01-08-2015 08:09 AM

I got with ESRI support and this issue was submitted as an ''enhancement'' for future release.

0 Kudos
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎01-08-2015 09:57 AM

The locator should always display on the right. I ran a few tests and in my testing the locator is on the right in both my phone and desktop.

http://phoenix.maps.arcgis.com/apps/Embed/index.html?webmap=8ade120d5a374e399fd23be95de852a9&extent=...

In your case I think the issue may be that the frame width is set as 940 which means its wider than the mobile screen and part of the map will be outside the view.  In general its tricky to get content embedded in an iframe to be responsive. Haven't tried it but perhaps the info in this article will help.

Making Embedded Content Work In Responsive Design - Smashing Magazine

0 Kudos
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎01-08-2015 10:17 AM

Another option that might work if you just need the width to change and aren't worried about the height would be to just set the width to 100%. Here's an example showing this:

<iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://phoenix.maps.arcgis.com/apps/Embed/index.html?webmap=8ade120d5a374e399fd23be95de852a9&extent=..."></iframe><br /><small><a href="http://phoenix.maps.arcgis.com/apps/webappviewer/index.html?id=e91cf487650749499ee5ebef709d2ef0" target="_blank">View Mobile / Larger Map</a></small>
0 Kudos