Merge pull request #189 from Dataport/fix/zoom-overlay

Adjust overlay mechanic for macOS devices

Author: dopenguin

packages/core/CHANGELOG.md

@@ -13,6 +13,7 @@
 - Fix: Move basic documentation of `layers` from `@polar/plugin-layer-chooser` to `@polar/core`.
 - Fix: Adjust documentation to properly describe optionality of configuration parameters.
 - Fix: Add package `events` as a dependency to fix issue with `xml2js`. See https://github.com/Leonidas-from-XIV/node-xml2js/issues/697 for more information.
+- Fix: Adjust overlay to properly be displayed on macOS devices.
 - Chore: Update dependencies to latest versions.
 
 ## 1.4.1

packages/core/src/components/MapContainer.vue

@@ -6,7 +6,7 @@
         class="polar-map-overlay"
       >
         <template v-if="noControlOnZoom">
-          {{ $t('common:overlay.noControlOnZoom') }}
+          {{ $t(overlayLocale) }}
         </template>
         <template v-else-if="oneFingerPan">
           {{ $t('common:overlay.oneFingerPan') }}
@@ -58,6 +58,8 @@ import MapUi from './MapUi.vue'
 // NOTE: OpenLayers styles need to be imported as the map resides in the shadow DOM
 import 'ol/ol.css'
 
+const isMacOS = navigator.userAgent.indexOf('Mac') !== -1
+
 export default Vue.extend({
   components: {
     MapUi,
@@ -91,6 +93,9 @@ export default Vue.extend({
       'moveHandle',
       'moveHandleActionButton',
     ]),
+    overlayLocale() {
+      return `common:overlay.${isMacOS ? 'noCommandOnZoom' : 'noControlOnZoom'}`
+    },
     renderMoveHandle() {
       return (
         this.moveHandle !== null && this.hasWindowSize && this.hasSmallWidth
@@ -203,9 +208,9 @@ export default Vue.extend({
         }
       }
     },
-    wheelEffect({ ctrlKey }) {
+    wheelEffect(event: WheelEvent) {
       clearTimeout(this.noControlOnZoomTimeout)
-      this.noControlOnZoom = !ctrlKey
+      this.noControlOnZoom = isMacOS ? !event.metaKey : !event.ctrlKey
       this.noControlOnZoomTimeout = setTimeout(
         () => (this.noControlOnZoom = false),
         2000

packages/core/src/language/locales/de.ts

@@ -11,6 +11,8 @@ const de: Resource = {
     },
     overlay: {
       noControlOnZoom: 'Verwenden Sie Strg+Scrollen zum Zoomen der Karte',
+      noCommandOnZoom:
+        'Verwenden Sie Command ⌘ + Scrollen zum Zoomen der Karte',
       oneFingerPan:
         'Verwenden Sie mindestens zwei Finger zum Verschieben der Karte',
     },

packages/core/src/language/locales/en.ts

@@ -11,6 +11,7 @@ const en: Resource = {
     },
     overlay: {
       noControlOnZoom: 'Use Ctrl+Mousewheel to zoom into the map',
+      noCommandOnZoom: 'Use Command ⌘ + Mousewheel to zoom into the map',
       oneFingerPan: 'Use at least two fingers to pan the map',
     },
   },