Is it possible to dinamically add/remove layer from RMAP?

[gillesserco]

Hello

I have built a webapp + backend that displays COG GeoTiff ( http://141.95.153.253/rapidai4eo/index.html ). I didn't find a way to dynamically add or remove layers (in particullar RLayerTileWebGL) on a RMAP.

My workarround is to create the RMAP with n RLayerTileWebGL, then to change the layer URL dinamically as needed.

So is it possible? if so can an example be added?

Thanks and best regards

Gilles

[mmomtchev]

Both should work using regular React semantics - you rerender your component without the layer or with the a different url. Like in

<RMap>
  { layerPresent && <RLayer url={dynamicUrl} /> }
</RMap>

It something does not work, it is a bug.

[gillesserco]

Hello

Sorry but it is still not clear to me, or maybe my question is badly formulated.  Let's suppose I have my map component containing one RMap with one ROSM layer, and two add/remove layer buttons. I want to add/remove a layer from the code that is within my map component, outside of the RMap.

In my tests I used reference to the rmap object to acces his context/content and change url on the fly onRLayerTileWebGL, or add geo-featrures in RLayerVector, and this his working well, but creating/removing layers would have been simplier if possible.

For the purpose of this question, my minimum code is like this:

//import React from 'react';
//
import { fromLonLat } from "ol/proj";
//import { Vector as VectorSource } from 'ol/source';
//import { MapBrowserEvent } from 'ol';
//
import { Button } from 'react-bootstrap';
//
import { RMap, ROSM, RLayerTileWebGL, RControl} from "rlayers";
//
import Styles from "./BackgroundMap.module.css";

/*
the goal is to add and remove layer(s) in RMap from ouside of the RMap tree, for example in add_layer and remove_layer methods.

working Sentinel2 layer can be:

    <RLayerTileWebGL
        properties={{ label: "Sentinel-2" }}
        url="https://s2maps-tiles.eu/wmts?layer=s2cloudless-2021_3857&style=default&tilematrixset=GoogleMapsCompatible&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/jpeg&TileMatrix={z}&TileCol={x}&TileRow={y}"
        attributions='<a href="https://www.esa.int/" target="blank">ESA</a>'
    />

*/

const Map = () => {

    const center = fromLonLat([2.364, 48.82]);

    
    function add_layer() { // add "Sentinel-2" layer to Rmap
        console.log(" add Sentinel2 layer to RMap");
    }

    function remove_layer() { // remove "Sentinel-2" layer to Rmap
        console.log(" remove Sentinel2 layer to RMap");
    }

    return (
        <div>
            <Button key="addLayer"
                onClick={(e) => {
                    add_layer();
                }}
            >Add layer</Button>

            <Button key="removeLayer"
                onClick={(e) => {
                    remove_layer();
                }}
            >remove layer</Button>

            <RMap 
                noDefaultControls={true}
                width={"100%"} 
                height={"100vh"} 
                initial={{ center: center, zoom: 11 }}>

                <RControl.RLayers
                    className={Styles.rai4eo_control_basemap}
                >

                    <ROSM />

                </RControl.RLayers>

            </RMap>
        </div>
    )

}

export default Map

Thanks

[mmomtchev]

This is a basic React question. It will be the same with any HTML element, not only maps:

function Component() {
  const [show, setShow] = React.useState(false);
  return (
    <div>
      <button onClick={() => setShow(false)}>Remove</>
      <button onClick={() => setShow(true)}>Show</>
      { show && <div>Element that goes away</div> }
    </div>
  )
}

[gillesserco]

hello,

Yes I know this, unfortunately I looks like I don't manage to communicate what my problem is... Basically I want the equivalent of the openlayer map.addLayer(raster) method...

Thanks anyway

[mmomtchev]

This is it, you create a map with a layer that can be added and go away. A layer is a sub-element of a map.

[tarmooo]

you might also use visible prop to make layer visible?

[mmomtchev]

You can handle a layer the same way you handle any other HTML element. When the element disappears, so does your layer.