geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

- inertiajs file upload and validation via adonisjs
All checks were successful
CI Pipeline / japa-tests (push) Successful in 52s
Details

Browse source 
- npm updates
This commit is contained in:
Kaimbacher 2023-06-01 14:29:56 +02:00
parent 092a8a1c12
commit e051a94b3b
13 changed files with 1069 additions and 640 deletions
Download patch file Download diff file Expand all files Collapse all files

20
resources/js/Components/Map/draw.component.vue
View file

@ -25,7 +25,7 @@ import { MapService } from '@/Stores/map.service';
import { Map } from 'leaflet/src/map/index';
// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
// import { LatLngBounds, Rectangle } from 'leaflet';
import { on, off , preventDefault } from 'leaflet/src/dom/DomEvent';
import { on, off, preventDefault } from 'leaflet/src/dom/DomEvent';
import { Rectangle } from 'leaflet/src/layer/vector/Rectangle';
import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
@ -129,7 +129,7 @@ export default class DrawControlComponent extends Vue {
}
//TODO refactor: move cursor to styles
// this._map.domElement.style.cursor = 'crosshair';
this._map._container.style.cursor = "crosshair";
this._map._container.style.cursor = 'crosshair';
// this._tooltip.updateContent({text: this._initialLabelText});
this._map
.on('mousedown', this._onMouseDown, this)
@ -220,8 +220,20 @@ export default class DrawControlComponent extends Vue {
this._map.fire('Daw.Event.CREATED', { layer: rectangle, type: this.TYPE });
}
public drawShape(southWest, northEast) {
if (!this._shape) {
const bounds = new LatLngBounds(southWest, northEast);
this._shape = new Rectangle(bounds, this.options.shapeOptions);
// this._map.addLayer(this._shape);
this._map = this.mapService.getMap(this.mapId);
this._shape.addTo(this._map);
} else {
this._shape.setBounds(new LatLngBounds(southWest, northEast));
}
}
// from Draw Rectangle
_drawShape(latlng) {
private _drawShape(latlng) {
if (!this._shape) {
const bounds = new LatLngBounds(this._startLatLng, latlng);
this._shape = new Rectangle(bounds, this.options.shapeOptions);
@ -274,7 +286,7 @@ export default class DrawControlComponent extends Vue {
position: absolute;
left: 10px;
top: 100px;
z-index: 40;
z-index: 39;
}
.btn-group-vertical button {

124
resources/js/Components/Map/map.component.vue
View file

@ -3,7 +3,7 @@
<!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
<div :id="mapId" class="map-container mapDesktop rounded">
<ZoomControlComponent ref="zoom" :mapId="mapId"></ZoomControlComponent>
<DrawControlComponent :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
<DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast"></DrawControlComponent>
</div>
</div>
</template>
@ -28,54 +28,51 @@ import { MapService } from '@/Stores/map.service';
import ZoomControlComponent from './zoom.component.vue';
import DrawControlComponent from './draw.component.vue';
import { Coverage } from '@/Dataset';
import {canvas} from 'leaflet/src/layer/vector/Canvas';
import {svg} from 'leaflet/src/layer/vector/SVG';
import { canvas } from 'leaflet/src/layer/vector/Canvas';
import { svg } from 'leaflet/src/layer/vector/SVG';
Map.include({
// @namespace Map; @method getRenderer(layer: Path): Renderer
// Returns the instance of `Renderer` that should be used to render the given
// `Path`. It will ensure that the `renderer` options of the map and paths
// are respected, and that the renderers do exist on the map.
getRenderer: function (layer) {
// @namespace Path; @option renderer: Renderer
// Use this specific instance of `Renderer` for this path. Takes
// precedence over the map's [default renderer](#map-renderer).
var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
// @namespace Map; @method getRenderer(layer: Path): Renderer
// Returns the instance of `Renderer` that should be used to render the given
// `Path`. It will ensure that the `renderer` options of the map and paths
// are respected, and that the renderers do exist on the map.
getRenderer: function (layer) {
// @namespace Path; @option renderer: Renderer
// Use this specific instance of `Renderer` for this path. Takes
// precedence over the map's [default renderer](#map-renderer).
var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
if (!renderer) {
renderer = this._renderer = this._createRenderer();
}
if (!renderer) {
renderer = this._renderer = this._createRenderer();
}
if (!this.hasLayer(renderer)) {
this.addLayer(renderer);
}
return renderer;
},
if (!this.hasLayer(renderer)) {
this.addLayer(renderer);
}
return renderer;
},
_getPaneRenderer: function (name) {
if (name === 'overlayPane' || name === undefined) {
return false;
}
_getPaneRenderer: function (name) {
if (name === 'overlayPane' || name === undefined) {
return false;
}
var renderer = this._paneRenderers[name];
if (renderer === undefined) {
renderer = this._createRenderer({pane: name});
this._paneRenderers[name] = renderer;
}
return renderer;
},
var renderer = this._paneRenderers[name];
if (renderer === undefined) {
renderer = this._createRenderer({ pane: name });
this._paneRenderers[name] = renderer;
}
return renderer;
},
_createRenderer: function (options) {
// @namespace Map; @option preferCanvas: Boolean = false
// Whether `Path`s should be rendered on a `Canvas` renderer.
// By default, all `Path`s are rendered in a `SVG` renderer.
return (this.options.preferCanvas && canvas(options)) || svg(options);
}
_createRenderer: function (options) {
// @namespace Map; @option preferCanvas: Boolean = false
// Whether `Path`s should be rendered on a `Canvas` renderer.
// By default, all `Path`s are rendered in a `SVG` renderer.
return (this.options.preferCanvas && canvas(options)) || svg(options);
},
});
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
// const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@ -121,7 +118,9 @@ export default class MapComponent extends Vue {
public baseMaps: LayerMap;
@Ref('zoom') private zoom: ZoomControlComponent;
@Ref('draw') private draw: DrawControlComponent;
// services:
mapService = MapService();
southWest;
@ -140,19 +139,16 @@ export default class MapComponent extends Vue {
mounted(): void {
this.initMap();
this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
}
unmounted() {
this.map.off('zoomend zoomlevelschange');
}
public deleteTest(): void {
this.onMapInitializedEvent.emit(this.mapId);
}
// @Emit(this.onMapInitializedEvent)
protected initMap(): void {
// let map: Map = (this.map = this.mapService.getMap(this.mapId));
let map: Map = (this.map = new Map(this.mapId, this.mapOptions));
this.mapService.setMap(this.mapId, map);
map.scrollWheelZoom.disable();
@ -162,14 +158,6 @@ export default class MapComponent extends Vue {
this.onMapInitializedEvent.emit(this.mapId);
this.addBaseMap();
// if (this.fitBounds) {
// this.map.fitBounds(this.fitBounds);
// }
this.southWest = toLatLng(46.5, 9.9);
this.northEast = toLatLng(48.9, 16.9);
const bounds = toLatLngBounds(this.southWest, this.northEast);
map.fitBounds(bounds);
const attributionControl = new Attribution().addTo(this.map);
attributionControl.setPrefix(false);
@ -198,6 +186,36 @@ export default class MapComponent extends Vue {
// Initialise the FeatureGroup to store editable layers
// let drawnItems = (this.drawnItems = new FeatureGroup());
// map.addLayer(drawnItems);
this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
// if (this.fitBounds) {
// this.map.fitBounds(this.fitBounds);
// }
if (this.coverage.x_min && this.coverage.y_min) {
this.southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
} else {
this.southWest = toLatLng(46.5, 9.9);
}
if (this.coverage.x_max && this.coverage.y_max) {
this.northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
} else {
this.northEast = toLatLng(48.9, 16.9);
} // this.northEast = toLatLng(48.9, 16.9);
const bounds = toLatLngBounds(this.southWest, this.northEast);
map.fitBounds(bounds);
if (this.coverage.x_min && this.coverage.x_max && this.coverage.y_min && this.coverage.y_max) {
let _southWest;
let _northEast;
if (this.coverage.x_min && this.coverage.y_min) {
_southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
}
if (this.coverage.x_max && this.coverage.y_max) {
_northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
}
this.draw.drawShape(_southWest, _northEast);
}
}
private addBaseMap(layerOptions?: LayerOptions): void {

2
resources/js/Components/Map/zoom.component.vue
View file

@ -100,7 +100,7 @@ export default class ZoomControlComponent extends Vue {
position: absolute;
left: 10px;
top: 10px;
z-index: 40;
z-index: 39;
}
.btn-group-vertical button {

2
resources/js/Components/NavBar.vue
View file

@ -83,7 +83,7 @@ const logout = async() => {
<template>
<nav
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-50 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
class="top-0 left-0 right-0 fixed bg-gray-50 h-14 z-40 w-screen transition-position xl:pl-60 lg:w-auto dark:bg-slate-800"
>
<div class="flex lg:items-stretch" :class="containerMaxW">
<div class="flex-1 items-stretch flex h-14">