Setup¶
Standaard is Planviewer OAuth ingesteld voor de viewers van een applicatie. Hiermee zijn deze viewers zonder login toegangelijk. Voor afgeschermde viewers zie: Auth0
Beginnen¶
Begin met het toevoegen van polka op de pagina waar de viewer moet worden getoond.
Plak <script src="https://www.planviewer.nl/polka/polka-plus.js"></script> ergens tussen de <head> en </head>
Het script zal trachten de kaart te laden binnen een div container met het id ‘map’.
<!-- kaart container --> <div id="map"></div>
Om de viewer te tonen dient er nog wel het een en ander geconfigureerd te worden.
base: <url>
Deze variabel zal komen te vervallen in de uiteindelijke versie.
Viewer: <viewer id>
Je kunt de viewer ID vinden in het Dashboard (ingelogd)
oauth Polka + maakt gebruikt van een oauth authenticatie. Oauth kan best wel eens lastig zijn om correct in te stellen.
Wij helpen je graag hiermee. Neem contact met ons op bij vragen over polka en Oauth.
De Oauth configuratie kan uit meerdere onderdelen bestaan afhankelijk van de gekozen provider. Voor het onderstaande voorbeeld gebruiken wij de provider auth0.com
provider
De oauth service provider, bijvoorbeeld Auth0
domain
Te vinden bij de provider, dit is het domein waar de authentiecatie word opgehaald
client_id
Id gebruikt door de provider voor de applicatie waar toegang voor word verleent.
const config = { base: "", /** identifier van de viewer - te vinden in dashboard */ viewer: " ", /** OAuth configuratie - te vinden in het dashboard */ oauth: { provider: "provider", domain: "provider_domain", client_id: "provider_client_id", audience: "provider_audience", redirect_uri: "page_to_go_to_after_validation" }, }; audience
auth0 stuurt die identifier mee, bij azure (als provider) is dit een uuid
redirect_url
url waar de gebruiker terecht komt na validatie (normaliter de pagina met de kaart)
polka config en kaart koppelen
Nu moeten de configuratie, het script en de div container elkaar nog kunnen vinden en dat doe je met deze 2 regels
/** initialiseer applicatie */ const polka = planviewer.PolkaPlus(config); /** initialiseer Polka met de kaart-container */ polka.viewer.view.map.target(map);Lees hier meer over het auth0.com validatie proces
Voorbeeld applicatie¶
Hieronder een basis voorbeeld van Polka:
<!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 polka = planviewer.PolkaPlus(config);
/** vind de login knop */
const login = document.querySelector("#login");
login.addEventListener("click", (e) => {
/** start oauth login flow */
polka.viewer.oauth.login();
});
</script>
</body>
</html>