Since the map shapes are SVG paths, we can’t simply apply a drop-shadow filter with CSS. We need to use SVG filters to add the shadow effect to the map shapes. While this might be included in a future version of the plugin, in the current version you need to run some javascript to do it. You can add the following code to the Custom JS field of your map (Pro version, administrator users):
let mapID = 21169;
let mapContainer = document.getElementById('map_' + mapID);
if(mapContainer){
mapContainer.addEventListener('mapready',function(ev){
var filter = iMaps.maps[mapID].baseRegionSeries.filters.push(new am4core.DropShadowFilter());
filter.color = am4core.color("#000000");
filter.dx = 5;
filter.dy = 5;
filter.blur = 2;
filter.opacity = 0.5;
});
}
You will need to change the first line of the code and add the numeric ID of your map.
The shadow will not render in the preview, only when it’s published on the page.
You can manipulate the colour, blur, opacity and other settings changing the lines of code above.
