How to add or remove layers using react-leaflet - reactjs

I would like to render two distinct react components:
A leaflet map
A sidebar component where I render a list of checkbox to enable/disable GeoJSON layers.
I am using react-leaflet package. And I am using reflux store for keeping the list of all possible layers I will render in the map.
I would like to know whats the best approach for add layers on demand, using the checkbox onChange event. Thanks


In your checkbox events you would update a "layer toggle" value in your store. Assuming you are set up correctly this value should push a update to your page. So, all you have to do is conditionally render your page based on those "layer toggle" values saved in your store.
Let me know if you would like more explanation.


import { Map, TileLayer, LayersControl } from 'react-leaflet';
const { Overlay } = LayersControl;
use the overlay in your map, here is a detail example about this.
https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/layers-control.js

Related

Use arcGis js 4.x layerlist outside of the map view with react

So I have a mapview wrapped in a useEffect hook. I can set a variable like:
const layerList = new LayerList({
view: view,
container: 'example'
})
And this will work fine in the mapview. What I want, is to display the layerlist inside of a drawer, in a separate component from the mapview. Now the above works if I have a div inside of the drawer with an id of 'example'.
However, as the layerlist container is only set once, if I had a tab structure inside of that drawer for example, and moved from the tab holding the id to another tab, and then back, the layerlist dissapears.
Has anyone ever used the layerlist outside of the map, and if so, how?

Custom Cursor changing when hovering Child Compobent

I have a React App with a global custom cursor (not only a png changed in CSS, but a colored circle-div that‘s following the mouse).
My App consists of various child components (project teasers), when hovering those project teaser components the cursor component should change size, color and text content.
I have no experience with Redux so far, but do I need to store the cursor state in Redux for such a scenario or can I pass it down another way?
Thanks.

You can either use react context/redux or manually pass down the props each component. If you want study react context, here's a good article.

rearrange listgroup items in reactstrap

I had a listgroup from reactstrap and I want to be able to drag items to rearrange them and change the order after the page has loaded? Is this possible or are listgroups static?

Reactstrap ListGroup does not support drag and drop functionality you have to use other react component for that like react-drag-list, react-draggable-list, etc
react-drag-list
react-draggable-list

React-Leaflet React Component as Marker

I've recently gotten into React Leaflet and from what I've gathered from the docs, it is not possible to add a custom React Element (Component or pure functional) as a marker.
What I want to achieve is to be able to use my React Element which is an SVG icon as the marker. This would be useful because I'll need to display several different color icons and it's way more convenient to pass the color as props and let React create the marker.
Am I right in assuming this isn't possible?

You are incorrect! :) React-leaflet allows the creation of custom components. Also, you should check out react-leaflet-div-icon since it seems like it's exactly what you need.

Include custom markers in export

I'm trying to export an AmMap with custom markers on it. This example show some custom markers, try exporting the map and you'll find that it has no markers at all in the image: https://codepen.io/anon/pen/gwNevz
The main method of adding the custom markers is to add it as a separate DOM child:
image.chart.chartDiv.appendChild( holder );
This is essentially the AmCharts example (https://www.amcharts.com/demos/custom-html-elements-map-markers/) but with exporting enabled
The standard export plugin omit the custom markers. I tried adding the custom markers to other divs, but it did not matter. I also tried AmMaps-independent approaches (eg html2canvas) but those were unsuccessful so far.
Any ideas how to do this?

Unfortunately it isn't possible, which is why the demo has export disabled. The export converts the underlying SVG in the chart div to an image. Non-SVG elements like the div markers won't get exported. You'll have to use the default markers or create your own as images through the svgPath property.

Resources