Browse Source

Custom component for map marker

master
GabrielTrettel 4 years ago
parent
commit
5e951aa5e8
  1. 27
      src/app/components/MapMarker.js
  2. 8
      src/app/hooks/selectFromDB.js
  3. 13
      src/app/screens/MapFeedScreen.js

27
src/app/components/MapMarker.js

@ -0,0 +1,27 @@
import React from "react";
import { View, StyleSheet, Image } from "react-native";
import MapView from "react-native-maps";
const markerSize = 30;
export default function MapMarker({ ID, title, image, coordinate, ...props }) {
console.log(ID);
return (
<MapView.Marker key={ID} coordinate={coordinate} title={title} {...props}>
<View>
<Image style={styles.markerPoint} source={image} resizeMode="stretch" />
</View>
</MapView.Marker>
);
}
const styles = StyleSheet.create({
markerPoint: {
alignSelf: "center",
height: markerSize,
width: markerSize,
},
title: {
fontWeight: "400",
},
});

8
src/app/hooks/selectFromDB.js

@ -29,7 +29,7 @@ var ID = 0;
function partsePluviometer(row) { function partsePluviometer(row) {
displacement += offset; displacement += offset;
return { return {
key: ++ID,
ID: ++ID,
title: "Pluviometro", title: "Pluviometro",
coordinate: { coordinate: {
latitude: row["Latitude"] + displacement, latitude: row["Latitude"] + displacement,
@ -43,7 +43,7 @@ function partsePluviometer(row) {
function parseFloodZones(row) { function parseFloodZones(row) {
displacement += offset; displacement += offset;
return { return {
key: ++ID,
ID: ++ID,
title: row["Passable"] == 0 ? "Transponível" : "Intransponível", title: row["Passable"] == 0 ? "Transponível" : "Intransponível",
coordinate: { coordinate: {
latitude: row["Latitude"], latitude: row["Latitude"],
@ -59,7 +59,7 @@ function parseRiverLevel(row) {
const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"]; const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
const riverIdx = row["RiverIdx"]; const riverIdx = row["RiverIdx"];
return { return {
key: ++ID,
ID: ++ID,
title: "Nível do rio", title: "Nível do rio",
coordinate: { coordinate: {
latitude: row["Latitude"], latitude: row["Latitude"],
@ -82,7 +82,7 @@ function parseRainLevel(row) {
]; ];
const rainIdx = row["RainIdx"]; const rainIdx = row["RainIdx"];
return { return {
key: ++ID,
ID: ++ID,
title: "Nível da chuva", title: "Nível da chuva",
coordinate: { coordinate: {
latitude: row["Latitude"], latitude: row["Latitude"],

13
src/app/screens/MapFeedScreen.js

@ -1,14 +1,19 @@
import React, { useState, useEffect } from "react";
import React from "react";
import { StyleSheet, View } from "react-native"; import { StyleSheet, View } from "react-native";
import MapView, { Marker } from "react-native-maps";
import MapView from "react-native-maps";
import colors from "../config/colors"; import colors from "../config/colors";
import useLocation from "../hooks/useLocation"; import useLocation from "../hooks/useLocation";
import useMarkers from "../hooks/selectFromDB"; import useMarkers from "../hooks/selectFromDB";
import MapMarker from "../components/MapMarker";
function MapFeedScreen(props) { function MapFeedScreen(props) {
const location = useLocation();
const location = useLocation({
latitude: -22.1070263,
longitude: -51.3948396,
});
const markers = useMarkers(); const markers = useMarkers();
console.log(markers.markers); console.log(markers.markers);
@ -31,7 +36,7 @@ function MapFeedScreen(props) {
}} }}
> >
{markers.markers.map((val) => { {markers.markers.map((val) => {
return <MapView.Marker {...val} />;
return <MapMarker {...val} />;
})} })}
</MapView> </MapView>
</View> </View>

Loading…
Cancel
Save