Objecten op de kaart

Objecten selecteren

module: application.viewer.features

Wanneer de gebruiker op de kaart klikt, worden de objecten die op dat punt liggen geselecteerd.
De collectie geselecteerde objecten is beschikbaar onder application.viewer.features.selection

Kenmerken tonen van geselecteerde objecten

polka/examples/objecten/kenmerken.js
export const kenmerken = (application, table) => {

    /** features module */
    const features = application.viewer.features;
    const bodies = [];

    /** geselecteerde objecten */
    const selected = new Map();

    features.selection.addEventListener("add", (e) => {

        /** Polka kaart object */
        const { value: feature, key: featureId } = e.detail;
        selected.set(featureId, feature);

        bodies[featureId] = table.createTBody();
        const header = bodies[featureId].insertRow(-1);
        header.innerHTML = `<tr><td>${featureId}</ts><td><button data-feature-id=${featureId}>OOGJE</button></td></tr>`;

        for (const prop in feature.properties) {
            const value = feature.properties[prop];
            const row = bodies[featureId].insertRow(-1);
            row.innerHTML = `<tr><th>${prop}</th><td>${value}</td></tr>`;
        }

        /** vind de highlight knop */
        const button = header.querySelector("button");

        button.addEventListener("click", (e) => {

            const featureId = e.target.dataset.featureId;

            /** vind bijhorende kaart object */
            if(selected.has(featureId)) {
                selected.get(featureId).highlight();
            }
        });
    });

    features.selection.addEventListener("remove", (e) => {

        /** Polka Feature object */
        const { value: feature, key: featureId } = e.detail;

        selected.delete(featureId);

        table.removeChild(bodies[featureId]);
    });
};