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