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; } } }

creating a legend in Finder app

Anonymous User

I have started creating some Finder application maps (Parcel, Planning Filings) and my co-workers have enjoyed being able to search data on a larger scale than just addresses. What I was curious about is the ability to add a legend to the map. I'm not seeing anyway to configure one or any code on GitHub to add one. It would be nice to show what the various symbols mean. Any help would be greatly appreciated.

Find more posts tagged with

Accepted answers

All comments

PaulStephenson

I've run into the same thing, and I'm sure many others have as well. In a couple of cases I have added the legend as an image to the Help section as a work around. Here's an example: http://morton-il.maps.arcgis.com/apps/Solutions/s2.html?appid=552d82542e634540a89dff8b88ba7fd5

Paul

Anonymous User

Paul,

Thank you very much for that suggestion. It works wonderfully. Great work-around. Took me a moment to figure out how to embed the image but got it done. Thank you again.

Tom

JohnFalkowski

How did you embed the image? I'm assuming you loaded the legend jpg into a website and then referenced it, but details would help.

John Falkowski

PaulStephenson

John,

That's exactly it. The legend is saved as an image, and hosted on a server. It is then referenced with an HTML img tag.

Paul

Anonymous User

John,

here is the code I found online

<br><img src="http://media.greenwood.in.gov/files/cds/StormSystemLegend.png"<br>

where you would insert your own url location image. Hope this helps.

Tom

ShawnaErnst

I followed this guide: Additional configuration - Get Started | ArcGIS for State Government‌

It works like a charm and makes a dynamic legend so if you update your map, you don't have to update the Legend graphic.

I can't figure out how to get a Legend Icon made, though. I'm getting a red X where the icon should be.

JuneAcosta

Hi Tom,

Where are you adding this img tag to show it on the help screen? Are you adding tag to the Finder.json file in the section where you are able to modify the text for the help?

ShawnaErnst

I ended up figuring out how to write a legend icon- here's the code (you can use this in conjunction with the Guide from my original post).

"iconJson": "[{'shape':{'type':'rect','x':2,'y':2,'width':4,'height':4,'r':0},'stroke':{'type':'stroke','color':{'r':0,'g':0,'b':0,'a':1},'style':'solid','width':2,'cap':'butt','join':4}},{'shape':{'type':'rect','x':2,'y':13,'width':4,'height':4,'r':0},'stroke':{'type':'stroke','color':{'r':0,'g':0,'b':0,'a':1},'style':'solid','width':2,'cap':'butt','join':4}},{'shape':{'type':'rect','x':2,'y':24,'width':4,'height':4,'r':0},'stroke':{'type':'stroke','color':{'r':0,'g':0,'b':0,'a':1},'style':'solid','width':2,'cap':'butt','join':4}},{'shape':{'type':'rect','x':12,'y':2,'width':16,'height':4,'r':0},'stroke':{'type':'stroke','color':{'r':0,'g':0,'b':0,'a':1},'style':'solid','width':2,'cap':'butt','join':4}},{'shape':{'type':'rect','x':12,'y':13,'width':16,'height':4,'r':0},'stroke':{'type':'stroke','color':{'r':0,'g':0,'b':0,'a':1},'style':'solid','width':2,'cap':'butt','join':4}},{'shape':{'type':'rect','x':12,'y':24,'width':16,'height':4,'r':0},'stroke':{'type':'stroke','color':{'r':0,'g':0,'b':0,'a':1},'style':'solid','width':2,'cap':'butt','join':4}},]",

JuneAcosta

In my case I need to embed an image on the Help screen likeTom. Adding the Legend widget does not work for my app since the layers I need for the legend are from a tiled service. I just cant figure out where to put the <src > tag to embed the image.

ShawnaErnst

Gotcha. You do that in the application configuration. Here's a picture of the configuration editor (the right-hand panel)...It's in the same spot where you write your help text.

Just add text like: <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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