Snippets

Piotr Szrajber Smart M.App - customize several layers with scale bounds

Created by Piotr Szrajber
/**
 * This code can be used for customizing several layers, especially when the layers have scale bounds and appear only in particular scales.
 * Let's assume that we have layer1, layer2 and layer3 and the scale bounds are configured in such a way that layer1 appears at the startup,
 * when zooming in it disappears and is replaced by layer2 and then when zooming in further it is replaced by layer3.
 *
 * As an example customization we are modifying click behavior on layer1 and layer2 so that features are not filtered. Modify the code according
 * to your needs!
 *
 * 2017-11-10 Piotr Szrajber <piotr.szrajber@hexagongeospatial.com>
 */
//# sourceURL=customization.js
let TIMEOUT = null, // timeout in order to avoid unnecessary code execution when there is no choropleth at all at the startup
    CUSTOMIZED = {}, // cache in order to prevent applying customizations more than one time per layer
    CUSTOMIZATIONS = [{ // collection of customizations consisting of layer identifier and customization code
        name: "layer1",
        customization: function(widget) {
            console.log("customizing layer1");
            overwriteClickBehavior(widget);
        }
    }, {
        name: "layer2",
        customization: function(widget) {
            console.log("customizing layer2");
            overwriteClickBehavior(widget);
        }
    }, {
        name: "layer3",
        customization: function(widget) {
            console.log("customizing layer3");
        }
    }];

// the actual customization code - we want to prevent filtering on click on the layer1 and layer2 and display something instead
function overwriteClickBehavior(widget) {
    widget.chart.willDoMouseEvent(function(feature, event) {
        if (event.type == 'click') {
            if (feature && feature.properties && feature.properties) {
                showDetailsWindow(feature);
            }
        }
    });
}

// waits until choropleth widget is ready. This is used in order to catch the layers that appear on the start
function waitForChoropleths(callback) {
    gsp.bi.stage.findWidgets({
        descriptors: [{
            chartM: {
                chart: "choropleth" // use "pointmap" or "heatmap" for other layers
            }
        }]
    }, function(widgets) {
        if (!widgets || !widgets[0]) {
            TIMEOUT = setTimeout(function() {
                waitForChoropleths(callback);
            }, 500);
        } else {
            clearTimeout(TIMEOUT);
            callback(widgets);
        }
    });
}

// execute customization code
function applyLayerCustomization(description) {
    gsp.bi.stage.findWidgets({
        descriptors: [{
            chartM: {
                name: description.name
            }
        }]
    }, function(widgets) {
        if (!widgets || !widgets[0] || CUSTOMIZED[description.name]) {
            return;
        }
        description.customization(widgets[0]);
        CUSTOMIZED[description.name] = !0;
    }, function(e) {
        console.log(e);
    });
}

// apply all the customizations from the global collection
function ensureGeovisualizationsCustomized() {
    CUSTOMIZATIONS.forEach(applyLayerCustomization);
}

// layers may appear when the zoom is changed or when they are added programmatically
gsp.events.mapMoved(ensureGeovisualizationsCustomized);
gsp.events.legendItemLoadingFinished(ensureGeovisualizationsCustomized);
waitForChoropleths(ensureGeovisualizationsCustomized);

Comments (0)

HTTPS SSH

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