Embed maps, apps, and groups

One of the ways you can share maps, apps, or a group of maps and apps is to include them in a web page such as a blog or your organization's website. ArcGIS Enterprise provides the code you need and gives you options for the layout and display. You need sharing privileges to embed maps, apps, and groups using the tools in the ArcGIS Enterprise portal.

Embed a map

Note:

This functionality is currently only supported in Map Viewer Classic. It will be available in a future release of Map Viewer.

To embed a public map you've opened in Map Viewer Classic, copy the ready-to-use HTML code and paste it into your website. Optionally, you can configure the embedded view of the map before copying the code. You can choose the size of your map, select map options, add a symbol to a location on the map, and choose a theme.

1. Verify that you are signed in with an account that has privileges to share content.
2. In Map Viewer Classic, open a saved map and click Share.
3. Verify that the map is shared with everyone (public).
4. Click Embed in Website.

   If this option is not available, it means the map is not public and you cannot embed it. If you own the map, you can change its status to public.

5. Optionally, configure the map with the following:
   • Choose a map size.
   • Check the boxes for the options you want to include on the map: zoom control, home button, basemap selector (choose gallery or toggle), link to view larger map, disable scroll zoom, scale bar, location search (check to use current map extent for search), map details, legend (choose the active pane—map details or legend), and preview image (shows an image of the map while the app loads). A preview shows you where your options will appear on the map.

     Tip:

     If you included the option to view a larger map, the larger map opens in an embedded app on its own page. You can change the name of the link by editing View larger map in the HTML code.

   • Add a symbol to a specific location on the map. Use the Add Symbol tab to select the location and enter a title for the symbol, a description for the pop-up, and the URL to the image to display as your symbol. For best results, your image should be no larger than 120 pixels wide by 120 pixels high. Other sizes will be adjusted to fit. Acceptable image formats are PNG, GIF, and JPEG.
   • Choose a theme.
6. Copy the HTML code that's provided.
7. Paste the code into your web page where you want the map to appear.

Embed an app

You may want to embed an app in a website instead of embedding the map. Embedding an app can be useful in various scenarios. The following are some examples:

• Show an app you have created using an ArcGIS Configurable Apps template (for example, using the Basic Viewer template) that includes all the app functionality you configured.
• Show a map that includes a premium service with embedded credentials, such as the World Routing Service, by embedding an app created from the Directions template or using the Directions widget in ArcGIS Web AppBuilder.

You can embed an app in a website using the Embed in Website option when you embed a public web map. To embed the app instead of the map, modify the generated HTML code as described in the steps below. These steps can be used to embed a hosted web app or a Web AppBuilder app.

1. Verify that you are signed in with an account that has privileges to share content.
2. Create a map and web app.
3. Copy the URL for the app from the Overview tab of the app's item page or from the address bar in your browser when the app is open.
4. In Map Viewer Classic, open the map that was used to create the app and click Share.

   Note:

   This functionality is currently only supported in Map Viewer Classic. It will be available in a future release of Map Viewer.

5. Verify that the map is shared with everyone (public), and click Embed in Website.

   If this option is not available, it means the map is not public and you cannot embed it. If you own the map, you can change its status to public.

6. Select the desired size for embedding the app.
7. From the HTML code that's provided, remove the portion of the code after src= and before ></iframe> and replace it with the app URL you copied.

   For example, you would remove "http://arcgis.com/apps/Embed/index.html?webmap=4cc9f0ba8e8c4d68b50c01c17efd4730" and replace it with "http://arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806". The updated portion of code should look similar to the following:

   <iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
   src="https://arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806"></iframe>

8. Copy and paste the entire HTML code block to the website configuration.

   Tip:

   You can also use URL parameters to control the look and feel or functionality of the app that you are embedding.

Embed a group of maps and web apps

Note:

The embed gallery is deprecated. Any embed code copied into a web page will continue to work until it is officially retired. Showcase your group content using Instant Apps instead.

When you embed a group through the portal website, you choose a layout and how to display the group items. You can only embed public groups, and only maps and web apps display in the embedded gallery.

1. Open the public group you want to embed.
2. On the Overview tab, click the Embed (deprecated) button.

   If you have the privilege to create content, you will see the Launch Instant Apps button instead of the Embed (deprecated) button. Click the drop-down arrow next to the Launch Instant Apps button and click Embed (deprecated).

   Note:

   If neither option is available, it means the group is not public, and you cannot embed it. Group owners, managers and those with the privileges to manage groups can change its status to public.

3. Choose a layout for the group items.
4. Choose how to display the maps and web app: over the embedded gallery, in a new window with a predefined gallery app, or in a new window with a configured app.

   Enter a URL to your app if you chose to display the items in a new window with a configured app.

5. Copy the HTML code that's provided.
6. Click Done.
7. Paste the code into your web page where you want the group to appear.