Recreation Outreach Solution - Park Locator App

ChienGeo

Hi,

I'm try to mimic the web app (https://statelocaltryit.maps.arcgis.com/apps/webappviewer/index.html?id=5ab754a588724888ac4585b7dc7d2130) 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

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