Done some upgrades, and published the app on Expo

[mgscreativa]

Done some rework to organize the project
Created workarounds for image markers on Android
Added demo app on Expo

I have added some brand assets for the Expo publication, feel free to remove if you want.

[yarra2296]

Can you also make an example for this cluster to make use of polylines which makes use of the same Zoom Level and changes according to it ?
Please, I am new to react-native and No idea About it how to add polylines to this Cluster code.

Thanks in advance.

[mgscreativa]

Hi @yarra2296! I think you may implement it like this:

<ClusteredMapView>
	<MapView.Polyline
		coordinates={[
			{ latitude: 37.8025259, longitude: -122.4351431 },
			{ latitude: 37.7896386, longitude: -122.421646 },
			{ latitude: 37.7665248, longitude: -122.4161628 },
			{ latitude: 37.7734153, longitude: -122.4577787 },
			{ latitude: 37.7948605, longitude: -122.4596065 },
			{ latitude: 37.8025259, longitude: -122.4351431 }
		]}
		strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
		strokeColors={[
			'#7F0000',
			'#00000000', // no color, creates a "long" gradient between the previous and next coordinate
			'#B24112',
			'#E5845C',
			'#238C23',
			'#7F0000'
		]}
		strokeWidth={6}
	/>
</ClusteredMapView>

If you need the MapView ref, you can get it like this:

<ClusteredMapView
        ...
        ...
        ref={r => (this.map = r)}
        ...
        ...
</ClusteredMapView>

Then...

const mapView = this.map.getMapRef()

Now you can implement the api of mapView constant, like mapView.animateToRegion()

[yarra2296]

Thanks @mgscreativa , I tried implementing the same. But the lines are not getting displayed.

`import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import Map from './scenes/Map'

import Points from './assets/Points.json';
import MapView from 'react-native-maps';

//const mapView = this.map.getMapRef()

export default class App extends React.Component {
render() {
return (
<View
style={{
flex: 1
}}
>
<View
style={{
height: 80,
backgroundColor: "blue",
}}
>
<Text
style={{
alignSelf: 'center',
textAlign: "center",
height: 50,
marginTop: 35,
color: "gold"
}}
>
MAP CLUSTERING(Zoom IN and Zoom OUT to see clustering)


<Map
{
...{
mapPoints: Points
}
}
>
<MapView.Polyline
coordinates={[
{ latitude: 13.061912, longitude: 80.246771 }, //Location 1
{ latitude: 13.052117, longitude: 80.224818}, //Points in Between 1 & 2
{ latitude: 13.058581, longitude: 80.264572 }, //Points in Between 1 & 2
{ latitude: 13.049953, longitude: 80.282403 }, //Location 2
{ latitude: 11.030314, longitude: 77.039208}, //Points in Between 2 & 3
{ latitude: 11.323854, longitude: 76.913025}, //Points in Between
{ latitude: 11.009685, longitude: 76.959226 }, //Location 3 //Points in Between 3 & 4
{ latitude: 16.300432, longitude: 80.443040 }, //Location 4
{ latitude: 16.281695, longitude: 80.455154}, // Points in Between 4 & 5
{ latitude: 16.312504, longitude: 80.423319}, //Points in Between 4 & 5
{ latitude: 16.333253, longitude: 80.438000 }, //Location 5
{ latitude: 16.501175, longitude: 80.643581}, // Location 6
{ latitude: 16.518470, longitude: 80.619523}, //Points Between 6 & 7
{ latitude: 16.518470, longitude: 80.619523}, //Location 7
{ latitude: 15.505723, longitude: 80.049922},
{ latitude: 15.508784, longitude: 80.047407},
{ latitude: 15.507025, longitude: 80.039531}
]}
strokeColor="#000" // fallback for when strokeColors is not supported by the map-provider
strokeColors={[
'#7F0000',
'#00000000', // no color, creates a "long" gradient between the previous and next coordinate
'#B24112',
'#E5845C',
'#238C23',
'#7F0000'
]}
strokeWidth={6}
/>
ref={r => (this.map = r)}

<Text
style={{
alignSelf: 'center',
textAlign: "center",
height: 50,
marginTop: 35,
color: "grey"
}}
>
<Text style={{fontWeight:'bold', fontSize: 15}}>+(ADD LOCATIONS)
<Text style={{fontWeight:'bold', fontSize: 15}}> -(REMOVE LOCATIONS)


);
}
}`,

Is this the thing you said to implement it buddy.

[yarra2296]

Bro @mgscreativa ,

I implemented When I am not using clustering. But With the code of clustering, I am having a problem integrating with that code. Thank you.

[mgscreativa]

Well, it works for me. If you replace this code in the example you can see the poliline near Rome...

<ClusteredMapView
          style={{ flex: 1 }}
          data={this.state.pins}
          ref={r => (this.map = r)}
          textStyle={{ color: '#65bc46' }}
          renderMarker={this.renderMarker}
          renderCluster={this.renderCluster}
          preserveClusterPressBehavior={true}
          edgePadding={{ top: 32, left: 10, right: 64, bottom: 64 }}
          initialRegion={{
            latitude: italyCenterLatitude,
            longitude: italyCenterLongitude,
            latitudeDelta: 12,
            longitudeDelta: 12,
          }}
        >
          <MapView.Polyline
            coordinates={[
              { latitude: 41.8025259, longitude: 12.4351431 },
              { latitude: 41.7896386, longitude: 12.421646 },
              { latitude: 41.7665248, longitude: 12.4161628 },
              { latitude: 41.7734153, longitude: 12.4577787 },
              { latitude: 41.7948605, longitude: 12.4596065 },
              { latitude: 41.8025259, longitude: 12.4351431 },
            ]}
            strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
            strokeColors={[
              '#7F0000',
              '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
              '#B24112',
              '#E5845C',
              '#238C23',
              '#7F0000',
            ]}
            strokeWidth={6}
          />
        </ClusteredMapView>

[yarra2296]

Thanks @davidroman0O , But isn't the polylines are visible when the Map was zoomed out. Like, I am having an extra line problem. Here is the screen-shot how it looks like.

[yarra2296]

Are you not getting the same porblem. Because I am working to rectify it since 1day. The problem is restrained. I am not knowing How to solve this. Please Help me with this bro @davidroman0O .

[mgscreativa]

Hi @yarra2296 I'm really sorry, I got this all wrong, this repo demostrates clustering, but for a better and maintained solution, you should take a look at this repo https://github.com/novalabio/react-native-maps-super-cluster I have created an Expo version of their example https://github.com/mgscreativa/react-native-maps-super-cluster-example/tree/expo In this example, the code I've given works just fine...