Reputation: 717
I have a geojson layer for extruding polygons in mapbox . A filter that at the beginning shows nothing.
map.current.addSource('congeoex', {
type: 'geojson',
data: 'http://localhost:3000/geometries.geojson'
});
map.current.addLayer({
'id': 'congeoex',
'type': 'fill-extrusion',
'source': 'congeoex',
'paint': {
'fill-extrusion-color': 'black',
'fill-extrusion-height': ['+',['to-number', ['get', 'mytop']] , 7],
'fill-extrusion-base': ['+',['to-number', ['get', 'mytop']], 5]
},
//show nothing at first
'filter': ['==', ['get','no'], 0]
});
Then I dynamically get an array of no
properties, representing features to be somehow extruded.
After I get the array, I change the filter of the layer . Then I want to edit the geojson source of the layer, based on that array and add a custom attribute to the geojson that is the increasing elevation of the extrution. That custom attribute must be named mytop
, to be the same found in 'fill-extrusion-height fill-extrusion-base
.
map.current.setFilter('congeoex', ['in',['get', 'no'] , ['literal',array_of_no]] )
const geojsonSource = map.current.getSource('congeoex');
console.log('geojsonSource ', geojsonSource);
//edit geojson to add mytop attribute
//map.current.triggerRepaint();
I cannot actually do that because the map.current.getSource('congeoex');
does not give back the actual geojson data of the layer to be edited.
I tried getting the geojson data and editing, but looks like it changes the data on the front-end locally, not the data in mapbox, because I see no change on the map
fetch('http://localhost:3000/geometries.geojson')
.then((res)=>{
const data = res.json()
return data
})
.then(a => {
let anew = a.features.filter(item => array_of_no.includes(item.properties.no));
let elevHeight = 10;
anew.forEach(e =>{
e.properties.customTop = elevHeight;
elevHeight = elevHeight + 10;
});
})
map.current.setFilter('congeoex', ['in',['get', 'no'] , ['literal',array_of_no]] )
map.current.triggerRepaint();
So, how can I edit the geojson source of a mapbox layer, change layer filter and then re-render the map ?
Thank you
Upvotes: 0
Views: 465
Reputation: 126907
You're so close.
map.getSource('congeoex').setData(...)
Upvotes: 1