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}>