Hi there,
I'm currently building a custom component with mapBox (i want more map styles and options than the retool mapbox component, which would, btw, be just awesome if it had at least several map styles).
So, I'm triggering some queries to get my markers ready to be injected in my mapbox custom component. I'm using Model to store my dynamic data and then use window.Retool.subscribe
to get my data in my custom component js. Custom component shows and markers too.
But then, I want to filter markers by status and joboffer-title. Each time I'm filtering my marker the map entirely reloads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RH Maps</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'xxxxxxxxx';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [2.1186, 46.4203],
zoom: 4
});
map.on('load', () => {
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
(error, image) => {
if (error) throw error;
map.addImage('custom-marker', image);
window.Retool.subscribe(function(model) {
if(!model){ return }
let locations = model.location
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': locations
}
}
)
}
);
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
"icon-size": 0.5,
'icon-padding' : 0,
'icon-ignore-placement' : true
// get the title name from the source's "title" property
}
});
});
});
</script>
</body>
</html>
Is there a way I can update model.location
so my markers change on the map without reloading everything? Retool mapBox component does it so maybe i'm missing something.
Thanks for your help