forked from cemaden-educacao/WPD-MobileApp
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.
96 lines
2.1 KiB
96 lines
2.1 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 deleteAllMarkers(mapRef) {
|
|
mapRef.injectJavaScript(`
|
|
for (const [key, value] of Object.entries(markers)) {
|
|
map.removeLayer(value);
|
|
}
|
|
markers = {};
|
|
`);
|
|
}
|
|
|
|
async function insertMarker(mapRef, ID, coordinate, 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 bind callback event to its function
|
|
markers[${ID}].addTo(map).on('click', onPopupClick);
|
|
}`);
|
|
}
|
|
|
|
export {
|
|
loadHTMLFile,
|
|
handleEvent,
|
|
insertMarker,
|
|
goToRegion,
|
|
setViewCode,
|
|
deleteAllMarkers,
|
|
};
|