@here/harp-examples/dist/examples/geojson-viewer_bundle.js

harp.gl Examples

(()=>{"use strict";var e={1843:(e,n,t)=>{n.E=void 0;const r=t(2194),o=t(5636),i=t(3074),a=t(2998),d=t(4565);!function(e){const n="550px",t=function(e){document.body.innerHTML+='\n            <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&amp;display=swap" rel="stylesheet">\n            <style>\n                :root{\n                    --editor-width:550px;\n                }\n                #mapCanvas{\n                    top:0;\n                    width:calc(100% - var(--editor-width));\n                    min-width: 60%;\n                }\n                #drag-overlay{\n                    position:absolute;\n                    width:calc(100% - var(--editor-width));\n                    min-width: 60%;\n                    height: 100%;\n                    background: rgba(0,0,0,0.5);\n                    display:none\n                }\n                #drag-dashes{\n                    --border-thickness: 9px;\n                    --margin:70px;\n                    position:absolute;\n                    width:calc(100% - var(--margin) * 2 - var(--border-thickness) * 2);\n                    height:calc(100% - var(--margin) * 2 - var(--border-thickness) * 2);\n                    top:var(--margin);\n                    left:var(--margin);\n                    border: dashed var(--border-thickness) #fff;\n                    border-radius: 25px;\n                }\n                #editor{\n                    font-family: \'Fira Sans\', sans-serif;\n                    width:var(--editor-width);\n                    max-width:40%;\n                    right:0;\n                    top:0;\n                    position:absolute;\n                    height:100%;\n                    padding:5px;\n                    background:hsla(215, 15%, 65%, 1);\n                    box-sizing: border-box;\n                }\n                button{\n                    font-family: \'Fira Sans\', sans-serif;\n                    background: hsla(215, 15%, 17%, 1);\n                    height: 21px;\n                    border: 0;\n                    color: #d2d7de;\n                    text-transform: uppercase;\n                    cursor: pointer;\n                }\n                #browse{\n                    display:block;\n                    position:absolute;\n                    right: 5px;\n                    top: 5px;\n                }\n                #editor textarea{\n                    font-family: \'Fira Sans\', sans-serif;\n                    position:absolute;\n                    resize: none;\n                    width:calc(100% - 10px);\n                    height:calc(100% - 36px);\n                    padding:0;\n                    top:31px;\n                    right:5px;\n                    border:0\n                }\n                #info{\n                    color: #fff;\n                    min-width: 60%;\n                    width: calc(100% - var(--editor-width));\n                    text-align: center;\n                    font-family: monospace;\n                    left: 50%;\n                    bottom: 10px;\n                    font-size: 15px;\n                    position: absolute;\n                    margin-left: -50%;\n                }\n                #copyrightNotice{\n                    left:0;\n                    background:#888;\n                    right:inherit;\n                }\n                @media all and (max-width: 450px) {\n                    #editor{\n                        display:none;\n                    }\n                    #mapCanvas, #info, #drag-overlay{\n                        width: 100%;\n                    }\n                }\n            </style>\n            <div id=editor>\n                <button style="left:5px;position:absolute;">Update</button>\n                <textarea></textarea>\n            </div>\n\n            <input type="file" id="input" style="display: none;" />\n            <button id=browse onclick="document.getElementById(\'input\').click();">\n                Browse a file\n            </button>\n\n            <div id="drag-overlay">\n                <div id="drag-dashes"></div>\n            </div>\n            <p id=info>Drag and drop a GeoJSON or browse a local one.</p>\n        ';const t=document.getElementById("mapCanvas"),r=new i.MapView({canvas:t,theme:{extends:"resources/berlin_tilezen_night_reduced.json",styles:{geojson:[{when:"$geometryType == 'polygon'",technique:"fill",renderOrder:1e4,attr:{color:"#7cf",transparent:!0,opacity:.8,lineWidth:1,lineColor:"#003344"}},{when:"$geometryType == 'polygon'",technique:"solid-line",renderOrder:10001,attr:{color:"#8df",metricUnit:"Pixel",lineWidth:5}},{when:"$geometryType == 'point'",technique:"circles",renderOrder:10002,attr:{size:10,color:"#5ad"}},{when:"$geometryType == 'line'",technique:"solid-line",renderOrder:1e4,attr:{color:"#8df",metricUnit:"Pixel",lineWidth:5}}]}}});r.renderLabels=!1,i.CopyrightElementHandler.install("copyrightNotice",r);const s=new o.MapControls(r),l=new o.MapControlsUI(s,{projectionSwitch:!0}),c=innerWidth<=450?0:Math.min(parseInt(n,void 0),.4*innerWidth);l.domElement.style.right=c+10+"px",t.parentElement.appendChild(l.domElement),window.addEventListener("resize",(()=>{const e=innerWidth<=450?0:Math.min(parseInt(n,void 0),.4*innerWidth);t.className="full",l.domElement.style.right=e+10+"px",r.resize(innerWidth-e,innerHeight)}));const p=new a.VectorTileDataSource({baseUrl:"https://vector.hereapi.com/v2/vectortiles/base/mc",authenticationCode:d.apikey});return r.addDataSource(p),r}();!function(){const e=document.getElementById("input");e.addEventListener("change",(n=>{l(e.files[0])}));const n=document.getElementById("drag-overlay");window.addEventListener("dragover",(e=>{e.preventDefault(),n.style.display="block"}));const t=e=>{e.preventDefault(),n.style.display="none"};n.addEventListener("dragleave",t),n.addEventListener("dragend",t),n.addEventListener("dragexit",t),n.addEventListener("drop",(e=>{t(e),l(e.dataTransfer.files[0])}),!1)}(),document.querySelector("#editor textarea").placeholder='{\n    type: "FeatureCollection",\n    features:[\n\n    ]\n}',document.querySelector("#editor button").addEventListener("click",(()=>{const e=JSON.parse(document.querySelector("#editor textarea").value);s.setFromGeojson(e)}));const s=new r.FeaturesDataSource({styleSetName:"geojson"});function l(e){const n=new FileReader;n.onload=()=>{document.querySelector("#editor textarea").value=n.result,s.setFromGeojson(JSON.parse(n.result)),t.update()},"application/geo+json"!==e.type&&"application/json"!==e.type||n.readAsText(e)}t.addDataSource(s)}(n.E||(n.E={}))},4428:e=>{e.exports=THREE}},n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{}};return e[r].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 r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},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=706,(()=>{var e={706:0,738:0},n=[[1843,592]],r=e=>{},o=(o,i)=>{for(var a,d,[s,l,c,p]=i,h=0,u=[];h<s.length;h++)d=s[h],t.o(e,d)&&e[d]&&u.push(e[d][0]),e[d]=0;for(a in l)t.o(l,a)&&(t.m[a]=l[a]);for(c&&c(t),o&&o(i);u.length;)u.shift()();return p&&n.push.apply(n,p),r()},i=self.webpackChunk_here_harp_examples=self.webpackChunk_here_harp_examples||[];function a(){for(var r,o=0;o<n.length;o++){for(var i=n[o],a=!0,d=1;d<i.length;d++){var s=i[d];0!==e[s]&&(a=!1)}a&&(n.splice(o--,1),r=t(t.s=i[0]))}return 0===n.length&&(t.x(),t.x=e=>{}),r}i.forEach(o.bind(null,0)),i.push=o.bind(null,i.push.bind(i));var d=t.x;t.x=()=>(t.x=d||(e=>{}),(r=a)())})(),t.x()})();