codempireio / react-native-cluster-map Goto Github PK

Got an error Cannot read property 'isOutsideCluster' of undefined while using this module, probably after the latest update that added compatibility for a non marker component inside ClusterMapView

hey this is great project!! cz i'm using typescript

i think you mistyped on the style Props

it should be style: StyleProp<ViewStyle>

or it should be style: StyleProp<ViewProps>??

Hello, I am using redux to save the user's location on another screen. When I enter it as the initial region, I get this error. I leave the code.

import React, { Component, Fragment } from 'react';
import {
StyleSheet,
View,
StatusBar,
Platform
} from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/FontAwesome';
import { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps
import { ClusterMap } from 'react-native-cluster-map';
import { connect } from 'react-redux'
// import Geolocation from 'react-native-geolocation-service';
import { PermissionsAndroid } from 'react-native';
//Permiso de geolocalización
import Geolocation from 'react-native-geolocation-service';
import Axios from 'axios'
// import { useSelector } from 'react-redux';

export async function requestLocationPermission()
{
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
'title': 'MedicalEyes',
'message': 'Location and Store permission '
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
return true
} else {
return false
}
} catch (err) {
console.warn(err)
}
}

class Home extends Component {

state = {
initialRegion: {
latitude: null,
longitude: null,
latitudeDelta: 0.1,
longitudeDelta: 0.1
},
markers: [],
}

async getCurrentLocation(){
Geolocation.watchPosition(
(position) => {
let region = {
latitude: parseFloat(position.coords.latitude),
longitude: parseFloat(position.coords.longitude),
latitudeDelta: 0.1,
longitudeDelta: 0.1
};
this.setState({
initialRegion: region
});
},
(error) => {
// See error code charts below.
console.log(error.code, error.message);
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 1000 }
);
}

async getCurrentLocation(){
if (requestLocationPermission()) {
Geolocation.watchPosition(
(position) => {
let region = {
latitude: parseFloat(position.coords.latitude),
longitude: parseFloat(position.coords.longitude),
latitudeDelta: 0.1,
longitudeDelta: 0.1
};
this.setState({
initialRegion: region
});
},
(error) => {
// See error code charts below.
console.log(error.code, error.message);
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 1000 }
);
}
}
async getMarkers() {

await Axios.get('http://181.239.228.69:14083/api/auth/importApp ',
{
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': this.props.store.token_type + ' ' + this.props.store.token

    }}).then(responseJson => {
      const markers = responseJson.data;
        this.setState({
          markers: markers
        })
  })
  .catch((error) => {
      console.error(error);
  });

}

  componentDidMount(){
    StatusBar.setBarStyle('light-content');
    StatusBar.setBackgroundColor('#A3DADE');
    this.getCurrentLocation();
    this.getMarkers();

  } 

  componentwillUpdate(){
    this.getCurrentLocation();
    this.getMarkers();
  } 

render() {
return (


<ClusterMap
followUserLocation={true}
showsUserLocation={true}
zoomEnabled={true}
showsMyLocationButton={true}
style={styles.map}
minZoomLevel={5}
tracksViewChanges= {false}
region={{
latitude: this.props.store.latitude,
longitude: this.props.store.longitude,
latitudeDelta: 1,
longitudeDelta: 1
}}
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
>
{this.state.markers.map((marker) => (
<Marker

            tracksViewChanges={false}
            key={marker.id}
              coordinate={{
                              latitude: parseFloat(marker.latitude),
                              longitude: parseFloat(marker.longitude)
                            }}
              title={marker.enfermedad}
              description={marker.sintomas}
              
              onCalloutPress={() => this.props.navigation.navigate('Social')}
              pinColor= 'blue'
            />
          ))}  
    </ClusterMap>  
  </View>
      <View style={{flex:1, backgroundColor: '#f3ff3'}}>
        <ActionButton buttonColor="rgba(24,163,172,1)">
          <ActionButton.Item buttonColor='#5DBFC5' title="Nuevo Monitor" onPress={() => this.props.navigation.navigate('Monitor')}>
            <Icon name="pencil" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#5DBFC5' title="Data summary" onPress={() => this.props.navigation.navigate('Estadisticas')}>
            <Icon name="bar-chart" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#5DBFC5' title="Alertas Tempranas" onPress={() => this.props.navigation.navigate('HeatMap')}>
            <Icon name="barcode" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#5DBFC5' title="Nueva Marca" onPress={() => this.addMarker()}>
            <Icon name="map-marker" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
      </Fragment> 
    );
  }

}

const styles = StyleSheet.create({
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white',
},
container: {
...StyleSheet.absoluteFillObject,
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});

function mapStateToProps (state) {
const store = state.user
return { store }
}
export default connect(mapStateToProps)(Home)

Markers disappear when setState. All the markers disappears when set state while in a region with multiple markers.

Is there any chance to get info about merged markers in the cluster, not only qty of the markers? I just need to show a picture

No examples for clusterMarkerProps

As above, wondering if I can move the target icon.

I'm trying to update the region of a <ClusterMap/>, however it doesn't work.
This how I'm using it:
<ClusterMap region={this.state.region}/> then calling this.setState({region: {...})

I've looked at the code and the issue seems to be with using initialRegion at https://github.com/codempireio/react-native-cluster-map/blob/master/src/cluster-map.tsx#L41

According to the MapView documentation, changing this prop will not result in the map updating and region should be used instead.

Hi I'm just wondering if you could help me with referencing the ClusterMap & accessing MapViews base functions

<ClusterMap
ref={(ref) => { this.mapRef = ref }}
...otherProps

// fitToCoordinates undefined..
this.mapRef.fitToCoordinates(coordinatesOnly, {
edgePadding: DEFAULT_PADDING,
animated: false,
})

Is anyone else experience slow performance when you zoom out and start to have many clusters? I do have 100+ markers but when I don't cluster them there seems to be no issue. Does nodeSize have anything to do with this?

The component uses all children to create clusters, not just markers. This becomes an issue when using overlays, such as Polygons, Circles, etc.

The cluster map requires the coordinate prop to be present on all children, but this prop doesn't necessarily make sense for Polygons and Polylines.

Do you have any idea how to fill color outside of the viewport when we draw polygon?

priorityMarker={
             <Polygon
               ref={map}
               key={markes.id}
               coordinates={markes.coordinates}
               holes={markes.holes}
               strokeColor="red"
               fillColor="rgba(0,128,0,0.3)"
               strokeWidth={4}
             />
           )
}

Im have errors.

Currently, rendering <MapViewDirections> component within <ClusterMap> component is not supported. What's the way to show directions on map now?

I would like to change the cluster style depending on the markers it represents.
Since the pointCount is accessible, wouldn't it be possible to also access the marker objects for each cluster ?

I'm using this library on our project and it has great memory leak issue on the iOS side.

I am passing dynamic markers at the change of viewports of maps...but clustering not working properly.

When I am clicking on cluster than it's unable to expand only shows cluster count.
Here is the code:

Parent component :

<MapOnly placeName={placeName} setCoordinateApi={object => setCoordinateApi(object)} polygonDrawEnable={polygonDrawEnable} MapViewSet={MapViewSet} setMarkerClickData={object => setMarkerClickData(object)} setMarkerClick={data => setMarkerClick(data)} onPressMap={e => this.onPress(e)} editing={editing} mapinfo={mapinfo} apiCall1={object => this.apiCall1(object)} />

Child component:

import React, { useState } from "react"; import { View, Text } from "react-native"; import { ClusterMap } from "react-native-cluster-map"; import { Marker, ProviderPropType, Polygon } from "react-native-maps"; import AnimatedPriceMarker from "./AnimatedPriceMarker"; import styles from "./styles";

const useForceUpdate = () => useState()[1]; const Maps = props => { var map = React.createRef(null); renderCluster = count => { return ( <View style={{ width: 30, height: 30, padding: 6, borderWidth: 1, borderRadius: 15, alignItems: "center", borderColor: "#f716d2", justifyContent: "center", backgroundColor: "white" }} > <Text style={{ color: "#f716d2" }}>{count}</Text> </View> ); }; renderMarker = data => ( <Marker key={data.id || Math.random()} coordinate={data.location} /> ); const mapOptions = { scrollEnabled: true }; if (props.editing) { mapOptions.scrollEnabled = false; mapOptions.onPanDrag = e => this.onPress(e); } const forceUpdate = useForceUpdate();

return ( <ClusterMap ref={ref => { MapData = ref; }} style={styles.map} key={${props.placeName.latitude}} scrollEnabled={props.polygonDrawEnable} region={{ latitude: parseFloat(props.placeName.latitude), longitude: parseFloat(props.placeName.longitude), latitudeDelta: 1.05, longitudeDelta: 1.05 }} mapType={props.MapViewSet} onPress={e => { if (e.nativeEvent.action !== "marker-press") { props.setMarkerClickData({}); props.setMarkerClick(true); } }} onPanDrag={e => props.onPressMap(e)} renderClusterMarker={this.renderCluster} onRegionChangeComplete={async center => { if (props.polygonDrawEnable) { props.setCoordinateApi({ NorthEast: [ center.longitude + center.longitudeDelta / 2, center.latitude + center.latitudeDelta / 2 ], SouthWest: [ center.longitude - center.longitudeDelta / 2, center.latitude - center.latitudeDelta / 2 ] }); props.apiCall1({ Coordinates: { NorthEast: [ center.longitude + center.longitudeDelta / 2, center.latitude + center.latitudeDelta / 2 ], SouthWest: [ center.longitude - center.longitudeDelta / 2, center.latitude - center.latitudeDelta / 2 ] } }); } }} priorityMarker={ props.editing && (props.editing.coordinates.length != 0 && ( <Polygon ref={map} key={props.editing.id} coordinates={props.editing.coordinates} holes={props.editing.holes} strokeColor="red" fillColor="rgba(0,128,0,0.3)" strokeWidth={4} /> )) } > {Array.isArray(props.mapinfo) && props.mapinfo.map(marker => ( <Marker key={marker._id} coordinate={{ latitude: marker.Coordinates[1], longitude: marker.Coordinates[0] }} onPress={e => { props.setMarkerClickData(marker); props.setMarkerClick(false); }} > <AnimatedPriceMarker onClick={forceUpdate} amount={ Math.abs(marker.ListPrice) > 999 ? Math.sign(marker.ListPrice) * (Math.abs(marker.ListPrice) / 1000).toFixed(1) + "k" : Math.sign(marker.ListPrice) * Math.abs(marker.ListPrice) } color="#00AFF0" /> </Marker> ))} </ClusterMap> );

}; Maps.propTypes = { provider: ProviderPropType }; export default Maps;

I am getting the above error from ClusterMap component when I stop debugging the app.
It is working fine when debugging is ON.

ENV: Android
React Native: 0.61.5
"react-native-maps": "^0.27.1",
"react-native-cluster-map": "^1.0.9",

Code:

<ClusterMap
            provider={PROVIDER_GOOGLE}
            style={{ ...StyleSheet.absoluteFillObject }}
            region={{
                latitude: 22.593684,
                longitude: 80.96288,
                latitudeDelta: 25.9922,
                longitudeDelta: 35.9421,
            }}
            renderClusterMarker={renderCustomClusterMarker}
        >
            {DemoMarkers.map((marker, id) => {
                return <Marker coordinate={marker} key={id}/>;
            })}
        </ClusterMap>

I can't show Marker images and Cluster group images on Android phone.

I swapped react native maps with this and it works well but it only show locations marked in my city not the rest of the map, but rendering with MapView of react native maps show all locations. Is there something that's causing this and I can change it?

Please, can you add coordinates in onClusterClick?

I tried using it by returning a marker with coordinates but it doesn't affect in the map

ClusterMarker (concretely component inside ClusterMarker) causing huge lags when moving around map, because keeps updating.

I fixed this by defining tracksViewChanges: false prop to component inside CLusterMarker.
Now, markers are not updated every render, what improves performance to usable state.

To enable dynamic updates of marker's state, something like this: react-native-maps/react-native-maps#2658 (comment) can be implemented.

Here is my code below

onMapReady = () => { this.map.animateCamera({ pitch: 80, }); };

<ClusterMap ref={r => this.map = r} onRegionChangeComplete={this.onMapReady} style={{flex: 1}} region={this.state.region} customMapStyle={mapStyle} provider={PROVIDER_GOOGLE} showsUserLocation={true} maxZoomLevel={20} renderClusterMarker={this.renderCustomClusterMarker} isClusterExpandClick={true} superClusterOptions={{radius: 20, maxZoom: 15, minZoom: 1, nodeSize: 16}} // annotations={this.state.markers} >

markers not coming when data is coming dynamically
That is when we are calling the API for the markers then markers are not getting shown

I want to use react-native-maps-directions with this react-native-cluster-map package.

I was using react-native-maps and react-native-maps-directions.
After I changed react-native-maps to react-native-cluster-map, I had this issue.

TypeError: Cannot read property 'coordinate' of undefind

I think this react-native-cluster-map allow only Marker child node and don't allow other child node, yet.
Please solve this map direction problem in this ClusterMap node.