How to Embed an ArcGIS Map on a Digital Commons Site State Agencies have tons of information that they need, want, or are required to share with citizens. As part of our continuing effort to provide tools to effectively communicate this information, we are offering a great interactive mapping tool to help your agency convey their information on the website. This new capability is provided by ArcGIS Online which is an online web GIS that allows agencies to create, use, and share maps and data. If this is new to you, don't worry. It's really easy to get started. The first step is to make sure that your agency has an ArcGIS Online (AGOL) account and learn how to publish maps in the cloud. Chances are, your agency has GIS staff that can help with this. The next step is to plan how your map (or mapping application) will look when it is embedded in the website. Digital Commons is a responsive platform, which means all the websites are mobile friendly. Once embedded, map space can become cluttered very quickly when viewed on mobile devices. When making your map, remember to keep the interface and basemap simple and uncluttered and include the minimal amount of tools, panels, logos, etc. required for your application. In an effort to standardize map displays across all Digital Commons sites we recommend the following guidelines: Use a basemap of light gray canvas unless data or cartography requires another base map At a minimum, include the following tools: zoom control, home button, location search, and view larger map Let's get started! For more information visit ArcGIS Online Help. Create Map Using ArcGIS Online Log in to ArcGIS Online and create your map. Use a map scale that is as large as possible while still being able to see the all of the map features. HINT: be sure to collapse the "details" panel to test the position of the map. Save the map. Share the map with "Everyone." Click "Done." Set Options for the Map Set the map size dimensions to 1200x600. Check the box to "Allow responsive sizing." At a minimum, include the following tools: Zoom Control Home Button Location Search My Location Legend (not required if displaying single data layer with same symbols) Select the "Light" theme. Click the "Copy" button to get the necessary code snippet. Paste the code into a text editor. Click "Done." Create Mapping Web Application Create the Web Map Application Click the "Share" button again in the map viewer toolbar Select the "WebAppBuilder" tab Enter any tags (words, phrases) that will help people find your map. Enter a description of the mapping application. This can be the same text that you entered when creating your map. However, if there is functionality that you would like to highlight then this is the place to do it. Set the Options for the Web Map Application Choose the Theme Select the "Billboard" theme Select a color style based on the primary color of your website Custom colors can be entered by clicking the color showing the color code Select the layout with the widgets aligned horizontally in the top-left portion of the screen Add Tools & Preview the App After confirming that the correct map will be used for the application, select the widgets to add to the application REMEMBER: Keep the principal of "less is better." Screen space on mobile devices is valuable. Only add additional widgets which are necessary for your application to function. If the Search Widget will be included in the application, replace the default text "Esri World Geocoder" with "Enter address, city, or place" and restrict the search area to USA. These changes can be completed by mousing over the Search Widget and clicking on the pencil icon to open the configuration options. Save and preview the application by clicking on the "Launch" button. Make any necessary changes and when you are satisfied with the application, copy the URL in the web address bar. Replace the URL contained in the code you pasted from the web map in your text editor with the URL you just copied. For example, you would remove: http://arcgis.com/apps/Embed/index.html?webmap=4cc9f0ba8e8c4d68b50c01c17efd4730and replace it with http://arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806The updated portion of code should now look similar to the following: <iframe width="1200" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806"></iframe> In order for popups to appear correctly in both desktop and mobile environments, we need to add the mobilebreakpoint parameter to our url code snippet. We suggest using a value of 300. Now your code snippet should look like: <iframe width="1200" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806&mobilebreakpoint=300"></iframe> Embedding Map into the Web Page Navigate to the web page on your website that is going to contain the map and click "Edit". Go to the WYSIWYG text editor and click the "Source" button Use CTRL+V to paste the code snippet into the page Unclick the "Source" button to see the map embedded in the WYSIWYG editor Save the page and preview.