topic embed map viewed on mobile device in ArcGIS Online Questions

embed map viewed on mobile device

TimHayes3 — Mon, 16 Dec 2024 15:34:54 GMT

Hello,

I am using the embed map HTML code from Map Viewer.

I see that the map style part of the code has a fixed height and width: <arcgis-embedded-map style="height:600px;width:700px;"

Can a ratio or percentage be provided to accommodate different screen sizes? Over 50% of the people who visit our site are on mobile.

Re: embed map viewed on mobile device

ZaraMatheson — Thu, 19 Dec 2024 00:05:51 GMT

<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; } } </style> <script type="module" src="https://js.arcgis.com/embeddable-components/4.31/arcgis-embeddable-components.esm.js"></script> </head> <arcgis-embedded-map style="height:75%;width:50%;" item-id="cf35269c59cd45cc9bfae3480c0a64d7" theme="light" portal-url="https://arcgis.com" information-enabled> </html>

Hello! You should be able to use a % for the width or height of the embedded map as long as the body or containter has a height/width defined. The above works for me.

Re: embed map viewed on mobile device

TimHayes3 — Fri, 20 Dec 2024 21:54:17 GMT

Thank you for the response, Zara. Will this work in an iframe? here is the code I am using:

Where would I add the % of width and height in this code?