-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to click unclustered-point #1059
Comments
I'm having the same problem right now. When clicking an unclustered point, the |
Same issue here |
After struggling with this a bit, I think the solution is to add the layer id in the ex. |
@ypat125 I just implement that you suggest . |
Can you tell me please how to add the Popup to the unclustered-poin? |
Someone solved it? |
Had the same issue but got clusters and map points showing a popup when clicking on the marker added via @lizzethgd @darokviana hope this helps you both and others 😃 export const clusterLayer: LayerProps = {
id: 'clusters',
type: 'circle',
source: 'cluster-geo',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#f1f075',
750,
'#f28cb1',
],
'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
},
};
export const clusterCountLayer: LayerProps = {
id: 'cluster-count',
type: 'symbol',
source: 'cluster-geo',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12,
},
paint: {},
};
export const unclusteredPointLayer: LayerProps = {
id: 'unclustered-point',
type: 'circle',
source: 'cluster-geo',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 10,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff',
},
};
interface PopupInfo {
lngLat: [number, number];
text: string;
}
interface MapboxMapProps {
data: GeoJSON;
}
const MapboxMap = ({ data }: MapboxMapProps) => {
const [popupInfo, setPopupInfo] = useState<PopupInfo | null>(null);
const handleMapClick = (e: MapEvent) => {
const features = e.features || [];
if (features.length > 0) {
setPopupInfo({
lngLat: features[0].geometry.coordinates,
text: features[0].properties.title,
});
}
};
return (
<ReactMapGL
interactiveLayerIds={[unclusteredPointLayer.id!]}
onClick={handleMapClick}
>
<Source
id="cluster-geo"
type="geojson"
data={data}
cluster={true}
clusterMaxZoom={14}
clusterRadius={50}
>
<Layer {...clusterLayer} />
<Layer {...clusterCountLayer} />
<Layer {...unclusteredPointLayer} />
</Source>
{popupInfo && (
<Popup
tipSize={5}
longitude={popupInfo.lngLat[0]}
latitude={popupInfo.lngLat[1]}
onClose={setPopupInfo}
>
{popupInfo.text}
</Popup>
)}
</ReactMapGL>
);
};
export default MapboxMap; |
I did follow clusters example but I found error when click unclustered-point
refer example
https://github.com/uber/react-map-gl/tree/5.2-release/examples/clusters
refer docs.mapbox
https://docs.mapbox.com/mapbox-gl-js/example/cluster/?utm_medium=blog&utm_source=mapbox-blog&utm_campaign=blog|mapbox-blog|maps|clustering-properties-with-mapbox-and-html-markers-bb353c8662ba-19-04&utm_term=maps&utm_content=clustering-properties-with-mapbox-and-html-markers-bb353c8662ba
The text was updated successfully, but these errors were encountered: