cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

html marker in OSM (not working)

master
GabrielTrettel 3 years ago
parent
594d797299
commit
6ec71c262d
3 changed files with 35 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      src/app/components/map/LeafLetMap.js
  2. 3
      src/app/components/map/OpenStreetMap.js
  3. 5
      src/app/screens/MapFeedScreen.js

36
src/app/components/map/LeafLetMap.js
View File

@ -9,12 +9,11 @@ const loadLocalAsset = async (asset) => {
const fileString = await FileSystem.readAsStringAsync(localUri); const fileString = await FileSystem.readAsStringAsync(localUri);
return fileString; return fileString;
} catch (error) { } catch (error) {
console.warn(error); console.warn(error);
} }
return "asidaosid"; return "asidaosid";
}
};
const loadHTMLFile = async () => { const loadHTMLFile = async () => {
return loadLocalAsset(HTML_FILE_PATH); return loadLocalAsset(HTML_FILE_PATH);
@ -60,20 +59,49 @@ function handleEvent(event) {
return code_to_function[payload.code](payload); return code_to_function[payload.code](payload);
} }
function buildIcon(icon) {
return `\`
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div style="text-align:center">
<span class="dot"></span>
</div>
</body>
</html>
\``;
}
async function insertMarker(mapRef, ID, coordinate, icon) { async function insertMarker(mapRef, ID, coordinate, icon) {
var iconSvg = icon; var iconSvg = icon;
mapRef.injectJavaScript(` mapRef.injectJavaScript(`
var customIcon = L.divIcon({ var customIcon = L.divIcon({
className: 'marker-class', className: 'marker-class',
html: \`${iconSvg}\`,
html: ${buildIcon(icon)},
iconSize: 70 iconSize: 70
}); });
// Check if there is no other marker with same ID already in map // Check if there is no other marker with same ID already in map
if (!(${ID} in markers)) { if (!(${ID} in markers)) {
// Creates marker object // Creates marker object
markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}});
markers[${ID}] = L.marker([${coordinate.latitude}, ${
coordinate.longitude
}], {icon: customIcon, ID: ${ID}});
// Add marker to map and bing callback event to its function // Add marker to map and bing callback event to its function
markers[${ID}].addTo(map).on('click', onPopupClick); markers[${ID}].addTo(map).on('click', onPopupClick);

3
src/app/components/map/OpenStreetMap.js
View File

@ -39,7 +39,6 @@ export default function OpenStreetMap({
markersList, markersList,
clickListener, clickListener,
moveEndListener, moveEndListener,
focusChanged,
}) { }) {
const [mapRef, setMapRef] = useState(null); const [mapRef, setMapRef] = useState(null);
const webviewContent = html_content; const webviewContent = html_content;
@ -60,7 +59,7 @@ export default function OpenStreetMap({
markersList.forEach((val, key) => { markersList.forEach((val, key) => {
insertMarker(mapRef, val.ID, val.coordinate, val.image); insertMarker(mapRef, val.ID, val.coordinate, val.image);
}); });
}, [markersList, focusChanged])
}, [markersList])
return ( return (
<View flex={1}> <View flex={1}>

5
src/app/screens/MapFeedScreen.js
View File

@ -1,22 +1,18 @@
import React, { useEffect, useContext } from "react"; import React, { useEffect, useContext } from "react";
import { StyleSheet, View } from "react-native"; import { StyleSheet, View } from "react-native";
import OpenStreetMap from "../components/map/OpenStreetMap"; import OpenStreetMap from "../components/map/OpenStreetMap";
import { CurrentLocationContext } from "../context/CurrentLocationContext";
import attachFocusToQuery from "../hooks/useFocus"; import attachFocusToQuery from "../hooks/useFocus";
import { MapMarkerList } from "../components/MapMarkerList"; import { MapMarkerList } from "../components/MapMarkerList";
export default function MapFeedScreen() { export default function MapFeedScreen() {
const focusChanged = attachFocusToQuery(); const focusChanged = attachFocusToQuery();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<OpenStreetMap <OpenStreetMap
markersList={MapMarkerList({ reload: focusChanged, renderRain: true })} markersList={MapMarkerList({ reload: focusChanged, renderRain: true })}
centerUserLocation={true} centerUserLocation={true}
focusChanged={focusChanged}
/> />
</View> </View>
); );
} }
@ -56,4 +52,3 @@ const styles = StyleSheet.create({
color: "white", color: "white",
}, },
}); });
Write Preview
Loading…
Cancel
Save