feat: conditional positioning based on event pixel

EOX-A · Aug 31, 2023 · ff2ab75 · ff2ab75
1 parent bc406b9
commit ff2ab75
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/elements/map/index.html b/elements/map/index.html
@@ -31,7 +31,6 @@
         id: "selectInteraction",
         overlay: {
           element: "eox-map-tooltip",
-          offset: [0, 30],
         },
         condition: "pointermove",
         layer: {

diff --git a/elements/map/src/select.ts b/elements/map/src/select.ts
@@ -105,6 +105,11 @@ export async function addSelect(
         selectStyleLayer.changed();
 
         if (overlay) {
+          const xPosition =
+            event.pixel[0] > EOxMap.offsetWidth / 2 ? "right" : "left";
+          const yPosition =
+            event.pixel[1] > EOxMap.offsetHeight / 2 ? "bottom" : "top";
+          overlay.setPositioning(`${yPosition}-${xPosition}`);
           overlay.setPosition(feature ? event.coordinate : null);
           if (feature && (<EOxMapTooltip>tooltip).renderContent) {
             (<EOxMapTooltip>tooltip).renderContent(feature.getProperties());

diff --git a/elements/map/src/tooltip.ts b/elements/map/src/tooltip.ts
@@ -14,11 +14,11 @@ export class EOxMapTooltip extends TemplateElement {
         : html` <style>
               ul {
                 margin: 0;
-                padding: 15px 5px 15px 30px;
+                padding: 15px 15px 15px 30px;
                 background: #0008;
                 border-radius: 15px;
                 color: white;
-                max-width: 50%;
+                max-width: 250px;
                 font-size: small;
               }
               span {