Introduction

Planviewer openlayers kaart applicatie is de nieuwe kaart applicatie van Planviewer. Deze kaart applicatie komt in 2 vormen (NAMES CAN BE CHANGED) Polka en Polka+. Via deze applicaties kan je de kaartlagen vanuit de Planviewer dasboard.

Polka is een interactieve kaart applicatie-(kern) waarmee je jouw eigen applicatie kunt voorzien van een digitale kaart met de informatie van Planviewer.
Met Polka bouw je snel een interactieve kaart waarbij je elk onderdeel vanuit jouw eigen applicatie kunt aansturen.
[ uitleg “de informatie”? ]

Quickstart Polka-Plus

Begin met het aanmaken van een applicatie in het dashboard.

Om de polka te benaderen moet je een scriptblock maken met als SRC https://www.planviewer.nl/polka/polka-plus.js aanmaken. Hierdoor heb je toegang tot alle openbare onderdelen van Polka plus.

Hieronder is een voorbeeld te zien van hoe je de kaart ophaalde met je eigen kaart id:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Basis Kaart Applicatie</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">

        <!-- Polka applicatie inladen -->
        <script src="https://www.planviewer-staging.nl/polka/polka-plus.js"></script>

        <style>
            /* Toon de kaart volledig browser scherm */
            .map {
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
            .toolbox {
                z-index: 9;
                position: absolute;
                top: 20px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <main>
        <section>
            <nav>
                <div class="toolbox">
                    <button id="login">Login</button>
                </div>
            </nav>

            <!-- kaart container voor de applicatie -->
            <div id="map" class="map"></div>
        </section>
        </main>

        <script type="module">

            /** vind de kaart container */
            const map = document.querySelector('#map');

            const config = {
                base: "https://planviewer-staging.nl",

                viewer: {
                    /** identifier van de viewer - te vinden in dashboard */
                    identifier: "42abc031813b478ef8e55b20fc25c3536731650dd48fba7a71392d261d863c43"
                },
                debug: true,

                /** OAuth configuratie - te vinden in het dashboard */
                oauth: {
                    provider: "auth0",
                    domain: "https://dev-mt2bymz6.eu.auth0.com",
                    client_id: "4UXmDbaeBQxXlw565JnXgtwZiVDfqR8R",
                },
                map: {
                    target: map,
                },
            };

            /** initialiseer de applicatie */
            const application = planviewer.PolkaPlus(config);

            /** vind de login knop */
            const login = document.querySelector("#login");

            login.addEventListener("click", (e) => {
                /** start oauth login flow */
                application.viewer.oauth.login();
            });
        </script>
    </body>
</html>

Aan de viewer moet je dan de viewer id meegeven die vanuit het dashboard komt.

Algemene werking

Polka is gebaseerd op OpenLayers met daaromheen een schil waardoor er een functionele applicatie kern ontstaat die gebruikt kan worden als basis voor een interactieve kaart applicatie. Hiermee leveren wij zowel een turn-key solution om snel een interactieve kaart op jouw website te plaatsen, als ook een geavanceerde oplossing waarmee een custom interactieve kaart kan worden gebouwd.

De verschillende onderdelen van de kern zijn apart aan te sturen.
Voor een volledig overzicht van modules, functies en werking zie Modules