I need help writing JS code that works to add like/dislike functionality to an ArcGIS interactive web map to fit some specific criteria.
I built a crowdsource app with Survey123 and an Experience builder wrapper (for adding a disclaimer splash screen and customizing the web page background color) to collect public input on transportation safety concerns along routes to K-12 schools within the French Broad River MPO and Land of Sky RPO regions in western NC. The app includes a web map that updates in real-time based on the Survey123 form input and allows the public to explore the input across the MPO/RPO regions, while keeping any sensitive fields inaccessible and invisible. Current ArcGIS Online items for this integration include:
- School Route Safety Concerns (Form Map): map item manually created to embed in the Survey123 Form.
- School Route Safety Concerns (Form): form item created with Survey123 Connect.
- School Route Safety Concerns (Data): hosted feature service item that automatically gets created via publishing the form via Survey123 Connect. This contains the underlying source data schema that gets populated from the form submissions.
- School Route Safety Concerns (Private View): hosted feature service view item that automatically gets created via publishing the form via Survey123 Connect. This is intended as a ‘fieldworker view’ and is necessary to have, but it doesn’t need to be used in the field for this purpose despite the reference.
- School Route Safety Concerns (Form Wrapper): Experience Builder item manually created as a wrapper for the Survey123 form—it contains a splash screen window with terms and conditions that users must agree to before opening the form.
- School Route Safety Concerns (Public View): HFS view layer that is manually created from the School Route Safety Concerns (Data) item and is included in a public web map for users to explore submitted safety concerns. This layer exposes public input while restricting public viewing, access to the contact information fields (i.e. First Name, Last Name, Email), and access to the underlying source data item (i.e. School Route Safety Concerns (Data)).
- School Route Safety Concerns (Web Map): Map item that is manually created to embed on a website for the public to explore submitted safety concerns that are exposed through the public HFS view layer. The public HFS School Route Safety Concerns (Public View) layer gets manually added to this map and configured once finalized.
- Safe Routes to School Concerns (Web Map Wrapper): Wraps interactive web map to include a disclaimer splash screen.
For the public interactive web map application (map wrapped in experience builder), I would like to include 'like/dislike' functionality (w/like count) on the HFS view layer popups to better highlight transportation safety issues that citizens are most concerned about. After doing a little research, it seems as though integrating what I've done already with the ArcGIS API for JavaScript and Firebase should allow me to integrate the like/dislike functionality without enabling unwanted editing or exposing sensitive input data. However, I don't really know JavaScript and I've had little success with my attempted copying/pasting/editing of code snippets.
My criteria for the like functionality is to:
1) include a 'like' icon within popups for a non-editable HFS View layer that is based on input from a Survey123 app
2) prevent duplicate likes
3) dynamically updates and displays the 'like' counts in the popup
4) allows 'like' counts to be joined back to the HFS layer if needed later, and
5) enable like/dislike functionality with editing functionality disabled on the HFS View e
