@here/harp-examples/dist/examples/object-picking_bundle.js

harp.gl Examples

(()=>{"use strict";var e={6672:(e,n,t)=>{n.c=void 0;const i=t(5636),r=t(3074),o=t(2998),a=t(4565);!function(e){let n;function t(e,n){const{left:t,top:i}=n.getBoundingClientRect();return{x:e.clientX-Math.floor(t),y:e.clientY-Math.floor(i)}}function s(e){return n&&Math.abs(n.x-e.x)<=5&&Math.abs(n.y-e.y)<=5}document.body.innerHTML+='\n        <style>\n            #mouse-picked-result{\n                position:absolute;\n                bottom:5px;\n                border-radius: 5px;\n                margin-left:10px;\n                padding: 9px 12px;\n                background: #37afaa;\n                display: inline-block;\n                visibility: hidden;\n                text-align: left;\n                right:50px;\n            }\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>Click/touch a feature on the map to read its data (Land masses are not features).\n        </p>\n        <pre id="mouse-picked-result"></pre>\n    ',async function(e){const l=document.getElementById("mapCanvas"),d={styles:{tilezen:[{transient:!0,layer:"roads",when:["==",["geometry-type"],"LineString"],technique:"solid-line",renderOrder:Number.MAX_SAFE_INTEGER,enabled:["in",["get","name"],["get","selection",["dynamic-properties"]]],lineWidth:"2px"},{transient:!0,layer:"landuse",when:["==",["geometry-type"],"Polygon"],technique:"solid-line",renderOrder:Number.MAX_SAFE_INTEGER,enabled:["in",["get","name"],["get","selection",["dynamic-properties"]]],lineWidth:"2px"}]}},u=new r.MapView({canvas:l,theme:{extends:[d,"resources/berlin_tilezen_base.json"]},enableRoadPicking:!0,target:[-74.01,40.707],zoomLevel:18});r.CopyrightElementHandler.install("copyrightNotice",u);const p=new i.MapControls(u),h=new i.MapControlsUI(p,{zoomLevel:"input"});l.parentElement.appendChild(h.domElement),window.addEventListener("resize",(()=>{u.resize(window.innerWidth,window.innerHeight)})),l.addEventListener("mousedown",(e=>{n=t(e,l)})),l.addEventListener("touchstart",(e=>{1===e.touches.length&&(n=t(e.touches[0],l))})),l.addEventListener("mouseup",(e=>{const n=t(e,l);s(n)&&c(u,n.x,n.y)})),l.addEventListener("touchend",(e=>{if(1!==e.changedTouches.length)return;const n=t(e.changedTouches[0],l);s(n)&&c(u,n.x,n.y)}));const f=new o.VectorTileDataSource({baseUrl:"https://vector.hereapi.com/v2/vectortiles/base/mc",authenticationCode:a.apikey,gatherFeatureAttributes:!0});u.setDynamicProperty("selection",[]),await u.addDataSource(f),u.update()}().catch((e=>{throw e}));const l=document.getElementById("mouse-picked-result");let d;function c(e,n,t){var i;let r=e.intersectMapObjects(n,t).filter((e=>void 0!==e.userData));r.length>1&&(r=r.filter((e=>e!==d))),0!==r.length?(d=r[0],void 0!==(null===(i=d.userData)||void 0===i?void 0:i.name)&&e.setDynamicProperty("selection",[d.userData.name]),l.style.visibility="visible",l.innerText=JSON.stringify(d.userData,void 0,2)):l.style.visibility="hidden"}}(n.c||(n.c={}))},4428:e=>{e.exports=THREE}},n={};function t(i){if(n[i])return n[i].exports;var r=n[i]={exports:{}};return e[i].call(r.exports,r,r.exports,t),r.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 i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},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=319,(()=>{var e={319:0,738:0},n=[[6672,592]],i=e=>{},r=(r,o)=>{for(var a,s,[l,d,c,u]=o,p=0,h=[];p<l.length;p++)s=l[p],t.o(e,s)&&e[s]&&h.push(e[s][0]),e[s]=0;for(a in d)t.o(d,a)&&(t.m[a]=d[a]);for(c&&c(t),r&&r(o);h.length;)h.shift()();return u&&n.push.apply(n,u),i()},o=self.webpackChunk_here_harp_examples=self.webpackChunk_here_harp_examples||[];function a(){for(var i,r=0;r<n.length;r++){for(var o=n[r],a=!0,s=1;s<o.length;s++){var l=o[s];0!==e[l]&&(a=!1)}a&&(n.splice(r--,1),i=t(t.s=o[0]))}return 0===n.length&&(t.x(),t.x=e=>{}),i}o.forEach(r.bind(null,0)),o.push=r.bind(null,o.push.bind(o));var s=t.x;t.x=()=>(t.x=s||(e=>{}),(i=a)())})(),t.x()})();