Muggle Warning - HTML code will be used in this blog
For this example I'm going to use a web map and a mapping application used by the Hawaii State Department of Health to show flu vaccination sites. Here are the web IDs for the two items:
web map ID: webmap=cda25f51ce994443a592011ecec15e03
mapping application ID: appid=8d6af87ca1f249878b2e6beb9a38ebec
Starting in the web map editor on ArcGIS Online, you click the "Share" button and then click the "Embed in Website" button. That opens up a window to configure the embedded web map.
As you turn various tools on and off, the code in the HTML window will change accordingly.
For example, here you can see I've turned on the zoom control, legend, description and search tools.
I've also set the size to 500 x 400 pixels and added a link to "View Larger Map".
When you're finished configuring your embedded web map, you can copy the code in the HTML window and paste it into your web page.
Here's the web map for flu vaccination sites embedded into this web page using the configuration example above (modified as described below):
View Larger Map
This is a live map, the user can pan, zoom, search and click on a star for more information.
But there's one further modification you can do. By default, the "View Larger Map" link opens the web map in the web map editor. It is usually better to open the web map in a mapping application. You can do this by changing the HREF link that you copied from the HTML window.
Let's deconstruct the code from the HTML window and you'll see what I mean. Here's the code split into sections:
1) set up the iframe size and other parameters:
<iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
2) use the embed template from ArcGIS Online:
src="http://histategis.maps.arcgis.com/home/webmap/templates/OnePane/basicviewer/embed.html?
3) put the flu vaccination sites web map inside the template:
webmap=cda25f51ce994443a592011ecec15e03
4) open the map at an extent that shows the eight main Hawaiian islands:
&gcsextent=-160.3411,18.6238,-154.6612,22.7594
5) add the tools selcted during configuration:
&displayslider=true&displaylegend=true&displaydetails=true&displaysearch=true">
6) close the iframe that contains the embedded map:
</iframe>
7) start on a new line and make the font smaller:
<br /><small>
8) use the viewer template from ArcGIS Online:
<a href="http://histategis.maps.arcgis.com/home/webmap/viewer.html?
9) put the flu vaccination sites web map inside the template
webmap=cda25f51ce994443a592011ecec15e03
10) open the map at an extent that shows the eight main Hawaiian islands:
&extent=-160.3411,18.6238,-154.6612,22.7594"
11) set the color of the text and set it to open in a new window:
style="color:#0000FF;text-align:left" target="_blank">
12) show the text and close the hyperlink and set the font back to what it was
View Larger Map</a></small>
To change the "View Larger Map" hyperlink to open a mapping application, you need to change parts 8 - 10 as follows:
8) change from the viewer template to the OnePane basicviewer app template:
<a href="http://histategis.maps.arcgis.com/apps/OnePane/basicviewer/index.html?
9) change the template contents to the app:
appid=8d6af87ca1f249878b2e6beb9a38ebec
10) and you don't need the extent at all (the app knows the extent) but keep the close quote:
So now the HTML text to copy and paste looks like:
<iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://histategis.maps.arcgis.com/home/webmap/templates/OnePane/basicviewer/embed.html?webmap=cda25f51ce994443a592011ecec15e03&gcsextent=-160.3411,18.6238,-154.6612,22.7594&displayslider=true&displaylegend=true&displaydetails=true&displaysearch=true"></iframe><br /><small><a href="http://histategis.maps.arcgis.com/apps/OnePane/basicviewer/index.html?appid=8d6af87ca1f249878b2e6beb9a38ebec" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small>
Use the comments if you have any questions on this.
A hui ho!
No comments:
Post a Comment