@here/harp-examples/dist/examples/synchronized-views_bundle.js

harp.gl Examples

(()=>{"use strict";var e={9683:(e,n,t)=>{n.V=void 0;const a=t(8957),o=t(5636),i=t(3074),r=t(2998),s=t(4565);!function(e){function n(e,n,t){const a=window.innerWidth,o=window.innerHeight,i=window.innerWidth/3,r=window.innerHeight/1;e.forceCameraAspect=a/o,1!==n?(e.resize(i,r),e.camera.setViewOffset(a,o,n*i,t*r,i,r)):e.resize(a,o)}function t(e,t,r,s,d){const l=document.getElementById(e),c=new i.MapView({canvas:l,theme:s,decoderUrl:d});i.CopyrightElementHandler.install("copyrightNotice",c);const p=new o.MapControls(c);if(1===t){const e=new o.MapControlsUI(p);l.parentElement.appendChild(e.domElement)}const m=new a.GeoCoordinates(50.1125867,8.6720831);return c.lookAt({target:m,zoomLevel:18,tilt:45,heading:200}),c.zoomLevel=16.2,n(c,t,r),window.addEventListener("resize",(()=>{n(c,t,r)})),{mapView:c,mapControls:p}}document.body.innerHTML+='\n            <style>\n                .themeName {\n                    font-weight: bold;\n                    padding: 1em;\n                    position: absolute\n                    margin-bottom: 0.5em;\n                    margin: 0 auto;\n                    width: 33%;\n                    text-align:center;\n                    text-transform:uppercase;\n                    font-family: \'Fira Sans\', sans-serif;\n                }\n\n                .titleRow\n                {\n                    display: table;\n                    table-layout: fixed;\n                    width: 100%;\n                }\n\n                #mapTheme1,#mapTheme2,#mapTheme3 {\n                    background: hsl(218, 17%, 18%);\n                    color: hsl(218, 17%, 85%);\n                    display: table-cell;\n                    left: 66%;\n                }\n\n                #mapCanvas {\n                    border: 0px;\n                    height: 100%;\n                    left: 0;\n                    overflow: hidden;\n                    position: absolute;\n                    pointer-events:none;\n                    width: calc(100%/3);\n                    z-index: -1\n                }\n\n                #mapCanvas2 {\n                    border: 0px;\n                    height: 100%;\n                    left: 0;\n                    overflow: hidden;\n                    position: absolute;\n                    width: 100%;\n                    z-index: -2\n                }\n\n                #mapCanvas3 {\n                    border: 0px;\n                    height: 100%;\n                    left: 66.6%;\n                    pointer-events:none;\n                    overflow: hidden;\n                    position: absolute;\n                    width: calc(100%/3);\n                    z-index: -1\n                }\n\n            </style>\n\n            <canvas id="mapCanvas2"></canvas>\n            <canvas id="mapCanvas3"></canvas>\n            <div class="titleRow">\n                <div class="themeName" id="mapTheme1">\n                    Base theme\n                </div>\n                <div class="themeName" id="mapTheme2">\n                    Night reduced theme\n                </div>\n                <div class="themeName" id="mapTheme3">\n                    Day reduced theme\n                </div>\n            </div>\n        ';const d={view1:t("mapCanvas",0,0,"./resources/berlin_tilezen_base.json","./decoder.bundle.js"),view2:t("mapCanvas2",1,0,"./resources/berlin_tilezen_night_reduced.json","./decoder.bundle.js"),view3:t("mapCanvas3",2,0,"./resources/berlin_tilezen_day_reduced.json","./decoder.bundle.js")},l={baseUrl:"https://vector.hereapi.com/v2/vectortiles/base/mc",apiFormat:r.APIFormat.XYZOMV,styleSetName:"tilezen",authenticationCode:s.apikey,authenticationMethod:{method:r.AuthenticationMethod.QueryString,name:"apikey"},copyrightInfo:s.copyrightInfo},c={omvDataSource1:new r.VectorTileDataSource(l),omvDataSource2:new r.VectorTileDataSource(l),omvDataSource3:new r.VectorTileDataSource(l)};d.view1.mapView.addDataSource(c.omvDataSource1),d.view2.mapView.addDataSource(c.omvDataSource2),d.view3.mapView.addDataSource(c.omvDataSource3);const p=(e,n)=>{const t=e.mapControls.attitude;i.MapViewUtils.setRotation(n.mapView,t.yaw,t.pitch),n.mapView.camera.position.copy(e.mapView.camera.position),n.mapControls.cameraHeight=e.mapControls.cameraHeight,n.mapView.camera.aspect=3,n.mapView.camera.updateProjectionMatrix(),n.mapView.update()};d.view2.mapControls.addEventListener("update",(()=>{p(d.view2,d.view1),p(d.view2,d.view3)}))}(n.V||(n.V={}))},4428:e=>{e.exports=THREE}},n={};function t(a){if(n[a])return n[a].exports;var o=n[a]={exports:{}};return e[a].call(o.exports,o,o.exports,t),o.exports}t.m=e,t.x=e=>{},t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.j=793,(()=>{var e={793:0,738:0},n=[[9683,592]],a=e=>{},o=(o,i)=>{for(var r,s,[d,l,c,p]=i,m=0,h=[];m<d.length;m++)s=d[m],t.o(e,s)&&e[s]&&h.push(e[s][0]),e[s]=0;for(r in l)t.o(l,r)&&(t.m[r]=l[r]);for(c&&c(t),o&&o(i);h.length;)h.shift()();return p&&n.push.apply(n,p),a()},i=self.webpackChunk_here_harp_examples=self.webpackChunk_here_harp_examples||[];function r(){for(var a,o=0;o<n.length;o++){for(var i=n[o],r=!0,s=1;s<i.length;s++){var d=i[s];0!==e[d]&&(r=!1)}r&&(n.splice(o--,1),a=t(t.s=i[0]))}return 0===n.length&&(t.x(),t.x=e=>{}),a}i.forEach(o.bind(null,0)),i.push=o.bind(null,i.push.bind(i));var s=t.x;t.x=()=>(t.x=s||(e=>{}),(a=r)())})(),t.x()})();