Comments (2)
This is most likely an issue with your rendering of map markers - unsure what else could be causing this issue without seeing the code.
from react-native-clusterer.
Sorry for my poor question, let me try to show you the whole implementation:
im using
import { YaMap } from 'react-native-yamap';
the thing is - there is no latitudeDelta and longitudeDelta after changing position of maps camera, so I calculated myself.
export const getRegionForZoom = (lat: number, lon: number, zoom: number): MapRegion => {
const distanceDelta = Math.exp(Math.log(360) - zoom * Math.LN2);
const { width, height } = Dimensions.get('window');
const aspectRatio = width / height;
return {
latitude: lat,
longitude: lon,
latitudeDelta: distanceDelta * aspectRatio,
longitudeDelta: distanceDelta,
};
}
const [westLng, setWestLng] = useState(INITIAL_WEST_LNG);
const [southLat, setSouthLat] = useState(INITIAL_SOUTH_LAT);
const [eastLng, setEastLng] = useState(INITIAL_EAST_LNG);
const [northLat, setNorthLat] = useState(INITIAL_NORTH_LAT);
const convertedArray: IFeature[] = points
.filter((data) => data.location.longitude !== '0' || data.location.latitude !== '0')
.map((item) => ({
type: 'Feature' as const,
geometry: {
type: 'Point' as const,
coordinates: [+item.location.longitude, +item.location.latitude],
},
properties: {
...item,
...item.location,
...item.owner,
id: item._id,
data: item,
},
}));
const superCluster = new Supercluster(superclusterOptions);
superCluster.load(convertedArray);
const clustersAndPoints = superCluster.getClusters([westLng, southLat, eastLng, northLat], zoom);
my render is looks like:
return (
<YaMap
ref={mapRef}
logoPadding={{ vertical: 670, horizontal: 30 }}
showUserPosition={false}
initialRegion={{ lon: MoscowPoint.lon, lat: MoscowPoint.lat }}
style={RN.StyleSheet.absoluteFillObject}
onLayout={() => setMapIsReady(true)}
onCameraPositionChangeEnd={(event) => {
if (event.nativeEvent.finished) {
setWestLng(INITIAL_WEST_LNG);
setSouthLat(INITIAL_SOUTH_LAT);
setEastLng(INITIAL_EAST_LNG);
setNorthLat(INITIAL_NORTH_LAT);
mapRef.current?.getCameraPosition((position) => {
const { lat, lon } = position.point;
const { zoom } = position;
handleChangeRegion({
...getRegionForZoom(lat, lon, zoom),
});
handleChangeZoom(position.zoom);
});
}
}}
>
<UserLocationMarker />
<Clusterer
data={clustersAndPoints}
region={region}
options={{
radius: 20,
extent: 600,
minPoints: 3,
minZoom: 0,
}}
mapDimensions={MAP_DIMENSIONS}
renderItem={(item) => {
const clusterId: number = item.properties?.cluster && item.properties?.cluster_id;
const markerId: string = item.properties?.id;
return (
<ClusterAndMarkerPoint
points={clustersAndPoints}
clusterId={clusterId}
markerId={markerId}
item={item}
onPress={
item?.properties?.cluster &&
item?.properties?.cluster_id !== null &&
(() => {
const clusterId = item?.properties?.cluster_id;
const clusterArr: Array<number> = clustersAndPoints.map((data) => data.properties.cluster_id);
const isClusterExist = clusterArr.includes(clusterId);
const toCluster = {
lon: item?.geometry?.coordinates[0],
lat: item?.geometry?.coordinates[1],
};
if (clusterId !== undefined && isClusterExist) {
getClusterZoom(clusterId);
} else {
if (zoom < 7) {
handleChangeZoom(7, toCluster, 0.6);
} else if (zoom < 10 && zoom > 7) {
handleChangeZoom(10, toCluster, 0.6);
} else {
handleChangeZoom(zoom + 3, toCluster, 0.6);
}
console.warn(`No cluster with the specified id: ${clusterId}`);
}
})
}
/>
);
}}
/>
</YaMap>
)
and my ClusterAndMarkerPoint:
export const ClusterAndMarkerPoint: FunctionComponent<Props> = memo(
({ item, onPress, clusterId, markerId, points }) => {
const [logoLoaded, setLogoLoaded] = React.useState(false);
const clusterArr: Array<number> = points.map((data) => data.properties.cluster_id);
const handlePress = useRecoilCallback(
({ get, set, reset }) =>
(id: string) => {
if (get(openedChargePointAtom)) {
return;
}
set(openedChargePointAtom, id);
chargersScreenBottomSheetsShowablePortal.current?.show(
`DetailedChargePoint(id=${id})`,
DetailedStationSheet,
{
chargePointId: id,
onClose: () => {
reset(openedChargePointAtom);
mapRef.current?.getCameraPosition((position) => {
if (position.zoom > 10) {
mapRef.current?.setZoom(position.zoom - 1, 2, 1);
} else {
mapRef.current?.setZoom(position.zoom, 2, 1);
}
});
},
}
);
},
[]
);
return (
<YaMarker
source={item?.properties?.logo_url && { uri: item?.properties?.logo_url }}
key={clusterId || `${markerId + logoLoaded}`}
point={{
lat: +item.geometry.coordinates[1] || Number(item?.properties?.latitude),
lon: +item.geometry.coordinates[0] || Number(item?.properties?.longitude),
}}
onPress={onPress || (() => handlePress(item?.properties?.id))}
>
{item?.properties?.cluster && clusterId ? (
<ClusterComponent key={clusterId} clusterArr={clusterArr} item={item} />
) : (
<>
{item?.properties?.logo_url && (
<PointComponent
key={`${markerId + logoLoaded}`}
markerId={markerId}
logoUrl={item?.properties?.logo_url}
logoLoaded={logoLoaded}
setLogoLoaded={setLogoLoaded}
/>
)}
</>
)}
</YaMarker>
);
},
(prevProps, nextProps) =>
prevProps.item.properties?.cluster_id === nextProps.item.properties?.cluster_id &&
prevProps.item.properties?.id === nextProps.item.properties?.id &&
prevProps.item.properties?.point_count === nextProps.item.properties?.point_count &&
prevProps.item.properties?.onPress === nextProps.item.properties?.onPress &&
prevProps.item.properties?.getClusterExpansionRegion === nextProps.item.properties?.getClusterExpansionRegion &&
prevProps.markerId === nextProps.markerId &&
prevProps.clusterId === nextProps.clusterId
);
from react-native-clusterer.
Related Issues (20)
- Support for Expo Managed Workflow HOT 3
- [IOS] The marker and the cluster do not appear HOT 2
- Disable Clusterer animation
- points in useClusterer are empty HOT 5
- Can we have a full working example in the documentation?
- Does this only work for react-native-maps HOT 1
- Not working on android with RN 0.71 HOT 4
- Clusterer: React Native component getLeaves HOT 2
- Consideration: Expand beyond clustering? HOT 1
- Version 1.3.0 break apps that are using react native < 0.71
- [Android] Build failed: `Required by: project :app > project :react-native-clusterer` HOT 1
- Add markerToGeoJSONFeature to easily convert points to needed format HOT 1
- PointFeature properties inaccurate type HOT 1
- Problem installing HOT 2
- Linker error with iOS
- Cluster can not explose markers when markers are too near each other HOT 3
- Android build failing HOT 1
- Performance compared to other libraries HOT 1
- Flickering when zooming HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-clusterer.