forked from cemaden-educacao/WPD-MobileApp
Browse Source
Organizing communication responsibility layers between React and the leaflet webview
master
Organizing communication responsibility layers between React and the leaflet webview
master
GabrielTrettel
4 years ago
4 changed files with 95 additions and 55 deletions
-
55src/app/components/map/LeafLetMap.js
-
2src/app/components/map/Map.html
-
84src/app/components/map/OpenStreetMap.js
-
9src/app/screens/MapFeedScreen.js
@ -0,0 +1,55 @@ |
|||||
|
import { Asset } from "expo-asset"; |
||||
|
import * as FileSystem from "expo-file-system"; |
||||
|
|
||||
|
const HTML_FILE_PATH = require(`./Map.html`); |
||||
|
|
||||
|
const loadHTMLFile = async () => { |
||||
|
try { |
||||
|
const [{ localUri }] = await Asset.loadAsync(HTML_FILE_PATH); |
||||
|
const fileString = await FileSystem.readAsStringAsync(localUri); |
||||
|
|
||||
|
return fileString; |
||||
|
} catch (error) { |
||||
|
console.warn(error); |
||||
|
console.warn("Unable to resolve index file"); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
function goToPosition(mapRef, lat, long) { |
||||
|
mapRef.injectJavaScript(`map.setView([${lat}, ${long}], 13);`); |
||||
|
} |
||||
|
|
||||
|
const code_to_function = { |
||||
|
"1": clickCallback, |
||||
|
"2": markerCallback, |
||||
|
}; |
||||
|
|
||||
|
function clickCallback(payload) { |
||||
|
return { |
||||
|
object: "click", |
||||
|
cords: payload.content, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
function markerCallback(payload) { |
||||
|
return { |
||||
|
object: "marker", |
||||
|
id: payload.content, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
function parseInput(event) { |
||||
|
const payload = JSON.parse(event.nativeEvent.data); |
||||
|
return code_to_function[payload.code](payload); |
||||
|
} |
||||
|
|
||||
|
function insertMarker(mapRef, props) { |
||||
|
mapRef.injectJavaScript(`
|
||||
|
if (!(${props.ID} in markers)) { |
||||
|
markers[${props.ID}] = L.marker([${props.cords.lat}, ${props.cords.long}], |
||||
|
{ID: ${props.ID}}); |
||||
|
markers[${props.ID}].addTo(map).on('click', onPopupClick); |
||||
|
} |
||||
|
`);
|
||||
|
} |
||||
|
export { loadHTMLFile, parseInput, insertMarker, goToPosition }; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue