other components... (2)

src/components/COpenStreetMap/COpenStreetMap.scss

@@ -0,0 +1,4 @@
+#map {
+  height: 400px;
+  width: 90%;
+}

src/components/COpenStreetMap/COpenStreetMap.ts

@@ -0,0 +1,50 @@
+import { tools } from '@store/Modules/tools'
+import { useQuasar } from 'quasar'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'COpenStreetMap',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    coordinates: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    coord_big: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    urlmap: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgmap: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar()
+
+    function mywidth() {
+      return tools.getwidth($q) - 20
+    }
+
+    function myheight() {
+      return 450
+    }
+
+
+    return {
+      mywidth,
+      myheight,
+    }
+  }
+})

src/components/COpenStreetMap/COpenStreetMap.vue

@@ -0,0 +1,35 @@
+<template>
+  <div v-if="coordinates" class="flex flex-center column justify-center">
+    <div class="">
+      <span class="text-subtitle2" v-html="title"></span> - (<a
+      :href="`https://www.openstreetmap.org/?` + coord_big + `&layers=N`"
+      target="_blank">{{ $t('showbigmap') }}</a>)
+    </div>
+    <div>
+      <iframe
+        :width="mywidth" :height="myheight" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
+        :src="`https://www.openstreetmap.org/export/embed.html?bbox=` + coordinates"
+        style="border: 1px solid black"></iframe>
+
+    </div>
+  </div>
+  <div v-else>
+    <div class="q-my-md">
+      <p v-if="urlmap" class="text-subtitle2 text-center">
+        <span v-html="title"></span>
+        - <a :href="urlmap" target="_blank" class="text-black">Apri Mappa</a>
+      </p>
+      <a :href="urlmap" target="_blank">
+        <q-img :src="`statics/` + imgmap" class="imgautosize" alt="my map">
+        </q-img>
+
+      </a>
+    </div>
+  </div>
+</template>
+<script lang="ts" src="./COpenStreetMap.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './COpenStreetMap.scss';
+</style>

src/components/COpenStreetMap/index.ts

@@ -0,0 +1 @@
+export {default as COpenStreetMap} from './COpenStreetMap.vue'