Comments (7)
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.
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.
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.
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.
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.
you might also use visible prop to make layer visible?
from rlayers.
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)
- is it possible to do layer pixel manipulation? HOT 1
- Using non-default projection with OSM and Next.js HOT 3
- RLayerWMTS fetches the wmts file twice HOT 4
- Popup för vector tile layers HOT 1
- RStadiaLayer is not being exported HOT 2
- Is it possible to load tiles using the setTileLoadFunction ? HOT 2
- Unable to use `RPopup` with `RLayerCluster` HOT 10
- Snap doesn't work when use Rmodify HOT 4
- Can't set default rotation in the RView HOT 1
- map is undefined HOT 2
- Improvements for RLayerTileWMSProps HOT 1
- onDrawStart and onDrawEnd not working for RModify interaction HOT 4
- Calling an event only once HOT 3
- Setting tabindex HOT 2
- improve tile layer props HOT 1
- Google Maps Integration HOT 1
- RLayerTileWMS refresh unexpectly HOT 9
- Event Propagation in onPointerDrag HOT 3
- RDragZoom does not extend RDragBox and onChange appears not to work
- RLayerCluster url loading with react suspense
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rlayers.