Setting html from string

3 years ago · 6b7e7b5271
2 changed files with 121 additions and 4 deletions
--- a/src/app/components/map/Map.js
+++ b/src/app/components/map/Map.js
@ -0,0 +1,114 @@
 export default html_content = `
 <!DOCTYPE html>
 <html>
  <head>
    <title>Mobile tutorial - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link -->
    <!--   rel="shortcut icon" -->
    <!--   type="image/x-icon" -->
    <!--   href="docs/images/favicon.ico" -->
    <!-- /> -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      #map {
        height: 100%;
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map("map").setView([-15.804627, -51.810855], 3.4);
      var markers = {};
      function setCustomView(lat, long, zoom) {
        map.setView([lat, long], zoom);
      }
      L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2FicmllbC10cmV0dGVsIiwiYSI6ImNrb2RjNWIzYjAwczIyd25yNnUweDNveTkifQ.xRASmGTYm0ieS-FjVrXSjA",
        {
          maxZoom: 18,
          attribution:
            'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          id: "mapbox/streets-v11",
          tileSize: 512,
          zoomOffset: -1,
        }
      ).addTo(map);
      var moveend = true;
      function onMapClick(e) {
        var payload = {
          code: 1,
          content: {
            latitude: e.latlng.lat.toString().slice(0, 8),
            longitude: e.latlng.lng.toString().slice(0, 8),
          },
        };
        window.ReactNativeWebView.postMessage(JSON.stringify(payload));
      }
      function onPopupClick(e) {
        var payload = {
          code: 2,
          content: this.options.ID,
        };
        window.ReactNativeWebView.postMessage(JSON.stringify(payload));
      }
      //var marker = L.marker([0, 0]).bindPopup("Your pickup spot is in this area").addTo(map);
      function onMoveEnd(e) {
        //marker.setLatLng(map.getCenter());
        var payload = {
          code: 3,
          content: {
            latitude: map.getCenter().lat,
            longitude: map.getCenter().lng,
          },
        };
        // map.setView([e.latlng.lat, e.latlng.lng]);
        window.ReactNativeWebView.postMessage(JSON.stringify(payload));
      }
      map.on("moveend", onMoveEnd);
      map.on("click", onMapClick);
    </script>
  </body>
 </html>
 `;
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@ -9,6 +9,8 @@ import {
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
 import { useLocation, getLocation } from "../../hooks/useLocation";
 import html_content from "./Map.js";
 function bindEventsToListeners(
  event,
@ -41,7 +43,8 @@ export default function OpenStreetMap({
  moveEndListener,
 }) {
  const [mapRef, setMapRef] = useState(null);
  const [webviewContent, setWebviewContent] = useState(null);
  // const [webviewContent, setWebviewContent] = useState(null);
  const webviewContent = html_content;
  const [markerListener, setMarkerListener] = useState(null);
  const viewFunction = `\
@ -55,9 +58,9 @@ export default function OpenStreetMap({
      insertMarker(mapRef, val.ID, val.coordinate, val.image);
    });
  loadHTMLFile()
    .then((html) => setWebviewContent(html))
    .catch((e) => console.warn(e));
  // loadHTMLFile()
  //   .then((html) => setWebviewContent(html))
  //   .catch((e) => console.warn(e));
  return (
    <View flex={1}>