export default function MapScreen() {
return (
<NavigationContainer independent={true}>
<MapStack.Navigator initialRouteName="MapScreenView">
<MapStack.Group screenOptions={{headerShown: false,}}>
<MapStack.Screen name="MapScreenView" component={MapScreenView} />
</MapStack.Group>
</MapStack.Navigator>
</NavigationContainer>
);
};
/*
MapScreenView
Primary ancestor component of the map screen functionality.
In charge of rendering the world map & polygons.
*/
class MapScreenView extends React.Component {
constructor () {
super();
this.mapHasMoved = false;
this.currentRegion = 'Clemson';
this.polysMap = [];
this.polysReady = false;
console.log("nnNew map loaded")
}
updateMapHasMoved = (val) => {
console.log("before: mapHasMoved = " + this.mapHasMoved)
this.mapHasMoved = val;
console.log("after: mapHasMoved = " + this.mapHasMoved);
}
updatePolysReady = (val) => {
this.polysReady = val;
console.log("polysReady = ")
console.log(val);
}
RenderPolygons = async (region = this.currentRegion) => {
var polys = [];
var response = '';
var coords = [];
try {
response = await axios.get(`${baseURL}/ClemsonLots/`);
} catch (error) {
console.log("get error: " + error);
}
console.log("Rendering polygons for region: " + region)
for (var i in response.data) {
coords.push([i, response.data [i]]);
}
//Create array of objects storing parking lot poly information
for (var i = 0; i<coords[0].length; i++) {
polys[i] =
{lotID: coords[i][1].lotID,
numCoords: coords[i][1].numCoords,
lotCoords: []
};
};
//Create variable sized objects of coordinate pairs
//, store them in polys[i].lotCoords
for (var i = 0; i<coords[0].length; i++) {
if (coords[i][1].numCoords == 3) {
/* if else block to assign coordinate values from database */}
}
polys.map((lot, index) => {
this.polysMap[index] = <Polygon
key={lot.lotID}
coordinates={lot.lotCoords}
fillColor="#27f"
strokeColor="#27f"
strokeWidth={2}
zIndex={2}
/>
});
//console.log(this.polysMap[0])
return true;
}
render() {
return (
<View style={StylesList.appBackground}>
<View style={styles.mapScreenContainer}>
<MapView style={styles.map}
region={startingRegion} rotateEnabled={false}
showsBuildings={true}
onMapReady={() => this.updatePolysReady(this.RenderPolygons())}
>
{this.polysMap}
{this.polysReady ? console.log(this.polysReady) : null}
{/* { this.mapHasMoved ? this.RenderPolygons() : null} */}
</MapView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
mapScreenContainer: {
height: '85%',
width: '100%',
marginTop: 20,
borderColor: '#000',
borderWidth: 1,
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
const startingRegion = {
latitude: 34.6738988,
longitude: -82.8422494,
latitudeDelta: 0.005,
longitudeDelta: 0.001,
};
I’m making an app in React Native and I am trying to get it so that my map will render polygons based on coordinates in my database.
The problem I think lies in the RenderPolygons() function, but I’m new so Im not sure. The map itself loads when I run my code, but no polygons are loaded. I have tried logging the results to the console, and I can see and have tested by copying and pasting the values that the polysMap array correctly stores polygon blocks.
i.e. <MapPolygon coordinates={[{“latitude”: 34.6748, “longitude”: -82.8442}, {“latitude”: 34.6752, “longitude”: -82.8439}, {“latitude”: 34.6746, “longitude”: -82.8414}, {“latitude”: 34.6732, “longitude”: -82.8423}, {“latitude”: 34.674, “longitude”: -82.8434}]} fillColor=”#27f” strokeColor=”#27f” strokeWidth={2} zIndex={2} />
The above block is stored in polyMaps[0], and directly putting that in the render() function works. But calling {this.polyMaps} does not. When I tried running {console.log(this.polyMaps)} in the MapView, it just returns ‘[]’.
As a new attempt, I tried putting RenderPolygons() in another function and have it return true to update this.polysReady, but the console value of this.polysReady is “{“_h”: 0, “_i”: 0, “_j”: null, “_k”: null}”.
Apologies, I know there is a lot going on here but I am really stuck and any help is appreciated.
