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

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. In Map Viewer Classic, open a saved map and click Share.
  2. Verify that the map is shared with everyone (public).
  3. 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.

  4. 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.
  5. Copy the HTML code that's provided.
  6. Paste the code into your web page where you want the map to appear.
  7. In the code, find the URL for the map 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 will be able to access the map.

    Note:

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

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.
  • Improve data collection by embedding the Geoform app into your website.
  • 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. Select 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 will be able to 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 the Embed 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.

  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.
    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.
  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.
  8. 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 will be able to 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.