De kaart van Vici.org kan als een javascript widget op iedere website geplaatst worden. Dit kan in drie eenvoudige stappen.
1. Laad de benodige biblotheken
De Vici-widget heeft een stylesheet en drie bibliotheken nodig om te kunnen functioneren. De bibliotheken zijn OpenLayers, JQuery en de Vic-widget zelf. Laad deze bibliotheken in door de volgende code tussen de <head>-tags van je pagina te zetten:
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://vici.org/js/vici.js"></script>
2. Bepaal waar de kaart op de pagina moet komen
Zet op de gewenste plek op de pagina een <div>-tag met het gewenste formaat. Geeft dit element een id mee, bijvoorbeeld "map". Bijvoorbeeld zoals hier gedaan:
3. Activeer de widget
Activeer de widget door de volgende code onderaan de pagina te plaatsen, net voor de </body>-tag:
var mapObj = new ViciWidget('map', {});
</script>
Gebruik hier het id het van element waarin de kaart getoond moet worden. Bekijk een demonstratie van dit voorbeeld.
Op eenvoudige wijze kan de werking van de widget aangepast worden, zie hiervoor bijvoorbeeld Livius.org. Neem even contact met me op, dan kan ik je daarbij helpen.