Browse Source

Attempt to solve the problem of markers not being updated on the map as data is entered.

master
GabrielTrettel 3 years ago
parent
commit
69b35a45e5
  1. 6
      src/app/components/map/LeafLetMap.js
  2. 21
      src/app/components/map/OpenStreetMap.js

6
src/app/components/map/LeafLetMap.js

@ -25,6 +25,10 @@ function goToRegion(mapRef, position) {
setCustomView(${position.lat}, ${position.long}, 16.5);`); setCustomView(${position.lat}, ${position.long}, 16.5);`);
} }
function setViewCode(lat, long, zoom = 16.5) {
return `setCustomView(${lat}, ${long}, ${zoom});`;
}
const code_to_function = { const code_to_function = {
"1": clickCallback, "1": clickCallback,
"2": markerCallback, "2": markerCallback,
@ -80,4 +84,4 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
}`); }`);
} }
export { loadHTMLFile, handleEvent, insertMarker, goToRegion };
export { loadHTMLFile, handleEvent, insertMarker, goToRegion, setViewCode };

21
src/app/components/map/OpenStreetMap.js

@ -2,13 +2,11 @@ import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text } from "react-native"; import { View, StyleSheet, Text } from "react-native";
import WebView from "react-native-webview"; import WebView from "react-native-webview";
import { import {
loadHTMLFile,
setViewCode,
handleEvent, handleEvent,
insertMarker, insertMarker,
goToRegion,
} from "./LeafLetMap"; } from "./LeafLetMap";
import MapModal from "../MapModal"; import MapModal from "../MapModal";
import { useLocation, getLocation } from "../../hooks/useLocation";
import html_content from "./Map.js"; import html_content from "./Map.js";
@ -43,14 +41,10 @@ export default function OpenStreetMap({
moveEndListener, moveEndListener,
}) { }) {
const [mapRef, setMapRef] = useState(null); const [mapRef, setMapRef] = useState(null);
// const [webviewContent, setWebviewContent] = useState(null);
const webviewContent = html_content; const webviewContent = html_content;
const [markerListener, setMarkerListener] = useState(null); const [markerListener, setMarkerListener] = useState(null);
const viewFunction = setViewCode(global.location.lat, global.location.long);
const viewFunction = `\
setCustomView(${global.location.lat}, ${global.location.long}, 16.5);`;
console.log(global.location);
markersList && markersList &&
mapRef && mapRef &&
notEmpy(markersList) && notEmpy(markersList) &&
@ -58,9 +52,14 @@ export default function OpenStreetMap({
insertMarker(mapRef, val.ID, val.coordinate, val.image); insertMarker(mapRef, val.ID, val.coordinate, val.image);
}); });
// loadHTMLFile()
// .then((html) => setWebviewContent(html))
// .catch((e) => console.warn(e));
useEffect(() => {
markersList &&
mapRef &&
notEmpy(markersList) &&
markersList.forEach((val, key) => {
insertMarker(mapRef, val.ID, val.coordinate, val.image);
});
}, [markersList])
return ( return (
<View flex={1}> <View flex={1}>

Loading…
Cancel
Save