Browse Source

Loading svg image as asset to use in marker. Not working yet: marker does not appear on the map.

master
GabrielTrettel 3 years ago
parent
commit
59a5f86593
  1. 32
      src/app/components/map/LeafLetMap.js
  2. 1
      src/app/components/map/icon.html
  3. 39
      src/app/screens/MapFeedScreen.js

32
src/app/components/map/LeafLetMap.js

@ -3,16 +3,22 @@ import * as FileSystem from "expo-file-system";
const HTML_FILE_PATH = require(`./Map.html`); const HTML_FILE_PATH = require(`./Map.html`);
const loadHTMLFile = async () => {
const loadLocalAsset = async (asset) => {
try { try {
const [{ localUri }] = await Asset.loadAsync(HTML_FILE_PATH);
const [{ localUri }] = await Asset.loadAsync(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);
console.warn("Unable to resolve index file");
// console.warn("Unable to resolve index file");
} }
return "asidaosid";
}
const loadHTMLFile = async () => {
return loadLocalAsset(HTML_FILE_PATH);
}; };
function goToRegion(mapRef, { lat, long, zoom }) { function goToRegion(mapRef, { lat, long, zoom }) {
@ -43,14 +49,19 @@ function handleEvent(event) {
return code_to_function[payload.code](payload); return code_to_function[payload.code](payload);
} }
function insertMarker(mapRef, ID, cords, icon) {
console.log(ID);
mapRef.injectJavaScript(
`
async function insertMarker(mapRef, ID, cords, icon) {
var iconSvg = icon;
if (typeof icon !== 'string' && !(icon instanceof String)) {
iconSvg = await loadLocalAsset(icon);
}
console.log(String(iconSvg));
mapRef.injectJavaScript(`
var customIcon = L.divIcon({ var customIcon = L.divIcon({
className: 'marker-class', className: 'marker-class',
html: '` + icon + `',
iconSize: 10
html: ${iconSvg} ,
iconSize: 100
}); });
// 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
@ -61,8 +72,7 @@ function insertMarker(mapRef, ID, cords, icon) {
// 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);
} }
`
);
`);
} }
export { loadHTMLFile, handleEvent, insertMarker, goToRegion }; export { loadHTMLFile, handleEvent, insertMarker, goToRegion };

1
src/app/components/map/icon.html

@ -0,0 +1 @@
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>

39
src/app/screens/MapFeedScreen.js

@ -1,6 +1,7 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native"; import { Button, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import OpenStreetMap from "../components/map/OpenStreetMap"; import OpenStreetMap from "../components/map/OpenStreetMap";
import assets from "../config/assets"
export default function MapFeedScreen() { export default function MapFeedScreen() {
const [position, setPosition] = useState(null); const [position, setPosition] = useState(null);
@ -17,26 +18,26 @@ export default function MapFeedScreen() {
lat: 51.505, lat: 51.505,
long: -0.09, long: -0.09,
}, },
icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
},
{
ID: "2",
title: "Casa do Daniel",
icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
cords: {
lat: 51.5032,
long: -0.09589,
},
},
{
ID: "3",
title: "Casa do Gabriel",
icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
cords: {
lat: 51.509,
long: -0.09581,
},
icon: require("../components/map/icon.html"),
}, },
// {
// ID: "2",
// title: "Casa do Daniel",
// icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
// cords: {
// lat: 51.5032,
// long: -0.09589,
// },
// },
// {
// ID: "3",
// title: "Casa do Gabriel",
// icon: `<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>`,
// cords: {
// lat: 51.509,
// long: -0.09581,
// },
// },
]; ];
return ( return (
<View style={styles.container}> <View style={styles.container}>

Loading…
Cancel
Save