No soy el mejor en javascript, pero quiero "tiempo real" o 5 segundos. actualizar mis clústeres/puntos de mapbox. Que extraigo de un archivo php, que "eco" geojson. Luego se muestra en el mapa, pero si quiero actualizarlos actualmente, tendré que actualizar el sitio. Realmente pasé horas combinando ejemplos de código de Mapbox sin suerte, pero este es el código con el que estoy trabajando:
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 = ''; }); });Como Steve no pudo ayudarlo... lo ayudaré si actualiza de esta manera, también actualizará estos clústeres.
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);