How can I render my markers inside the ClusteredMapView? - react-native

Question

I am trying to render the markers inside the component <ClusteredMapView/> but it do not happen, just render the marker with none markers...
Bellow some code:
render() {
return (
<ClusteredMapView
style={{ flex: 1 }}
data={this.state.data}
initialRegion={INIT_REGION}
ref={r => {
this.map = r;
}}
renderMarkerS={this.renderMarkerS}
renderCluster={this.renderCluster}
/>
);
}
}
here is the renderMarkers function:
renderMarkerS = item =>
this.state.markers.map((marker, index) => {
console.log('Location picker Marker', coords);
const coords = {
location: {
latitude: JSON.parse(item.latitude),
longitude: JSON.parse(item.longitude),
},
};
return (
<Marker
onPress={this.pickLocationHandler}
ref={mark => (marker.mark = mark)}
key={index || Math.random()}
title={'Parada'}
description={marker.hora}
tracksViewChanges={!this.state.initialized}
{...this.props}
pinColor={'tomato'}
coordinate={JSON.parse(item.location)}
//coordinate={coords}
>
{this.props.children}
</Marker>
);
});
With:
componentDidMount() {
return fetch(
'https://gist.githubusercontent.com/MatheusCbrl/bba7db1c0dbc68be2f26d5c7e15649b6/raw/0fab4ea3b493dcd15e95f172cd0a251724efbc45/ParadasDiurno.json'
)
.then(response => response.json())
.then(responseJson => {
// just setState here e.g.
this.setState({
data: responseJson,
isLoading: false,
});
})
.catch(error => {
console.error(error);
});
}
My data is:
[
{
"id": "1",
"location": {
"latitude": "-29.2433828",
"longitude": "-51.199249"
},
"hora": "03:55:00 PM"
},
Some one can help me?
Here is the intere code to your view: https://snack.expo.io/#matheus_cbrl/clusters
I got the follow error:
Device: (3:18096) No cluster with the specified id.
Device: (3:5314) TypeError: t.props.renderMarker is not a function. (In 't.props.renderMarker(e.properties.item)', 't.props.renderMarker' is undefined)
This error is located at:
in e
in MyClusteredMapView
in RCTView
in RCTView
in n
in n
in v
in RCTView
in RCTView
in c
Device: TypeError: t.props.renderMarker is not a function. (In 't.props.renderMarker(e.properties.item)', 't.props.renderMarker' is undefined)
Prettier
Editor
Expo

Answer 1

renderMarker is a function that render just 1 marker. Besides, you use this.state.data for markers but you didn't update it. You could try below
componentDidMount() {
return fetch(
'https://gist.githubusercontent.com/MatheusCbrl/bba7db1c0dbc68be2f26d5c7e15649b6/raw/0fab4ea3b493dcd15e95f172cd0a251724efbc45/ParadasDiurno.json'
)
.then(response => response.json())
.then(responseJson => {
// just setState here e.g.
this.setState({
data: responseJson, <-- update here
isLoading: false,
});
})
.catch(error => {
console.error(error);
});
}
renderCluster = (cluster, onPress) => {
const pointCount = cluster.pointCount,
coordinate = cluster.coordinate;
const clusterId = cluster.clusterId;
return (
<Marker key={clusterId} coordinate={coordinate} onPress={onPress}>
<View style={styles.myClusterStyle}>
<Text style={styles.myClusterTextStyle}>
{pointCount}
</Text>
</View>
</Marker>
);
};
renderMarker(marker) {
console.log('Location picker Marker', marker.location);
const coords = {
latitude: parseFloat(marker.location.latitude),
longitude: parseFloat(marker.location.longitude),
}
return (
<Marker
key={marker.id}
title={'Parada'}
description={marker.hora}
pinColor={'tomato'}
coordinate={coords}
/>
);
}
render() {
return (
<View style={{ flex: 1 }}>
<StatusBar hidden />
<ClusteredMapView
style={{ flex: 1 }}
data={this.state.data}
initialRegion={INIT_REGION}
ref={r => this.map = r}
renderMarker={this.renderMarker}
renderCluster={this.renderCluster}
/>
</View>
);
}