Embedding ArcGIS Online maps in your own website

In a previous post we showed how you can use the new JavaScript sample templates to create custom apps using ArcGIS Online maps. Another custom way you can use ArcGIS Online maps is to embed them in your website. Here’s how…

This is a map of the Esri Redlands campus made using the ArcGIS.com viewer. We used the World Topographic basemap and zoomed to the Esri campus, saved the map, then made it publicly available for anyone to find. You can use this map if you are following along, or create and save your own.

 

To share this map with others, just look for the share button at the top of the map:

Note that there are various options for how you can share this map; you can copy and paste a link to the map in an E-mail, or can share it via your Facebook or Twitter account.

But to include this map in a Web page what we’ll want to do is use the HTML embed string which is ready-to-use. All we have to do is copy and paste the text into our page. Below we’ve checked the box to enable the use of the zoom tool, chosen a size for our map (500 x 400 chosen here), then we can select the HTML and copy it.

In this first example we’ll keep it very simple. We opened Notepad (any text editor will do), pasted the copied HTML into a new, empty file, and saved it as a file with a .html extension.

When we double-click the file we can see our working map in our humble little HTML page.

Next we’ll move up to an existing Web page with a more interesting layout and embed our map. Here’s a sample page (full of lorem ipsum placeholder text) that has a more fully developed layout.

The process is exactly the same as in our very simple first example - edit the Web page, copy and paste the HTML into the page, save it, and you’re ready to publish the page with an embeded map. Here’s where we pasted our HTML:

 

And here’s the “finished” layout of our Web page including the ArcGIS Online map of the Esri Redlands campus:

As you can see it’s easy to create your own Web sites that include an ArcGIS Online map, and just one of many ways you can leverage them.

This entry was posted in ArcGIS Online, Services and tagged , , . Bookmark the permalink.

Leave a Reply

6 Comments

  1. mcrossett says:

    Very slick, even i could pull it off in just a few minutes. See #2 on this page https://sites.google.com/a/dc.gov/vpm/example

    Random arcgis.com question – Why can’t you add push pin/txt notes funcationality in maps made in arcgis.com? I could see some value in having that ability with the whole wrapping embedded map functionality described above.

  2. Chuanyun_Fei says:

    I’m a fan, very cool functionality; even I could do it in 5mins. See #2 here https://sites.google.com/a/dc.gov/vpm/example
    Random arcgis.com question – why can’t you add text or label map notes to your maps like you can in ArcGIS Online Explorer? I could see a lot of value in being able to incorporate them into a arcgis.com map using this embedded map functionality.

  3. mcrossett says:

    I’m a fan, very cool functionality; even I could do it in 5mins. See #2 here https://sites.google.com/a/dc.gov/vpm/example
    Random arcgis.com question – why can’t you add text or label map notes to your maps like you can in ArcGIS Online Explorer? I could see a lot of value in being able to incorporate them into a arcgis.com map using this embedded map functionality.

  4. jjensen says:

    How does one upload a shapefile/geodatabase to ArcGIS.com, create a custom map and then embed this on a public Google Sites?

  5. mrichard768 says:

    Thanks for this, Bern. When I paste the html, all that shows is “view larger map.” The map does open off the link, but do you know why it is not showing on the page? Should I try saving it as “small?” Thanks.

    • Bern Szukalski says:

      Make sure you are copying the entire HTML. If you are it might be the result of formatting in the web page you are trying to embed in. You can verify that the map is fine by copying and pasting the HTML into a new Notepad (or whatever text editor you have handy) text file, saving it to your desktop with an .html extension, then opening it. Your map should appear. If it does, then it’s something about your web page.