Browse Source

html marker in OSM (not working)

master
GabrielTrettel 3 years ago
parent
commit
6ec71c262d
  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

@ -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

@ -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

@ -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",
}, },
}); });
Loading…
Cancel
Save