javascript - How to select area on React Leaflet Map using external Select dropdown component

Question

So the question is how to select specific area using external Select dropdown component:

 <div className="Map">
  <Select
    onChange={setArea}
    size={"large"}
    className="Map-areaSelector"
    value={selectedArea}
  >
    {areaList}
  </Select>
  {colors && (
    <MapContainer center={getCenter()} zoom={getZoom()}>
      <>
        <GeoJSON
          style={setColor}
          data={germanyDis}
          onEachFeature={onEachArea}
        />
        <NewLegend arr={gradient} />
      </>
    </MapContainer>
  )}
</div>

Want such result, while I am choosing city from Select dropdown on the top right

For now I can only select area, while I am clicking directly on the map on this area(using onEachFeature function) but cant understand how to connect Select component to achieve same functionality, while choosing area from dropdown.

question from:https://stackoverflow.com/questions/65845263/how-to-select-area-on-react-leaflet-map-using-external-select-dropdown-component

Answer 1

If we assume that you have the district names on your dropdown and are equal with the names that are included inside the geojson, also the map instance, inside select's onChange you will have to use the json ref to find the layer with the selected district name and then perform any operation on it like open its popup or zoom to the selected layer.

const geoJsonRef = useRef();
const [selectValue, setSelectValue] = useState("");
...
const handleDistrictChange = (e) => {
    const newDistrict = e.target.value;
    setSelectValue(newDistrict);

    if (!newDistrict) return;

    const layer = geoJsonRef.current
      .getLayers()
      .find((layer) => layer._popup._content === newDistrict);
    layer.openPopup();
    map.fitBounds(layer.getBounds());
};

and add the ref on your GeoJSON component as well as getting the map instance from MapContainer.

<>
  <MapContainer
      center={position}
      zoom={13}
      style={{ height: "80vh" }}
      whenCreated={setMap}
   >
   ...
  {geoJSON && (
     <GeoJSON
        data={geoJSON}
        onEachFeature={handleEachFeature}
        ref={geoJsonRef}
     />
   )}
  </MapContainer>
  <select value={selectValue} onChange={handleDistrictChange}>
     <option value="">Select a district</option>
     {geoJsonRef.current
        ?.getLayers()
        .map((layer) => layer._popup._content)
        .map((district, index) => (
           <option key={`district-${index}`} value={district}>
            {district}
           </option>
      ))}
  </select>
 </>

You can see more on this demo