How to Embed a Map from ArcGIS Online Into Your Website
In my last post, I showed how geospatial professionals can capitalize on the basics of ArcGIS Online—how to make a simple map using readily available resources as well as those being created and used by your organization and, further, how to make these processes part and parcel of your workflow. Another simple but powerful feature of ArcGIS Online is the fact that these maps can be embedded in your website.
The map created from the last tutorial was made publicly available. This was done by selecting the share button and checking “Everyone (public)." By clicking on the map link, you can follow along using the map created in the last post as an example of how to embed your map into a web page.
Also on this button option you will find “Link to this map,” which in this case lists the url http://bit.ly/L4gMsP. Each map you create has a link that can be emailed to direct others to your map.
Looking farther below this link is the caption, “Embed This Map.” Here there are two more options: “Embed in Website” and “Make a Web Application.” Click on “Embed in Website.”
There are two pieces to the next option. There is some html as well as a list of radio and option buttons for map size and functions below the html. Each of these options automatically edits the html for you. For instance, changing from the medium radio button to large changes the map size from width="500" height="400" to width="940" height="600" within the html code itself. Below this tool are options for zoom control, scale bar, legend, description, location search and basemap locator, each adding functionality through the code by simply clicking the option. In other words, you don’t need to be a programmer for this one.
Click on the options you want to see in your embedded map. Then select all of the html code in the box and paste it into a new notepad file. Save this file with the extension “.html” (be careful to change the option when saving to all files, so you don’t end up with .html.txt as an extension). I named my file samplemap.html. Your map should look similar to the figure below, depending on the options you chose.
Now double-click on the file you just created. It should open in your default browser. The size of the map window and the controls you chose should all be there. In the figure, only the zoom control shows since this is the only option I chose for my map.
This code can be easily be cut and pasted into your organization’s website for viewing by your clients. By creating groups, you can also create custom maps for each client that are only accessible through a secure login. Many other options are also possible; let your imagination be your guide.