concernement popup on mouse over, better boussole, misc

src/components/ConcernementMapPopup.vue

@@ -0,0 +1,49 @@
+<script>
+// import { RouterLink, RouterView } from 'vue-router'
+
+import { mapState, mapActions } from 'pinia'
+// import { UserStore } from '@/stores/user'
+import { ConcernementsStore } from '@/stores/concernements'
+
+export default {
+  name: 'concernementMapPopup',  
+  props: ['id'],
+  data() {
+    return {
+      dom: null,
+      concernement: null
+    }
+  },
+  created () {
+    this.concernement = this.concernementsByID[this.id];
+  },
+  mounted () {
+    // console.log('APP onMounted')
+    this.dom = this.$refs['concernement-map-popup'];
+    window.addEventListener('mousemove', this.onMousemove);
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['concernements']),
+    ...mapState(ConcernementsStore,['concernementsByID'])
+  },
+  methods: {
+    onMousemove(e){
+      // console.log('popup mousemove', e, this.dom);
+      this.dom.style.left = `${e.clientX + 5}px`;
+      this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`;
+    }
+  },
+  components: {
+  }
+}
+
+</script>
+
+<template>
+  <div id="concernement-map-popup" ref="concernement-map-popup">
+    <h1>{{ concernement.title }}</h1>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>