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

143 lines
3.7 KiB
Vue
Raw Normal View History

2019-01-08 13:06:21 +00:00
<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>