I'm not the best at javascript, but i want to "realtime" or any 5 seconds. update my mapbox clusters/points. Which i pull from a php-file, which "echos" geojson. It's then shown on the map but if i want to update them currently i'll have to refresh the site. I really spent hours now with combining code examples from Mapbox without luck yet this is the code i'm working with:
map.on('load', () => {
// Add a new source from our GeoJSON data and
// set the 'cluster' option to true. GL-JS will
// add the point_count property to your source data.
map.addSource('scooters', {
type: 'geojson',
// Point to GeoJSON data. This example visualizes all M1.0+ scooters
data: 'mapvehicles.php',
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'scooters',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#5CB66E',
100,
'#5CB66E',
750,
'#5CB66E'
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'scooters',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12
}
});
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'scooters',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#5F36B2',
'circle-radius': 5,
'circle-stroke-width': 2,
'circle-stroke-color': '#fff'
}
});
map.on('click', 'clusters', (e) => {
const features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
const clusterId = features[0].properties.cluster_id;
map.getSource('scooters').getClusterExpansionZoom(
clusterId,
(err, zoom) => {
if (err) return;
map.easeTo({
center: features[0].geometry.coordinates,
zoom: zoom
});
}
);
});
map.on('click', 'unclustered-point', (e) => {
const coordinates = e.features[0].geometry.coordinates.slice();
const vehid = e.features[0].properties.id;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(
`ID: ${vehid}`
)
.addTo(map);
});
map.on('mouseenter', 'clusters', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'clusters', () => {
map.getCanvas().style.cursor = '';
});
});
As Steve couldn't help you... i'll help you if you update like this it will update this clusters too.
var url = 'mapvehicles.php';
map.addControl(geolocate);
map.on('load', function () {
geolocate.trigger();
var request = new XMLHttpRequest();
window.setInterval(function () {
// make a GET request to parse the GeoJSON at the url
request.open('GET', url, true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// retrieve the JSON from the response
var json = JSON.parse(this.response);
// update the scooters symbol's location on the map
map.getSource('scooters').setData(json);
}
};
request.send();
}, 2000);