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 {
  setViewCode,
  handleEvent,
  insertMarker,
} from "./LeafLetMap";
import MapModal from "../MapModal";
import html_content from "./Map.js";
import MapDataMenu from "../MapDataMenu";
import {MapMarkerList} from "../MapMarkerList";


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({
  markers,
  clickListener,
  moveEndListener,
  isForm=false
}) {
  const [dataOptionsToShow, setDataOptionsToShow] = useState({
    oficial: {
      automaticPluviometer: false,
      susceptibilityAreas: false,
    },
    citzen: {
      floodRisk: false,
      pluviometer: true,
      rain: false,
      floodZones: true,
      riverFlood: true,
    },
  });


  console.log(dataOptionsToShow)

  const [mapRef, setMapRef] = useState(null);
  const webviewContent = html_content;
  const [markerListener, setMarkerListener] = useState(null);
  const viewFunction = setViewCode(global.location.lat, global.location.long);

  const markersList = MapMarkerList({markers: markers, renderRain: true})

  markersList &&
    mapRef &&
    notEmpy(markersList) &&
    markersList.forEach((val, _) => {
      insertMarker(mapRef, val.ID, val.coordinate, val.image);
    });

  useEffect(() => {
    markersList &&
      mapRef &&
      notEmpy(markersList) &&
      markersList.forEach((val, _) => {
        insertMarker(mapRef, val.ID, val.coordinate, val.image);
      });
  }, [markersList])

  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}
        />
      )}
      {!isForm && (
      <View>
        <MapModal
          showModal={markerListener}
          setShowModal={setMarkerListener}
          markers={markersList}
        />

        <MapDataMenu
          dataOptionsToShow={dataOptionsToShow}
          setDataOptionsToShow={setDataOptionsToShow}/>

      </View>)}
    </View>
  );
}