Recreation Outreach Solution - Park Locator App

ChienGeo · ‎12-03-2021

Hi,

I'm try to mimic the web app (https://statelocaltryit.maps.arcgis.com/apps/webappviewer/index.html?id=5ab754a588724888ac4585b7dc7d...) that I found from ESRI Recreation Outreach solution page (https://storymaps.arcgis.com/stories/88435bbb90954f2380e2cc42eb5bc837). The solution (park locator) has a totally different look and feel to the solution web page.

Below image is what I trying to mimic.

Next image is what I have:

I want to have the Amenities and Activities have similar look and feel. I'm trying to figure out, how it was done. Any help would be appreciated. Maybe if the web map that was use for the app could be shared with me.

JohannesLindner · ‎12-06-2021

What you need:

Field Amenities: comma separated string
- "Tent Camping,Group Camping,Dogs Allowed"
Field Activities: same
- "Fishing,Hiking,Biking"
image urls for check, cross, activity icons

Amenities:

Create an Arcade expression for each amenity you want to show:

var target_amenity = "Tent Camping" // change this
var amenities = Split($feature.Amenities, ",")
if(Includes(amenities, target_amenity)) {
  return "https://checkmark_url.jpg"
}
return "https://cross_url.jpg"

In the popup definition, create a table. First column is the amenity, second column is an image, image url = expression for that amenity. In the HTML source, it looks like this:

<h3>Amenities</h3>
<table>
<tablebody>
<tr><td>Tent Camping</td><td><img src="{expression/expr10}"></td></tr>
<tr><td>Group Camping</td><td><img src="{expression/expr11}"></td></tr>
<tr><td>Dogs Allowed</td><td><img src="{expression/expr12}"></td></tr>
<!-- and so on -->
</tablebody>
</table>

Activities:

For each activity you want to show, create an Arcade expression:

var target_activity = "Hiking" // change this
var activities= Split($feature.Activities, ",")
if(Includes(activities, target_activity )) {
  return "inline"
}
return "none"

In the popup definition, switch to HTML source. Use the style variable of the img tags to show or hide the activity icons:

<h3>Activities</h3>
<img src="biking_icon_url" style="display: {expression/expr15};">
<img src="hiking_icon_url" style="display: {expression/expr16};">
<img src="fishing_icon_url" style="display: {expression/expr17};">
<!-- and so on -->

Have a great day!
Johannes

ChienGeo · ‎12-08-2021

Thank you Johannes for the response! The solution has an arcade expression, but for some reason it doesn't show the check mark in the near me widget in the Web App Builder. In the expression, you see there is an check mark symbol. Which I don't understand how they get it in the expression.

Anonymous User · ‎12-09-2021

Hi Chien,

I wanted to offer some clarity on this. The storymap you referenced in your first message contains links to an older version of the Recreation Outreach solution. The version available now, version 2.0, is the version that contains the Arcade referenced above. It uses a single Arcade expression to list out the Activities and Amenities with the checks, and uses the Nearby Instant App, instead of WebApp Builder.

If you're not seeing the check marks in your pop-up, I would suggest making sure the fields listed in line 2 of Arcade expression are populated with 'Yes' or 'No' in the ParkRecreationFacilities layer. The fields are what drive the pop-up to create the check mark. If the fields aren't populated with anything, no checkmarks will appear.

This should still work in the older WebApp Builder version; the Near Me widget and the Nearby Instant app both use the pop-up and it's Arcade expressions to display results. But the Arcade above has been configured to be used with the Nearby Instant app, and so works better there.

I hope that clarifies! Please let me know if you have further questions here, or reach out to me directly! I'd love to hear any other pain points or suggestions for improvement on the Park Locator and Recreation Outreach.

Best,

Lauren

ChienGeo · ‎12-09-2021

Thank you Lauren the info! Yes, all the fields are populated correctly. I copied the expression from the Nearby Instant app and put it in the Near Me widget and it doesn't display the check mark like it does for the Nearby Instant app. I don't know, if it is a bug, but the storymap I referenced has those elements (activities/ amenities) working. I was hoping to be able to see the web map used for Near Me widget. Would it be possible to have it shared to me?

Thanks,

Chien

Anonymous User · ‎12-14-2021

Hi Chien,

The map is shared publicly here: https://www.arcgis.com/home/item.html?id=1ee59ede4f354939b1b5a6742262c817

I'm not sure if that gets you the information you're looking for, since the pop-up isn't available. But here's the html for the pop-up:

<div style="color:#FFFFFF; text-align: center; background-color:{expression/expr15};padding:5px"><font size="2">{expression/expr14}</font></div>


<div><div style="text-align: center;"><br /><font size="3">{fulladdr}</font><div><a href="{reserveurl} " rel="nofollow ugc" target="_blank"><font size="3"><br />Make a Reservation</font></a><br /></div></div><div style="text-align: center;"><div><a href="{agencyurl}" rel="nofollow ugc" target="_blank"><font size="3">Park Website</font></a></div><font size="3">{numparking} Parking Spaces</font><br /> <br />

<table style="color:black; width: 60%; margin-left: 20% ">
<tbody>
<tr>
<td height="25" style="color:#000000; text-align:left; font-size:14px">Tent Camping</td><td height="25" style="text-align:center;{expression/expr8}">{expression/expr2}</td></tr>
<tr>
<td height="25" style="color:#000000; text-align:left; font-size:14px">Group Camping</td>
<td height="25" style="text-align:center;{expression/expr9}">{expression/expr3}</td></tr>
<tr>
<td height="25" style="color:#000000; text-align:left; font-size:14px">Cabins</td>
<td height="25" style="text-align:center;{expression/expr10}">{expression/expr4}</td></tr>
<tr>
<td height="25" style="color:#000000; text-align:left; font-size:14px">RV Camping</td>
<td height="25" style="text-align:center;{expression/expr11}">{expression/expr5}</td></tr>
<tr>
<td height="25" style="color:#000000; text-align:left; font-size:14px">Picnic Areas</td>
<td height="25" style="text-align:center;{expression/expr12}">{expression/expr6}</td></tr>
<tr>
<td height="25" style="color:#000000; text-align:left; font-size:14px">Dogs Allowed</td>
<td height="25" style="text-align:center;{expression/expr13}">{expression/expr7}</td></tr>
</tbody></table>

<div style="text-align: left;"><span style="font-size: medium;"><br />{comments}</span></div><font size="3"><div style="text-align: left;"><font size="3"><br /></font><a href="{expression/expr0}" rel="nofollow ugc" target="_blank">Find a place to fish or boat nearby</a><font size="3"><br /></font><a href="{expression/expr1} " rel="nofollow ugc" target="_blank">Find a place to hunt nearby</a><font size="3"><br /> <br /></font></div></font></div></div><div style="text-align: left;"><span style="font-size: medium;">Activities:</span> <br /></div>

The expressions with the check marks are in lines 9-25. Here's an example of the arcade in those expressions:

function symbol(feature){
    /* Yes value returns a Check Mark, No Returns an X */
    var display = iif(feature == "Yes","✔","❌")
    return display   
}

symbol($feature.grpcamp)

Hopefully that gets you where you'd like to be! If not, feel free to reach out directly at ldreyfuss@esri.com. We are always happy to hear how users are deploying our solutions!

Best,

Lauren