diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 9a2c09e21..3da4ffb10 100644
--- a/packages/core/CHANGELOG.md
+++ b/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
diff --git a/packages/core/src/components/MapContainer.vue b/packages/core/src/components/MapContainer.vue
index 9caf0429c..bd72a6120 100644
--- a/packages/core/src/components/MapContainer.vue
+++ b/packages/core/src/components/MapContainer.vue
@@ -6,7 +6,7 @@
class="polar-map-overlay"
>
- {{ $t('common:overlay.noControlOnZoom') }}
+ {{ $t(overlayLocale) }}
{{ $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
diff --git a/packages/core/src/language/locales/de.ts b/packages/core/src/language/locales/de.ts
index 29245fd25..31343040e 100644
--- a/packages/core/src/language/locales/de.ts
+++ b/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',
},
diff --git a/packages/core/src/language/locales/en.ts b/packages/core/src/language/locales/en.ts
index 066e33bca..cda125e19 100644
--- a/packages/core/src/language/locales/en.ts
+++ b/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',
},
},