Control (Add and remove) <FeatureLayer> on Checkbox OnChange

[UmairMughal901]

Hi, I am trying to remove FeatureLayer added to Map onChnage of Checkbox. Please help me how can I do this.

[slutske22]

Can you please post some code? Or a codesandbox demonstrating the issue you are experiencing? This does not sound like an issue with this plugin rather than a question about how to code something. Please post a minimal reproducible example.

[UmairMughal901]

import React, { useEffect } from "react";
import L  from "leaflet";
import 'leaflet/dist/leaflet.css';
import { MapContainer, TileLayer, GeoJSON, useMap} from "react-leaflet";
import axios from "axios";
import {  FeatureLayer } from "react-esri-leaflet";

const MyData = () => {
  const [data, setData] = React.useState();
  const map = useMap();

  useEffect(() => {
    const getData = async () => {
      const response = await axios.get(
        "https://gist.githubusercontent.com/UmairMughal901/486a7f64d1325ea8cb0c4f91925c5d85/raw/521f91aedb0b08b02ab7746e332041e31dc72360/map.geojson"
      );
      setData(response.data);
    };
    getData();
  }, []);

  if (data) {
    // These next 3 lines purely for debuggins:
    const geojsonObject = L.geoJSON(data);
    //map.fitBounds(geojsonObject.getBounds());
    //console.log(geojsonObject);
    // end debugging

    return <GeoJSON data={data} />;
  } else {
    return null;
  }
};

const Map = (props) => {
  return (
    <MapContainer
      doubleClickZoom={true}
      id="mapId"
      zoom={5}
      center={[32, 71]}

    >
      <MyData />

      <FeatureLayer url={'http://202.166.167.121:6080/arcgis/rest/services/Punjab/PB_irisportal_pg31_v_02112017/MapServer/12'}  
      eventHandlers={{
        load: () => console.log('featurelayer loaded')
      }}
      />

      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        maxZoom='13'
      />

    </MapContainer>
  );
};

export default Map;

[UmairMughal901]

Thank you for your prompt reply. I make a sandbox example and share it.

[UmairMughal901]

https://codesandbox.io/s/table-of-content-ldvwh?file=/src/Map.js

[slutske22]

I don't see any checkbox in your example. You created a sandbox but I am still very unclear on what you are trying to accomplish.

Ultimately, adding and removing a layer based on the checked status of some input field is the same as conditionally rendering any react component based on a state variable. That is not specific to react-esri-leaflet, but to react-leaflet in general. As this is not an issue with this plugin, I am closing this issue. I recommend you post a question on stack overflow. If you do that, post a link here and I can take a look and attempt an answer there on SO.