Background

The map component is displayed on both universal and vertical search pages. It’s added on a Vertical Search Page, but included as a subcomponent on a Universal Page, within Universal Results on a Universal Search Page.

Basic Configuration

The basic config for a map requires the apiKey and the mapProvider. All other configuration is optional. We also recommend adding the no results configuration, assuming you are displaying all results as outlined here

<div class="map-container"></div>

ANSWERS.addComponent('Map', {
  container: '.map-container',
  mapProvider: 'mapBox',
  apiKey: '12345',
  noResults: {
    displayAllResults: false,
    visible: false
  },
  
});

Hooks

The Map component provides a few different hooks, where you can provide functions to trigger custom behavior.

Pin Hooks

The relevant item is passed to the call back

• onPinClick fires when a pin is clicked
• onPinMouseOver fires when a pin is hovered over.
• onPinMouseOut fires when a pin is no longer hovered.

JS Hooks

• onLoaded fires when the JS for the map is loaded.

Example

In the below example, we fire various alerts when pins are clicked or hovered.

ANSWERS.addComponent('Map', {
  container: '.map-container',
  mapProvider: 'mapBox',
  apiKey: '12345',
  onPinClick: function (entity) { console.log("clicked " + JSON.stringify(entity));}
  onPinMouseOver: function (entity) { console.log("hovering on " + JSON.stringify(entity));}
  onPinMouseOut: function (entity) { console.log("leaving " + JSON.stringify(entity));}
  onLoaded: function () { console.log("Loaded JS")},
});

Customizing the Pin

The Map component also accepts a pin function, that allows you to create an entirely custom pin if you’re using Google Maps. Said function should return an object with the following properities:

{
  svg: null, //if you're using an svg
  url: null, //if you're using an image hosted elsewhere
  anchor: null, // e.g. { x: 1, y: 1 }, offsets the pin
  scaledSize: null // e.g. { w: 20, h: 20 }, alters the size
};

Here’s an example using a custom svg (the pin label will automatically be added to the svg):

ANSWERS.addComponent('Map', {
  container: '.map-container',
  mapProvider: 'mapBox',
  apiKey: '12345',
  pin: function () {
  
    return {
      svg: `<svg
            xmlns="http://www.w3.org/2000/svg"
            width="20px"
            height="20px"
            viewBox="0 -1 22 28"
          >
            <g fill="none" fill-rule="evenodd">
              <path
                fill="#848484"
                fill-rule="nonzero"
                stroke="#848484"
                d="M0 10.767c0 5.563 7.196 12.418 9.947 14.836.6.527 1.509.53 2.112.005C14.815 23.212 22 16.423 22 10.767 22 4.82 17.075 0 11 0S0 4.82 0 10.767"
              />
              <text
                fill="#848484"
                font-family="Arial-BoldMT,Arial"
                font-size="12"
                font-weight="bold"
              >
                <tspan x="50%" y="15" text-anchor="middle">
                </tspan>
              </text>
            </g>
          </svg>`
    };
  }
});

Example

https://codesandbox.io/embed/awesome-forest-9yzuv?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview

Map API