Snippets

Piotr Szrajber Smart M.App - Creating a temporary selection layer

Created by Piotr Szrajber
var SELECTION_LAYER /* global variable for simplicity */,
    GET_FEATURES_URL = "https://dev-test-mapp.hexagongeospatial.com/gsdemo/psz_wojewodztwa_wfs/wfservice.aspx?request=getfeature&propertyName=id_woj&service=wfs&version=2.0.0&storedquery_id=GetmyVRData&outputFormat=application/vnd.geo%2Bjson&queries=%3Cwfs:Query%20typeNames=%22gmgml:wojewodztwaFinal%22%20xmlns:gmgml=%22http://www.intergraph.com/geomedia/gml%22%20xmlns:wfs=%22http://www.opengis.net/wfs/2.0%22%3E%20%3Cogc:Filter%20xmlns:ogc=%22http://www.opengis.net/fes/2.0%22%3E%20%3Cogc:PropertyIsEqualTo%3E%20%3Cogc:ValueReference%3EYEAR%3C/ogc:ValueReference%3E%20%3Cogc:Literal%3E2014%3C/ogc:Literal%3E%20%3C/ogc:PropertyIsEqualTo%3E%20%3C/ogc:Filter%3E%20%3C/wfs:Query%3E&clippingBBOX=-80,-80,80,80,EPSG:4326" /* data downloaded from WFS but it can be anything that returns GeoJSON (maybe M.App Chest connection?) */;

/* mark the feature as selected */
function onClick(e) {
    var layer = e.target;
    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });
    layer.__psz_selected = true;
}

/* add selection layer using internal Leaflet handler */
function createSelectionLayer() {
    // get internal handle to the leaflet object
    mainContext.switchingMapViewerAdapter.getMapAdapter().then(function(mapAdapter) {
        var url = GET_FEATURES_URL;
        jQuery.ajax(url, {
            success: function(response) {
                SELECTION_LAYER = L.geoJson(response, {
                    onEachFeature: function(feature, layer) {
                        layer.on("click", onClick);
                    }
                });
                SELECTION_LAYER.addTo(mapAdapter.__map);
            }
        });
    });
}

/* retrieve information about the selected features */
function getSelectedFeatures() {
    var selectedFeatures = [];
    SELECTION_LAYER.eachLayer(function(layer) {
        if (layer.__psz_selected)
            selectedFeatures.push(layer.feature);
    });
    return selectedFeatures;
}

/* remove temporary selection layer */
function destroySelectionLayer() {
    mainContext.switchingMapViewerAdapter.getMapAdapter().then(function(mapAdapter) {
        mapAdapter.__map.removeLayer(SELECTION_LAYER);
    });
}

/* add user interface */
$GP.ui.sidebar.add({
    title: "Select Features",
    id: "sidebar-feature-selection996"
}, function(ret) {
    // first button - add selection layer
    var addLayer = document.createElement("button");
    addLayer.innerHTML = "Add Selection Layer";
    addLayer.onclick = createSelectionLayer;
    ret.div.appendChild(addLayer)

    // second button - retrieve selected features and destroy the layer
    var removeLayer = document.createElement("button");
    removeLayer.innerHTML = "Remove selection layer";
    removeLayer.onclick = function() {
        var selected = getSelectedFeatures().map(function(feat) {
            return feat.properties.ID1
        });
        $GP.ui.info(JSON.stringify(selected));
        destroySelectionLayer();
    };
    ret.div.appendChild(removeLayer)
});

Comments (0)

HTTPS SSH

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