Deze pagina bevat een voorbeeld van een complete implementatie van GISBlox Map Analytics op een webpagina met een interactieve kaart.
Het geeft aan hoe het monitor-script te benaderen is en welke stappen benodigd zijn om kaarten te monitoren.
Monitor-script
Het monitor-script is via de volgende CDN-locaties te benaderen.
Op dit moment is er alleen een monitor-script beschikbaar voor integratie met Leaflet.
Leaflet-integratie
Leaflet-integratie (zonder jQuery)
Implementatie
Onderstaand voorbeeld toont een complete implementatie van Map Analytics op een webpagina met Leaflet.
Verderop wordt dit voorbeeld in detail besproken. Het complete voorbeeld kunt u hier downloaden.
<!DOCTYPE html>
<html>
<head>
<title>Map Analytics Demo - GISBlox</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Map Analytics monitor-script -->
<script src="https://cdn.gisblox.com/analytics/dist/ax-leaflet-bundle-1.0.9.min.js"></script>
<script>
axMain.trackCode = 'UW_PERSOONLIJKE_SERVICE_SLEUTEL';
</script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('mapid').setView([52.173, 5.390], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>', subdomains: 'ab'
}).addTo(map);
axMain.mapLoad('UNIEK_KAART-ID HIER', 'Optionele kaart-informatie');
</script>
</body>
</html>
Implementatie-details
In deze sectie vindt u de uitleg van het voorbeeld. Het is opgedeeld in de head- en body-delen van de webpagina.
Head
Het head-deel van de webpagina bevat de insluitingen van Leaflet, jQuery en het Map Analytics monitor-script.
jQuery is geen vereiste; er is ook een monitor-script beschikbaar zonder jQuery-afhankelijkheid. Zorg er wel voor dat het jQuery-script vóór de insluiting van het monitor-script plaatsvindt.
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<!-- jQuery (geen vereiste, afhankelijk van gewenst monitor-script) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Map Analytics monitor-script -->
<script src="https://cdn.gisblox.com/analytics/dist/ax-leaflet-bundle-1.0.9.min.js"></script>
U dient het monitor-script met uw persoonlijke service-sleutel te initialiseren. Dat gebeurt in het volgende deel van het script:
axMain.trackCode = 'UW_PERSOONLIJKE_SERVICE_SLEUTEL';
Deze initialisatie vindt slechts eenmaal op de webpagina plaats. Zonder geldige service-sleutel worden er geen kaart-activiteiten geregistreerd door het monitor-script.
Body
In de body van de pagina wordt de kaart geladen en registreert u de laad-actie van de kaart. Alleen kaarten die vooraf zijn geregistreerd kunnen gemonitord worden.
Op deze pagina vindt u meer informatie over kaartregistratie.
Elke geregisteerde kaart heeft een uniek kaart-ID. Plaats het kaart-ID van de betrefffende kaart in de mapLoad-methode op de plek van de tekst UNIEK_KAART-ID HIER.
De mapLoad-methode is de enige methode die u vanuit script aanroept, alle overige kaarthandelingen worden door het monitor-script opgevangen.
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('mapid').setView([52.173, 5.390], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, subdomains: 'ab'})
.addTo(map);
axMain.mapLoad('UNIEK_KAART-ID HIER', 'Optionele kaart-informatie');
</script>
</body>
Het is tevens mogelijk om additionele informatie op te geven via de mapLoad-methode, zoals bijvoorbeeld de laadtijd van de kaart. Deze optionele informatie vindt u terug in het sessie-details-overzicht van het Kaart-details-dashboard.
Opmerking
Indien u op dezelfde pagina een andere kaart laadt, dan dient u de methode mapLoad van het axMain-object nogmaals aan te roepen met het kaart-ID van de betreffende kaart.
Bekijk ook de Voorbeelden-pagina voor uitgewerkte voorbeelden.
Verwante onderwerpen
Laatst gewijzigd: 2018-12-21