Setting the file. One moment.
Skill 06 · Mapbox Google Maps Migration
Subchapter 6.3
references/data-performance.mdMarkdown2 KBView on GitHub
// Update marker position
marker.setPosition({ lat: 37.7849, lng: -122.4094 });
// Update polygon path
polygon.setPath(newCoordinates);// Update source data
map.getSource('points').setData(newGeojsonData);
// Or update specific features
const source = map.getSource('points');
const data = source._data;
data.features[0].geometry.coordinates = [-122.4094, 37.7849];
source.setData(data);Migration Tip: If you have performance issues with Google Maps (many markers), Mapbox will likely perform significantly better.
Google Maps approach:
Mapbox approach:
Google Maps:
Mapbox:
Google Maps:
const heatmap = new google.maps.visualization.HeatmapLayer({
data: points,
map: map
});Mapbox:
map.addLayer({
id: 'heatmap',
type: 'heatmap',
source: 'points',
paint: {
'heatmap-intensity': 1,
'heatmap-radius': 50,
'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(0,0,255,0)', 0.5, 'lime', 1, 'red']
}
});