nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Legend for Map Tour Template

LizGoldman1

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!

Encontre mais publicações marcadas com

Accepted answers

All comments

RupertEssinger

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=ab82b9f88c3944f6a01f4f2323416738#

EvanThoms

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

LizGoldman1

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

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",

legend.png

Réseau_d_Observation_du_Littor

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=ab82b9f88c3944f6a01f4f2323416738#

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

TaraHaynes_1-1638301577003.png

RupertEssinger

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)

RupertEssinger

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

JosephJose

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?

erica_tefft_1-1638303251939.png

KyleWalsh1

I needed a legend for the location pins. I did this workaround to color the text in the header to match the location pin color. These colors seem to show up okay on the black background.

____Green=Public Access____Blue = Restricted Access____Red = Private Property

oevans_storymaps

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

NathanSteele

Thanks Rupert!

I really like these links, particularly the City of Windsor one. Their header incorporates several images and graphics. How do you do this? I can only seem to edit text in my title and subtitle.

Thanks

TimSolomonson

I'd also stongly advocate for a legend. We use this as a design tool to walk designers through existing site features...having a legible visual color coding system where you can use the 4 built in point colors as legend items would even be enough.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.