{"id":66461,"date":"2015-02-19T11:52:57","date_gmt":"2015-02-19T11:52:57","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/new-options-for-embedding-maps\/"},"modified":"2018-03-26T21:04:31","modified_gmt":"2018-03-26T21:04:31","slug":"new-options-for-embedding-maps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/mapping\/mapping\/new-options-for-embedding-maps","title":{"rendered":"New Options for Embedding Maps"},"author":6111,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[23161,24421,24451,24461],"industry":[],"product":[36551],"class_list":["post-66461","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-maps","tag-templates","tag-web-map","tag-web-mapping-applications","product-arcgis-online"],"acf":{"short_description":"The December release of ArcGIS.com included a new and improved way to embed maps. This post will review the process for creating embedded...","flexible_content":[{"acf_fc_layout":"content","content":"

The December release of ArcGIS.com included a new and improved way to embed maps. This post will review the process for creating embedded maps and explore some of the options using the\u00a0same web map for each example.<\/p>\n

Accessing the Embed in Website dialog<\/h2>\n

In order to embed a map in a website it must be shared with Everyone. \u00a0 From the Map Viewer click the\u00a0Share <\/strong>button,\u00a0<\/strong>then:<\/p>\n

    \n
  1. Share the map with everyone.<\/li>\n
  2. Click Embed In Website.<\/strong><\/li>\n<\/ol>\n

    \"\"<\/a><\/p>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    <\/h2>\n

    Example 1: Default map options and size<\/h2>\n

    [iframe src=”https:\/\/www.arcgis.com\/apps\/Embed\/index.html?webmap=9f174348f0c74a85a7e515c051f42c3f&amp;extent=-37.6657,-25.4691,134.5999,76.0622&amp;zoom=true&amp;scale=true&amp;theme=light&disable_scroll=true”\u00a0width=”500″ height=”400″]<\/p>\n

    Configuring the Embed App<\/h2>\n
    <\/div>\n

    The embed app is highly configurable through the Embed in Website<\/strong> dialog window.\u00a0Follow this simple 4-step process:<\/span><\/p>\n

      \n
    1. Choose what you want to\u00a0embed. \u00a0This post is concerned with maps, but you could also embed a presentation.<\/li>\n
    2. Choose the size of your map in pixels.<\/li>\n
    3. Choose the map options you want included.\u00a0The Map Preview<\/strong> will give an idea of what your options will look like in the final product.<\/li>\n
    4. Copy the code for embedding the map in your website then click Done<\/strong>. \u00a0The HTML can then be incorporated into your website.<\/li>\n<\/ol>\n
      \"\"<\/a><\/span><\/div>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      <\/h3>\n

      Example 2: Configured to include the map options chosen above<\/h2>\n

      [iframe src=”https:\/\/www.arcgis.com\/apps\/Embed\/index.html?webmap=9f174348f0c74a85a7e515c051f42c3f&extent=-37.4899,-25.4691,134.7757,76.0622&home=true&amp;zoom=true&scale=true&search=true&searchextent=true&details=true&legend=true&active_panel=legend&basemap_gallery=true&theme=light&disable_scroll=true”\u00a0width=”100% height=”500″]<\/p>\n

      <\/h3>\n

      Example 3: Configured to use the basemap toggle and dark theme, the legend, home button, and scale bar have been turned off<\/h2>\n

      [iframe src=”https:\/\/www.arcgis.com\/apps\/Embed\/index.html?webmap=9f174348f0c74a85a7e515c051f42c3f&extent=-37.4899,-25.4691,134.7757,76.0622&zoom=true&scale=false&search=true&searchextent=true&details=true&basemap_toggle=true&alt_basemap=topo&theme=dark&disable_scroll=true”\u00a0width=”100%” height=”500″]<\/p>\n

      Customizing the embed app beyond the UI options<\/h2>\n

      Finally, there are several options worth exploring that are not accessible from the <\/span>Embed in Website<\/strong> dialog, but are useful when embedding in a blog or website.<\/span><\/p>\n

      If you want any of the options below then you will need to do modify the url parameters within the embed code. For instance:<\/p>\n