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) </Text> </View> <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)} </Map> <Text style={{ alignSelf: 'center', textAlign: "center", height: 50, marginTop: 35, color: "grey" }} > <Text style={{fontWeight:'bold', fontSize: 15}}>+(ADD LOCATIONS)</Text> <Text style={{fontWeight:'bold', fontSize: 15}}> -(REMOVE LOCATIONS)</Text> </Text> </View> ); } }`,

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...