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>
<small>
<div>
<img
:alt="$t('map.legend.theUser')"
src="/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg"
width="15"
/>
{{ $t('map.legend.theUser') }}
&nbsp;&nbsp;
<img
:alt="$t('map.legend.user')"
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') }}
<span v-for="type in markers.types" :key="type.id">
<img
:alt="$t('map.legend.' + type.id)"
:src="'/img/mapbox/marker-icons/' + type.icon.legendName"
width="15"
/>
{{ $t('map.legend.' + type.id) }}
&nbsp;&nbsp;
</span>
</div>
</small>
</ds-space>
@ -115,22 +97,38 @@ export default {
groups: null,
posts: null,
markers: {
icons: [
types: [
{
id: 'marker-blue',
name: 'mapbox-marker-icon-20px-blue.png',
id: 'theUser',
icon: {
id: 'marker-orange',
legendName: 'mapbox-marker-icon-orange.svg',
mapName: 'mapbox-marker-icon-20px-orange.png',
},
},
{
id: 'marker-green',
name: 'mapbox-marker-icon-20px-green.png',
id: 'user',
icon: {
id: 'marker-green',
legendName: 'mapbox-marker-icon-green.svg',
mapName: 'mapbox-marker-icon-20px-green.png',
},
},
{
id: 'marker-orange',
name: 'mapbox-marker-icon-20px-orange.png',
id: 'group',
icon: {
id: 'marker-blue',
legendName: 'mapbox-marker-icon-blue.svg',
mapName: 'mapbox-marker-icon-20px-blue.png',
},
},
{
id: 'marker-purple',
name: 'mapbox-marker-icon-20px-purple.png',
id: 'event',
icon: {
id: 'marker-purple',
legendName: 'mapbox-marker-icon-purple.svg',
mapName: 'mapbox-marker-icon-20px-purple.png',
},
},
],
isImagesLoaded: false,
@ -339,15 +337,18 @@ export default {
},
loadMarkersIconsAndAddMarkers() {
Promise.all(
this.markers.icons.map(
this.markers.types.map(
(marker) =>
new Promise((resolve, reject) => {
// 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) => {
if (error) throw error
this.map.addImage(marker.id, image)
resolve()
})
this.map.loadImage(
'img/mapbox/marker-icons/' + marker.icon.mapName,
(error, image) => {
if (error) throw error
this.map.addImage(marker.icon.id, image)
resolve()
},
)
}),
),
).then(() => {