Find all products for your country

HomeBlog

Example JS script for flashing cities on a map

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.
Tools tab

Examples of other scripts to extend the functionality

Get try-for-free customizable US map for WordPress

Useful articles

Categories

Recent Posts

Archives

Tags


Privacy policy   |   Terms of Use

Home  |   Products  |   Showcase Gallery  |   Custom Design Service  |   Free Maps  |   Blog  |   Support  |   Contact
© 2006-2019 All Rights Reserved.
Fla-shop.com - Interactive Maps for websites.
Follow us Follow us on Twitter Follow us on Facebook