ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add location marker and for this fix or use 'mapbox-gl' and 'v-mpbox' CSS

Browse Source
This commit is contained in:
Wolfgang Huß 2023-01-10 10:18:11 +01:00
parent c3e01ac8e1
commit e61e82d72b
1 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
webapp/pages/map.vue
View File

@ -16,9 +16,11 @@
:max-pitch="60"
@load="onMapLoad"
>
<!-- <MglScaleControl /> -->
<!-- TODO: Move into mapboxgl-control-container -->
<div class="map-controls">
<ds-button
class="style-button"
v-for="style in styles.available"
:key="style.title"
filled
@ -28,6 +30,7 @@
>
{{ style.title }}
</ds-button>
<MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
</div>
</mgl-map>
</client-only>
@ -76,7 +79,7 @@ export default {
return {
accessToken: this.$env.MAPBOX_TOKEN,
style: !this.activeStyle ? this.availableStyles.outdoors.url : this.activeStyle,
center: [10.452764, 51.165707], // center of Germany
center: [10.452764, 51.165707], // center of Germany: https://www.gpskoordinaten.de/karte/land/DE
zoom: 4,
maxZoom: 22,
}
@ -95,21 +98,32 @@ export default {
</script>
<style lang="scss">
.mapboxgl-canvas {
// 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
// @import "~mapbox-gl/dist/mapbox-gl.css";
// @import "~v-mapbox/dist/v-mapbox.css";
@import "mapbox-gl/dist/mapbox-gl.css";
@import "v-mapbox/dist/v-mapbox.css";
.mgl-map-wrapper {
height: 70vh;
}
.map-controls {
position: absolute;
top: 100px;
padding-left: 3px;
}
.map-controls button {
.style-button {
margin-left: 5px;
margin-top: 5px;
}
.mapboxgl-control-container {
margin-top: -45px;
}
.mapboxgl-control-container a {
color: black;
}
// .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>