Embedding web maps

One of the ways you can share maps is to embed them in a web page, such as your organization’s website. ArcGIS Online automatically generates the HTML you need, and also provides options for what to include in your embedded map.

*

How to embed a map

Web maps are easy to embed in websites and blogs. To embed your map follow these steps.

Step 1. Using the map viewer, save any changes you may have made, then click Share.

Step 2. Share the map publicly. This enables the Embed In Website button shown in Step 3 below.

Step 3. Choose Embed In Website.

Step 4. Choose the embed options as desired.

A. Specify the size of your map. It’s recommended that you leave Allow responsive sizing checked. This ensures the map will use the available width while maintaining the aspect ratio.

B. Choose the desired Map Options. For example, you may want to include a view larger link, or a Home button, or may want a dark theme instead of a light one.

Map Options are a powerful feature, enabling you to customize your embedded map experience in a variety of ways, similar to some configurable apps.

Tip: Keep Disable scroll zoom checked to prevent scroll from zooming the map, instead of scrolling the web page. Viewers can still navigate the map by panning, or clicking zoom in/out buttons.

C. Any changes you make will automatically modify the HTML. When finished, click Copy to capture the HTML to the clipboard to paste into your website or blog.

D. Click Done to dismiss the dialog.

Tip: While you can embed any publicly shared map in your website or blog, using a map that you, or your organization, owns and maintains control over is best. You can set delete protection to ensure the map is not accidentally removed. See How to prevent accidental deletion.

*

Add a View larger map link

An option you can enable for your embedded map is View larger map. It’s a link a visitor to your site can click to see and interact with a larger version of your map, outside the context of the hosting web page or blog. Check the box in the Map Options (see 5B above) to enable View larger map.

A View larger map link will be added to the HTML, and will appear on the left, below your map, when you embed it.

You can edit the embed HTML to change the link text, size, color, and more using standard markup.

*

View larger map alternatives

When using the default View larger map link, your map will open in a new browser or tab with the selected map options (see 5B above). An alternative is to edit the link so that it opens within a different app that showcases your map, and also provides a different user experience.

To make a substitution for the default, modify the link found in the embed HTML to point to the app. For example, shown below is the <a> tag portion of the default markup that adds a “View larger map” link.

<a href="//bwszukalski.maps.arcgis.com/apps/Embed/index.html?
webmap=04bcb23f88e54dcabf873a00dd66d9ad&amp;
extent=-123.6139,25.0166,-70.2642,48.6987
&amp;zoom=true&amp;scale=true
&amp;disable_scroll=true&amp;theme=light"
style="color:#0000FF;text-align:left"
target="_blank">View larger map</a>

Below the HTML has been modified to substitute a URL that opens the map using the Basic Viewer instead.

<a href="//bwszukalski.maps.arcgis.com/apps/View/index.html?
webmap=04bcb23f88e54dcabf873a00dd66d9ad" style="color:#0000FF;
text-align:left" target="_blank">View larger map</a>

To obtain the URL, share and configure the map in a different app template, or use the “quick share” technique described in Quickly share your map using an app.

*

For more information

This post was originally publishing on January 24, 2017, and has been updated.

This entry was posted in Apps, ArcGIS Online and tagged , , , . Bookmark the permalink.

Leave a Reply

3 Comments

  1. pmckinneyccpa says:

    Is there a reason why ArcGIS Online web maps and App templates always load so slow as iFrames?

    I haven’t seen a single ArcGIS Onlined embedded map (iframe) that doesn’t load very slowly? I’ve always been curious.

    • Bern Szukalski says:

      There really shouldn’t be a noticeable difference, but it depends on a lot of things. I checked with one of our devs — and there really shouldn’t be a difference. Personally, I’ve not noticed anything slower with embedded maps or apps compared to “normal,” and if there is overhead it’s usually because the map or app is slow to load for different reasons, like the services themselves, rather than anything to do with the iFrame. In other words, a slow map or app will be slow in an iFrame.

      Documentation exists that suggests iframes do add a bit of overhead to the page rendering and can slow things down because the resources in the app referenced by the iframe must load. Other articles say there is a perception that the page is slow because iframe blocks the window onLoad event until all the iframe’s resources have loaded. But like I said, I can’t tell the difference between opening a map or app in a regular browser window/tab vs. the same map or app embedded in a web page.

  2. emily.lee@rivcoit says:

    Is there a way to pin down the legend on the embeded webmap without having to click on the >> button?