Location is submitted and added to the array through events.

frontend/src/components/transactions/TransactionLocation.vue

@@ -23,19 +23,104 @@
     <div class="text-xs d-none d-lg-block d-xl-block">
       {{ $t('firefly.location') }}
     </div>
-    <div class="input-group">
-      (TODO)
+    <div style="width:100%;height:300px;">
+      <l-map
+          style="width:100%;height:300px;"
+          :zoom="zoom"
+          ref="myMap" @ready="prepMap()"
+          :center="center"
+          @update:zoom="zoomUpdated"
+          @update:center="centerUpdated"
+          @update:bounds="boundsUpdated"
+      >
+        <l-tile-layer :url="url"></l-tile-layer>
+        <l-marker :lat-lng="marker" :visible="hasMarker"></l-marker>
+      </l-map>
+      <span>
+        <button class="btn btn-default btn-xs" @click="clearLocation">{{ $t('firefly.clear_location') }}</button>
+      </span>
     </div>
   </div>
 </template>
 
 <script>
+
+// If you need to reference 'L', such as in 'L.icon', then be sure to
+// explicitly import 'leaflet' into your component
+// import L from 'leaflet';
+import {LMap, LMarker, LTileLayer} from 'vue2-leaflet';
+import 'leaflet/dist/leaflet.css';
+
+import L from 'leaflet';
+
+delete L.Icon.Default.prototype._getIconUrl;
+
+L.Icon.Default.mergeOptions({
+                              iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+                              iconUrl: require('leaflet/dist/images/marker-icon.png'),
+                              shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+                            });
+
 export default {
   name: "TransactionLocation",
   props: ['index', 'value', 'errors', 'customFields'],
+  components: {
+    LMap,
+    LTileLayer,
+    LMarker,
+  },
+  created() {
+    axios.get('./api/v1/configuration/static/firefly.default_location').then(response => {
+      this.zoom = parseInt(response.data['firefly.default_location'].zoom_level);
+      this.center =
+          [
+            parseFloat(response.data['firefly.default_location'].latitude),
+            parseFloat(response.data['firefly.default_location'].longitude),
+          ]
+      ;
+    });
+  },
   data() {
     return {
-      availableFields: this.customFields
+      availableFields: this.customFields,
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      zoom: 3,
+      center: [0, 0],
+      bounds: null,
+      map: null,
+      hasMarker: false,
+      marker: [0, 0],
+    }
+  },
+  methods: {
+    prepMap: function () {
+      this.map = this.$refs.myMap.mapObject;
+      this.map.on('contextmenu', this.setObjectLocation);
+      this.map.on('zoomend', this.saveZoomLevel);
+    },
+    setObjectLocation: function (event) {
+      this.marker = [event.latlng.lat, event.latlng.lng];
+      this.hasMarker = true;
+      this.emitEvent();
+    },
+    saveZoomLevel: function () {
+      this.emitEvent();
+    },
+    clearLocation: function () {
+      this.hasMarker = false;
+      this.emitEvent();
+    },
+    emitEvent() {
+      this.$emit('set-marker-location', {zoomLevel: this.zoom, lat: this.marker[0], lng: this.marker[1], hasMarker: this.hasMarker});
+    },
+    zoomUpdated(zoom) {
+      this.zoom = zoom;
+    },
+    centerUpdated(center) {
+      this.center = center;
+    },
+    boundsUpdated(bounds) {
+      this.bounds = bounds;
     }
   },
   computed: {