WPD-MobileApp/src/app/components/map/OpenStreetMap.js

import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text } from "react-native";
import WebView from "react-native-webview";
import {
  loadHTMLFile,
  handleEvent,
  insertMarker,
  goToRegion,
} from "./LeafLetMap";
import MapModal from "../MapModal";
import { useLocation, getLocation } from "../../hooks/useLocation";

function bindEventsToListeners(
  event,
  clickListener,
  setMarkerListener,
  moveEndListener
) {
  switch (event.object) {
    case "click":
      clickListener && clickListener(event.cords);
      break;
    case "marker":
      setMarkerListener(event.id);
      break;
    case "moveend":
      moveEndListener && moveEndListener(event.id);
      break;
    default:
      break;
  }
}

function notEmpy(lista) {
  return lista && lista.size > 0;
}

export default function OpenStreetMap({
  markersList,
  clickListener,
  moveEndListener,
}) {
  const [mapRef, setMapRef] = useState(null);
  const [webviewContent, setWebviewContent] = useState(null);
  const [markerListener, setMarkerListener] = useState(null);

  const viewFunction = `\
    setCustomView(${global.location.lat}, ${global.location.long}, 16.5);`;

  console.log(global.location);
  markersList &&
    mapRef &&
    notEmpy(markersList) &&
    markersList.forEach((val, key) => {
      insertMarker(mapRef, val.ID, val.coordinate, val.image);
    });

  loadHTMLFile()
    .then((html) => setWebviewContent(html))
    .catch((e) => console.warn(e));

  return (
    <View flex={1}>
      {webviewContent && (
        <WebView
          ref={(webViewRef) => {
            setMapRef(webViewRef);
          }}
          onMessage={(event) => {
            bindEventsToListeners(
              handleEvent(event),
              clickListener,
              setMarkerListener,
              moveEndListener
            );
          }}
          javaScriptEnabled={true}
          source={{ html: webviewContent }}
          injectedJavaScript={viewFunction}
        />
      )}
      <View>
        <MapModal
          markerToRender={markerListener}
          setMarkerToRender={setMarkerListener}
          markers={markersList}
        />
      </View>
    </View>
  );
}