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