Skip to main content

Targeting Map

This is the documentation for the embeddable targeting map. It is a web component for getting the filters of a campaign.

Basic Usage​

Add the component anywhere on the page:

<rm-targeting-map></rm-targeting-map>

Include the JavaScript for the component at the bottom of the page:

<script src="https://api-staging.realmailers.com/rm-targeting-map.js"></script>

Handling Events​

The component triggers a change event for every one of the filters (or the polygon or center of the map) changes.

You can listen on these events with the normal addEventListener function:

const targetingMap =
  document.querySelector("rm-targeting-map");

targetingMap.addEventListener("change", () => {
  console.table(targetingMap.value)
})

Open the console to see these events for the map above.

Initial Center Address​

There are two ways of setting the initial center of targeting:

  • with the initialCenterAddress attribute
  • with the location field in the data attribute

Note that only one of it can be used, if both are provided the data attribute has the preference.

initialCenterAddress​

The initial center of the map can be set using the initialCenterAddress attribute:

<rm-targeting-map initialCenterAddress='353 Lexington Ave, New York, NY'>
</rm-targeting-map>

data​

The data attribute is normally used to set the initial value of the map but it can be used to set the initial center by providing the location field and omitting the latitude and longitude fields:

<rm-targeting-map data='{"location": "353 Lexington Ave, New York, NY"}'>
</rm-targeting-map>

This is the preferred way of setting the initial center if you need to set other defaults:

<rm-targeting-map data='{"location": "353 Lexington Ave, New York, NY", "count": 100}'>
</rm-targeting-map>

Value​

The current value for the filters can be retreived and set with the value property:

console.table(targetingMap.value)

targetingMap.value = {...}

Initial Value​

The initial value of the map can be set with the data attribute (as a JSON string).

<rm-targeting-map data='{"count": 200, ...}'></rm-targeting-map>

Tooltips​

The tooltips can be enabled using the showTooltips attribute:

<rm-targeting-map showTooltips></rm-targeting-map>

Slots​

The example below shows the available slots:

<rm-targeting-map>
  <div style="background: lemonchiffon; padding: 10px" slot="below-target-slider">
    content below the target slider
  </div>
</rm-targeting-map>
content below the target slider

Styling with CSS variables​

There are a number of CSS variables that can be used to style the map:

rm-targeting-map.styled {
  --rm-marker-dot-removed: #808080;
  --rm-marker-dot-hover: #FF642B;
  --rm-marker-dot: #FF4500;
  --rm-primary: #FF4500;
  --rm-primary-hover: #FF642B;
  --rm-slider-track: #FDEBE4;
  --rm-white: #FCFCFC;
  --rm-border: #EEEEEE;
  --rm-text: #555555;
  --rm-link: #FF4500;
  --rm-gray: #FBEBE5;
  --rm-gray-2: #E3C3B7;
  --rm-gray-3: #FFF7F4;
  --rm-tooltip-background: #444444;
  --rm-tooltip-text: #FFFFFF;
  --rm-warning-background: #FDEBE4;
}
<rm-targeting-map class="styled" showTooltips></rm-targeting-map>

Styling specific parts of the map​

Specific parts of the map can be styled using the ::part() pseudo selector.

rm-targeting-map::part(autocomplete),
rm-targeting-map::part(autocomplete-input),
rm-targeting-map::part(autocomplete-recenter),
rm-targeting-map::part(autocomplete-item),
rm-targeting-map::part(autocomplete-group),
rm-targeting-map::part(field),
rm-targeting-map::part(label),
rm-targeting-map::part(loader),
rm-targeting-map::part(noUi-base),
rm-targeting-map::part(noUi-base)::before,
rm-targeting-map::part(noUi-base)::after,
rm-targeting-map::part(noUi-connect),
rm-targeting-map::part(noUi-connects),
rm-targeting-map::part(noUi-handle),
rm-targeting-map::part(noUi-origin),
rm-targeting-map::part(noUi-target),
rm-targeting-map::part(noUi-tooltip),
rm-targeting-map::part(noUi-touch-area),
rm-targeting-map::part(polygon-button),
rm-targeting-map::part(property-type),
rm-targeting-map::part(radio-div),
rm-targeting-map::part(radio-input),
rm-targeting-map::part(radio-label),
rm-targeting-map::part(radio-label-span),
rm-targeting-map::part(slider),
rm-targeting-map::part(slider-field),
rm-targeting-map::part(sliders),
rm-targeting-map::part(target-slider),
rm-targeting-map::part(target-slider-input),
rm-targeting-map::part(value),
rm-targeting-map::part(marker),
rm-targeting-map::part(marker-span) {
  outline: 1px solid red;
}
<rm-targeting-map class="highlighted" showTooltips></rm-targeting-map>

Endpoint​

The endpoint attribute controls which environment the targeting map connects to:

<rm-targeting-map endpoint="https://api.realmailers.com"></rm-targeting-map>

There are two possible values for it:

  • https://api-staging.realmailers.com - for the staging environment (default)
  • https://api.realmailers.com - for the production environment