Example JS script for flashing cities on a map

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

Get try-for-free customizable US map for WordPress