Snippets

Piotr Szrajber Smart M.App - Change the default style of points and delay hiding of map tooltips

Created by Piotr Szrajber
1
2
3
4
.bi-tooltip {
    min-width: 230px;
    pointer-events: all;
}
/**
 * 1) Change style of the geometries - for example make point circles smaller
 * 2) Change tooltip behavior so that it does not disappear immediately after taking the mouse pointer from the geometry  
 * 2017-11-27 Piotr Szrajber <piotr.szrajber@hexagongeospatial.com>
 */
var delayedHideTooltip,
    delayedHideTooltipTimeoutId,
    DELAYED_HIDE_TOOLTIP_TIMEOUT = 500,
    TIMEOUT = null;


document.addEventListener('mousemove', function(e) {
    var mouseElement = document.elementFromPoint(e.pageX, e.pageY);
    if (mouseElement && mouseElement.closest(".leaflet-popup-content-wrapper, .leaflet-marker-icon")) {
        clearTimeout(delayedHideTooltipTimeoutId);
        delayedHideTooltipTimeoutId = undefined;
    } else {
        if (delayedHideTooltipTimeoutId) return;

        delayedHideTooltipTimeoutId = setTimeout(() => {
            delayedHideTooltip && delayedHideTooltip();
            delayedHideTooltip = null;
        }, DELAYED_HIDE_TOOLTIP_TIMEOUT);
    }
});


// modify style of the geometries
function overwriteStyle(widget) {
    /*
    {
        "stroke": true,
        "color": "#ffffff",
        "weight": 2,
        "opacity": 0.9,
        "fill": true,
        "fillColor": "#cccccc",
        "fillOpacity": 0.9,
        "fillRule": "evenodd",
        "dashArray": null,
        "lineCap": "round",
        "lineJoin": "round",
        "clickable": true,
        "pointerEvents": "auto",
        "className": "",
        "radius": 10,
        "strokeColor": "#ffffff",
        "strokeOpacity": 0.9,
        "strokeWidth": 2,
        "strokeLineCap": "round",
        "strokeLineJoin": "round"
    }
    */
    const CIRCLE_SIZE = 5;

    let painter = widget.chart.painter(),
        defaultStyle = painter.defaultStyle(),
        paintStyle = painter.paintStyle();

    defaultStyle.radius = CIRCLE_SIZE;
    painter.defaultStyle(defaultStyle);

    painter.paintStyle((feature) => {
        let style = paintStyle.call(this, feature);
        style.radius = CIRCLE_SIZE;
        return style;
    });
}


// make the tooltip available for mouse events (requires also css for bi-tooltip)
function overwriteTooltipBehavior(widget) {
    let painter = widget.chart.painter(),
        origHideTooltip = painter.hideTooltip,
        origShowTooltip = painter.showTooltip;

    painter.hideTooltip = function(e) {
        delayedHideTooltip = () => {
            origHideTooltip.apply(null, arguments)
        };
    };

    painter.showTooltip = function(e, t, r) {
        painter.target().map.closePopup();
        return origShowTooltip.call(this, e, t, r);
    };
}

function repaint(widget) {
    let painter = widget.chart.painter();
    painter.unmount();
    painter.mount();
    painter.paint();
}


// waits until choropleth widget is ready
function waitForChoropleths(callback) {
    gsp.bi.stage.findWidgets({
        descriptors: [{
            chartM: {
                chart: "choropleth"
            }
        }]
    }, function(widgets) {
        if (!widgets || !widgets[0]) {
            TIMEOUT = setTimeout(function() {
                waitForChoropleths(callback);
            }, 500);
        } else {
            clearTimeout(TIMEOUT);
            callback(widgets);
        }
    });
}

waitForChoropleths((widgets) => {
    overwriteStyle(widgets[0]);
    overwriteTooltipBehavior(widgets[0]);
    repaint(widgets[0]);
});

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.