Using a checkbox to display specific markers on a map

Ignition
1

So I am trying to use a map and a checkbox together where I can show pumps and ramps. What I am trying to do is use a checkbox to refine what shows on the map. For example, if I have ramps and and pumps both showing, I can click the checkbox so that just the pumps show. Not sure how to link the markers on the map to the checkbox. Was hoping someone can help.

2

I can see a number of ways to do this, but with an eye towards maintainability here’s what I’d do.

  1. Create custom properties on the map component for pumps visible, ramps visible, etc.
  2. Bind these properties to the checkboxes. This way, if you want to rearrange how controls are displayed, it’s easy to do; the actual logic will be driven off these custom properties.
  3. Add a custom method to the component. Don’t take any arguments - just have an independent renderMarkers() method. Follow a structure like this:
markers = []
if self.custom.showPumps:
    # add pumps to markers list
if self.custom.showRamps:
    # add ramps to markers list

self.props.markers = markers

Then ‘wire it up’ by adding change scripts to each of the custom properties. That change script will only invoke the custom method, which will run and render appropriately.
This way, you don’t have to try to ‘remove’ pumps or ramps conditionally - you just always re-render the entire graph.

A slightly different approach with somewhat less scripting:

  1. Add the custom properties as before.
  2. At the root of props.markers (or whatever it actually is on the map component), add an expression binding. binEnc the values of the custom properties (this gets you change detection).
  3. Add a transform to that binding that either directly, or via custom property, or via calling out to a project library, does the same “stateless” logic. You could either accept the binEnc value created from the expression as an argument, in which case you just need to be consistent about which bit means pumps, which bit means ramps, etc, or you could read the custom properties yourself in the script.