@here/harp-examples
Version:
harp.gl Examples
1 lines • 3.91 kB
JavaScript
(()=>{"use strict";var e={3900:(e,t,n)=>{t.h=void 0;const o=n(8957),r=n(5636),i=n(3074),a=n(2998),l=n(4565);t.h||(t.h={}),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>This example shows how to utilize the data from the styles.<br/>Here the population of a city is displayed below its name.</p>",function(){const e=function(e){const t=document.getElementById("mapCanvas"),n=new i.MapView({canvas:t,theme:{extends:"resources/berlin_tilezen_base.json",definitions:{cityPopulationLevel:{type:"number",value:["-",["log10",["number",["get","population"],1e3]],3]}},styles:{population:[{id:"countryBorderOutline",description:"country border - outline",when:["all",["==",["get","$layer"],"boundaries"],["==",["geometry-type"],"LineString"],["==",["get","kind"],"country"]],technique:"solid-line",renderOrder:4,color:"#52676E",lineWidth:["ref","countryBorderOutlineWidth"]},{id:"waterPolygons",layer:"water",description:"water",when:["==",["geometry-type"],"Polygon"],technique:"fill",renderOrder:5,color:["ref","waterColor"]},{when:["all",["==",["get","$layer"],"places"],["==",["get","kind"],"locality"]],technique:"text",attr:{priority:["+",100,["^",2,["ref","cityPopulationLevel"]]],size:["+",8,["^",2,["ref","cityPopulationLevel"]]],text:["concat",["coalesce",["get","name:en"],["get","name"]],"\n",["coalesce",["get","population"],"n/a"]],color:"#3F1821",backgroundColor:"#FFFFFF",backgroundOpacity:.7,fontVariant:"SmallCaps",opacity:.9,textFadeTime:0}}]}},target:new o.GeoCoordinates(50.443041,11.4229649),zoomLevel:5});return i.CopyrightElementHandler.install("copyrightNotice",n),n.resize(window.innerWidth,window.innerHeight),window.addEventListener("resize",(()=>{n.resize(window.innerWidth,window.innerHeight)})),n}(),t=new a.VectorTileDataSource({baseUrl:"https://vector.hereapi.com/v2/vectortiles/base/mc",apiFormat:a.APIFormat.XYZOMV,styleSetName:"population",authenticationCode:l.apikey,authenticationMethod:{method:a.AuthenticationMethod.QueryString,name:"apikey"},copyrightInfo:l.copyrightInfo}),n=r.MapControls.create(e),p=new r.MapControlsUI(n);e.canvas.parentElement.appendChild(p.domElement),e.addDataSource(t)}()},4428:e=>{e.exports=THREE}},t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={exports:{}};return e[o].call(r.exports,r,r.exports,n),r.exports}n.m=e,n.x=e=>{},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},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,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.j=380,(()=>{var e={380:0,738:0},t=[[3900,592]],o=e=>{},r=(r,i)=>{for(var a,l,[p,s,c,d]=i,u=0,h=[];u<p.length;u++)l=p[u],n.o(e,l)&&e[l]&&h.push(e[l][0]),e[l]=0;for(a in s)n.o(s,a)&&(n.m[a]=s[a]);for(c&&c(n),r&&r(i);h.length;)h.shift()();return d&&t.push.apply(t,d),o()},i=self.webpackChunk_here_harp_examples=self.webpackChunk_here_harp_examples||[];function a(){for(var o,r=0;r<t.length;r++){for(var i=t[r],a=!0,l=1;l<i.length;l++){var p=i[l];0!==e[p]&&(a=!1)}a&&(t.splice(r--,1),o=n(n.s=i[0]))}return 0===t.length&&(n.x(),n.x=e=>{}),o}i.forEach(r.bind(null,0)),i.push=r.bind(null,i.push.bind(i));var l=n.x;n.x=()=>(n.x=l||(e=>{}),(o=a)())})(),n.x()})();