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

- add webgis: overview of all oai datasets via mocking service

Browse source
This commit is contained in:
Arno Kaimbacher 2022-01-27 17:17:40 +01:00
parent 5fe134a650
commit 745c3e1349
8 changed files with 2142 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/views/map-view/map-view.component.vue
View file

@ -1,9 +1,37 @@
<template>
<div class="container main">
<div class="canvas-area is-8 column">
<h1>TETHYS SERVICES</h1>
<div id="div-map">
<MapComponent v-bind:mapId="'map'" v-bind:mapOptions="mapOptions"> </MapComponent>
<div class="container map main">
<!-- <header class="">
<span id="heading" class="fs-4">Map</span>
</header
<br />
<h1>TETHYS SERVICES</h1>
-->
<div id="div-map">
<MapComponent v-bind:mapId="'map'" v-bind:mapOptions="mapOptions"> </MapComponent>
</div>
<div class="columns is-tablet">
<div class="column is-half">
<h2>Map views</h2>
<p>Ready to beyond the starter map? Check out these map views that you can quickly access.</p>
<ul class="icon-list">
<!-- <li><a href="javascript:window.open(window.location.href.split('?')[0],'_self')">alle Datenpublikationen</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=gk50','_self')">GK50 Kartendaten</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=geofast','_self')">Geofast Datensätze</a></li> -->
<li><a href="javascript:window.open(window.location.href.split('?')[0],'_self')">alle Datenpublikationen</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=gk50','_self')">GK50 Kartendaten</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=geofast','_self')">Geofast Datensätze</a></li>
</ul>
</div>
<div class="column is-half">
<h2>Catalog views</h2>
<p>Read more detailed documentation on using the Tethys Research Data Repository.</p>
<ul class="icon-list">
<li><a href="https://tethys.at">GK50 Kartendaten</a></li>
<li><a href="https://tethys.at">Geofast Datenpublikationen</a></li>
<li><a href="https://tethys.at">Rohstoff Geologie</a></li>
</ul>
</div>
</div>
</div>
@ -15,43 +43,55 @@ export default MapViewComponent;
</script>
<style lang="scss">
.section {
font-size: 0.8rem;
padding: 0;
.map .h2,
.map h2 {
font-size: 2rem;
}
.main {
// padding-top: 65px;
// flex-wrap: wrap;
// justify-content: space-around;
// .section {
// font-size: 0.8rem;
// padding: 0;
// }
position: absolute;
overflow: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
.fs-4 {
font-size: 1.5rem !important;
}
.canvas-area {
/* flex: 2;
.icon-list {
padding-left: 0;
list-style: none;
}
.icon-list li::before {
display: block;
flex-shrink: 0;
width: 1.5em;
height: 1.5em;
margin-right: 0.5rem;
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E")
no-repeat center center / 100% auto;
}
.icon-list li {
display: flex;
align-items: center;
justify-content: center; */
height: 100%;
align-items: flex-start;
margin-bottom: 0.25rem;
}
*,
::after,
::before {
box-sizing: border-box;
}
#div-map {
position: relative;
height: 500px;
width: 500px;
height: 400px;
width: 100%;
}
.mapDesktop {
overflow: hidden;
position: absolute;
bottom: 30px;
top: 30px;
left: 30px;
right: 30px;
}
// .mapDesktop {
// overflow: hidden;
// position: absolute;
// bottom: 30px;
// top: 30px;
// left: 30px;
// right: 30px;
// }
</style>