Legend for Map Tour Template

7620
12
11-13-2013 05:36 AM
LizGoldman1
New Contributor III
Is there a way to customize the map tour template to include a legend? I have a few base layers and users wont be able to tell what they are without a legend...
Also, popups don't work in this template. Anyone have any luck activating popups in the map tour template? Either or both of these features would make my map much more clear.

Thanks in advance!
12 Replies
RupertEssinger
Frequent Contributor
In order to keep the map tour UI fairly simple we didn't add a legend option or add support for the native popups in your web map, but these are among the things we are thinking about for the future based on feedback from authors. Some authors are adding their own legends by using the intro picture option and using that to show their legend. You can also download the template and customize the code to add a legend and I'll post an example of that if I come across a good one.

My colleague Tim Craig in the Esri California regional office came up with this ingenious use of the map tour subtitle to provide a legend for this demo map tour. He just used HTML tags in the subtitle text to do this. No custom coding needed:

http://caro.maps.arcgis.com/apps/MapTour/index.html?appid=4b456fa5a437429ba8eaa59496a43c6f&webmap=ab...
0 Kudos
EvanThoms
Occasional Contributor II
Hi Liz,
How did you get "a few base layers" into your tour map?
and,
Did you ever get a legend put into it?
thanks,
Evan
0 Kudos
LizGoldman1
New Contributor III
Hi Evan,
Sorry I didn't use the right terminology for online maps - when  I said base layers, I meant that I had some contextual layers that would not be the highlight of the map.
I made a story map to highlight grant success stories, and wanted to have 5 different point layers for our 5 grant types as a background, contextual layer to be displayed along with the story map points. I used html and created a legend in illustrator that I then just stuck into the map's description.
I understand wanting simplicity for the story map template, but legends are so incredibly important. I'm a little surprised that a legend isn't at least an option for this template.
EvanThoms
Occasional Contributor II
Oh, I see. Thanks for the clarification.

For the sake of discussion, this is what I figured out. If I add this style element to the top of my index.html:

<!DOCTYPE html>
<html>
 <head>
  <style>
   h2 {width:800px;}
  </style>


and then add a div to the headerDesktop element to hold a picture of my legend or whatever:

<!-- Desktop header -->
<div id="headerDesktop">
 <div class="textArea">
  <h1 class="title"></h1>
  <h2 class="subtitle"></h2>

  <!-- trying to add image in header-->
  <div id="legend" style="width:160px;vertical-align:top;background-color:#FFA500;float:right;index">
   <img src="mapdata/scarp_thumb.jpg" width="160px" height="160px"/>
  </div>
    
  <!-- end legend block -->
 </div>


I end up with this (which I guess you'll have to click on to expand - it's not very large in my preview)

[ATTACH=CONFIG]31849[/ATTACH]

You can see that I have made room for the div by reducing the width of my subtitle and the picture is in the right place horizontally, but it's not aligned correctly vertically. You can only barely see a strip of it above the map frame. I cannot get the div to move up at all. I don't know if its in the wrong div or what. It's frustrating, because it looks so close.

So, what I ended up doing, as you can also see in the screenshot, is encode the legend in the map subtitle with html tags as Rupert suggested, which is not too bad.

For what is worth to anyone who stumbles on this, the subtitle variable in my index.html looks like this:

subtitle: "Photos are categorized by content:<br><img src='GenericRed.png' height='13px'/>  landslide****<img src='GenericPurple.png' height='13px'/> ground shaking****<img src='GenericBlue.png' height='13px'/> post-earthquake engineering<br>foo<br>foo",
0 Kudos
Réseau_d_Observation_du_Littor
New Contributor
In order to keep the map tour UI fairly simple we didn't add a legend option or add support for the native popups in your web map, but these are among the things we are thinking about for the future based on feedback from authors. Some authors are adding their own legends by using the intro picture option and using that to show their legend. You can also download the template and customize the code to add a legend and I'll post an example of that if I come across a good one.

My colleague Tim Craig in the Esri California regional office came up with this ingenious use of the map tour subtitle to provide a legend for this demo map tour. He just used HTML tags in the subtitle text to do this. No custom coding needed:

http://caro.maps.arcgis.com/apps/MapTour/index.html?appid=4b456fa5a437429ba8eaa59496a43c6f&webmap=ab...


Hello,

I'm interested in this post about legends in Map Tour. I can not see your demo...
Could you suggest me a method to integrate a dynamic map legend in this type of webmap application with custom code in the template ?

Thanks
Arnaud
0 Kudos
RupertEssinger
Frequent Contributor
Sorry that link isn't working. Here's one way to provide a legend in a map tour: use the capability in map tour to use a Intro image that isn't a point on the map.

http://brandonbockrath.com/Storymaps/Landmarks/whlc/index.html

(Courtesy of Brandon Bockrath)
0 Kudos
RupertEssinger
Frequent Contributor

And here's a couple of examples that put a legend in the header:

http://alaska.usgs.gov/announcements/news/1964Earthquake/

http://www.mappmycity.ca/Const_Detours/index.html 

And here's a legend added in via customization: LOSSAN Coastal Rail Corridor

0 Kudos
JosephJose
New Contributor III

I want to capture statistics of the story map usage.

Not sure but I believe some statistics can be captured in the server

I was thinking of a google analytics script to be added for the storymap.

What would be the recommended standard options available?

0 Kudos
OwenGeo
Esri Notable Contributor

Hi Joseph Jose

Your question on statistics is a bit off-topic in this discussion of map tour legends. I'd suggest starting a new discussion in the ArcGIS Online place with your question so it will get more attention.

I'm suggesting the ArcGIS Online place since your question applies to any web app, not just story maps, so members of that space might have good suggestions on how to capture statistics.

Owen

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos