Back to Top

Embed maps, apps, and groups

In this topic

  1. Embed a map
  2. Embed an app
  3. Embed a group of maps and web apps

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 Online provides the code you need, options for what to include, and layout options.

Embed a map

To embed a public map you've opened in Map Viewer using ready-to-use HTML code, do the following:

  1. In Map Viewer, open a saved map.
  2. Verify that the map is shared with everyone (public).
    Note:

    If the map is not shared publicly, clicking Embed map Embed map will automatically open the map sharing settings.

    See Considerations for sharing maps for more information.

  3. On the Contents (dark) toolbar, click Embed map Embed map.
  4. Optionally, in the Embed window, configure the map with the following:
    • Choose a map mode (light or dark).
    • Check the boxes next to the map elements you want to include on the map: map title, legend, map summary, and bookmarks.
    • Turn on the Open in map viewer toggle button to enable the option to open the embedded map in Map Viewer.
  5. Click Copy HTML to copy the HTML code provided.
  6. Paste the code into your web page where you want the map to appear.
    Note:

    The HTML code contains a script tag and the custom element with the map to embed. Paste the script tag into the <head> of the web page. Add the custom element to the <body> of the 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 an ArcGIS Online hosted web app or a Web AppBuilder app.

  1. Create a map and web app in ArcGIS Online.
  2. 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.
  3. 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.

  4. 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 are the owner of the map, and your organization allows sharing outside the organization, you can change its status to public.

  5. Choose the desired size for embedding the app.
  6. From the HTML code that's provided, do the following:
    1. 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 "https://acme.arcgis.com/apps/Embed/index.html?webmap=4cc9f0ba8e8c4d68b50c01c17efd4730" and replace it with "https://acme.arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806".

    2. Replace your organization's URL with the ArcGIS public URL (https://arcgis.com). For example, if your organization's URL is https://acme.maps.arcgis.com, replace acme.maps.arcgis.com with arcgis.com.

      This ensures that users outside your organization can access your app.

      Note:

      If your organization allows anonymous access, you do not need to replace your organization's URL with the ArcGIS public URL.

      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>
  7. 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

When you embed a group through ArcGIS Online, 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 Create web app.
  3. Click the Embed (deprecated) button Embed.

    If this option is not available, it means the group is not public and you cannot embed it. If you are the owner of the group, and your organization allows sharing outside the organization, you can change its status to public.

  4. Choose a layout for the group items.
  5. 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.
    1. Select a predefined gallery app if you chose to display the items in a new window.
    2. Enter a URL to your app if you chose to display the items in a new window with a configured app.
  6. Copy the HTML code that's provided.
  7. Click Done.
  8. Paste the code into your web page where you want the group to appear.
  9. In the code, find the URL for the gallery and replace your organization's URL with the ArcGIS public URL (https://arcgis.com).

    For example, if your organization's URL is https://acme.maps.arcgis.com, replace acme.maps.arcgis.com with arcgis.com.

    This ensures that users outside the organization can access the gallery.

    Note:

    If your organization allows anonymous access, you do not need to replace your organization's URL with the ArcGIS public URL.

Feedback on this topic?

In this topic
  1. Embed a map
  2. Embed an app
  3. Embed a group of maps and web apps