Popup

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_103":-5,"_50":16,"_104":-5,"_105":106,"_107":108},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":60,"_81":82,"_83":84,"_85":-7,"_86":43,"_87":41,"_88":-5,"_89":90,"_91":16,"_92":93,"_94":93,"_95":-7,"_96":-7,"_57":97,"_59":98,"_99":-5,"_100":56,"_101":102},"vizContent",{"_40":60,"_61":62},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":54,"_55":56,"_57":58,"_59":58},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/images/227040f61d2c430675de4d1ff9283d17a85229be2a18be9d547cc9970697cb31.png","sourceType","gist","originalUrl","https://gist.github.com/ThomasG77/822b9ac2cd180793021c7113ca8d533d","author","ThomasG77","id","gist-user-thomasg77","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","thomasg77","lifecycleEmailsEnabled",true,"createdAt",1791690388506,"updatedAt","gist-822b9ac2cd180793021c7113ca8d533d","files",{"_63":64,"_65":66,"_67":68,"_69":70},"f1",{"_71":79,"_73":80},"f2",{"_71":77,"_73":78},"f3",{"_71":75,"_73":76},"f4",{"_71":72,"_73":74},"name","sandbox.config.json","text","{\"template\": \"parcel\"}","package.json","{\n \"name\": \"popup\",\n \"dependencies\": {\n \"ol\": \"6.3.1\"\n },\n \"devDependencies\": {\n \"parcel\": \"1.11.0\"\n },\n \"scripts\": {\n \"start\": \"parcel index.html\",\n \"build\": \"parcel build --experimental-scope-hoisting --public-url . index.html\"\n }\n}\n","main.js","import 'ol/ol.css';\nimport Map from 'ol/Map';\nimport Overlay from 'ol/Overlay';\nimport TileLayer from 'ol/layer/Tile';\nimport View from 'ol/View';\nimport OSM from 'ol/source/OSM';\nimport {toLonLat} from 'ol/proj';\nimport {toStringHDMS} from 'ol/coordinate';\n\n/**\n * Elements that make up the popup.\n */\nvar container = document.getElementById('popup');\nvar content = document.getElementById('popup-content');\nvar closer = document.getElementById('popup-closer');\n\n/**\n * Create an overlay to anchor the popup to the map.\n */\nvar overlay = new Overlay({\n element: container,\n autoPan: true,\n autoPanAnimation: {\n duration: 250,\n },\n});\n\n/**\n * Add a click handler to hide the popup.\n * @return {boolean} Don't follow the href.\n */\ncloser.onclick = function () {\n overlay.setPosition(undefined);\n closer.blur();\n return false;\n};\n\nvar key = 'Get your own API key at https://www.maptiler.com/cloud/';\nvar attributions =\n '© OpenStreetMap contributors';\n\n/**\n * Create the map.\n */\nvar map = new Map({\n layers: [\n new TileLayer({\n source: new OSM()\n }) ],\n overlays: [overlay],\n target: 'map',\n view: new View({\n center: [0, 0],\n zoom: 2,\n }),\n});\n\n/**\n * Add a click handler to the map to render the popup.\n */\nmap.on('singleclick', function (evt) {\n var coordinate = evt.coordinate;\n var hdms = toStringHDMS(toLonLat(coordinate));\n\n content.innerHTML = '

You clicked here:

' + hdms + '';\n overlay.setPosition(coordinate);\n});\n","index.html","\n\n \n Popup\n \n \n \n \n \n

\n \n \n \n","slug","822b9ac2cd180793021c7113ca8d533d","title","Popup","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","oh-0EgZ2MtEJDd-l4ciYx","startCommitId","forkedFrom","forkedFromVisibility",1591041137000,1591041136000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]