Browse Source

Increasing map zoom and setting a marker to user location.

master
GabrielTrettel 4 years ago
parent
commit
9759342868
  1. 3
      src/app/config/dimensions.js
  2. 15
      src/app/hooks/selectFromDB.js
  3. 7
      src/app/hooks/useLocation.js
  4. 20
      src/app/screens/MapFeedScreen.js

3
src/app/config/dimensions.js

@ -1,6 +1,7 @@
import { Dimensions } from "react-native";
const screen_width = Dimensions.get("window").width;
const screen_height = Dimensions.get("window").height;
const dimensions = {
text: {
@ -30,4 +31,4 @@ function scaleDimsFromWidth(iw, ih, scale_w) {
return { width: sw, height: sh };
}
export { screen_width, scaleDimsFromWidth, dimensions };
export { screen_width, screen_height, scaleDimsFromWidth, dimensions };

15
src/app/hooks/selectFromDB.js

@ -5,7 +5,7 @@ import assets from "../config/assets";
const custom_assets = {
pluviometer: assets.pluviometer,
floodZones: assets.floodZones.floodIcon,
floodZones: assets.floodZones,
riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
return assets.riverLevel[key];
}),
@ -23,7 +23,7 @@ const custom_assets = {
// NOTE: For debug pourposes, every icon will be placed some `offset` from
// another. In final release, offset must be assigned to 0.0
var offset = 0.001;
var offset = 0.0001;
var displacement = 0;
var ID = 0;
@ -50,7 +50,7 @@ function partsePluviometer(row) {
}
displacement += offset;
return {
const i = {
ID: ++ID,
title: "Pluviometro",
coordinate: {
@ -60,6 +60,8 @@ function partsePluviometer(row) {
image: custom_assets.pluviometer,
description: row["Pluviometer"],
};
console.log(i);
return i;
}
function parseFloodZones(row) {
@ -75,7 +77,10 @@ function parseFloodZones(row) {
latitude: row["Latitude"],
longitude: row["Longitude"] + displacement,
},
image: custom_assets.floodIcon,
image:
row["Passable"] == 0
? custom_assets.floodZones.passable
: custom_assets.floodZones.notPassable,
description: row["Description"],
};
}
@ -86,7 +91,7 @@ function parseRiverLevel(row) {
}
displacement += offset;
const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
const riverLevel = ["Baixo", "Rio normal", "Alto", "Transbordando"];
const riverIdx = row["RiverIdx"];
return {
ID: ++ID,

7
src/app/hooks/useLocation.js

@ -1,7 +1,9 @@
import { useEffect, useState } from "react";
import * as Location from "expo-location";
export default function useLocation(defaultLocation = { longitude: 0.0, latitude: 0.0 }) {
export default function useLocation(
defaultLocation = { longitude: 0.0, latitude: 0.0 }
) {
const [location, setLocation] = useState(defaultLocation);
const getLocation = async () => {
@ -15,8 +17,7 @@ export default function useLocation(defaultLocation = { longitude: 0.0, latitude
} = await Location.getLastKnownPositionAsync();
setLocation({ latitude, longitude });
}
catch (error) {
} catch (error) {
console.log(error);
}
};

20
src/app/screens/MapFeedScreen.js

@ -3,6 +3,7 @@ import { StyleSheet, View } from "react-native";
import MapView from "react-native-maps";
import colors from "../config/colors";
import { screen_width, screen_height } from "../config/dimensions";
import useLocation from "../hooks/useLocation";
import useMarkers from "../hooks/selectFromDB";
@ -18,6 +19,13 @@ function MapFeedScreen(props) {
const hasToQuery = attachFocusToQuery();
const markers = useMarkers(hasToQuery);
// console.log(markers);
const map_scale = 0.005;
const lat_long_delta = {
latitudeDelta: map_scale,
longitudeDelta: map_scale * (screen_width / screen_height),
};
return (
<View style={styles.container}>
<MapView
@ -25,19 +33,23 @@ function MapFeedScreen(props) {
initialRegion={{
latitude: -22.1070263,
longitude: -51.3948396,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
...lat_long_delta,
}}
region={{
latitude: location["latitude"],
longitude: location["longitude"],
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
...lat_long_delta,
}}
>
{[...markers.markers].map(({ ID, ...val }) => {
return <MapMarker key={ID.toString()} {...val} />;
})}
<MapView.Marker
coordinate={{
latitude: location["latitude"],
longitude: location["longitude"],
}}
/>
</MapView>
</View>
);

Loading…
Cancel
Save