@here/harp-examples/dist/examples/styling_interpolation_bundle.js

harp.gl Examples

(()=>{"use strict";var e={1643:(e,o,n)=>{o.u=void 0;const r=n(8957),i=n(5636),a=n(3074),t=n(2998),l=n(4565);!function(e){document.body.innerHTML+="\n        <style>\n            #mapCanvas {\n              top: 0;\n            }\n            #info{\n                color: #fff;\n                width: 80%;\n                left: 50%;\n                position: relative;\n                margin: 10px 0 0 -40%;\n                font-size: 15px;\n            }\n            @media screen and (max-width: 700px) {\n                #info{\n                    font-size:11px;\n                }\n            }\n        </style>\n        <p id=info>Zoom in and out to smoothly transition between styles.</p>\n    ";const o={clearColor:"#234152",styles:{tilezen:[{when:"$geometryType ^= 'polygon'",technique:"line",attr:{lineWidth:1,color:{interpolation:"Linear",zoomLevels:[3,4],values:["#83ffff","#000000"]}},renderOrder:5},{description:"water",when:"$layer == 'water' && $geometryType ^= 'polygon'",technique:"fill",attr:{color:{interpolation:"Linear",zoomLevels:[4,5],values:["#13819d","#022d38"]}},renderOrder:5},{when:"$layer ^= 'landuse' && $geometryType ^= 'polygon' && kind ^= 'urban'",technique:"fill",attr:{color:{interpolation:"Linear",zoomLevels:[16,17],values:["#163d47","#294d7a"]}},renderOrder:0,final:!0},{when:"$layer ^= 'landuse' && (($geometryType ^= 'polygon') && kind in ['nature','forest','park','wood','natural_wood','grass','meadow','village_green','dog_park','garden','nature_reserve','protected_area'])",technique:"fill",attr:{color:{interpolation:"Linear",zoomLevels:[5,6],values:["#006b6b","#062520"]}},renderOrder:.2,final:!0},{description:"highway-link",when:"$layer ^= 'roads' && ((kind == 'highway') && has(is_link))",technique:"solid-line",attr:{color:"#D6C789",secondaryColor:{interpolation:"Linear",zoomLevels:[12,13,14,16,18],values:["#163d47","#1166aa","#aa1166","#00aa11","#ff2288"]},lineWidth:{interpolation:"Linear",zoomLevels:[12,13,14,16,18],values:[0,20,12,7,6]},secondaryWidth:{interpolation:"Linear",zoomLevels:[12,13,14,16,18],values:[0,333,200,190,22]},fadeNear:.8,fadeFar:.9,clipping:!1},renderOrder:15.5,secondaryRenderOrder:10.3,final:!0},{when:"$layer == 'roads' && kind in ['major_road', 'highway', 'minor_road'] && kind_detail in ['unclassified', 'residential', 'service']",technique:"solid-line",attr:{color:{interpolation:"Linear",zoomLevels:[13,14,15],values:["#337579","#5c70d4","#000000"]},lineWidth:{interpolation:"Linear",zoomLevels:[13,14,15,20],values:[0,8,3,1]},secondaryColor:{interpolation:"Linear",zoomLevels:[16,18],values:["#0d1333","#0e3a5f"]},secondaryWidth:{interpolation:"Linear",zoomLevels:[13,14,15,16,17,20],values:[0,30,8,8,4,3]}},secondaryRenderOrder:10.4,renderOrder:11.4,final:!0},{when:"$layer == 'roads' && kind in ['major_road', 'highway', 'minor_road'] && kind_detail == 'tertiary'",technique:"solid-line",attr:{color:{interpolation:"Linear",zoomLevels:[11,12,13,14,15],values:["#337579","#6e5cd4","#5adeff","#5adeff","#000000"]},lineWidth:{interpolation:"Linear",zoomLevels:[11,12,13,14,15,20],values:[0,30,16,4,3,1]},secondaryColor:{interpolation:"Linear",zoomLevels:[16,18],values:["#0d1333","#0e3a5f"]},secondaryWidth:{interpolation:"Linear",zoomLevels:[11,12,14,15,16,17,20],values:[0,70,30,8,8,4,3]}},secondaryRenderOrder:10.5,renderOrder:11.5,final:!0},{when:"$layer == 'roads' && kind in ['major_road', 'highway', 'minor_road'] && kind_detail == 'secondary'",technique:"solid-line",attr:{color:{interpolation:"Linear",zoomLevels:[10,11,12,14,15],values:["#337579","#6e5cd4","#5adeff","#5adeff","#000000"]},lineWidth:{interpolation:"Linear",zoomLevels:[10,11,12,13,14,15,20],values:[0,100,30,16,4,3,1]},secondaryColor:{interpolation:"Linear",zoomLevels:[16,18],values:["#0d1333","#0e3a5f"]},secondaryWidth:{interpolation:"Linear",zoomLevels:[10,11,14,15,16,17,20],values:[0,100,30,8,8,4,3]}},secondaryRenderOrder:10.6,renderOrder:11.6,final:!0},{when:"$layer == 'roads' && kind in ['major_road', 'highway', 'minor_road'] && kind_detail == 'primary'",technique:"solid-line",attr:{color:{interpolation:"Linear",zoomLevels:[8,9,10,14,15],values:["#337579","#6e5cd4","#5adeff","#5adeff","#000000"]},lineWidth:{interpolation:"Linear",zoomLevels:[8,9,10,11,12,13,14,15,20],values:[0,250,160,80,30,16,4,3,1]},secondaryColor:{interpolation:"Linear",zoomLevels:[16,18],values:["#0d1333","#0e3a5f"]},secondaryWidth:{interpolation:"Linear",zoomLevels:[8,11,14,15,16,17,20],values:[0,100,30,8,8,4,3]}},secondaryRenderOrder:10.7,renderOrder:11.7,final:!0},{when:"$layer == 'roads' && kind in ['major_road', 'highway', 'minor_road']",technique:"dashed-line",attr:{color:{interpolation:"Linear",zoomLevels:[5,6,7,8],values:["#337579","#6e5cd4","#5adeff","#337579"]},lineWidth:{interpolation:"Linear",zoomLevels:[5,6,7,8],values:[0,2500,1800,0]},dashSize:{interpolation:"Linear",zoomLevels:[5,7,8],values:[3e4,1e4,6e3]},gapSize:{interpolation:"Linear",zoomLevels:[5,7,8],values:[18e5,4e4,0]}},renderOrder:11.9},{when:"$layer == 'roads' && kind in ['major_road', 'highway', 'minor_road']",technique:"dashed-line",attr:{opacity:.7,color:{interpolation:"Linear",zoomLevels:[5,6,7,8],values:["#112233","#111144","#111155","#111122"]},lineWidth:{interpolation:"Linear",zoomLevels:[5,6,7,8],values:[0,4500,1400,0]},dashSize:{interpolation:"Linear",zoomLevels:[5,7,8],values:[27e3,9700,5600]},gapSize:{interpolation:"Linear",zoomLevels:[5,7,8],values:[17e5,34e3,0]}},renderOrder:11.8},{when:"$layer == 'roads' && kind in ['major_road', 'highway', 'minor_road']",technique:"solid-line",attr:{color:{interpolation:"Linear",zoomLevels:[7,8,14,15],values:["#5adeff","#5adeff","#5adeff","#000000"]},lineWidth:{interpolation:"Linear",zoomLevels:[7,8,9,10,11,12,13,14,15,20],values:[0,500,300,200,100,50,20,6,4,1]},secondaryColor:{interpolation:"Linear",zoomLevels:[16,18],values:["#0d1333","#0e3a5f"]},secondaryWidth:{interpolation:"Linear",zoomLevels:[7,8,14,15,16,20],values:[0,800,30,8,8,3]}},secondaryRenderOrder:10.99,renderOrder:11.99,final:!0},{description:"building_geometry",when:"$layer ^= 'buildings' && ($geometryType ^= 'polygon')",technique:"line",attr:{color:{interpolation:"Linear",zoomLevels:[14,15,16,17,18,19,20],values:["#163d47","#3fa6ff","#163d47","#163d47","#163d47","#163d47","#163d47"]},lineWidth:2},renderOrder:1999},{description:"building_geometry",when:"$layer ^= 'buildings' && ($geometryType ^= 'polygon')",technique:"solid-line",attr:{color:{interpolation:"Linear",zoomLevels:[14,15,16,18,20],values:["#163d47","#3fa6ff","hsl(180, 100%, 50%)","hsl(360, 100%, 50%)","#fff250"]},lineWidth:["interpolate",["linear"],["zoom"],16.9,["world-ppi-scale",10],17,4,20,1]},renderOrder:1998},{description:"building_geometry",when:"$layer ^= 'buildings' && ($geometryType ^= 'polygon')",technique:"extruded-polygon",attr:{color:"#000000",opacity:1,emissiveIntensity:1,emissive:{interpolation:"Linear",zoomLevels:[14,15,16,18,20],values:["#163d47","#1a3b58","hsl(180, 60%, 50%)","hsl(360, 60%, 50%)","#2d5b03"]},lineWidth:1,lineColorMix:0,lineColor:{interpolation:"Linear",zoomLevels:[14,15,16,18,20],values:["#163d47","#3fa6ff","hsl(180, 100%, 50%)","hsl(360, 100%, 50%)","#fff250"]},maxSlope:.88,defaultHeight:50,animateExtrusion:!0},renderOrder:2e3}]}};(function(e){const n=document.getElementById("mapCanvas"),d=new a.MapView({canvas:n,theme:o}),s=new r.GeoCoordinates(28.595,77.22,0);d.lookAt({target:s,zoomLevel:15.2,tilt:28});const p=new i.MapControls(d),h=new i.MapControlsUI(p,{zoomLevel:"input"});n.parentElement.appendChild(h.domElement),window.addEventListener("resize",(()=>{d.resize(window.innerWidth,window.innerHeight)})),window.addEventListener("keydown",(e=>{const o=[189,187].indexOf(e.keyCode);-1!==o&&p.setZoomLevel(d.zoomLevel+(2*o-1)*(e.shiftKey?.1:1))}));const u=new t.VectorTileDataSource({baseUrl:"https://vector.hereapi.com/v2/vectortiles/base/mc",apiFormat:t.APIFormat.XYZOMV,styleSetName:"tilezen",authenticationCode:l.apikey,authenticationMethod:{method:t.AuthenticationMethod.QueryString,name:"apikey"},copyrightInfo:l.copyrightInfo});return d.addDataSource(u).then((()=>{u.setTheme(o)})),d.update(),d})().update()}(o.u||(o.u={}))},4428:e=>{e.exports=THREE}},o={};function n(r){if(o[r])return o[r].exports;var i=o[r]={exports:{}};return e[r].call(i.exports,i,i.exports,n),i.exports}n.m=e,n.x=e=>{},n.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return n.d(o,{a:o}),o},n.d=(e,o)=>{for(var r in o)n.o(o,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=932,(()=>{var e={932:0,738:0},o=[[1643,592]],r=e=>{},i=(i,a)=>{for(var t,l,[d,s,p,h]=a,u=0,c=[];u<d.length;u++)l=d[u],n.o(e,l)&&e[l]&&c.push(e[l][0]),e[l]=0;for(t in s)n.o(s,t)&&(n.m[t]=s[t]);for(p&&p(n),i&&i(a);c.length;)c.shift()();return h&&o.push.apply(o,h),r()},a=self.webpackChunk_here_harp_examples=self.webpackChunk_here_harp_examples||[];function t(){for(var r,i=0;i<o.length;i++){for(var a=o[i],t=!0,l=1;l<a.length;l++){var d=a[l];0!==e[d]&&(t=!1)}t&&(o.splice(i--,1),r=n(n.s=a[0]))}return 0===o.length&&(n.x(),n.x=e=>{}),r}a.forEach(i.bind(null,0)),a.push=i.bind(null,a.push.bind(a));var l=n.x;n.x=()=>(n.x=l||(e=>{}),(r=t)())})(),n.x()})();