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);
});

How to add Custom JS code in the plugin?

On the Tools tab in the plugin settings there is a “Custom JavaScript” field where you can insert JS code.
See the following screenshot.

Examples of other scripts to extend the functionality

How to highlight the state when you click on the map

If you have any ideas for customization, we’d appreciate it if you’d share it with us.

Get try-for-free customizable US map for WordPress