You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.3 KiB
111 lines
2.3 KiB
import { Asset } from "expo-asset";
|
|
import * as FileSystem from "expo-file-system";
|
|
|
|
const HTML_FILE_PATH = require(`./Map.html`);
|
|
|
|
const loadLocalAsset = async (asset) => {
|
|
try {
|
|
const [{ localUri }] = await Asset.loadAsync(asset);
|
|
const fileString = await FileSystem.readAsStringAsync(localUri);
|
|
|
|
return fileString;
|
|
} catch (error) {
|
|
console.warn(error);
|
|
}
|
|
return "asidaosid";
|
|
};
|
|
|
|
const loadHTMLFile = async () => {
|
|
return loadLocalAsset(HTML_FILE_PATH);
|
|
};
|
|
|
|
function goToRegion(mapRef, position) {
|
|
mapRef.injectJavaScript(`
|
|
setCustomView(${position.lat}, ${position.long}, 16.5);`);
|
|
}
|
|
|
|
function setViewCode(lat, long, zoom = 16.5) {
|
|
return `setCustomView(${lat}, ${long}, ${zoom});`;
|
|
}
|
|
|
|
const code_to_function = {
|
|
"1": clickCallback,
|
|
"2": markerCallback,
|
|
"3": moveEndCallback,
|
|
};
|
|
|
|
function clickCallback(payload) {
|
|
return {
|
|
object: "click",
|
|
cords: payload.content,
|
|
};
|
|
}
|
|
|
|
function markerCallback(payload) {
|
|
return {
|
|
object: "marker",
|
|
id: payload.content,
|
|
};
|
|
}
|
|
|
|
function moveEndCallback(payload) {
|
|
return {
|
|
object: "moveend",
|
|
id: payload.content,
|
|
};
|
|
}
|
|
function handleEvent(event) {
|
|
const payload = JSON.parse(event.nativeEvent.data);
|
|
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: \`<body>${icon}</body>\`,
|
|
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}});
|
|
|
|
// Add marker to map and bing callback event to its function
|
|
markers[${ID}].addTo(map).on('click', onPopupClick);
|
|
}`);
|
|
}
|
|
|
|
export { loadHTMLFile, handleEvent, insertMarker, goToRegion, setViewCode };
|