Code Monkey home page Code Monkey logo

Comments (7)

mmomtchev avatar mmomtchev commented on May 20, 2024

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.

from rlayers.

gillesserco avatar gillesserco commented on May 20, 2024

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

from rlayers.

mmomtchev avatar mmomtchev commented on May 20, 2024

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>
  )
}

from rlayers.

gillesserco avatar gillesserco commented on May 20, 2024

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

from rlayers.

mmomtchev avatar mmomtchev commented on May 20, 2024

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.

from rlayers.

tarmooo avatar tarmooo commented on May 20, 2024

you might also use visible prop to make layer visible?

from rlayers.

mmomtchev avatar mmomtchev commented on May 20, 2024

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

from rlayers.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.