EOX-A / EOxElements

A Web Component collection of geospatial UI elements, crafted by EOX.
https://eox-a.github.io/EOxElements/
MIT License
13 stars 2 forks source link

Presence of drawtools breaks tooltips #1358

Open StefanBrand opened 2 weeks ago

StefanBrand commented 2 weeks ago

Steps to reproduce

  1. Add eox-drawtools to a map
  2. Tooltips in the map break.
  3. Draw polygon
  4. Tooltip appears for the drawn shape (possibly related to #594, but I was not able to successfully apply the workaround)

Versions

@eox/map@1.17.0
@eox/drawtools@0.12.0

Example

CodeSandBox: https://codesandbox.io/p/devbox/2hlkx8

<script setup lang="ts">
import "@eox/map";
import "@eox/drawtools";

import { ref, onMounted } from "vue";

let drawtools = ref({});
const layers = ref();

onMounted(async () => {
  layers.value = [
    {
      type: "Vector",
      source: {
        type: "Vector",
        url: "https://openlayers.org/data/vector/ecoregions.json",
        format: "GeoJSON",
      },
      interactions: [
        {
          type: "select",
          options: {
            id: "selectInteraction",
            condition: "pointermove",
            style: { "stroke-color": "red", "stroke-width": 3 },
          },
        },
      ],
    },
  ];

  console.log(document.querySelector("eox-map"));
  console.log(layers.value);
  document.querySelector("eox-map").layers = layers.value || [];
});
</script>

<template>
  <div>
  <eox-map
    .center="[15,48]"
    .zoom="4"
    id="tooltipTest"
    style="width: 300px; height: 300px"
  >
    <eox-map-tooltip></eox-map-tooltip>
  </eox-map>

  <eox-drawtools
    id="drawtools"
    .allowModify="true"
    .multipleFeatures="true"
    .showList="true"
    .type='"Polygon"'
    .onDrawupdate="() => {console.log(data.value)}"
    for="eox-map"
  >
  </eox-drawtools>
</div>
</template>

<style scoped></style>