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);
return fileString;
} catch (error) {
console.warn(error);
}
return "asidaosid";
}
};
const loadHTMLFile = async () => {
return loadLocalAsset(HTML_FILE_PATH);
@ -60,20 +59,49 @@ function handleEvent(event) {
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) {
var iconSvg = icon;
mapRef.injectJavaScript(`
var customIcon = L.divIcon({
className: 'marker-class',
html: \`${iconSvg}\`,
html: ${buildIcon(icon)},
iconSize: 70
});
// Check if there is no other marker with same ID already in map
if (!(${ID} in markers)) {
// 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
markers[${ID}].addTo(map).on('click', onPopupClick);

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

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

5
src/app/screens/MapFeedScreen.js

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