feat: can display map with leaflet, (new code)

.env

@@ -1 +1,2 @@
 REACT_APP_API=https://dev-k8s.treetracker.org/webmap/
+REACT_APP_TILE_SERVER_URL=https://dev-k8s.treetracker.org/tiles/

package.json

@@ -1,16 +1,7 @@
 {
   "name": "client",
-  "version": "1.0.0",
+  "version": "0.1.1",
   "private": true,
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Greenstand/treetracker-web-map-client.git"
-  },
-  "author": "",
-  "license": "GNU",
-  "bugs": {
-    "url": "https://github.com/Greenstand/treetracker-web-map-client/issues"
-  },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
@@ -19,6 +10,8 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "expect-runtime": "^0.4.0",
+    "leaflet": "^1.7.1",
+    "leaflet-utfgrid": "^0.3.0",
     "loglevel": "^1.7.0",
     "moment": "^2.29.1",
     "react": "^16.13.1",

src/MapModel.js

@@ -4,6 +4,7 @@
 import expect from "expect-runtime";
 import axios from "axios";
 import log from "loglevel";
+import "leaflet";
 
 class MapModel {
   constructor(options){
@@ -39,11 +40,66 @@ class MapModel {
    */
   async checkArrow(){
     log.log("check arrow");
+    const mymap = this._map;
+    var utfGridLayer = Object.values(mymap._layers).reduce((a,c) => c._url && c._url.match(/grid.json$/)?c:a,undefined);
+    const {x,y} = mymap.getSize();
+
+    let found = false;
+
+    //check zoom level
+    log.warn("zoom level:", mymap.getZoom());
+    expect(utfGridLayer).property("options").property("minZoom").defined();
+    if(
+      mymap.getZoom() > utfGridLayer.options.maxZoom ||
+      mymap.getZoom() < utfGridLayer.options.minZoom
+    ){
+      log.warn("out of utf layer range, use old way");
+      if(
+        //no markers
+        this._markers.length === 0 || 
+        //all markers out of bounds
+        this._markers.every(marker => !this._map.getBounds().contains(marker.getLatLng()))
+      ){
+        found = false;
+      }else{
+        found = true;
+      }
+    }else{
+      log.warn("utf calculating");
+
+      //waiting layer is ready
+      let isLoading = utfGridLayer.isLoading();
+      log.warn("utf layer is loading:", isLoading);
+      if(isLoading){
+        log.error("can not handle the grid utif check, cancel!")
+        return;
+      }
+
+      const begin = Date.now();
+      let count = 0;
+      let countNoChar = 0;
+      me: for(let y1 = 0; y1 < y; y1 += 10){
+        for(let x1 = 0; x1 < x; x1 +=10){
+          count++;
+          const tileChar = utfGridLayer._objectForEvent({latlng:mymap.containerPointToLatLng([x1,y1])})._tileCharCode;
+          if(!tileChar){
+            countNoChar++;
+            //log.warn("can not fond char on!:", x1, y1);
+            continue;
+          }
+          const m = tileChar.match(/\d+:\d+:\d+:(\d+)/);
+          if(!m) throw new Error("Wrong char:" + tileChar);
+          if(m[1] !== "32"){
+            log.log("find:", tileChar, "at:", x1,y1);
+            found = true;
+            break me;
+          }
+        }
+      }
+      log.warn("Take time:%d, count:%d,%d,found:%s", Date.now() - begin, count, countNoChar, found);
+    }
     if(
-      //no markers
-      this._markers.length === 0 || 
-      //all markers out of bounds
-      this._markers.every(marker => !this._map.getBounds().contains(marker.getPosition()))
+      !found
     ){
       //no markers, need to find nearest
       const center = this._map.getCenter();
@@ -62,33 +118,33 @@ class MapModel {
             lat: nearest.lat,
             lng: nearest.lng,
           };
-          const distanceLat = window.google.maps.geometry.spherical.computeDistanceBetween(
+          const distanceLat = window.L.CRS.EPSG3857.distance(
             center,
-            new window.google.maps.LatLng(
+            window.L.latLng(
               dist.lat,
-              center.lng()
+              center.lng
               ),
           );
           log.log("distanceLat:", distanceLat);
           expect(distanceLat).number();
-          const distanceLng = window.google.maps.geometry.spherical.computeDistanceBetween(
+          const distanceLng = window.L.CRS.EPSG3857.distance(
             center,
-            new window.google.maps.LatLng(
-              center.lat(),
+            window.L.latLng(
+              center.lat,
               dist.lng,
               ),
           );
           log.log("distanceLng:", distanceLng);
           expect(distanceLng).number();
           log.log("dist:", dist);
-          log.log("center:", center, center.lat());
-          if(dist.lat > center.lat()){
+          log.log("center:", center, center.lat);
+          if(dist.lat > center.lat){
             log.log("On the north");
             if(distanceLat > distanceLng){
               log.log("On the north");
               this.showArrow("north");
             }else{
-              if(dist.lng > center.lng()){
+              if(dist.lng > center.lng){
                 log.log("On the east");
                 this.showArrow("east");
               }else{
@@ -102,7 +158,7 @@ class MapModel {
               log.log("On the south");
               this.showArrow("south");
             }else{
-              if(dist.lng > center.lng()){
+              if(dist.lng > center.lng){
                 log.log("On the east");
                 this.showArrow("east");
               }else{
@@ -168,9 +224,9 @@ class MapModel {
       this._cancelAxios("cancel previous nearest request");
     }
     const center = this._map.getCenter();
-    log.log("current center:", center.toJSON());
+    log.log("current center:", center);
     const zoom_level = this._map.getZoom();
-    const res = await axios.get(this.apiUrl + `nearest?zoom_level=${zoom_level}&lat=${center.lat()}&lng=${center.lng()}`, {
+    const res = await axios.get(this.apiUrl + `nearest?zoom_level=${zoom_level}&lat=${center.lat}&lng=${center.lng}`, {
       cancelToken: new axios.CancelToken((c) => {
         this._cancelAxios = c;
       }),