Querying firestore data to produce the heatmap and refactoring

examples/maps_heatmaps/firebase_config.ts

@@ -0,0 +1,11 @@
+var firebaseConfig = {
+    apiKey: "AIzaSyDTfjtoUAt_-rn9BIHyLSDUNDGmP-3TQTw",
+    authDomain: "step-project-ellispis.firebaseapp.com",
+    databaseURL: "https://step-project-ellispis.firebaseio.com",
+    projectId: "step-project-ellispis",
+    storageBucket: "step-project-ellispis.appspot.com",
+    messagingSenderId: "680174020350",
+    appId: "1:680174020350:web:15715ef3d50f91087067af",
+    measurementId: "G-TGBJH1SGKH"
+};
+export default firebaseConfig;

examples/maps_heatmaps/package.json

@@ -6,10 +6,12 @@
     "format": "eslint --fix src/*.ts",
     "lint": "eslint src/*.ts",
     "test": "jest --passWithNoTests src/*",
-    "watch": "webpack --config ./webpack.dev.js --mode development"
+    "watch": "webpack --config ./webpack.dev.js --mode development",
+    "initialize-db": "ts-node-script test/initializeDB.ts"
   },
   "dependencies": {
     "firebase": "^7.19.0",
+    "geofirestore": "^4.3.0",
     "webpack-merge": "^5.1.2"
   },
   "devDependencies": {
@@ -22,7 +24,7 @@
     "@typescript-eslint/eslint-plugin": "^3.9.0",
     "@typescript-eslint/parser": "^3.9.0",
     "babel-loader": "^8.1.0",
-    "eslint": "^7.6.0",
+    "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "html-replace-webpack-plugin": "^2.5.6",
@@ -32,6 +34,7 @@
     "terser-webpack-plugin": "^4.1.0",
     "ts-jest": "^26.2.0",
     "ts-loader": "^8.0.2",
+    "ts-node": "^9.0.0",
     "typescript": "^3.9.7",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",

examples/maps_heatmaps/public/style.css

@@ -1,40 +1,101 @@
 /* Always set the map height explicitly to define the size of the div
-       * element that contains the map. */
-#map {
-  height: 100%;
-}
-
-/* Optional: Makes the sample page fill the window. */
-html,
-body {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-#floating-panel {
+      * element that contains the map. */
+
+      #sidebar-wrapper {
+        height: 100%;
+        width: 20%;
+        position: fixed;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        background-color: #eee;
+        overflow-x: hidden;
+        padding-top: 20px;
+      }
+      .autocomplete {
+  /*the container must be positioned relative:*/
+  position: relative;
+  display: inline-block;
+}
+input {
+  border: 1px solid transparent;
+  background-color: #f1f1f1;
+  padding: 10px;
+  font-size: 16px;
+}
+input[type=text] {
+  background-color: #f1f1f1;
+  width: 100%;
+}
+input[type=submit] {
+  background-color: DodgerBlue;
+  color: #fff;
+}
+.autocomplete-items {
   position: absolute;
-  top: 10px;
-  left: 25%;
-  z-index: 5;
-  background-color: #fff;
-  padding: 5px;
-  border: 1px solid #999;
-  text-align: center;
-  font-family: "Roboto", "sans-serif";
-  line-height: 30px;
-  padding-left: 10px;
-}
-
-/* [START maps_layer_heatmap] */
-#floating-panel {
+  border: 1px solid #d4d4d4;
+  border-bottom: none;
+  border-top: none;
+  z-index: 99;
+  /*position the autocomplete items to be the same width as the container:*/
+  top: 100%;
+  left: 0;
+  right: 0;
+}
+.autocomplete-items div {
+  padding: 10px;
+  cursor: pointer;
   background-color: #fff;
-  border: 1px solid #999;
-  left: 25%;
-  padding: 5px;
-  position: absolute;
-  top: 10px;
-  z-index: 5;
+  border-bottom: 1px solid #d4d4d4;
+}
+.autocomplete-items div:hover {
+  /*when hovering an item:*/
+  background-color: #e9e9e9;
+}
+.autocomplete-active {
+  /*when navigating through the items using the arrow keys:*/
+  background-color: DodgerBlue !important;
+  color: #ffffff;
 }
-
-/* [END maps_layer_heatmap] */
+
+       #map {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: #eee;
+      }
+
+     /* Optional: Makes the sample page fill the window. */
+     html,
+     body {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+     }
+
+     #floating-panel {
+      position: absolute;
+      top: 10px;
+      left: 25%;
+      z-index: 5;
+      background-color: #fff;
+      padding: 5px;
+      border: 1px solid #999;
+      text-align: center;
+      font-family: "Roboto", "sans-serif";
+      line-height: 30px;
+      padding-left: 10px;
+     }
+
+     /* [START maps_layer_heatmap] */
+     #floating-panel {
+      background-color: #fff;
+      border: 1px solid #999;
+      left: 25%;
+      padding: 5px;
+      position: absolute;
+      top: 10px;
+      z-index: 5;
+     }
+
+     /* [END maps_layer_heatmap] */     

examples/maps_heatmaps/src/index.ts

@@ -21,36 +21,81 @@
 
 // Imports
 let map: google.maps.Map, heatmap: google.maps.visualization.HeatmapLayer;
-import * as firebase from 'firebase';
-import firebaseConfig from './firebase_config';
+import * as firebase from "firebase";
+import firebaseConfig from "./firebase_config";
+import * as queryDB from "./queryDB";
 
 // Creates the firebase app and gets a reference to firestore.
 console.log(firebaseConfig);
-var app = firebase.initializeApp(firebaseConfig);
-var database = app.firestore();
+const app = firebase.initializeApp(firebaseConfig);
+const database = app.firestore();
 
 function initMap(): void {
-
-
   map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
     zoom: 13,
-    mapTypeId: "satellite"
+    mapTypeId: "satellite",
+    mapTypeControlOptions: {
+      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
+      position: google.maps.ControlPosition.TOP_CENTER,
+    },
   });
 
   // TODO shows how to connect to firestore and read data from there
-  let images = database.collection("test");
-  images.get().then(querySnapshot => {
-    if(!querySnapshot.empty) {
-      const image = querySnapshot.docs[0].data() as any;
-      map.setCenter(  { lat: image.coordinates.latitude, lng: image.coordinates.longitude });
+  const images = database.collection("test");
+  images.get().then((querySnapshot) => {
+    if (!querySnapshot.empty) {
+      const image = querySnapshot.docs[0].data();
+      map.setCenter({
+        lat: image.coordinates.latitude,
+        lng: image.coordinates.longitude,
+      });
     }
   });
 
-
   heatmap = new google.maps.visualization.HeatmapLayer({
-    data: getPoints(),
-    map: map
+    data: [],
+    map: map,
   });
+  map.addListener("center_changed", () => mapChanged());
+  map.addListener("zoom_changed", () => mapChanged());
+  function mapChanged() {
+    const center: google.maps.LatLng = map.getCenter();
+    const lat = center.lat();
+    const lng = center.lng();
+    const newCenter = new firebase.firestore.GeoPoint(lat, lng);
+    const quiredCollection = queryDB.getQuiredCollection(
+      newCenter,
+      getRadius(),
+      ["cat", "dog", "bag"]
+    );
+    queryDB.getPointsFromDB(heatmap, quiredCollection);
+  }
+  function getRadius() {
+    const bounds = map.getBounds();
+    if (bounds) {
+      const center = bounds.getCenter();
+      const ne = bounds.getNorthEast();
+
+      // r = radius of the earth in statute miles
+      const r = 3963.0;
+
+      // Convert lat or lng from decimal degrees into radians (divide by 57.2958)
+      const lat1 = center.lat() / 57.2958;
+      const lon1 = center.lng() / 57.2958;
+      const lat2 = ne.lat() / 57.2958;
+      const lon2 = ne.lng() / 57.2958;
+
+      // distance = circle radius from center to Northeast corner of bounds
+      const dis =
+        r *
+        Math.acos(
+          Math.sin(lat1) * Math.sin(lat2) +
+            Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)
+        );
+      return dis;
+    }
+    return 2; //check what to make default
+  }
 }
 
 function toggleHeatmap() {
@@ -72,7 +117,7 @@ function changeGradient() {
     "rgba(63, 0, 91, 1)",
     "rgba(127, 0, 63, 1)",
     "rgba(191, 0, 31, 1)",
-    "rgba(255, 0, 0, 1)"
+    "rgba(255, 0, 0, 1)",
   ];
   heatmap.set("gradient", heatmap.get("gradient") ? null : gradient);
 }
@@ -589,8 +634,11 @@ function getPoints() {
     new google.maps.LatLng(37.754665, -122.403242),
     new google.maps.LatLng(37.753837, -122.403172),
     new google.maps.LatLng(37.752986, -122.403112),
-    new google.maps.LatLng(37.751266, -122.403355)
+    new google.maps.LatLng(37.751266, -122.403355),
   ];
 }
+
+// initializeDB.addImagesToDB(initializeDB.allCoordinates); //was used to fill the database
 // [END maps_layer_heatmap]
 export { initMap };
+export { database };