2020-08-12 11:16:16 +00:00
< template >
2021-03-05 20:04:52 +00:00
< div : class = "{ 'mapboxgl-ctrl-group': true, 'mapboxgl-ctrl': true, 'mapbox-gl-map-options-container': true }" >
2021-03-31 12:05:49 +00:00
< b -tooltip class = "info-tooltip" type = "is-info" position = "is-right" :active ="!infoTooltipShown" always animated multilined label = "Webcams and more available – open map options to see!" >
< button : class = "{ 'mapboxgl-ctrl-icon': true, 'mapbox-gl-map-options': true }" type = "button" title = "Map options" @click ="openCloseMapOptions" / >
< / b - t o o l t i p >
2021-03-05 20:04:52 +00:00
< div v-if ="open" class="map-options-container" >
< div class = "map-option" >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-05 20:04:52 +00:00
< b -select v-model ="mapType" size="is-small" >
< option v-for ="(desc, type) in mapTypes" :key="type" :value ="type" > {{ desc }} < / option >
< / b - s e l e c t >
< / b - f i e l d >
< / div >
< div class = "map-option" >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-05 20:04:52 +00:00
< b -checkbox v-model ="mapOptions.regions" size="is-small" @input="setMapOption('regions', $event)" > Regions < / b -checkbox >
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field v -if = " mapType ! = = ' swisstopo_raster ' " grouped >
2021-03-05 20:04:52 +00:00
< b -checkbox v-model ="mapOptions.contours" size="is-small" @input="setMapOption('contours', $event)" > Contour lines < / b -checkbox >
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field v -if = " mapType ! = = ' swisstopo_raster ' " grouped >
2021-03-05 20:04:52 +00:00
< b -checkbox v-model ="mapOptions.hillshading" size="is-small" @input="setMapOption('hillshading', $event)" > Hillshading < / b -checkbox >
< / b - f i e l d >
2021-03-06 18:37:31 +00:00
< / div >
< div class = "map-option" >
2021-03-06 20:48:15 +00:00
< template v-if ="mapType === 'swisstopo' || mapType === 'swisstopo_raster'" >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-06 18:55:22 +00:00
< b -checkbox v-model ="mapOptions.difficulty" size="is-small" @input="setMapOption('difficulty', $event)" > Wanderwege < / b -checkbox >
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-06 18:55:22 +00:00
< b -checkbox v-model ="mapOptions.skiing" size="is-small" @input="setMapOption('skiing', $event)" > Skirouten < / b -checkbox >
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-06 18:55:22 +00:00
< b -checkbox v-model ="mapOptions.snowshoe" size="is-small" @input="setMapOption('snowshoe', $event)" > Schneeschuhrouten < / b -checkbox >
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-06 19:53:12 +00:00
< b -checkbox v-model ="mapOptions.slope_classes" size="is-small" @input="setMapOption('slope_classes', $event)" > Hangneigungsklassen ü ber 30 ° < / b -checkbox >
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-06 18:55:22 +00:00
< b -checkbox v-model ="mapOptions.wildlife" size="is-small" @input="setMapOption('wildlife', $event)" > Wildruhezonen und Schutzgebiete < / b -checkbox >
< / b - f i e l d >
< / template >
< template v-else >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-06 18:55:22 +00:00
< b -checkbox v-model ="mapOptions.difficulty" size="is-small" @input="setMapOption('difficulty', $event)" > Hiking difficulty < / b -checkbox >
< / b - f i e l d >
< / template >
2021-03-06 18:37:31 +00:00
< / div >
< div class = "map-option" >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-05 20:04:52 +00:00
< b -checkbox v-model ="mapOptions.spots" size="is-small" @input="setMapOption('spots', $event)" > Recent spots < / b -checkbox >
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-05 20:04:52 +00:00
< b -checkbox v-model ="mapOptions.inactive" size="is-small" @input="setMapOption('inactive', $event)" > Inactive summits < / b -checkbox >
< / b - f i e l d >
< / div >
2021-03-31 12:05:49 +00:00
< div class = "map-option" >
2021-03-31 19:51:19 +00:00
< b -field grouped >
2021-03-31 13:37:19 +00:00
< b -checkbox v-model ="mapOptions.webcams" size="is-small" @input="setMapOption('webcams', $event)" > < b -icon pack = "fas" icon = "camera-home" size = "is-small" / > Webcams < / b - c h e c k b o x >
2021-03-31 12:05:49 +00:00
< / b - f i e l d >
2021-03-31 19:51:19 +00:00
< b -field grouped >
< b -radio v-model ="mapOptions.webcamsType" size="is-small" native-value="daylight" :disabled="!mapOptions.webcams" @input="setMapOption('webcamsType', $event)" > Daylight < / b -radio >
< b -radio v-model ="mapOptions.webcamsType" size="is-small" native-value="current" :disabled="!mapOptions.webcams" @input="setMapOption('webcamsType', $event)" > Current < / b -radio >
< / b - f i e l d >
2021-03-31 12:05:49 +00:00
< / div >
2021-03-05 20:04:52 +00:00
< / div >
2020-08-12 11:16:16 +00:00
< / div >
< / template >
< script >
import moment from 'moment'
import mapstyle from '../mixins/mapstyle.js'
2021-03-31 12:05:49 +00:00
import prefs from '../mixins/prefs.js'
2020-08-12 11:16:16 +00:00
const RECENT _SPOT _AGE = 30 * 60 * 1000
export default {
name : 'MapOptionsControl' ,
inject : [ 'map' ] ,
2021-03-31 12:05:49 +00:00
mixins : [ mapstyle , prefs ] ,
prefs : {
key : 'mapOptionsControl' ,
props : [ 'infoTooltipShown' ]
} ,
2020-08-12 11:16:16 +00:00
data ( ) {
return {
2021-03-31 12:05:49 +00:00
open : false ,
infoTooltipShown : false
2020-08-12 11:16:16 +00:00
}
} ,
2021-03-06 19:58:41 +00:00
mounted ( ) {
if ( sessionStorage . getItem ( 'mapReloaded' ) ) {
sessionStorage . removeItem ( 'mapReloaded' )
this . open = true
}
} ,
2020-08-12 11:16:16 +00:00
computed : {
recentSpots ( ) {
let now = moment . utc ( )
return this . $store . state . spots . filter ( spot => {
return ( now . diff ( spot . timeStamp ) < RECENT _SPOT _AGE )
} ) . map ( spot => {
return spot . summit . code
} )
} ,
2021-03-05 20:04:52 +00:00
mapType : {
get ( ) {
return this . $store . state . mapType
2020-08-12 11:16:16 +00:00
} ,
2021-03-05 20:04:52 +00:00
set ( newMapType ) {
this . $store . commit ( 'setMapType' , newMapType )
2020-08-12 11:16:16 +00:00
}
} ,
2021-03-05 20:04:52 +00:00
mapOptions ( ) {
return this . $store . state . mapOptions
}
} ,
watch : {
recentSpots : {
2020-08-12 11:16:16 +00:00
handler ( ) {
2021-03-05 20:04:52 +00:00
this . updateRecentSpots ( )
2020-08-12 11:16:16 +00:00
} ,
immediate : true
} ,
2021-03-05 20:04:52 +00:00
mapOptions : {
2020-08-12 11:16:16 +00:00
handler ( ) {
this . updateRecentSpots ( )
} ,
2021-03-05 20:04:52 +00:00
deep : true
2021-03-31 12:05:49 +00:00
} ,
open ( ) {
if ( this . open ) {
this . infoTooltipShown = true
}
2020-08-12 11:16:16 +00:00
}
} ,
methods : {
showInactive ( ) {
2021-03-05 20:04:52 +00:00
this . $store . commit ( 'setMapOption' , { option : 'inactive' , value : true } )
} ,
close ( ) {
this . open = false
2020-08-12 11:16:16 +00:00
} ,
updateRecentSpots ( ) {
2021-03-05 20:04:52 +00:00
if ( this . mapOptions . spots ) {
2020-08-12 11:16:16 +00:00
this . map . setFilter ( 'summits_highlight' , [ 'in' , 'code' , ... this . recentSpots ] )
} else {
this . map . setFilter ( 'summits_highlight' , [ 'in' , 'code' ] )
}
} ,
spotsShown ( ) {
2021-03-07 11:24:54 +00:00
return this . mapOptions . spots
2021-03-05 20:04:52 +00:00
} ,
openCloseMapOptions ( ) {
this . open = ! this . open
} ,
setMapOption ( option , value ) {
this . $store . commit ( 'setMapOption' , { option , value } )
2020-08-12 11:16:16 +00:00
}
}
}
< / script >
< style scoped >
2021-03-05 20:04:52 +00:00
. mapbox - gl - map - options {
background - image : url ( "data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cpath d='M16.847 2.863c-.049 0-.1.009-.15.029l-4.28 1.582-4.33-1.529a1.602 1.602 0 00-1.008-.003L3.257 4.271a.808.808 0 00-.507.748v8.718a.404.404 0 00.553.374l4.28-1.582 4.33 1.528c.327.109.681.11 1.008.004l3.822-1.33a.807.807 0 00.507-.747V3.266a.403.403 0 00-.403-.403zm-8.458 1.47l3.222 1.138v7.198l-3.222-1.137V4.333zm-4.43 8.247V5.306l3.222-1.121v7.204l-.016.006-3.206 1.185zm12.082-.884l-3.222 1.121V5.613l.016-.006 3.206-1.185v7.274zM16.975 15.625H7.7v-.412a.276.276 0 00-.275-.275h-.55a.275.275 0 00-.275.275v.412H3.025a.276.276 0 00-.275.275v.275c0 .151.124.275.275.275H6.6v.412c0 .152.123.275.275.275h.55a.275.275 0 00.275-.275v-.412h9.275a.276.276 0 00.275-.275V15.9a.276.276 0 00-.275-.275z' /%3E%3C/svg%3E" ) ;
2020-08-12 11:16:16 +00:00
}
2021-03-05 20:04:52 +00:00
. map - option {
margin : 0.3 em 0 0.3 em 0.5 em ;
border : 1 px solid # e0e0e0 ;
border - radius : 6 px ;
padding : 0.4 em ;
background - color : # eee ;
font - size : 0.8 rem ;
2020-08-12 11:16:16 +00:00
}
2021-03-05 20:04:52 +00:00
. mapbox - gl - map - options - container . map - options - container {
display : none ;
padding : 0 0.5 em 0.5 em 0 ;
display : inline - block ;
2020-08-12 11:16:16 +00:00
}
2021-03-05 20:04:52 +00:00
. mapbox - gl - map - options - container button {
display : inline - block ;
vertical - align : top ;
2020-08-12 11:16:16 +00:00
}
2021-03-31 12:05:49 +00:00
. icon {
vertical - align : bottom ;
}
. b - tooltip {
vertical - align : bottom ;
}
2020-08-12 11:16:16 +00:00
< / style >