add leaflet for defining extent

resources/assets/js/components/LocationsMap.vue

@@ -0,0 +1,143 @@
+<template lang="html">
+  <div>   
+    <div id="map">
+    </div>
+  </div>
+</template>
+
+<script>
+// import "leaflet";
+import * as L from "leaflet";
+import "leaflet-draw";
+
+//const L = window.L;
+export default {
+  props: {
+    geolocation: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      map: [],
+      markers: null
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {
+    const map = L.map("map");
+    map.scrollWheelZoom.disable();
+    // Construct a bounding box for this map that the user cannot
+    var southWest = L.latLng(46.5, 9.9),
+      northEast = L.latLng(48.9, 16.9),
+      bounds = L.latLngBounds(southWest, northEast);
+    // zoom the map to that bounding box
+    // map.fitBounds(bounds);
+
+    var southWest1 = L.latLng(46.35877, 8.782379); //lowerCorner
+    var northEast1 = L.latLng(49.037872, 17.189532); //upperCorner
+    var layerBounds = L.latLngBounds(southWest1, northEast1);
+    var attribution = "www.basemap.at";
+    var basemap_0 = L.tileLayer(
+      "https://{s}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
+      {
+        attribution: attribution,
+        subdomains: ["maps", "maps1", "maps2", "maps3"],
+        continuousWorld: false,
+        detectRetina: false,
+        bounds: layerBounds
+      }
+    );
+    basemap_0.addTo(map);
+    map.fitBounds(bounds);
+
+    this.map = map;
+    // this.addPlaces(this.places)
+
+    // Initialise the FeatureGroup to store editable layers
+    var drawnItems = new L.FeatureGroup();
+    map.addLayer(drawnItems);
+    var drawPluginOptions = {
+      position: "topright",
+      draw: {
+        polygon: false,
+        // disable toolbar item by setting it to false
+        polyline: false,
+        circle: false,
+        circlemarker: false,
+        rectangle: {
+          shapeOptions: {
+            clickable: true,
+            color: "#005F6A"
+          }
+        },
+        marker: false
+      },
+      edit: {
+        featureGroup: drawnItems, //REQUIRED!!
+        remove: false
+      }
+    };
+
+    // Initialise the draw control and pass it the FeatureGroup of editable layers
+    var drawControl = new L.Control.Draw(drawPluginOptions);
+    map.addControl(drawControl);
+
+    map.on(
+      L.Draw.Event.CREATED,
+      function(event) {
+        drawnItems.clearLayers();
+        var type = event.layerType;
+        var layer = event.layer;
+
+        // if (type === "rectancle") {
+        // layer.bindPopup("A popup!" + layer.getBounds().toBBoxString());
+        var bounds = layer.getBounds();
+        this.geolocation.xmin = bounds.getSouthWest().lng;
+        this.geolocation.ymin = bounds.getSouthWest().lat;
+        // console.log(this.geolocation.xmin);
+        this.geolocation.xmax = bounds.getNorthEast().lng;
+        this.geolocation.ymax = bounds.getNorthEast().lat;
+        // }
+
+        drawnItems.addLayer(layer);
+      },
+      this
+    );
+
+    map.on(
+      L.Draw.Event.EDITED,
+      function(event) {
+        var layers = event.layers.getLayers();
+        var layer = layers[0];
+
+        var bounds = layer.getBounds();
+        this.geolocation.xmin = bounds.getSouthWest().lng;
+        this.geolocation.ymin = bounds.getSouthWest().lat;
+        // console.log(this.geolocation.xmin);
+        this.geolocation.xmax = bounds.getNorthEast().lng;
+        this.geolocation.ymax = bounds.getNorthEast().lat;
+      },
+      this
+    );
+  }
+};
+</script>
+
+// https://github.com/vuejs-templates/webpack/issues/121
+// npm install node-sass sass-loader --save-dev
+<style lang="scss">
+// Import CSS from Leaflet and plugins.
+@import "~leaflet/dist/leaflet.css";
+@import "~leaflet-draw/dist/leaflet.draw.css";
+
+#map {
+  width: 100%;
+  height: 400px;
+  font-weight: bold;
+  font-size: 13px;
+  text-shadow: 0 0 2px #fff;
+}
+</style>

resources/assets/js/datasetPublish.js

@@ -31,6 +31,7 @@ import axios from 'axios';
 import MyAutocomplete from './components/MyAutocomplete.vue';
 import VeeValidate from 'vee-validate';
 import dataset from './components/Dataset';
+import LocationsMap from './components/LocationsMap.vue';
 // import { Validator } from 'vee-validate';
 
 Vue.use(VeeValidate);
@@ -38,7 +39,7 @@ Vue.use(VeeValidate);
 const STATUS_INITIAL = 0, STATUS_SAVING = 1, STATUS_SUCCESS = 2, STATUS_FAILED = 3;
 const app = new Vue({
     el: '#app',
-    components: { MyAutocomplete },
+    components: { MyAutocomplete, LocationsMap },
     data() {
         return {
             rows: [
@@ -56,7 +57,7 @@ const app = new Vue({
             redirectLink : null,
             
 
-            step: 1,
+            step: 2,
             dataset : dataset
             // dataset: {
             //     type: '',
@@ -100,7 +101,7 @@ const app = new Vue({
         });
     },
     mounted() {
-        this.step = 1;
+        //this.step = 2;
         this.reset();        
     },
     computed: {
@@ -124,7 +125,7 @@ const app = new Vue({
             this.uploadedFiles = [];
             this.uploadError = null;
             this.dataset.reset();//reset methods will trigger property changed.
-            this.step = 1;
+            this.step = 2;
         },
         retry() {
             // reset form to initial state