@visitscotland/component-library
Version:
VisitScotland Component Library
1 lines • 16.3 kB
JavaScript
(self.webpackChunk_visitscotland_component_library=self.webpackChunk_visitscotland_component_library||[]).push([[4079],{3878:function(t,e,o){"use strict";o.d(e,{A:function(){return i.A}});var i=o(70146)},21489:function(t,e,o){"use strict";var i=o(85072),a=o.n(i),s=o(97825),n=o.n(s),r=o(77659),p=o.n(r),u=o(55056),l=o.n(u),d=o(10540),c=o.n(d),m=o(41113),h=o.n(m),g=o(24027),f=o.n(g),y={};y.styleTagTransform=h(),y.setAttributes=l(),y.insert=p().bind(null,"head"),y.domAPI=n(),y.insertStyleElement=c(),a()(f(),y),f()&&f().locals&&f().locals},24027:function(){},25159:function(t,e,o){"use strict";o.d(e,{X:function(){return l}});var i=o(20641),a=o(90033),s={class:"vs-map","data-test":"vs-map"},n={class:"vs-map__message-box"},r={class:"vs-map__message-text"},p={ref:"mapboxOuter",class:"vs-map__map-outer"},u=["id"];function l(t,e,o,l,d,c){var m=(0,i.g2)("VsLoading"),h=(0,i.g2)("VsWarning");return(0,i.uX)(),(0,i.CE)("div",s,[d.showMapMessage?((0,i.uX)(),(0,i.CE)("div",{key:0,class:(0,a.normalizeClass)(["vs-map__message",d.showZoomMessage?"":"vs-map__message--with-overlay"]),"data-test":"vs-map__message"},[(0,i.Lk)("div",n,[d.isLoading?((0,i.uX)(),(0,i.Wv)(m,{key:0,class:"vs-map__loading"})):(0,i.Q3)("",!0),(0,i.Lk)("p",r,[d.isLoading?(0,i.RG)(t.$slots,"map-loading-text",{key:0}):o.showInfoMessage?(0,i.RG)(t.$slots,"info-message",{key:1}):"too-close"===d.showZoomMessage?(0,i.RG)(t.$slots,"zoom-too-close",{key:2}):"too-far"===d.showZoomMessage?(0,i.RG)(t.$slots,"zoom-too-far",{key:3}):(0,i.Q3)("",!0)])])],2)):(0,i.Q3)("",!0),(0,i.Lk)("div",p,[(0,i.Lk)("div",{id:o.mapId,class:"vs-map__map",ref:"mapbox"},null,8,u)],512),(0,i.bF)(h,{class:"vs-map__no-js"},{default:(0,i.k6)((function(){return[(0,i.RG)(t.$slots,"no-js")]})),_:3})])}},42634:function(){},42904:function(t,e){"use strict";var o=null;"undefined"!=typeof window&&(o=document.currentScript);var i={options:{div:"map",logo:"os-logo-maps",statement:"Contains OS data © Crown copyright and database rights YYYY",prefix:"",suffix:""},init:function(t){if("undefined"!=typeof window){o&&(this.options.div=o.getAttribute("data-div")||this.options.div,this.options.logo=o.getAttribute("data-logo")||this.options.logo,this.options.statement=o.getAttribute("data-statement")||this.options.statement,this.options.prefix=o.getAttribute("data-prefix")||this.options.prefix,this.options.suffix=o.getAttribute("data-suffix")||this.options.suffix),t=void 0!==t?t:{},Object.assign(this.options,t);var e=document.getElementById(this.options.div),i="os-api-branding logo";"os-logo-maps-white"===this.options.logo&&(i="os-api-branding logo white");var a=this.options.statement;a=a.replace("YYYY",(new Date).getFullYear()),""!==this.options.prefix&&(a="".concat(this.options.prefix,"<span>|</span>").concat(a)),""!==this.options.suffix&&(a="".concat(a,"<span>|</span>").concat(this.options.suffix)),document.querySelectorAll("#".concat(this.options.div," .os-api-branding")).forEach((function(t){return t.remove()}));var s=document.createElement("div");s.className=i,e.appendChild(s);var n=document.createElement("div");n.className="os-api-branding copyright",n.innerHTML=a,e.appendChild(n)}}};e.A=i},70146:function(t,e,o){"use strict";var i=o(64467),a=o(79122),s=o(35025),n=o(42904),r=o(20641),p=o(53751),u=o(10810),l=o(79920),d=o(60842),c=o.n(d),m=o(25879),h=o.n(m),g=o(30681);function f(t,e){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),o.push.apply(o,i)}return o}var y=null;e.A={name:"VsMap",status:"prototype",release:"0.0.1",components:{VsWarning:a.default,VsLoading:s.default},props:{overviewMapLatitude:{type:String,default:"57.81"},overviewMapLongitude:{type:String,default:"-5.51748"},overviewMapZoom:{type:String,default:"5"},mapId:{type:String,required:!0},isVisible:{type:Boolean,required:!0},places:{type:Array,required:!0},filters:{type:Array,default:function(){return[]}},fitToMarkers:{type:Boolean,default:!1},showPolygons:{type:Boolean,default:!1},selectedItem:{type:Object,default:null},boundsData:{type:Object,default:function(){}},showInfoMessage:{type:Boolean,default:null},resetZoom:{type:Boolean,default:!1},showMarkerPopups:{type:Boolean,default:!0},loadBrandingImmediately:{type:Boolean,default:!1}},emits:["map-ready","setCategory","showDetail","zoom-reset"],setup:function(){y=(0,l.A)()},data:function(){return{isDesktop:!1,geojsonData:{type:"FeatureCollection",features:[]},polygons:{type:"FeatureCollection",features:[]},multiPolygons:[],mapbox:{map:null,bounds:null,rotation:0,config:{container:this.$refs.mapbox,style:"https://api.visitscotland.com/maps/vector/v1/vts/resources/styles",pitchWithRotate:!1,dragRotate:!1}},markers:[],popup:null,hoveredStateId:null,activeStateId:null,showMapMessage:!0,isLoading:!0,showZoomMessage:null}},computed:function(t){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?f(Object(o),!0).forEach((function(e){(0,i.A)(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):f(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}({getZoom:function(){return this.mapbox.map?this.mapbox.map.getZoom():null}},(0,u.aH)(l.A,{activeMarkerPostion:function(t){return this.mapbox.map?t.activeMarkerPos:null},highlightedPlace:function(t){return this.mapbox.map?t.getHoveredStop(this.mapId):null},activePlace:function(t){return this.mapbox.map?t.getActivePlace(this.mapId):null}})),watch:{isVisible:function(t){var e=this;t&&null!==this.mapbox.map&&setTimeout((function(){e.mapbox.map.resize()}),20)},places:{handler:function(){this.geojsonData.features=[],this.initialiseMapFeatures(),this.initialiseMapMarkers()},deep:!0},showPolygons:function(t){!0===t?this.showMapPolygons():this.hideMapPolygons()},highlightedPlace:function(t){t&&(0===t.length?this.removeHoveredPolygon():"Point"!==t.geometry.type&&this.addHoveredPolygon(t))},selectedItem:function(t){t&&"Point"!==t.geometry.type&&this.polygons.features.filter((function(e){return e.properties.id===t.properties.id})).length>0&&this.addActivePolygon(t),t||this.removeActivePolygon()},activeMarkerPostion:function(t){this.checkPointIsVisible(t)||this.centreMapOnPoint(t)},showInfoMessage:function(t){this.showMapMessage=!!t},resetZoom:function(t){t&&(this.mapbox.map.fitBounds(this.calculateBoundingBox()),this.$emit("zoom-reset"),this.showInfoMessage&&(this.showMapMessage=!0))}},mounted:function(){var t=this;y.addMapInstance({id:this.mapId,filters:this.filters,places:this.places,activePins:this.places}),this.lazyloadMapComponent(),this.isTablet=window.innerWidth>=768,window.addEventListener("resize",this.onResize),this.loadBrandingImmediately?n.A.init({div:this.mapId}):window.addEventListener("DOMContentLoaded",(function(){n.A.init({div:t.mapId})}))},methods:{addMap:function(){var t=this,e=this.calculateBoundingBox();this.mapbox.config.container=this.$refs.mapbox,this.mapbox.map=new(c().Map)({container:this.$refs.mapbox,style:"https://api.visitscotland.com/maps/vector/v1/vts/resources/styles",bounds:e,maxZoom:18,minZoom:4,trackResize:!0}),this.mapbox.map.scrollZoom.disable(),this.mapbox.map.on("rotate",(function(){t.mapbox.rotation=t.mapbox.map.transform.angle})),this.mapbox.map.resize(),this.mapbox.map.on("load",(function(){t.addMapPolygons(),t.showMapMessage=!1,t.isLoading=!1,t.$emit("map-ready",!0),t.mapbox.map.boxZoom.enable()})),this.mapbox.map.on("zoomend",(function(){4===t.mapbox.map.getZoom()?(t.showZoomMessage="too-far",t.showMapMessage=!0):18===t.mapbox.map.getZoom()?(t.showZoomMessage="too-close",t.showMapMessage=!0):t.showInfoMessage||(t.showZoomMessage=null,t.showMapMessage=!1)}))},addMapControls:function(){var t=new(c().NavigationControl);this.mapbox.map.addControl(t,"top-right"),this.mapbox.map.addControl(new(c().FullscreenControl))},initialiseMapFeatures:function(){var t=this;this.places.map((function(e){if(void 0!==e.geometry){var o=t.getCoordinateArray(e);return t.getMapFeatures(e,o)}return!(!e.latitude||!e.longitude)&&t.getItineraryMapFeatures(e)}))},getCoordinateArray:function(t){return"Polygon"===t.geometry.type?[t.geometry.coordinates[0]]:"MultiPolygon"===t.geometry.type?[t.geometry.coordinates]:[t.geometry.coordinates[0],t.geometry.coordinates[1]]},getMapFeatures:function(t,e){return this.geojsonData.features.push({type:"Feature",geometry:{type:t.geometry.type,coordinates:e},properties:{title:t.properties.title,imageSrc:t.image,type:void 0!==t.properties.category?t.properties.category.id:"",id:t.properties.id},id:t.properties.id})},getItineraryMapFeatures:function(t){var e=this._uid;return this.geojsonData.features.push({type:"Feature",geometry:{type:"Point",coordinates:[parseFloat(t.longitude),parseFloat(t.latitude)]},properties:{title:t.title,imageSrc:t.imageSrc,type:"itinerary-stop",stopCount:t.stopCount,id:e},id:e})},initialiseMapMarkers:function(){var t=this,e=0;this.initialLoad&&(e=1e3),setTimeout((function(){if(null!==t.markers){for(var e=t.markers.length-1;e>=0;e--)t.markers[e].remove();t.markers=[]}t.geojsonData.features.forEach((function(e){"Point"===e.geometry.type&&t.createMapMarker(e)}))}),e)},createMapMarker:function(t){var e=this,o=(0,r.h)(g.default,{feature:t,mapId:this.mapId,hasPopups:this.showMarkerPopups,onShowDetail:function(t){e.$emit("showDetail",t)},onSetCategory:function(t){e.$emit("setCategory",t)}}),i=document.createElement("div");this.$refs.mapboxOuter.appendChild(i),(0,p.render)(o,i),t&&this.showMarkerPopups&&this.addMapPopup(t);var a=new(c().Marker)(i.children[0]).setLngLat(t.geometry.coordinates).setPopup(this.popup).addTo(this.mapbox.map);this.setupMarkerListeners(a),this.markers.push(a),i.remove()},hideMapPolygons:function(){this.mapbox.map.setLayoutProperty("regionFills","visibility","none"),this.mapbox.map.setLayoutProperty("regionBorders","visibility","none")},showMapPolygons:function(){this.mapbox.map.setLayoutProperty("regionFills","visibility","visible"),this.mapbox.map.setLayoutProperty("regionBorders","visibility","visible")},addMapPolygons:function(){var t=this;this.geojsonData.features.forEach((function(e){"Polygon"===e.geometry.type?t.polygons.features.includes(e.properties.id)||t.polygons.features.push(e):"MultiPolygon"===e.geometry.type&&(t.polygons.features.includes(e.properties.id)||t.multiPolygons.push(e))})),this.multiPolygons.forEach((function(e){var o=e.properties;e.geometry.coordinates[0].forEach((function(e){t.polygons.features.push({geometry:{type:"Polygon",coordinates:e},id:o.id,properties:{id:o.id,imageSrc:o.imageSrc,title:o.title,type:o.type},type:"Feature"})}))})),this.polygons.features.length>0&&(this.mapbox.map.addSource("regions",{type:"geojson",data:this.polygons,promoteId:"id"}),this.mapbox.map.addLayer({id:"regionFills",type:"fill",source:"regions",layout:{},paint:{"fill-color":["case",["==",["feature-state","interaction-state"],"hover"],"rgba(168,48,140,0.5)",["==",["feature-state","interaction-state"],"active"],"rgba(168,48,140,0.5)","rgba(25,200,197,0.6)"],"fill-opacity":.8}}),this.mapbox.map.addLayer({id:"regionBorders",type:"line",source:"regions",layout:{},paint:{"line-color":"#fff","line-width":1}}),this.hideMapPolygons(),this.mapbox.map.on("mousemove","regionFills",(function(e){e.features.length>0&&(t.addMapPopup(e),t.removeHoveredPolygon(),t.addHoveredPolygon(e.features[0]))})),this.mapbox.map.on("mouseleave","regionFills",(function(e){t.removeMapPopup(e),t.removeHoveredPolygon()})),this.mapbox.map.on("click","regionFills",(function(e){t.removeActivePolygon(),t.addActivePolygon(e.features[0]),t.addMapPopup(e.features[0])})))},removeActivePolygon:function(){this.mapbox.map.style._layers.regionFills&&(this.mapbox.map.setFeatureState({source:"regions",id:this.activeStateId},{"interaction-state":""}),this.activeStateId=null)},addActivePolygon:function(t){this.activeStateId=t.properties.id,this.mapbox.map.setFeatureState({source:"regions",id:this.activeStateId},{"interaction-state":"active"}),y.setActivePlace({mapId:this.mapId,activeFeature:t}),this.$emit("showDetail",t),this.$emit("setCategory","regions")},removeHoveredPolygon:function(){if(this.hoveredStateId){var t="";this.hoveredStateId===this.activeStateId&&(t="active"),this.mapbox.map.setFeatureState({source:"regions",id:this.hoveredStateId},{"interaction-state":t})}y.setHoveredPlace({mapId:this.mapId,hoveredFeature:""}),this.hoveredStateId=null},addHoveredPolygon:function(t){this.hoveredStateId=t.properties.id,this.mapbox.map.setFeatureState({source:"regions",id:this.hoveredStateId},{"interaction-state":"hover"}),this.addMapPopup(t),y.setHoveredPlace({mapId:this.mapId,hoveredFeature:t})},addMapPopup:function(t){var e;e=t.features?t.features[0]:t;var o=this.getCoordinates(e),i=this.getPopupHtml(e);e.properties.id&&(this.removeMapPopup(t),this.popup=new(c().Popup)({closeButton:!1,offset:{top:[0,20],bottom:[0,-40],left:[30,-20],right:[-30,-20]}}).setLngLat(o).setHTML(i).addTo(this.mapbox.map))},removeMapPopup:function(t){this.popup&&(this.popup.remove(),this.popup=null),t._popup&&t._popup.remove()},getCoordinates:function(t){return"Polygon"===t.geometry.type?this.findFeatureCentre(t.geometry.coordinates):"MultiPolygon"===t.geometry.type?this.findFeatureCentre(t.geometry.coordinates[0]):t.geometry.coordinates},findFeatureCentre:function(t){var e=[],o=[];return t[0].forEach((function(t){e.push(t[1]),o.push(t[0])})),{lat:(Math.min.apply(Math,e)+Math.max.apply(Math,e))/2,lng:(Math.min.apply(Math,o)+Math.max.apply(Math,o))/2}},getPopupHtml:function(t){return t.properties.imageSrc&&t.properties.stopCount?'\n <img class="vs-map__popup-image" src="'.concat(t.properties.imageSrc,'" />\n <div>\n <h4 class="vs-map__popup-subtitle">Stop ').concat(t.properties.stopCount,'</h4>\n <p class="vs-map__popup-title">').concat(t.properties.title,"</p>\n </div>\n "):'\n <p class="vs-map__popup-title">'.concat(t.properties.title,"</p>\n ")},setupMarkerListeners:function(t){var e=this;document.body.addEventListener("keyup",(function(o){"Escape"!==o.key&&"Tab"!==o.key||(e.removeMapPopup(t),e.showMarkerPopups&&y.setActivePlace({mapId:e.mapId,activeFeature:null}))})),t.getElement().addEventListener("keyup",(function(o){"Enter"===o.key&&(t._popup.isOpen()||t._popup.addTo(e.mapbox.map))}))},fitToBounds:function(){this.mapbox.map.fitBounds(h()(this.geojsonData),{padding:{top:100,bottom:100,left:100,right:100}})},initialiseMapComponent:function(){this.addMap(),this.addMapControls(),this.places.length&&this.initialiseMapFeatures(),this.geojsonData.features.length&&(this.initialiseMapMarkers(),this.fitToMarkers&&this.fitToBounds())},lazyloadMapComponent:function(){var t=this;c().supported({failIfMajorPerformanceCaveat:!0}),"IntersectionObserver"in window?(this.observer=new IntersectionObserver((function(e){e[0].intersectionRatio>0&&(t.observer.unobserve(t.$el),t.initialiseMapComponent())})),this.observer.observe(this.$el)):this.initialiseMapComponent()},onResize:function(){this.isTablet=window.innerWidth>=768},getBoundsFromPolygon:function(){var t=this.boundsData.coordinates[0];return t.reduce((function(t,e){return t.extend(e)}),new(c().LngLatBounds)(t[0],t[0]))},checkPointIsVisible:function(){return this.mapbox.map.getBounds().contains(this.activeMarkerPostion)},centreMapOnPoint:function(t){this.mapbox.map.flyTo({center:t})},calculateBoundingBox:function(){var t;if(void 0===this.boundsData||"undefined"===this.boundsData.type)t=[[-7.555827,54.608836],[-.778285,60.880894]];else if("bounds"===this.boundsData.type){var e=new(c().LngLat)(this.boundsData.coordinates[1][0],this.boundsData.coordinates[1][1]),o=new(c().LngLat)(this.boundsData.coordinates[0][0],this.boundsData.coordinates[0][1]);t=new(c().LngLatBounds)(e,o)}else t="Polygon"===this.boundsData.type?this.getBoundsFromPolygon():[[-7.555827,54.608836],[-.778285,60.880894]];return t}}}},73349:function(t,e,o){"use strict";o(21489)},81610:function(t,e,o){"use strict";o.r(e);var i=o(95095),a=o(3878);o(73349);const s=(0,o(66262).A)(a.A,[["render",i.X]]);e.default=s},95095:function(t,e,o){"use strict";o.d(e,{X:function(){return i.X}});var i=o(25159)}}]);