Redraw map
In this example, we will redraw the map when clicking a button, but this could be as a result of a any user interaction or new data coming from an api. Click the button below to assign random colors to each state.
$(function() {
var jsMap = $('#jsmap');
jsMap.JSMaps({
map: 'usa',
onReady: function() {
document.querySelector('.redraw-map').addEventListener('click', reDraw);
}
});
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function reDraw() {
jsMap.trigger('reDraw', {
paths: window.JSMaps.maps.usa.paths.map(path => {
return {
...path,
color: getRandomColor()
}
})
})
}
});
Code was copied successfully!