@here/harp-examples
Version:
harp.gl Examples
1 lines • 3.81 kB
JavaScript
(()=>{"use strict";var e={1742:(e,t,n)=>{t.$=void 0;const o=n(8957),r=n(5636),i=n(3074),s=n(2998),a=n(4428),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></p>\n ";const t=function(e,t){const n=document.getElementById("mapCanvas"),a=new i.MapView({canvas:n,theme:t});a.lookAt({target:new o.GeoCoordinates(42,14),zoomLevel:7,tilt:40,heading:-70});const p=new r.MapControls(a),c=new r.MapControlsUI(p);n.parentElement.appendChild(c.domElement),window.addEventListener("resize",(()=>{a.resize(window.innerWidth,window.innerHeight)})),i.CopyrightElementHandler.install("copyrightNotice",a);const d=new s.VectorTileDataSource({baseUrl:"https://vector.hereapi.com/v2/vectortiles/base/mc",authenticationCode:l.apikey});return a.addDataSource(d),a}(0,{extends:"resources/berlin_tilezen_night_reduced.json",styles:{geojson:function(e){const t=[],n=e.thresholds.length;for(let o=0;o<n;o++){const r=new a.Color(e.color);r.multiplyScalar(.8*(o+1)/n+.2);const i=e.thresholds[o],s=o-1<0?0:e.thresholds[o-1],l=e.property,p={description:"geoJson property-based style",technique:"extruded-polygon",when:`$geometryType == 'polygon'&& ${l} > ${s}&& ${l} <= ${i}`,attr:{color:"#"+r.getHexString(),transparent:!0,opacity:.8,constantHeight:!0,boundaryWalls:!1,lineWidth:{interpolation:"Discrete",zoomLevels:[10,11,12],values:[1,1,1]}},renderOrder:1e3};t.push(p)}return t}({property:"density",thresholds:[50,100,150,200,250,300,350,400,450],color:"#ff6600"})}}),n=new s.GeoJsonDataProvider("italy",new URL("resources/italy.json",window.location.href)),p=new s.VectorTileDataSource({dataProvider:n,styleSetName:"geojson"});t.addDataSource(p),document.getElementById("info").innerHTML="This choropleth shows how to use custom styling to highlight specific features in the map. Here some height is given to the extruded polygons directly in the GeoJSON, whereas the color comes from the population density given in the properties."}(t.$||(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=146,(()=>{var e={146:0,738:0},t=[[1742,592]],o=e=>{},r=(r,i)=>{for(var s,a,[l,p,c,d]=i,h=0,u=[];h<l.length;h++)a=l[h],n.o(e,a)&&e[a]&&u.push(e[a][0]),e[a]=0;for(s in p)n.o(p,s)&&(n.m[s]=p[s]);for(c&&c(n),r&&r(i);u.length;)u.shift()();return d&&t.push.apply(t,d),o()},i=self.webpackChunk_here_harp_examples=self.webpackChunk_here_harp_examples||[];function s(){for(var o,r=0;r<t.length;r++){for(var i=t[r],s=!0,a=1;a<i.length;a++){var l=i[a];0!==e[l]&&(s=!1)}s&&(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 a=n.x;n.x=()=>(n.x=a||(e=>{}),(o=s)())})(),n.x()})();