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.

.. code-block:: javascript

        /** 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.

..  literalinclude:: ../../../polka/examples/kaartbeeld/location.js
    :language: javascript


Zoom met slider
--------------------------

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

.. literalinclude:: ../../../polka/examples/kaartbeeld/zoom.js
    :language: javascript



Transparantie veranderen
--------------------------

Aanpassen transperantie getoonde kaartlagen aan de hand van een slider.

.. literalinclude:: ../../../polka/examples/kaartlagen/visibility.js
    :language: javascript


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.

.. literalinclude:: ../../../polka/examples/kaartlagen/list.js
    :language: javascript

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


.. code-block:: javascript
    export const measurement = (polka) => {
        const measure = polka.measure;

        button.addEventListener('click', () => {
                measure.startDraw();
                measure.setType('LineString');
            });
        }

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:*

.. literalinclude:: ../../../polka/examples/overlay/Overlay.js
    :language: javascript

*toevoegen pop-up feature informatie*

.. literalinclude:: ../../../polka/examples/overlay/Popup.js
    :language: javascript