Example JS script for flashing cities on a map

Updated on May 24, 2022 | Empowerment with Custom JS

Another example of using a script for a plugin with a map of the USA. JS code randomly shows one of the added points. When you hover over the map, all points are displayed, which allows you to click on any point.

This example uses the US Map for WordPress plugin.

Code for the “Custom JS” section in the plugin settings

var INTERVAL = 1;
var ORDER = 'random'; /* Otherwise - direct */

var points = Object.keys(map.mapConfig.points);

var canShow = true;
var currentI = null;
var enTimer = false;

var hidePoints = function () {
    for (var i = 0; i < points.length; i++) {
        if (i !== currentI)
            map.hideState(points[i]);
    }
};

var showPoints = function () {
    for (var i = 0; i < points.length; i++) {
        if (i !== currentI)
            map.showState(points[i]);
    }
};

var showNextPoint = function () {
    var curPid;
    if ( ! canShow)
        return;
    if (currentI === null) {
        currentI = ORDER === 'random' ? Math.floor(Math.random()*1000) % points.length : 0;
    } else {
        hideCurrentPoint();
        if (ORDER === 'random') {
            do {
                var cI = Math.floor(Math.random()*1123) % points.length;
            } while (cI === currentI);
            currentI = cI;
        } else {
            currentI = currentI == points.length - 1 ? 0 : currentI + 1;
        }
    }
    showCurrentPoint();
};

var showCurrentPoint = function () {
    if (currentI === null)
        return;
    var curPid;
    curPid = points[currentI];
    map.showState(curPid);
    map.stateHighlightIn(curPid);
};

var hideCurrentPoint = function (onlyTt) {
    if (currentI === null)
        return;
    var curPid;
    curPid = points[currentI];
    map.stateHighlightOut(curPid);
    if (onlyTt) return;
    map.hideState(curPid);
};

hidePoints();

setInterval(showNextPoint, INTERVAL * 1000);
showNextPoint();

jQuery('#'+containerId).on('mouseenter', function (ev) {
    if (enTimer) {
        clearTimeout(enTimer);
        enTimer = false;
    }
    hideCurrentPoint(true);
    showPoints();
    canShow = false;
});

jQuery('#'+containerId).on('mouseleave', function (ev) {
    if (enTimer) {
        clearTimeout(enTimer);
        enTimer = false;
    }
    enTimer = setTimeout(function () {
        canShow = true;
        hidePoints();
        showCurrentPoint();
    }, 300);
});