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 map page title, even in head

Browse Source
This commit is contained in:
Wolfgang Huß 2023-01-10 10:46:54 +01:00
parent f18b1202c1
commit 67fe5864c9
3 changed files with 45 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/locales/de.json
View File

@ -523,6 +523,7 @@
"title": "{APPLICATION_NAME} befindet sich in der Wartung" "title": "{APPLICATION_NAME} befindet sich in der Wartung"
}, },
"map": { "map": {
"pageTitle": "Karte",
"styles": { "styles": {
"dark": "Dunkel", "dark": "Dunkel",
"outdoors": "Landschaft", "outdoors": "Landschaft",

1
webapp/locales/en.json
View File

@ -523,6 +523,7 @@
"title": "{APPLICATION_NAME} is under maintenance" "title": "{APPLICATION_NAME} is under maintenance"
}, },
"map": { "map": {
"pageTitle": "Map",
"styles": { "styles": {
"dark": "Dark", "dark": "Dark",
"outdoors": "Outdoors", "outdoors": "Outdoors",

75
webapp/pages/map.vue
View File

@ -1,36 +1,42 @@
<!-- Example Reference: https://codesandbox.io/s/v-mapbox-with-nuxt-lbrt6?file=/pages/index.vue --> <!-- Example Reference: https://codesandbox.io/s/v-mapbox-with-nuxt-lbrt6?file=/pages/index.vue -->
<template> <template>
<client-only> <div>
<mgl-map <ds-space margin="small">
:mapbox-gl="mapboxgl" <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
:access-token="mapOptions.accessToken" </ds-space>
:map-style.sync="mapOptions.style" <ds-space margin="large" />
:center="mapOptions.center" <client-only>
:zoom="mapOptions.zoom" <mgl-map
:max-zoom="mapOptions.maxZoom" :mapbox-gl="mapboxgl"
:cross-source-collisions="false" :access-token="mapOptions.accessToken"
:fail-if-major-performance-caveat="false" :map-style.sync="mapOptions.style"
:preserve-drawing-buffer="true" :center="mapOptions.center"
:hash="false" :zoom="mapOptions.zoom"
:min-pitch="0" :max-zoom="mapOptions.maxZoom"
:max-pitch="60" :cross-source-collisions="false"
@load="onMapLoad" :fail-if-major-performance-caveat="false"
> :preserve-drawing-buffer="true"
<!-- <MglScaleControl /> --> :hash="false"
<ds-button :min-pitch="0"
class="style-button" :max-pitch="60"
v-for="style in styles.available" @load="onMapLoad"
:key="style.title"
filled
size="small"
:primary="mapOptions.style === style.url ? true : false"
@click="setStyle(style.url)"
> >
{{ style.title }} <!-- <MglScaleControl /> -->
</ds-button> <ds-button
<MglMarker :coordinates="[10.452764, 51.165707]" color="blue" /> class="style-button"
</mgl-map> v-for="style in styles.available"
</client-only> :key="style.title"
filled
size="small"
:primary="mapOptions.style === style.url ? true : false"
@click="setStyle(style.url)"
>
{{ style.title }}
</ds-button>
<MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
</mgl-map>
</client-only>
</div>
</template> </template>
<script> <script>
@ -39,6 +45,11 @@ import { objectValuesToArray } from '../utils/utils'
export default { export default {
name: 'Map', name: 'Map',
head() {
return {
title: this.$t('map.pageTitle'),
}
},
data() { data() {
return { return {
mapboxgl, mapboxgl,
@ -97,8 +108,8 @@ 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 'mapbox-gl/dist/mapbox-gl.css';
@import "v-mapbox/dist/v-mapbox.css"; @import 'v-mapbox/dist/v-mapbox.css';
.mgl-map-wrapper { .mgl-map-wrapper {
height: 70vh; height: 70vh;