react-map-gl
react-map-gl copied to clipboard
[Bug] Mapbox queryRenderedFeatures() returns empty array
Description
I am following this example here https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/ to retrieve the information on point of the map. It uses queryRenderedFeatures() to generate the information of a tile. However, when I added this to my code. it returns an empty array only. May I ask if anyone experiencing the same issue?
Expected Behavior
No response
Steps to Reproduce
Here is my code
import React, { useState, useEffect, useRef } from "react";
import MAP, { MapRef } from "react-map-gl";
const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN;
export default function MapboxMap(props: User): React.ReactElement {
const mapRef = useRef<MapRef>(null);
const [mapStyle, setMapStyle] = useState("mapbox://styles/mapbox/standard");
const [viewport, setViewport] = useState({
latitude: 22.3027,
longitude: 114.1772,
bearing: 0,
pitch: 0,
});
const getMapPointInfo = (e: mapboxgl.MapMouseEvent) => {
console.log("Info at this point", e.point);
const features = mapRef.current?.queryRenderedFeatures(e.point);
const displayProperties = ["type", "properties", "id", "layer", "source", "sourceLayer", "state"];
const displayFeatures = features.map((feat) => {
const displayFeat = {};
displayProperties.forEach((prop) => {
displayFeat[prop] = feat[prop];
});
return displayFeat;
});
console.log("Info at this point", features);
};
return (
<div style={{ width: "100%", height: "100%" }}>
<MAP
initialViewState={viewport}
mapboxAccessToken={MAPBOX_TOKEN}
mapStyle={mapStyle}
ref={mapRef}
attributionControl={false}
projection={{ name: "globe" }}
onClick={(e) => {
getMapPointInfo(e);
}}
></MAP>
</div>
);
}
Environment
- Framework version: "react": "^18.2.0",
- Map library: "react-map-gl": "^7.1.6",
- Browser: Google Chrome, Edge
- OS: Windows
Logs
No response