Last year, Map Viewer introduced a new embed experience, allowing you to customize the map elements you want to include and quickly copy the HTML code into your website. This approach takes advantage of web components from the ArcGIS Maps SDK for JavaScript and means that your website does not need to load an entire application for each embedded web map, improving overall loading performance. We realize, however, that some workflows require the traditional iFrame embed approach instead, so with the October ArcGIS Online update we have added an iFrame embed option. This blog will outline key differences between the two options and highlight some other recent enhancements to Map Viewer as well.
Accessing the new iFrame Embed option
Both embed options can be accessed from the Embed map button on the Contents (dark) toolbar in Map Viewer (Ensure that you are logged in and have a publicly shared web map open). The embed configuration window will open and you can customize the map elements you want to include in your output.
You will notice that there is now a new drop-down menu to the left of the HTML code. Script embed (the component approach) is the default, but you now have the option to select iFrame embed instead.
The iFrame embed leverages the new custom link sharing option from Map Viewer and wraps that link in an iFrame tag. You will see the HTML code update accordingly. As with Script embed, simply copy the HTML code and paste it into your web site.
The visual output from both embed options should appear identical in your applications. Remember – with both script embed and iframe embed you can modify the code in your website at any time. Adjust the height or width of your map, add or remove map elements, update the zoom level, or even replace the webmap ID! Both options let you adjust these in the code after you have copied the HTML from the embed configuration window.
When should I use Script Embed vs. iFrame Embed?
As mentioned earlier, Script embed leverages web components from the ArcGIS Maps SDK for JavaScript and will have better loading performance over iFrame embed, especially when you have multiple embedded maps in a single website. It is important, however, to keep up with version management when using the Script embed option to ensure optimal performance (See note).
The iFrame embed option allows for a quick and easy embed experience when working with websites such as blogs where you have less control over what kind of content you can embed. Both options allow you to modify the elements of your map that show and will appear identical to your users.
Other Enhancements
With this release we also added a toggle to the embed configuration to allow users more control over disabling scroll zoom when embedding. Scroll zoom continues to be disabled by default, but you now have control over whether you want to adjust that setting. We will continue to explore adding additional map elements to the embed configuration and improving sharing options for non-public maps.
Article Discussion: