Browse Source

adding another flood polygon for testing

master
analuizaff 4 years ago
parent
commit
a05f4c849e
  1. 70
      src/app/components/MapPolygons.js
  2. 28
      src/app/screens/MapFeedScreen.js

70
src/app/components/MapPolygons.js

@ -1,15 +1,67 @@
import React from "react";
import React, { useContext } from "react";
import { View } from "react-native";
import { Polygon } from "react-native-maps"; import { Polygon } from "react-native-maps";
import { CurrentLocationContext } from "../context/CurrentLocationContext";
export default function MapPolygons({ coordinates }) {
export default function MapPolygons() {
const context = useContext(CurrentLocationContext);
const location = context.currentCoordinates;
//Coordenadas dos poligonos das áreas de inundação (substituir por valores da API)
const coordinates1 = [
{
latitude: location["latitude"] - 0.001,
longitude: location["longitude"] + 0.00002
},
{
latitude: (location.latitude) - 0.0002,
longitude: (location.longitude) + 0.0001
},
{
latitude: (location.latitude) + 0.001,
longitude: (location.longitude) - 0.00002
},
{
latitude: (location.latitude) + 0.0002,
longitude: (location.longitude) - 0.001
}
];
const coordinates2 = [
{
latitude: location["latitude"] + 0.0010,
longitude: location["longitude"] - 0.0007
},
{
latitude: (location.latitude) + 0.0006,
longitude: (location.longitude) - 0.0006
},
{
latitude: (location.latitude) + 0.17,
longitude: (location.longitude) - 0.00225
},
{
latitude: (location.latitude) + 0.001,
longitude: (location.longitude) - 0.00212
}
]
return ( return (
<Polygon
coordinates={coordinates}
// hole={hole}
strokeColor="rgba(25, 118, 210,0.2)"
fillColor="rgba(25, 118, 210,0.5)"
strokeWidth={5}
/>
<View>
<Polygon
coordinates={coordinates1}
// hole={hole}
strokeColor="rgba(25, 118, 210,0.2)"
fillColor="rgba(25, 118, 210,0.5)"
strokeWidth={5}
/>
<Polygon
coordinates={coordinates2}
// hole={hole}
strokeColor="rgba(25, 118, 210,0.2)"
fillColor="rgba(25, 118, 210,0.5)"
strokeWidth={5}
/>
</View>
); );
} }

28
src/app/screens/MapFeedScreen.js

@ -16,6 +16,8 @@ function MapFeedScreen(props) {
const datas = useContext(MapDataContext); const datas = useContext(MapDataContext);
const location = context.currentCoordinates; const location = context.currentCoordinates;
const focusChanged = attachFocusToQuery(); const focusChanged = attachFocusToQuery();
console.log("-----------latitude: "+ location.latitude);
console.log("-----------longitude: "+ location.longitude);
const default_location = { const default_location = {
latitude: -12.901799, latitude: -12.901799,
@ -30,27 +32,6 @@ function MapFeedScreen(props) {
longitudeDelta: map_scale * (screen_width / screen_height), longitudeDelta: map_scale * (screen_width / screen_height),
}; };
//Coordenadas dos poligonos das áreas de inundação (substituir por valores da API em MapPolygons)
const polyCoordinates = [
{
latitude: location["latitude"] - 0.001,
longitude: location["longitude"] + 0.00002
},
{
latitude: (location.latitude) - 0.0002,
longitude: (location.longitude) + 0.0001
},
{
latitude: (location.latitude) + 0.001,
longitude: (location.longitude) - 0.00002
},
{
latitude: (location.latitude) + 0.0002,
longitude: (location.longitude) - 0.001
}
]
return ( return (
<View style={styles.container}> <View style={styles.container}>
<MapView <MapView
@ -70,9 +51,8 @@ function MapFeedScreen(props) {
renderPluviometer={datas.pluviometer} renderPluviometer={datas.pluviometer}
renderRiver={datas.river} /> renderRiver={datas.river} />
{datas.floodAreas && (
<MapPolygons
coordinates={polyCoordinates} />
{datas.floodAreas &&(
<MapPolygons/>
)} )}
</MapView> </MapView>
<FloatButton /> <FloatButton />

Loading…
Cancel
Save