How to add title to Polygon using react-native-maps - react-native

Question

I'm trying to draw specific polygons in MapView, but I'm not sure how to add title to Polygon.
I tried to search official documentation, but only Marker has title property, so I'm not sure if it's supported.
Marker can be used something like this
<Marker
coordinate={latittude: x, longitude: y}
title="I am Marker"
/>
so is it possible to add title property to Polygon like this:
<Polygon
coordinates=[{latittude: x, longitude: y},...]
title="I am Polygon"
/>
???Expecting something like this...

Answer 1

I don't think you have any other option but you can use marker which works pretty nice.
<MapView.Marker key={`${key}Marker`} coordinate={center} anchor={centerAnchor} tracksViewChanges={false}>
<Text key={`${key}Text`} style={styles.clusterText}>
{data.properties.n}
</Text>
</MapView.Marker>
don't forget the tracksViewChanges={false} or the map will go crazy for many markers and put a huge load on the cpu

Answer 2

I also encountered the same problem, I know this is late but here's what I did. I also didn't know if react native maps have that method right now. So for alternative, I used Marker as title. And used this function from github to get the center of polygon.
center_polygon(coordinates) {
let x = coordinates.map(c => c.latitude);
let y = coordinates.map(c => c.longitude);
let minX = Math.min.apply(null, x);
let maxX = Math.max.apply(null, x);
let minY = Math.min.apply(null, y);
let maxY = Math.max.apply(null, y);
return {
latitude: (minX + maxX) / 2,
longitude: (minY + maxY) / 2
};
}
Polygon
return (
<View>
<Marker
coordinate={polygon_center}
>
<Text note style={{color:"#000", fontSize: 9}}>
{name}
</Text>
</Marker>
<Polygon
key={index}
coordinates={fixed_coordinates}
fillColor={this.hexToRgbA(color, 0.4)}
strokeColor={color}
strokeWidth={3}
>
</Polygon>
</View>
);

Answer 3

Proper complete solution for adding any component over polygon in center.
import {
View,
Text,
Button,
StyleSheet,
TouchableOpacity,
InteractionManager,
} from 'react-native';
import React, {useEffect, useRef, useState} from 'react';
import MapView, {Marker, Polygon} from 'react-native-maps';
import {useNavigation} from '#react-navigation/native';
import {COLOR_PLOT_BORDER} from '../../utils/colors';
let polygonsCoordinates = [
[
{latitude: 42.9348443, longitude: -72.287181},
{latitude: 42.9345929, longitude: -72.2832328},
{latitude: 42.9335415, longitude: -72.2834162},
{latitude: 42.9335572, longitude: -72.2852186},
{latitude: 42.9336671, longitude: -72.2869996},
{latitude: 42.934704, longitude: -72.2871498},
],
[
{latitude: 42.9345437, longitude: -72.2811199},
{latitude: 42.9347204, longitude: -72.2795911},
{latitude: 42.9343119, longitude: -72.2792585},
{latitude: 42.9341077, longitude: -72.2810394},
{latitude: 42.9345358, longitude: -72.2811146},
],
[
{latitude: 42.9329962, longitude: -72.2825093},
{latitude: 42.9333065, longitude: -72.2804494},
{latitude: 42.9322775, longitude: -72.2801382},
{latitude: 42.931979, longitude: -72.2824235},
{latitude: 42.9329726, longitude: -72.2824932},
],
];
export default function MapPlots() {
const mapRef = useRef(null);
const [region, setRegion] = useState({});
const [polygonCenters, setPolygonCenters] = useState([]);
useEffect(() => {
InteractionManager.runAfterInteractions(() => {
goToLocation();
getCenterOfAllPolygon();
});
}, []);
const getCenterOfAllPolygon = () => {
let centers = [];
polygonsCoordinates.map((v, i) => {
let c = getCenterPolygon(v);
centers.push(c);
});
setPolygonCenters(centers);
console.log('centers', centers);
};
const keeneRegion = {
latitude: 42.9329962,
longitude: -72.2825093,
latitudeDelta: 0.02,
longitudeDelta: 0.02,
};
const goToLocation = () => {
//complete this animation in 5 seconds
mapRef.current.animateToRegion(keeneRegion, 1 * 1000);
};
let getCenterPolygon = coordinates => {
let x = coordinates.map(c => c.latitude);
let y = coordinates.map(c => c.longitude);
let minX = Math.min.apply(null, x);
let maxX = Math.max.apply(null, x);
let minY = Math.min.apply(null, y);
let maxY = Math.max.apply(null, y);
console.log('adsasdad', minX, maxX, minY, maxY);
return {
latitude: (minX + maxX) / 2,
longitude: (minY + maxY) / 2,
};
};
const onPressPolygon = coordinates => {
let newCoordinates = getCenterPolygon(coordinates);
const goToRegion = {
...newCoordinates,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
};
mapRef.current.animateToRegion(goToRegion, 1 * 1000);
};
return (
<View style={styles.container}>
<MapView
provider={MapView.PROVIDER_GOOGLE}
ref={mapRef}
style={styles.map}
initialRegion={{
latitude: 0, // This the position data
longitude: 0, // This is also position data
latitudeDelta: 200,
longitudeDelta: 1,
}}
loadingEnabled={true}
onRegionChangeComplete={r => setRegion(r)}>
{polygonsCoordinates.map((polygon, i) => (
<View key={i}>
<Polygon
coordinates={polygon}
strokeColor={COLOR_PLOT_BORDER} // fallback for when `strokeColors` is not supported by the map-provider
fillColor={i === 0 ? 'blue' : i === 2 ? 'green' : 'yellow'}
strokeWidth={0.3}
tappable
geodesic
onPress={() => onPressPolygon(polygon)}
/>
<Marker
anchor={{x: 0.5, y: 0.5}}
centerOffset={{x: 0.5, y: 0.5}}
zIndex={10}
coordinate={polygonCenters[i]}>
<Text note style={{color: '#000', fontSize: 15}}>
1001
</Text>
</Marker>
</View>
))}
</MapView>
<Button onPress={() => goToLocation()} title="Go to Current Location" />
<Text style={styles.text}>Current latitude{region.latitude}</Text>
<Text style={styles.text}>Current longitude{region.longitude}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
text: {
fontSize: 20,
backgroundColor: 'lightblue',
},
});