tethys/resources/assets/js/components/LocationsMap.vue

<template>
  <div style="position:relative">
    <!-- <div id="inset">
      xmin:
      <input
        type="text"
        name="xmin"
        id="xmin"
        v-model="geolocation.xmin"
        data-vv-scope="step-2"
        v-validate="'decimal'"
      >
      <br>ymin:
      <input
        type="text"
        name="ymin"
        id="ymin"
        v-model="geolocation.ymin"
        data-vv-scope="step-2"
      >
      xmax:
      <input
        type="text"
        name="xmax"
        id="xmax"
        v-model="geolocation.xmax"
        data-vv-scope="step-2"
      >
      <br>ymax:
      <input
        type="text"
        name="ymax"
        id="ymax"
        v-model="geolocation.ymax"
        data-vv-scope="step-2"
      >
      <input type="button" v-on:click="zoomTo" value="zoomTo">
    </div> -->
    <div id="map"></div>

    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-2 pure-div">
        <label for="xmin">xmin: </label> 
        <input name="xmin" type="text" class="pure-u-23-24"  v-model="geolocation.xmin" data-vv-scope="step-2" id="xmin" v-validate="'decimal'">
      </div> 

      <div class="pure-u-1 pure-u-md-1-2 pure-div">
        <label for="ymin">ymin: </label> 
        <input  name="ymin" type="text" class="pure-u-23-24" v-model="geolocation.ymin" data-vv-scope="step-2" id="ymin" v-validate="'decimal'">
      </div>

      <div class="pure-u-1 pure-u-md-1-2 pure-div">
        <label for="xmax">xmax: </label>
        <input name="xmax" type="text" class="pure-u-23-24" v-model="geolocation.xmax" data-vv-scope="step-2" id="xmax" v-validate="'decimal'">
      </div>

      <div class="pure-u-1 pure-u-md-1-2 pure-div">
        <label for="ymax">ymax: </label> 
        <input name="ymax" type="text" class="pure-u-23-24" v-model="geolocation.ymax" data-vv-scope="step-2" id="ymax" v-validate="'decimal'">
      </div>
      <input type="button" v-on:click="zoomTo" value="validate coordinates">
    </div>

  </div>
</template>

<script>
// import "leaflet";
import * as L from "leaflet";
import "leaflet-draw";

//const L = window.L;
export default {
  inject: {
    $validator: '$validator'
  },
  props: {
    geolocation: {
      type: Object
    }
  },
  data() {
    return {
      map: [],
      drawnItems: null,
      locationErrors: []
    };
  },
   created() {
    this.$validator.extend('boundingBox', {
        getMessage: field => 'At least one ' + field + ' needs to be checked.',
        validate: (value, [testProp]) => {
            const options = this.dataset.checkedLicenses;
            return value || options.some((option) => option[testProp]);
        }
    });
  },
  computed: {},
  watch: {},
  methods: {
    zoomTo() {
      var _this = this;
      _this.locationErrors.length = 0;
      this.drawnItems.clearLayers();
      var xmin = document.getElementById("xmin").value;
      var ymin = document.getElementById("ymin").value;
      var xmax = document.getElementById("xmax").value;
      var ymax = document.getElementById("ymax").value;
      var bounds = [[ymin, xmin], [ymax, xmax]];
      try {
        var boundingBox = L.rectangle(bounds, { color: "#005F6A", weight: 1 });     
        // this.geolocation.xmin = xmin;
        // this.geolocation.ymin = ymin;      
        // this.geolocation.xmax = xmax;
        // this.geolocation.ymax = ymax;

        _this.drawnItems.addLayer(boundingBox);
        _this.map.fitBounds(bounds);
        _this.$toast.success("valid bounding box");
      } catch (e) {
        // _this.errors.push(e);
        _this.$toast.error(e);
      }
    }
  },
  mounted() {
    const map = L.map("map");
    this.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 = (this.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;
}

#inset {
  position: absolute;
  bottom: 0;
  left: 0;
  border: none;
  width: 120px;
  z-index: 999;
  // height: 120px;
}
</style>