Voorbeelden

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 = (polka, button) => {

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

    const gotoLocation = (e) => {

        /** View submodule */
        const view = polka.viewer.view;
        const markers = polka.markers;

        /** zet een marker neer op de kaart */
        markers.createMarker(location, true);

        /** Beweeg naar punt via animatie */
        view.animate({ center: location, zoom: 10 });
    };
    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 = (polka, slider) => {

    /** View module */
    const view = polka.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

Aanpassen transperantie getoonde kaartlagen aan de hand van een slider.

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

    /** de geconfigureerde kaartlagen zijn te vinden als collectie onder map */
    const layers = polka.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 = (polka, list) => {

    /** de geconfigureerde lagen zijn te vinden als collectie onder map */
    const layers = polka.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) => {
    });
};

Meten

Het opmeten van een lijnlengte of oppervlakte,

start meten met measure.startDraw()

stop de meet functionaliteit met measure.stopDraw

Gebruik measure.setType() op het type meten te bepalen.

Linestring meet lijn van klik tot klik op de kaart.

Polygon meet oppervlakte tussen 3 of meer punten (klik) op de kaart

Toevoegen van een overlay/pop-up

Het toevoegen van een html element na bijvoorbeeld een klik op de kaart als pop-up of andersoortig overlay.

toevoegen element:

export const overlay = (polka, popupElement, buttonClear) => {

    /**
     *  popupElement == container van de popup waarin de feature-informatie word getoond
     *
     * buttonClear == element met het sluiten-icoon
     *
     * */
    const overlays = polka.overlays

    polka.viewer.view.map.events.addEventListener("map.click", (e) => {
        const popup = overlays.create({
            element: popupElement,
        });

        overlays.add(popup)

        const element = popup.getElement();
        const coordinate = e.detail.coordinates;
        const tag = document.createElement("p");
        const text = document.createTextNode("your location is: " + coordinate);
        tag.appendChild(text);
        element.appendChild(tag)
        popup.setPosition(coordinate)
    });

    buttonClear.addEventListener('click', () => {
        overlays.clear();
    });
}

toevoegen pop-up feature informatie

export const overlay = (polka) => {
    const overlays = polka.overlays

    let main = dom.getElementById('contents');

    //maak popup container. Alternatief kan je deze ook uit de DOM halen.
    let popupContainer = document.createElement('div');
    popupContainer.id = 'popupcontainer';
    popupContainer.classList.add('popup');
    popupContainer.classList.add('hidden');
    let featureContent = document.createElement('div');
    /** featureContent is het element waaraan de features gekoppelt worden */
    featureContent.classList.add('featureContent');
    featureContent.id = 'featureContent';


    let popupCloser = document.createElement('div')
    popupCloser.innerHTML = '<i class="fa fa-close"></i>';
    popupCloser.classList.add('popupcloser')

    popupContainer.appendChild(featureContent);
    popupContainer.appendChild(popupCloser);

    main.appendChild(popupContainer);


    polka.viewer.view.map.events.addEventListener("map.click", (e) => {
        const popup = overlays.create({
            element: popupContainer,
            positioning: 'center-center',
            autoPan: true,
            autoPanAnimation: {
                duration: 250
            }
        });
        const coordinate = e.detail.coordinates;

        popup.setPosition(coordinate)

        /** beweeg de viewer zodanig dat de locatie van de klik gecenteerd word getoond  */;
        let point = polka.utils.Point(coordinate);

        polka.viewer.view.fit(point, {
            maxZoom: polka.viewer.view.zoom,
            duration: 500,
        });

        /** pas de classlist aan zodat het element getoond word */
        popupContainer.classList.remove('hidden');
    });
}