diff --git a/frontend/src/components/KITMap.vue b/frontend/src/components/KITMap.vue new file mode 100644 index 0000000000000000000000000000000000000000..e5bda2dda220c64db53d79e0770daf16d1a799fd --- /dev/null +++ b/frontend/src/components/KITMap.vue @@ -0,0 +1,76 @@ +<template> + <div> + <l-map + :maxBounds="[ + [48.9, 8.716667], + [49.199444, 8.123056] + ]" + style="height: 100%; width: 100%;" + :center="[center.lat, center.lng]" + :zoom="zoom" + > + <l-tile-layer + :attribution="'© ' + $t('views.nd.map.OSM_contributers')" + url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer> + <l-tile-layer :z-index="2" :options="{bounds: + [ + [49.019608, 8.365166], + [49.024113, 8.369146] + ] + }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> + <l-tile-layer :z-index="2" :options="{bounds: + [ + [49.020372, 8.427647], + [49.024853, 8.434883] + ] + }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> + <l-tile-layer :z-index="2" :options="{bounds: + [ + [49.087723, 8.419273], + [49.114386, 8.447196] + ] + }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> + <l-tile-layer :z-index="2" :options="{bounds: + [ + [49.019608, 8.365166], + [49.024113, 8.369146] + ] + }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> + <l-tile-layer :z-index="2" :options="{bounds: + [ + [49.007740, 8.399972], + [49.019963, 8.428413] + ] + }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> + <slot name="map_content"></slot> + </l-map> + </div> +</template> + +<script> +import {LMap, LTileLayer} from 'vue2-leaflet'// LTileLayer, LMarker } from 'vue2-leaflet'; +import 'leaflet/dist/leaflet.css' + +export default { + name: 'KITMap', + components: { LMap, LTileLayer }, + props: { + center: { + type: Object, + required: false, + default: () => { + return { lat: 49.011563005743405, lng: 8.413672919010981 } + } + }, + zoom: { + type: Number, + required: false, + default: undefined + } + }, +} +</script> + +<style scoped> + +</style> diff --git a/frontend/src/views/nd/Map.vue b/frontend/src/views/nd/Map.vue index f7c86e034b57cd89fe8d3b9aa29dfdedae0e7a6e..6ade4852c8899cb97e3bf4355297809b5424304c 100644 --- a/frontend/src/views/nd/Map.vue +++ b/frontend/src/views/nd/Map.vue @@ -21,61 +21,26 @@ <div class="text-center" v-else> <b-spinner style="width: 3rem; height: 3rem;" type="grow" :label="$t('system.loading') + '...'"></b-spinner> </div> - <l-map - :maxBounds="[ - [48.9, 8.716667], - [49.199444, 8.123056] - ]" + <KITMap style="height: 80vh; width: 100%" - :center="[49.011232, 8.413414]" + :center="{ lat: 49.011232, lng: 8.413414}" :zoom="17" > - <l-tile-layer - :attribution="'© ' + $t('views.nd.map.OSM_contributers')" - url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.019608, 8.365166], - [49.024113, 8.369146] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.020372, 8.427647], - [49.024853, 8.434883] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.087723, 8.419273], - [49.114386, 8.447196] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.019608, 8.365166], - [49.024113, 8.369146] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.007740, 8.399972], - [49.019963, 8.428413] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <template v-for="s in selected_types"> - <template v-if="s in lwl_inter_bldg_link_pairs"> - <template v-for="p in lwl_inter_bldg_link_pairs[s]"> - <l-polyline v-if="p[0].latlng != null && p[1].latlng != null" v-bind:key="p[0].pk" - :lat-lngs="[p[0].latlng, p[1].latlng]" :color="s.toHSL()"> - <l-tooltip>{{ s }}: {{ p[0].mdl_fq_name }} ({{ p[0].mdl_type }}) {{ p[0].name }} <-> - {{ p[1].mdl_fq_name }} ({{ p[1].mdl_type }}) {{ p[1].name }} - </l-tooltip> - </l-polyline> + <template v-slot:map_content> + <template v-for="s in selected_types"> + <template v-if="s in lwl_inter_bldg_link_pairs"> + <template v-for="p in lwl_inter_bldg_link_pairs[s]"> + <l-polyline v-if="p[0].latlng != null && p[1].latlng != null" v-bind:key="p[0].pk" + :lat-lngs="[p[0].latlng, p[1].latlng]" :color="s.toHSL()"> + <l-tooltip>{{ s }}: {{ p[0].mdl_fq_name }} ({{ p[0].mdl_type }}) {{ p[0].name }} <-> + {{ p[1].mdl_fq_name }} ({{ p[1].mdl_type }}) {{ p[1].name }} + </l-tooltip> + </l-polyline> + </template> </template> </template> </template> - </l-map> + </KITMap> {{ $t('views.nd.map.buildings_not_displayed') }} <ul> <template v-for="s in selected_types"> @@ -98,13 +63,11 @@ import PPortService from '@/api-services.gen/nd.p_port.js' import BldgService from '@/api-services.gen/nd.bldg.js' import PPortTypeGroup from '@/api-services.gen/ndcfg.p_port_type_group.js' import KITMapData from '@/api-services/kit_map_data.js' -import apiutil from '@/util/apiutil' export default { name: 'WiringMap', components: { - LMap, - LTileLayer, + KITMap, LPolyline, LTooltip }, diff --git a/frontend/src/views/nd/NetdocModule.vue b/frontend/src/views/nd/NetdocModule.vue index a5e613c1ebc4be8b35d2d33426d15d319f5df86d..93384e1b7b18b8172c8d19c384fbe02a3202cb28 100644 --- a/frontend/src/views/nd/NetdocModule.vue +++ b/frontend/src/views/nd/NetdocModule.vue @@ -51,51 +51,11 @@ </div> </b-col> <b-col cols="6"> - <l-map - v-if="can_show_map" - :maxBounds="[ - [48.9, 8.716667], - [49.199444, 8.123056] - ]" - style="height: 30vh; width: 100%;" - :center="[building.geo_location.lat, building.geo_location.lng]" - :zoom="17" - > - <l-tile-layer - :attribution="'© ' + $t('views.nd.map.OSM_contributers')" - url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.019608, 8.365166], - [49.024113, 8.369146] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.020372, 8.427647], - [49.024853, 8.434883] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.087723, 8.419273], - [49.114386, 8.447196] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.019608, 8.365166], - [49.024113, 8.369146] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-tile-layer :z-index="2" :options="{bounds: - [ - [49.007740, 8.399972], - [49.019963, 8.428413] - ] - }" url="https://www.kit.edu/campusplan/public/layers/kit/{z}/{x}/{y}.png"></l-tile-layer> - <l-marker :lat-lng="latLng(building.geo_location.lat, building.geo_location.lng)" :icon="icon"></l-marker> - </l-map> + <KITMap v-if="can_show_map" :center="building.geo_location" :zoom="17" style="height: 30vh; width: 100%;"> + <template v-slot:map_content> + <l-marker :lat-lng="latLng(building.geo_location.lat, building.geo_location.lng)" :icon="icon"></l-marker> + </template> + </KITMap> </b-col> </b-row> <template v-if="device"> @@ -229,13 +189,13 @@ import apiutil from '@/util/apiutil' import DBEditor from '@/components/db-editor/APIObjectDBEditor.vue' import CheckMark from '@/components/CheckMark.vue' import PaginatorTable from '@/components/PaginatorTable.vue' -import {LMap, LTileLayer, LMarker} from 'vue2-leaflet'// LTileLayer, LMarker } from 'vue2-leaflet'; -import 'leaflet/dist/leaflet.css' +import {LMarker} from 'vue2-leaflet'// LTileLayer, LMarker } from 'vue2-leaflet'; import {icon, latLng} from 'leaflet' +import KITMap from '@/components/KITMap.vue' export default { name: 'NetdocModule', - components: { PaginatorTable, CheckMark, EVLogViewer, NETVSIcon, Loading, DBEditor, LMap, LTileLayer, LMarker }, + components: { KITMap, PaginatorTable, CheckMark, EVLogViewer, NETVSIcon, Loading, DBEditor, LMarker }, data() { return { module_gpk: undefined,