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

Set active region based on URL hash

The map above will react to the hashtag added to the URL when loaded. Try the following links for example:

They will open in a new tab for the purpose of this example.

You’ll see that with the #europe in the URL, the map will automatically display with that region selected. This is done with a custom Javascript snippet to get the hash once the map is ready and set the selection on the map to match the hash, based on the available public methods the plugin provides.

The custom javascript can be found here: