[PRO] How to Reveal Lines when Interacting with Markers

Although the plugin itself doesn’t have a feature that allows you to directly associate lines with markers and make them interact with themselves, with the other available features it’s possible to come up with a map where you can interact with the markers to reveal lines. This is only possible from version 1.4.7. Here’s a simple example:

View Example Map

Click the markers to reveal lines

In short, the above map was built the following way:

Base map with markers with a custom click action;
3 overlay maps that contain the different line collections (one map per marker);
The base map, apart from the 3 overlay maps, also has the live filter enabled;
With custom css the live filter is hidden;
The custom click action of the marker simulates a click in the hidden filter that reveals the other map that contains lines.

So this is a quick overview of how we used the available features to create such map. Now we’ll get into the details.

Create the maps that will contain the lines

[Pro] Reveal lines when interacting with markers

The first step will be to create different maps, one for each lines collection that will be associated with a marker. The maps don’t need to contain markers, just the lines. Once you create the line maps, take note of their IDs as we will need them.

Create the base map

Once you have all the line maps created, create a base map. This map will contain the markers. You can add the tooltip you want to each marker. For the action content of each marker, you will need to add the ID of the map that contains the lines for that marker.

Now, we need to set the click action for the markers to be a custom action. In the custom action field we’ll write the following code:

let filter = document.querySelector('.igm-live-filter [data-map-id="' + data.content + '"]'); filter.click();

This will trigger a click in the live filter that we’ll enable soon. That’s why we need the ID of the other maps in the action content, so the script knows which filter to ‘click’.

You will also need to go to the overlay section of the map and select all the line maps previously created and enable the live filter option, making sure you select the current map to display by default (you might need to save the current map first) and enable the option to keep the base map always visible. Also, enable the ‘Drilldown’ option, if you want the lines to be initially hidden.

After you do this, the map should already work and the markers should trigger the interaction with the filter that shows/hides other maps, in our case it will show/hide maps with lines.

Hide live filter

Now as an optional part, we only need to hide the filter. Add the following to the custom css field of the map:

.igm-live-filter { display:none; }

And that’s it. If you have trouble implementing this, feel free to contact us.

On Hover

You can also set the lines to display on hover:

View Example Map

You’ll just need to enable the option to “Trigger on hover” in the marker default settings.

We also included custom JS code to reset the map to the base map (markers only) when the markers are hovered out. This code works for the example above. It might be different if you use regions or have more data in the map.

// set map ID 
let mapID = 22020;
let mapContainer = document.getElementById('map_' + mapID);
mapContainer.addEventListener('mapready', function(ev) {
    let allMarkers = iMapsManager.getMarkersByValue(mapID, '*', 'id');
    allMarkers.forEach(function(marker) {
       marker.events.on("out", function(ev) {
                iMaps.maps[mapID].series.forEach(function(serie){serie.hide();});
								iMaps.maps[mapID].allBaseSeries.forEach(function(serie){serie.show();});
            }, this);
    });
});

[PRO] How to Display specific map on click

[PRO] How to Reveal lines when interacting with markers

[PRO] What are Custom Legend Types

[PRO] Reveal lines when interacting with markers

[PRO] How to Enable Live Filter