geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull requests Projects 3 Releases 1 Packages 1 Wiki Activity

- replace moment with dayjs

Browse source 
- add leaflet.css inside main-styles.css
- add map.componetn for leaflet map
- bind properties to map via map-view.component
This commit is contained in:
Arno Kaimbacher 2022-01-26 16:32:19 +01:00
commit 5fe134a650
14 changed files with 218 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/views/map-view/map-view.component.ts
View file

@ -1,53 +1,25 @@
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer } from "leaflet";
import MapComponent from "@/components/map/map.component.vue";
import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from "leaflet";
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 href="http://osm.org/copyright">OpenStreetMap</a> contributors';
// 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 href="http://osm.org/copyright">OpenStreetMap</a> contributors';
@Options({
name: "MapViewComponent",
components: {},
components: {
MapComponent,
},
})
export default class MapViewComponent extends Vue {
/**
* A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service.
*/
@Prop()
public mapId!: string;
public mapOptions: MapOptions = {
center: [48.208174, 16.373819],
zoom: 3,
zoomControl: false,
};
protected oldBaseLayer: Control.LayersObject = {};
protected map!: Map;
protected zoomControl!: Control.Zoom;
beforeMount() {
if (this.mapId === undefined || this.mapId === null) {
this.mapId = this.generateUUID();
}
}
protected initMap(): void {
this.map = new Map(this.mapId);
// this.mapService.setMap(this.mapId, this.map);
// this.onMapInitializedEvent.emit(this.mapId);
// if (this.baseMaps && this.baseMaps.size > 0) {
// this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
// } else {
// this.addBaseMap();
// }
// if (this.fitBounds) {
// this.map.fitBounds(this.fitBounds);
// }
}
private generateUUID(): string {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
}
// public onMapInitialized(newItem: string) {
// console.log(newItem);
// }
}