# Using a checkbox to display specific markers on a map

**URL:** <https://forum.inductiveautomation.com/t/using-a-checkbox-to-display-specific-markers-on-a-map/58404>\
**Category:** Ignition\
**Created:** [April 13, 2022, 8:44am UTC](https://forum.inductiveautomation.com/t/using-a-checkbox-to-display-specific-markers-on-a-map/58404 "2022-04-13T08:44:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Conn\_Mccurdy](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@Conn\_Mccurdy](https://forum.inductiveautomation.com/u/Conn_Mccurdy)\
**Post date:** [April 13, 2022, 8:44am UTC](https://forum.inductiveautomation.com/t/using-a-checkbox-to-display-specific-markers-on-a-map/58404/1 "2022-04-13T08:44:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [April 13, 2022, 3:40pm UTC](https://forum.inductiveautomation.com/t/using-a-checkbox-to-display-specific-markers-on-a-map/58404/2 "2022-04-13T15:40:34Z")

</div>

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:

```auto
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.