Use State to record click feature to use later, not working #1428
qiaoxin136
started this conversation in
General
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I am trying to use two state clickLL and clickProperty to record the clicked feature for other use.
two set function give me empty result,
setClickLL(event.lngLat);
setClickProperty(feature.properties);
My code is below as highlighted. Thanks for your advice.
import * as React from "react";
import { useState, useMemo, useCallback, useEffect } from "react";
import { render } from "react-dom";
import MapGL, { Source, Layer } from "react-map-gl";
import ControlPanel from "./control-panel";
import { MapStylePicker } from "./controls";
import { modelLayer, mhLayer } from "./map-style.js";
const MAPBOX_TOKEN =
"pk.eyJ1IjoicWlhb3hpbjEzNiIsImEiOiJjazFlY24xZmwwMTc5M21wYzUzNDduMjRqIn0.P-XtLBM4g3572S9QhQVODg"; // Set your mapbox token here
function getCursor({ isHovering, isDragging }) {
return isDragging ? "grabbing" : isHovering ? "pointer" : "default";
}
export default function App() {
const [viewport, setViewport] = useState({
latitude: 35.98071,
longitude: -78.8948,
zoom: 18.5,
minZoom: 6,
bearing: 0,
pitch: 0,
});
const [hoverInfo, setHoverInfo] = useState(null);
const [clickLL, setClickLL] = useState(0);
const [clickProperty, setClickProperty] = useState([]);
const [events, logEvents] = useState({});
const onClick = useCallback((event) => {
const feature = event.features && event.features[0];
}, []);
return (
<>
<MapGL
{...viewport}
width="100%"
height="100%"
mapStyle="mapbox://styles/mapbox/satellite-streets-v10"
clickRadius={2}
onClick={onClick}
getCursor={getCursor}
mapboxApiAccessToken={MAPBOX_TOKEN}
onViewportChange={setViewport}
// onHover={onHover}
// interactiveLayerIds={["counties"]}
>
<Layer {...modelLayer} />
);
}
Beta Was this translation helpful? Give feedback.
All reactions