Mapbox - Tomvandenberg11/coding-the-curbs GitHub Wiki
Website: https://www.mapbox.com/
We hebben Mapbox gebruikt voor de interactieve kaart. Hier kan je de documentatie vinden van Mapbox: https://docs.mapbox.com/
Om Mapbox te gebruiken moet je eerst een account maken. Hier kan je een accessToken aanvragen, deze heb je nodig om je map te activeren. Zo zet je hem in de code:
mapboxgl.accessToken =
"YOUR TOKEN HERE";In de geojson kan je markers aan de map toevoegen. Je moet in de features een nieuw item toevoegen, hier geef je de naam, omschrijving en reservatie mee.
const geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [5.123448523735618, 52.082773415719515],
},
properties: {
title: "Smartzone NAAM STADt",
description: "",
reservatie: "DATA RESERVATIE"
},
},Bij de new mapboxgl.Marker maak je een nieuwe marker aan, hier kan je html inzetten. Hier is een voorbeeld:
new mapboxgl.Marker(el)
.setLngLat(feature.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(
`<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p><p>${feature.properties.reservatie}</p>`
)
)
.addTo(map);