Markers Map with Interactive Legend

In this example we have a map of the world with markers showing their title and an interactive legend.

The above map uses the following features:

  • There are 2 maps overlaid, to have the 2 sets of markers
  • Each map, in the markers tab has the option to display in the legend
  • The auto labels for the markers is also enabled, to display the title below the marker
  • In the base map, the auto legend option is enabled, with the Interactive > Highlight option enabled
  • Some custom CSS were added to create the hover animation

Using legend to filter markers

A user recently asked me if it would be possible to have a map with markers that could be filterable. The PRO version of the plugin allows you to display different maps in the same base map and have the legend enable/disable the different maps included. This is small sample of what could be done:

Click to see more details.

You can click the legend items to enable/disable markers and you can click individual markers to reveal information to the right of the map. The map can grow to have more categories and even include interactions in the regions themselves.

The way this is done is that we created one map for each category, enabled the ‘include in legend’ for the markers and then created a ‘base map’, which is the one we’re seeing above, that displays all the category maps.

The Interactive Legend and action to display content to the right of the map are only available in the PRO version.