Merge pull request #12 from Dataport/feature/geolocation-tooltip

add tooltip to geolocation icon
Dataport · Nov 15, 2023 · 9dbe96f · 9dbe96f
2 parents 57bdd80 + dbe540b
commit 9dbe96f
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 3 deletions.
diff --git a/packages/clients/meldemichel/src/mapConfigurations.ts b/packages/clients/meldemichel/src/mapConfigurations.ts
@@ -119,6 +119,7 @@ const geoLocation: Partial<GeoLocationConfiguration> = {
   checkLocationInitially: true,
   zoomLevel: 7,
   boundaryLayerId: hamburgBorder,
+  showTooltip: true,
 }
 
 const mapConfigurations = {

diff --git a/packages/plugins/GeoLocation/CHANGELOG.md b/packages/plugins/GeoLocation/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## unpublished
+
+- Feature: Add optional tooltip to user geolocation map icon.
+
 ## 1.0.0
 
 Initial release.
diff --git a/packages/plugins/GeoLocation/README.md b/packages/plugins/GeoLocation/README.md
@@ -16,6 +16,7 @@ either `true` or `false`. When a users denies the location tracking, the button
 | zoomLevel              | number  | Specifies to which zoom level gets zoomed after a successfull tracking of the location.                                                                                                                                                                                                             |
 | keepCentered           | boolean | False by default. If true, the map will re-center on the user on any position change. If false, only the first position will be centered on.                                                                                                                                                        |
 | boundaryLayerId        | string? | Id of a vector layer to restrict geolocation markers and zooms to. When geolocation outside of its features occurs, an information will be shown once and the feature is stopped. The map will wait at most 10s for the layer to load; should it not happen, the geolocation feature is turned off. |
+| showTooltip | boolean? | If set `true`, a tooltip will be shown when hovering the geoposition marker in the map, indicating that it shows the user's position. Defaults to `false`. |
 | toastAction            | string? | If `boundaryLayerId` is set, and the user is not locatable within the boundary, this string will be used as action to send a toast information to the user. If no toast information is desired, leave this field undefined; for testing purposes, you can still find information in the console.    |
 
 #### Example configuration

diff --git a/packages/plugins/GeoLocation/src/language.ts b/packages/plugins/GeoLocation/src/language.ts
@@ -6,6 +6,7 @@ const language: LanguageOption[] = [
     resources: {
       plugins: {
         geoLocation: {
+          markerText: 'Aktuelle Position',
           button: {
             tooltip: {
               placeLocationMarker: 'Eigene Position markieren',
@@ -25,6 +26,7 @@ const language: LanguageOption[] = [
     resources: {
       plugins: {
         geoLocation: {
+          markerText: 'Current location',
           button: {
             tooltip: {
               placeLocationMarker: 'Mark own location',

diff --git a/packages/plugins/GeoLocation/src/store/actions.ts b/packages/plugins/GeoLocation/src/store/actions.ts
@@ -8,11 +8,13 @@ import { Style, Icon } from 'ol/style'
 import * as Proj from 'ol/proj.js'
 import Geolocation from 'ol/Geolocation.js'
 import { transform as transformCoordinates } from 'ol/proj'
+import Overlay from 'ol/Overlay'
 import { GeoLocationState, GeoLocationGetters } from '../types'
 import geoLocationMarker from '../assets/geoLocationMarker'
+import { getTooltip } from '../utils/tooltip'
 
 const actions: PolarActionTree<GeoLocationState, GeoLocationGetters> = {
-  setupModule({ getters: { checkLocationInitially }, commit, dispatch }): void {
+  setupModule({ getters, commit, dispatch }): void {
     dispatch('addMarkerLayer')
 
     // NOTE: limited support across browsers
@@ -21,9 +23,35 @@ const actions: PolarActionTree<GeoLocationState, GeoLocationGetters> = {
         commit('setIsGeolocationDenied', true)
       }
     })
-    if (checkLocationInitially) {
+    if (getters.checkLocationInitially) {
       dispatch('track')
     }
+    dispatch('setupTooltip')
+  },
+  setupTooltip({ getters, rootGetters }) {
+    if (getters.showTooltip) {
+      const { map } = rootGetters
+      const overlay = new Overlay({
+        element: getTooltip(),
+        positioning: 'bottom-center',
+        offset: [0, -5],
+      })
+      map.addOverlay(overlay)
+      map.on('pointermove', ({ pixel, dragging }) => {
+        if (dragging) {
+          return
+        }
+        const features = map.getFeaturesAtPixel(pixel, {
+          layerFilter: (layer) =>
+            layer.get('name') === 'geoLocationMarkerLayer',
+        })
+
+        const coordinate = features.length
+          ? map.getCoordinateFromPixel(pixel)
+          : undefined
+        overlay.setPosition(coordinate)
+      })
+    }
   },
 
   /** Enable tracking of geo position */
@@ -150,7 +178,7 @@ const actions: PolarActionTree<GeoLocationState, GeoLocationGetters> = {
         image: new Icon({
           // TODO: It might be interesting to be able to change the color.
           src: `data:image/svg+xml;utf8,${geoLocationMarker}`,
-          scale: 0.09,
+          scale: 0.08,
           opacity: 1,
         }),
       })

diff --git a/packages/plugins/GeoLocation/src/store/getters.ts b/packages/plugins/GeoLocation/src/store/getters.ts
@@ -23,6 +23,9 @@ const getters: PolarGetterTree<GeoLocationState, GeoLocationGetters> = {
     }
     return false
   },
+  showTooltip: (_, __, ___, rootGetters): boolean => {
+    return Boolean(rootGetters.configuration?.geoLocation?.showTooltip)
+  },
   toastAction: (_, __, ___, rootGetters): string | undefined => {
     return rootGetters?.configuration?.geoLocation?.toastAction
   },

diff --git a/packages/plugins/GeoLocation/src/types.ts b/packages/plugins/GeoLocation/src/types.ts
@@ -17,5 +17,6 @@ export interface GeoLocationGetters extends GeoLocationState {
   geoLocationMarkerLayer: VectorLayer<VectorSource>
   keepCentered: boolean
   markerFeature: Feature
+  showTooltip: boolean
   zoomLevel: number
 }
diff --git a/packages/plugins/GeoLocation/src/utils/tooltip.ts b/packages/plugins/GeoLocation/src/utils/tooltip.ts
@@ -0,0 +1,25 @@
+import i18next from 'i18next'
+
+const setInnerHtml = (tooltip: HTMLDivElement) => () =>
+  (tooltip.innerHTML = `<h2>${i18next.t(
+    'plugins.geoLocation.markerText'
+  )}</h2>`)
+
+const style = `
+  background: rgba(255, 255, 255, 0.8);
+  padding: 0.2em 0.5em;
+  border-radius: 4px;
+  color: #16161d;
+  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
+`
+
+export const getTooltip = () => {
+  const tooltip = document.createElement('div')
+  tooltip.style.cssText = style
+
+  setInnerHtml(tooltip)()
+  i18next.on('languageChanged', setInnerHtml(tooltip))
+  i18next.store.on('added', setInnerHtml(tooltip))
+
+  return tooltip
+}
diff --git a/packages/types/custom/CHANGELOG.md b/packages/types/custom/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## unpublished
 
+- Feature: Add flag `showTooltip` to `GeoLocationConfiguration`.
 - Feature: Add type for CoreState's `center` field.
 - Feature: Remodel type structure to deduplicate fields now modeled in `LayerBoundPluginOptions`.
 - Feature: Add new optional parameter `initial` to `PinsConfiguration` including related interface `InitialPin`.

diff --git a/packages/types/custom/core.ts b/packages/types/custom/core.ts
@@ -251,6 +251,7 @@ export interface GeoLocationConfiguration extends LayerBoundPluginOptions {
   checkLocationInitially: boolean
   /** whether to keep center on user or allow movement after first zoom to */
   keepCentered: boolean
+  showTooltip?: boolean
   /**
    * Limits the viewable GFIs per layer by this number. The first n elements
    * are chosen arbitrarily. Useful if you e.g. just want one result, or to