Examples

Hieronder kunt u meerdere voorbeelden zien van hoe je Polka+ kan toepassen.

Basis zoom

Op het moment dat je een viewer hebt aangemaakt kan je de bind aanroepen om functies erop te bereiken. Hierbij kan je subscriben op zoom om te kijken wat de waarde is van de zoom. Deze waarde word via een subscriber geupdate, dat betekend dat je automatisch de nieuwe waardes van de zoom binnenkrijgt.

Via de return op de bind kan je data sturen naar Polka+. In het voorbeeld hieronder doen we dat voor center en zoom. Dit houd in dat we bij de center coördinaten sturen waarop de kaart gaat centreren. Dit doen we via de next functie op de subscriber aanroepen.

/** Hier bind je op de viewer niveau */
viewer.view.bind(({zoom}) => {

    /** Dit roept de Observable aan voor de center in de viewer */
    zoom.subscribe({
        next(val) {
            console.log('val of zoom: ', val)
        },
    });

    return {

        /**  Maak connectie met de center van de view */
        center: new Observable((subscriber) => {

            /** zet de setCenter in de functie centerOnCity  */
            const centerOnCity = () => {
                subscriber.next([162833.06448813833, 386140.48611484875])
            };

            /** Roep de setCenter functie aan bij de button click */
            button.addEventListener('click', centerOnCity)
        }),

        /**  Maak connectie met de zoom van de view */
        zoom: new Observable((subscriber) => {

            /** zet de setZoom in de functie centerOnCity  */
            const ZoomToStatic = () => {
                subscriber.next(15.149288469376554)
            };

            /** Roep de setZoom functie aan bij de button click */
            button.addEventListener('click', ZoomToStatic)
        }),
    };
});

Beweeg via animatie

Je kan coordinaten doorgeven aan de viewer om o.a. via een animatie.

export const location = (application, button) => {

    /** punt in Arnhem */
    const location = [190011.29205868338, 444044.58196267043];

    const gotoLocation = (e) => {

        /** View submodule */
        const view = application.viewer.view;

        /** Beweeg naar punt via animatie */
        view.animate({ center: location, zoom: 5 });
    };
    button.addEventListener('click', gotoLocation);
};

Zoom met slider

Hieronder is een voorbeeld te zien van hoe je de zoom kan veranderen vai een html object (de slider).

export const zoom = (application, slider) => {

    /** View module */
    const view = application.viewer.view;

    /** initiele waarde */
    slider.value = view.zoom;

    /** luister naar feedback van de view */
    view.addEventListener("change:zoom", (e) => {
        const { zoom } = e.detail;
        slider.value = view.zoom;
    });

    /** verander zoom niveau wanneer slider veranderd */
    slider.addEventListener('input', (e) => {
        view.zoom = slider.value
    })
};

Transparantie veranderen

NOG beschrijving nodig

export const visibility = (application, list) => {

    /** de geconfigureerde kaartlagen zijn te vinden als collectie onder map */
    const layers = application.viewer.view.map.layers;

    /**
     * luister naar de list elementen van de kaartlagen
     * @see: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
     */
    const observer = new MutationObserver((mutations, observer) => {
        mutations.forEach((mutation) => {

            const added = mutation.addedNodes;
            const removed = mutation.removedNodes;

            added.forEach((el) => {

                const path = el.dataset.path;

                /** vind mijn kaartlaag */
                const layer = layers.get(path);

                /** vind mijn kaartlaag UI elementen */
                const toggle = el.querySelector(`input[type=checkbox]`);
                const slider = el.querySelector(`input[type=range]`);

                /** initiele waarden */
                toggle.checked = layer.visible;
                slider.value = layer.opacity;

                /** luister naar feedback kaartlaag eigenschappen en synchroniseer UI elementen */
                layer.addEventListener("change:visible", (e) => {
                    const { visible } = e.detail;

                    /** kaartlaag zichtbaar vlag */
                    toggle.checked = visible;
                });

                layer.addEventListener("change:opacity", (e) => {
                    const { opacity } = e.detail;

                    /** kaartlaag transparantie waarde */
                    slider.value = opacity;
                });

                /** luister naar UI elementen en pas kaartlaag eigenschappen aan */
                toggle.addEventListener("click", (e) => {
                    const checkbox = e.target;

                    /** toggle kaartlaag zichtbaarheid */
                    layer.visible = checkbox.checked;
                });

                slider.addEventListener("input", (e) => {
                    const slider = e.target;

                    /** zet kaartlaag doorzichtigheid */
                    layer.opacity = slider.value;
                });
            });
        });
    });

    observer.observe(list, { childList: true, subtree: false, attributes: false });
};

itereren over de lagen

Als je door de lagen heen loops via add dan kan je voor elke laag een actie uitvoeren. In het voorbeeld hieronder kan je zien hoe een lijst word gevuld voor elke laag via de groepen.

/**
 * lijst van kaartlagen opbouwen
 */
export const list = (application, list) => {

    /** de geconfigureerde lagen zijn te vinden als collectie onder map */
    const layers = application.viewer.view.map.layers;

    /** luister wanneer er een laag wordt toegevoegd */
    layers.addEventListener("add", (e) => {

        /** layer module */
        const { value: layer } = e.detail;
        const { path, depth, name } = layer;

        const li = document
            .createRange()
            .createContextualFragment(`<li data-path="${path}" data-name="${name}">${name} <input type="checkbox"><input type="range" min="0" max="1" step="0.01"></li>`);

        list.appendChild(li);
    });

    /** luister wanneer er een laag wordt verwijderd */
    layers.addEventListener("remove", (e) => {
    });
};

Tets

export const visibility = (application, list) => {

    /** de geconfigureerde kaartlagen zijn te vinden als collectie onder map */
    const layers = application.viewer.view.map.layers;

    /**
     * luister naar de list elementen van de kaartlagen
     * @see: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
     */
    const observer = new MutationObserver((mutations, observer) => {
        mutations.forEach((mutation) => {

            const added = mutation.addedNodes;
            const removed = mutation.removedNodes;

            added.forEach((el) => {

                const path = el.dataset.path;

                /** vind mijn kaartlaag */
                const layer = layers.get(path);

                /** vind mijn kaartlaag UI elementen */
                const toggle = el.querySelector(`input[type=checkbox]`);
                const slider = el.querySelector(`input[type=range]`);

                /** initiele waarden */
                toggle.checked = layer.visible;
                slider.value = layer.opacity;

                /** luister naar feedback kaartlaag eigenschappen en synchroniseer UI elementen */
                layer.addEventListener("change:visible", (e) => {
                    const { visible } = e.detail;

                    /** kaartlaag zichtbaar vlag */
                    toggle.checked = visible;
                });

                layer.addEventListener("change:opacity", (e) => {
                    const { opacity } = e.detail;

                    /** kaartlaag transparantie waarde */
                    slider.value = opacity;
                });

                /** luister naar UI elementen en pas kaartlaag eigenschappen aan */
                toggle.addEventListener("click", (e) => {
                    const checkbox = e.target;

                    /** toggle kaartlaag zichtbaarheid */
                    layer.visible = checkbox.checked;
                });

                slider.addEventListener("input", (e) => {
                    const slider = e.target;

                    /** zet kaartlaag doorzichtigheid */
                    layer.opacity = slider.value;
                });
            });
        });
    });

    observer.observe(list, { childList: true, subtree: false, attributes: false });
};