Add support for modal option for geometry block

client/web/compose/src/components/PageBlocks/GeometryBase.vue

@@ -44,6 +44,7 @@
           :key="`marker-${i}`"
           :lat-lng="marker.value"
           :icon="getIcon(marker)"
+          @click="onMarkerCLick(marker.recordID, marker.moduleID)"
         />
         <l-control class="leaflet-bar">
           <a
@@ -100,6 +101,7 @@ export default {
   computed: {
     ...mapGetters({
       getModuleByID: 'module/getByID',
+      pages: 'page/set',
     }),
 
     localValue () {
@@ -109,7 +111,12 @@ export default {
         geo.forEach((value) => {
           if (value.displayMarker) {
             value.markers.map(subValue => {
-              values.push({ value: this.getLatLng(subValue), color: value.color })
+              values.push({
+                value: this.getLatLng(subValue),
+                color: value.color,
+                recordID: value.recordID,
+                moduleID: value.moduleID,
+              })
             })
           }
         })
@@ -189,8 +196,8 @@ export default {
                 const mapModuleField = module.fields.find(f => f.name === feed.geometryField)
 
                 if (mapModuleField) {
-                  this.geometries[idx] = records.map(e => {
-                    let geometry = e.values[feed.geometryField]
+                  this.geometries[idx] = records.map(record => {
+                    let geometry = record.values[feed.geometryField]
                     let markers = []
 
                     if (mapModuleField.isMulti) {
@@ -202,11 +209,13 @@ export default {
                     }
 
                     return ({
-                      title: e.values[feed.titleField],
+                      title: record.values[feed.titleField],
                       geometry: feed.displayPolygon ? geometry : [],
                       markers,
                       color: feed.options.color,
                       displayMarker: feed.displayMarker,
+                      recordID: record.recordID,
+                      moduleID: record.moduleID,
                     })
                   })
                 }
@@ -264,6 +273,26 @@ export default {
       const zoom = this.$refs.map.mapObject._zoom >= 13 ? this.$refs.map.mapObject._zoom : 13
       this.$refs.map.mapObject.flyTo([latitude, longitude], zoom)
     },
+
+    onMarkerCLick (recordID, moduleID) {
+      const page = this.pages.find(p => p.moduleID === moduleID)
+      if (!page) {
+        return
+      }
+
+      const route = { name: 'page.record', params: { recordID, pageID: page.pageID } }
+
+      if (this.options.displayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
+      } else if (this.options.displayOption === 'modal') {
+        this.$root.$emit('show-record-modal', {
+          recordID,
+          recordPageID: page.pageID,
+        })
+      } else {
+        this.$router.push(route)
+      }
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/GeometryConfigurator/Configurator.vue

@@ -114,6 +114,21 @@
           />
         </b-form-group>
       </b-col>
+
+      <b-col
+        sm="12"
+        md="4"
+      >
+        <b-form-group
+          :label="$t('geometry.onMarkerClick')"
+          label-class="text-primary"
+        >
+          <b-form-select
+            v-model="options.displayOption"
+            :options="displayOptions"
+          />
+        </b-form-group>
+      </b-col>
     </b-row>
   </div>
 </template>
@@ -150,6 +165,16 @@ export default {
     }
   },
 
+  computed: {
+    displayOptions () {
+      return [
+        { value: 'sameTab', text: this.$t('geometry.openInSameTab') },
+        { value: 'newTab', text: this.$t('geometry.openInNewTab') },
+        { value: 'modal', text: this.$t('geometry.openInModal') },
+      ]
+    },
+  },
+
   methods: {
     getLatLng (coordinates = [undefined, undefined]) {
       const [lat, lng] = coordinates

lib/js/src/compose/types/page-block/geometry/page-block.ts

@@ -17,6 +17,7 @@ interface Options {
   bounds: Bounds | null;
   lockBounds: boolean;
   magnifyOption: string;
+  displayOption: string;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -29,6 +30,7 @@ const defaults: Readonly<Options> = Object.freeze({
   bounds: null,
   lockBounds: false,
   magnifyOption: '',
+  displayOption: 'sameTab'
 })
 
 export class PageBlockGeometry extends PageBlock {
@@ -51,7 +53,7 @@ export class PageBlockGeometry extends PageBlock {
     this.options.center = (o.center || [])
     this.options.bounds = (o.bounds || null)
 
-    Apply(this.options, o, String, 'magnifyOption')
+    Apply(this.options, o, String, 'magnifyOption', 'displayOption')
     Apply(this.options, o, Number, 'zoomStarting', 'zoomMin', 'zoomMax')
     Apply(this.options, o, Boolean, 'lockBounds')
   }

locale/en/corteza-webapp-compose/block.yaml

@@ -718,6 +718,10 @@ geometry:
   addSource: Add source
   lock: Lock
   mapHelpText: Move and scroll the map to the position that will be used as a default. You can also lock the position or zoom to prevent users from moving too far.
+  onMarkerClick: On marker click
+  openInSameTab: Open in the same tab
+  openInNewTab: Open in a new tab
+  openInModal: Open in a modal
   recordFeed:
     moduleLabel: Module*
     modulePlaceholder: (No module)