Search code examples
reactjsmapbox-glreact-map-glkepler.gl

How to remove all map layers from kepler.gl dynamically?


I have added a div and dropdwn, on each option I have uploaded geojson data using addDatatoMap in reactjs . On each time I selected the option , this uploaded the respective layer , But I am not able to remove the previous layers, So any code or example to reset / clear map layers


Solution

  • After so many research I found the solution , so posted it to save other's time

    import KeplerGlSchema from 'kepler.gl/schemas';
    import { visStateUpdaters } from 'kepler.gl/reducers';
    
    // // Clear Uploaded Data
    RemoveUploadedData() {
    // // returns uploaded Data on map
    const dataToSave = 
    KeplerGlSchema.getDatasetToSave(this.props.demo.keplerGl.map);
    console.log('dataToSave', dataToSave);
    
    // // returns uploaded layer config on map
    const configToSave = 
    KeplerGlSchema.getConfigToSave(this.props.demo.keplerGl.map);
    console.log('configToSave', configToSave);
    
    var layerConfigs = configToSave.config.visState.layers;
    
    // // Removed each uploaded layers
    if (configToSave && layerConfigs.length > 0) {
        for (var i = 0; i < layerConfigs.length; i++) {
            this.props.demo.keplerGl.map.visState = 
                  visStateUpdaters.removeDatasetUpdater(            
                  this.props.demo.keplerGl.map.visState,
                { key: dataToSave[i].data.id }
             )
           }
         }
       }