Merge pull request #45 from BuildFire/add-camera-control

feat(camera-control):add camera control

Author: mas-iota

src/control/content/js/listView/introMap.js

@@ -1,5 +1,6 @@
 /* eslint-disable max-len */
 import state from "../../state";
+import { isCameraControlVersion } from "../../../../shared/utils/mapUtils";
 
 const convertMileToMeter = (distanceInMiles) => {
   if (typeof distanceInMiles === "number") {
@@ -16,16 +17,21 @@ window.initAreaRadiusMap = () => {
 
   const areaAddressInput = document.getElementById("area-radius-address-input");
   const areaRadiusInput = document.getElementById("location-area-radius-input");
-
-  const map = new google.maps.Map(document.getElementById("local-area-map"), {
+  const options = {
     center: { lat: 32.7182625, lng: -117.1601157 },
     zoom: 1,
-    zoomControl: true,
     mapTypeControl: false,
     streetViewControl: false,
     fullscreenControl: false,
     gestureHandling: "greedy",
-  });
+  };
+  if (isCameraControlVersion()) {
+    options.cameraControl = true;
+  } else {
+    options.zoomControl = true;
+  }
+
+  const map = new google.maps.Map(document.getElementById("local-area-map"), options);
   state.map = map;
 
   const autocomplete = new google.maps.places.SearchBox(

src/control/content/js/locations/index.js

@@ -20,6 +20,8 @@ import Locations from "../../../../repository/Locations";
 import Category from "../../../../entities/Category";
 import { validateOpeningHoursDuplication } from '../../../../shared/utils';
 import constants from '../../../../widget/js/constants';
+import { isCameraControlVersion } from "../../../../shared/utils/mapUtils";
+
 const breadcrumbsSelector = document.querySelector("#breadcrumbs");
 const sidenavContainer = document.querySelector("#sidenav-container");
 const locationsSection = document.querySelector("#main");
@@ -1118,15 +1120,20 @@ const createEmptyHolder = (message) => {
 
 window.intiMap = () => {
   console.log("Map Ready");
-  const map = new google.maps.Map(document.getElementById("location-map"), {
+  const options = {
     center: { lat: 32.7182625, lng: -117.1601157 },
     zoom: 1,
-    zoomControl: true,
     mapTypeControl: false,
     streetViewControl: false,
     fullscreenControl: false,
     gestureHandling: "greedy",
-  });
+  };
+  if (isCameraControlVersion()) {
+    options.cameraControl = true;
+  } else {
+    options.zoomControl = true;
+  }
+  const map = new google.maps.Map(document.getElementById("location-map"), options);
   state.map = map;
 
   const autocomplete = new google.maps.places.SearchBox(

src/control/settings/settings.js

@@ -12,6 +12,7 @@ import LocationEditingListUI from './js/ui/locationEditingListUI';
 import DialogComponent from './js/ui/dialog/dialog';
 import Locations from '../../repository/Locations';
 import { getDisplayName } from './js/util/helpers';
+import { isCameraControlVersion } from '../../shared/utils/mapUtils';
 
 const sidenavContainer = document.getElementById('sidenav-container');
 const emptyState = document.getElementById('empty-state');
@@ -377,7 +378,6 @@ const removeAsEditingLocations = (location, index, callback) => {
     }, (e, data) => {
       if (e) console.error(e);
       if (data && data.selectedButton.key === "y") {
-
         const payload = {
           $set: {
             lastUpdatedOn: new Date(),
@@ -651,7 +651,6 @@ const openLocationPermsDialog = (location) => {
     callback(item);
   };
 
-
   const locationTagsListContainer = document.createElement('div');
   const tagsContainerTitle = document.createElement('h5');
 
@@ -740,7 +739,6 @@ const initLocationEditing = () => {
   const defaultLocationsTimeRadios = document.querySelectorAll('input[name="defaultLocationTime"]');
   let timeoutId;
 
-
   for (const radio of defaultLocationsTimeRadios) {
     if (radio.value === state.settings.locationEditors.time) {
       radio.checked = true;
@@ -1015,15 +1013,20 @@ const initMap = () => {
 
 window.intiGoogleMap = () => {
   const searchBoxElem = document.querySelector('#initial-area-location-input');
-  const map = new google.maps.Map(document.getElementById("location-map"), {
+  const options = {
     center: { lat: -34.397, lng: 150.644 },
     zoom: 10,
-    zoomControl: true,
     mapTypeControl: false,
     streetViewControl: false,
     fullscreenControl: false,
     gestureHandling: "greedy",
-  });
+  };
+  if (isCameraControlVersion()) {
+    options.cameraControl = true;
+  } else {
+    options.zoomControl = true;
+  }
+  const map = new google.maps.Map(document.getElementById("location-map"), options);
   state.map = map;
 
   const autocomplete = new google.maps.places.SearchBox(
@@ -1102,7 +1105,7 @@ window.intiGoogleMap = () => {
             console.log("No results found");
           }
         } else {
-          console.log("Geocoder failed due to: " + status);
+          console.log(`Geocoder failed due to: ${status}`);
         }
       }
     );
@@ -1185,7 +1188,7 @@ const setActiveSidenavTab = (section) => {
   const sidenav = document.querySelector('#sidenav');
   for (const tab of sidenav.childNodes) {
     tab.querySelector('a').classList.remove('active');
-  };
+  }
 
   sidenav.querySelector(`#${section}-tab`).firstChild.classList.add('active');
 };

src/shared/utils/mapUtils.js

@@ -0,0 +1,52 @@
+// eslint-disable-next-line max-len
+/**
+ * Starting from version 3.60 (released in February 2025), Google Maps introduces a new Camera control
+ * which replaces the traditional Zoom control as part of the default UI.
+ * This version check function  is necessary because the behavior of the controls changes:
+ * If the version is 3.60 or higher, the new Camera control will be the default
+ * If the version is below 3.60, the legacy Zoom control will still be applicable.
+ * By determining the version, this function allows the code to handle the transition smoothly, ensuring compatibility with both
+ * the old and new controls.
+ */
+
+// eslint-disable-next-line import/prefer-default-export
+export const isCameraControlVersion = function () {
+  const parseVersion = function (versionString) {
+    const parts = versionString.split('.');
+    return parts.map((part) => {
+      const numericPart = part.replace(/\D/g, ''); // Extract the number
+      const suffix = part.replace(/\d/g, ''); // Extract non-numeric suffix (e.g., 'beta')
+
+      return {
+        number: parseInt(numericPart, 10) || 0,
+        suffix: suffix || null
+      };
+    });
+  };
+
+  const compareVersions = function (currentVersion, requiredVersion) {
+    const length = Math.max(currentVersion.length, requiredVersion.length);
+
+    for (let i = 0; i < length; i++) {
+      const curr = currentVersion[i] || { number: 0, suffix: null };
+      const req = requiredVersion[i] || { number: 0, suffix: null };
+
+      if (curr.number > req.number) return 1;
+      if (curr.number < req.number) return -1;
+
+      if (curr.suffix && !req.suffix) return -1; // beta is considered lower than stable
+      if (!curr.suffix && req.suffix) return 1;
+      if (curr.suffix && req.suffix && curr.suffix > req.suffix) return 1;
+      if (curr.suffix && req.suffix && curr.suffix < req.suffix) return -1;
+    }
+
+    return 0;
+  };
+  const VersionCheckService = function () {
+    const currentVersionString = google.maps.version;
+    const currentVersion = parseVersion(currentVersionString);
+    const requiredVersion = parseVersion('3.60');
+    return compareVersions(currentVersion, requiredVersion) >= 0;
+  };
+  return VersionCheckService();
+};

src/widget/css/main.css

@@ -886,6 +886,11 @@ body section#home {
   z-index: 1;
   cursor: pointer;
 }
+.map-center-btn.left {
+  right: initial;
+  left: 10px;
+  bottom: 115px;
+}
 
 .map-center-btn * {
   pointer-events: none;

src/widget/js/map/Map.js

@@ -1,6 +1,8 @@
 import MarkerClusterer from './markercluster';
 import CustomMarker from './CustomMarker';
 import { cdnImage } from '../util/helpers';
+import { isCameraControlVersion } from "../../../shared/utils/mapUtils";
+
 
 export default class Map {
   constructor(selector, options) {
@@ -26,6 +28,9 @@ export default class Map {
       },
       ...userOptions,
     };
+    if (isCameraControlVersion()) {
+      document.querySelector('.map-center-btn').classList.add('left');
+    }
     this.map = new google.maps.Map(selector, options);
     google.maps.event.addListenerOnce(this.map, 'idle', this.attachMapListeners.bind(this));
   }

src/widget/widget.js

@@ -807,7 +807,7 @@ const initEventListeners = () => {
 const chipSets = {};
 const initFilterOverlay = () => {
   let categories = state.categories
-  
+
   let html = '';
   const container = document.querySelector('#filter .expansion-panel__container .accordion');
   categories.forEach((category) => {