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

Simplify the map legend

Browse Source
This commit is contained in:
Wolfgang Huß 2023-07-11 12:14:21 +02:00
parent 6c32eb918d
commit 11afa1f6d5
1 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
webapp/pages/map.vue
View File

@ -5,33 +5,15 @@
<ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading> <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
<small> <small>
<div> <div>
<img <span v-for="type in markers.types" :key="type.id">
:alt="$t('map.legend.theUser')" <img
src="/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg" :alt="$t('map.legend.' + type.id)"
width="15" :src="'/img/mapbox/marker-icons/' + type.icon.legendName"
/> width="15"
{{ $t('map.legend.theUser') }} />
&nbsp;&nbsp; {{ $t('map.legend.' + type.id) }}
<img &nbsp;&nbsp;
:alt="$t('map.legend.user')" </span>
src="/img/mapbox/marker-icons/mapbox-marker-icon-green.svg"
width="15"
/>
{{ $t('map.legend.user') }}
&nbsp;&nbsp;
<img
:alt="$t('map.legend.group')"
src="/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg"
width="15"
/>
{{ $t('map.legend.group') }}
&nbsp;&nbsp;
<img
:alt="$t('map.legend.event')"
src="/img/mapbox/marker-icons/mapbox-marker-icon-purple.svg"
width="15"
/>
{{ $t('map.legend.event') }}
</div> </div>
</small> </small>
</ds-space> </ds-space>
@ -115,22 +97,38 @@ export default {
groups: null, groups: null,
posts: null, posts: null,
markers: { markers: {
icons: [ types: [
{ {
id: 'marker-blue', id: 'theUser',
name: 'mapbox-marker-icon-20px-blue.png', icon: {
id: 'marker-orange',
legendName: 'mapbox-marker-icon-orange.svg',
mapName: 'mapbox-marker-icon-20px-orange.png',
},
}, },
{ {
id: 'marker-green', id: 'user',
name: 'mapbox-marker-icon-20px-green.png', icon: {
id: 'marker-green',
legendName: 'mapbox-marker-icon-green.svg',
mapName: 'mapbox-marker-icon-20px-green.png',
},
}, },
{ {
id: 'marker-orange', id: 'group',
name: 'mapbox-marker-icon-20px-orange.png', icon: {
id: 'marker-blue',
legendName: 'mapbox-marker-icon-blue.svg',
mapName: 'mapbox-marker-icon-20px-blue.png',
},
}, },
{ {
id: 'marker-purple', id: 'event',
name: 'mapbox-marker-icon-20px-purple.png', icon: {
id: 'marker-purple',
legendName: 'mapbox-marker-icon-purple.svg',
mapName: 'mapbox-marker-icon-20px-purple.png',
},
}, },
], ],
isImagesLoaded: false, isImagesLoaded: false,
@ -339,15 +337,18 @@ export default {
}, },
loadMarkersIconsAndAddMarkers() { loadMarkersIconsAndAddMarkers() {
Promise.all( Promise.all(
this.markers.icons.map( this.markers.types.map(
(marker) => (marker) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
// our images have to be in the 'static/img/*' folder otherwise they are not reachable via URL // our images have to be in the 'static/img/*' folder otherwise they are not reachable via URL
this.map.loadImage('img/mapbox/marker-icons/' + marker.name, (error, image) => { this.map.loadImage(
if (error) throw error 'img/mapbox/marker-icons/' + marker.icon.mapName,
this.map.addImage(marker.id, image) (error, image) => {
resolve() if (error) throw error
}) this.map.addImage(marker.icon.id, image)
resolve()
},
)
}), }),
), ),
).then(() => { ).then(() => {