This commit is contained in:
Wolfgang Huß 2023-01-10 10:35:12 +01:00
parent e61e82d72b
commit f18b1202c1

View File

@ -17,21 +17,18 @@
@load="onMapLoad" @load="onMapLoad"
> >
<!-- <MglScaleControl /> --> <!-- <MglScaleControl /> -->
<!-- TODO: Move into mapboxgl-control-container --> <ds-button
<div class="map-controls"> class="style-button"
<ds-button v-for="style in styles.available"
class="style-button" :key="style.title"
v-for="style in styles.available" filled
:key="style.title" size="small"
filled :primary="mapOptions.style === style.url ? true : false"
size="small" @click="setStyle(style.url)"
:primary="mapOptions.style === style.url ? true : false" >
@click="setStyle(style.url)" {{ style.title }}
> </ds-button>
{{ style.title }} <MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
</ds-button>
<MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
</div>
</mgl-map> </mgl-map>
</client-only> </client-only>
</template> </template>
@ -100,8 +97,6 @@ export default {
<style lang="scss"> <style lang="scss">
// description: https: //github.com/geospoc/v-mapbox/tree/v1.11.2/docs // description: https: //github.com/geospoc/v-mapbox/tree/v1.11.2/docs
// code example: https: //codesandbox.io/embed/v-mapbox-map-demo-k1l1n?autoresize=1&fontsize=14&hidenavigation=1&theme=dark // code example: https: //codesandbox.io/embed/v-mapbox-map-demo-k1l1n?autoresize=1&fontsize=14&hidenavigation=1&theme=dark
// @import "~mapbox-gl/dist/mapbox-gl.css";
// @import "~v-mapbox/dist/v-mapbox.css";
@import "mapbox-gl/dist/mapbox-gl.css"; @import "mapbox-gl/dist/mapbox-gl.css";
@import "v-mapbox/dist/v-mapbox.css"; @import "v-mapbox/dist/v-mapbox.css";
@ -112,18 +107,4 @@ export default {
margin-left: 5px; margin-left: 5px;
margin-top: 5px; margin-top: 5px;
} }
// .map-controls {
// position: absolute;
// top: 100px;
// padding-left: 3px;
// }
// .map-controls button {
// margin-left: 5px;
// }
// .mapboxgl-control-container {
// margin-top: -45px;
// }
// .mapboxgl-control-container a {
// color: black;
// }
</style> </style>