Simple OpenStreetMap Map

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_99":-5,"_50":16,"_100":-5,"_101":102,"_103":104},"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,"_77":78,"_79":80,"_81":-7,"_82":43,"_83":41,"_84":-5,"_85":86,"_87":16,"_88":89,"_90":89,"_91":-7,"_92":-7,"_57":93,"_59":94,"_95":-5,"_96":56,"_97":98},"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/assets/unfurl.webp","sourceType","gist","originalUrl","https://gist.github.com/ThomasG77/77bee632812a3441a72eb534603930a6","author","ThomasG77","id","gist-user-thomasg77","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","thomasg77","lifecycleEmailsEnabled",true,"createdAt",1791690388506,"updatedAt","gist-77bee632812a3441a72eb534603930a6","files",{"_63":64,"_65":66,"_67":68},"f1",{"_69":75,"_71":76},"f2",{"_69":73,"_71":74},"f3",{"_69":70,"_71":72},"name","index.html","text","\n\n \n \n \n \n Simple OpenStreetMap Map\n\n \n \n \n \n \n \n \n\n\n \n \n \n

\n \n \n\n","geobookmarkcontrol.css",".ol-control.ol-bookmark \n{\ttop: 0.5em;\n\tleft: 3em;\n}\n.ol-control.ol-bookmark button\n{\tposition: relative;\n}\n.ol-control.ol-bookmark > button::before\n{\tcontent: \"\";\n\tposition: absolute;\n\tborder-width: 10px 5px 4px;\n\tborder-style: solid;\n\tborder-color: #fff;\n\tborder-bottom-color: transparent;\n\ttop: 50%;\n\tleft: 50%;\n\t-webkit-transform: translate(-50%, -50%);\n\ttransform: translate(-50%, -50%);\n\theight: 0;\n}\n\n.ol-control.ol-bookmark > div\n{\tdisplay: none;\n\tmin-width: 5em;\n}\n.ol-control.ol-bookmark input\n{\tfont-size: 0.9em;\n\tmargin: 0.1em 0 ;\n\tpadding: 0 0.5em;\n}\n.ol-control.ol-bookmark ul\n{\tmargin:0;\n\tpadding: 0;\n\tlist-style: none;\n}\n.ol-control.ol-bookmark li\n{\tcolor: rgba(0,60,136,0.8);\n\tfont-size: 0.9em;\n\tpadding: 0 0.2em 0 0.5em;\n\tcursor: default;\n\tclear:both;\n}\n\n.ol-control.ol-bookmark li:hover\n{\tbackground-color: rgba(0,60,136,.5);\n\tcolor: #fff;\n}\n\n.ol-control.ol-bookmark > div button\n{\twidth: 1em;\n\theight: 0.8em;\n\tfloat: right;\n\tbackground-color: transparent;\n\tcursor: pointer;\n\tborder-radius: 0;\n}\n.ol-control.ol-bookmark > div button:before\n{\tcontent: \"\\2A2F\";\n color: #936;\n\tfont-size: 1.2em;\n\tline-height: 1em;\n\tborder-radius: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n\n\n","geo-bookmarks.js","/** GeoBookmarks\n *\n * @constructor\n * @extends {ol.control.Control}\n * @trigger add|remove when a bookmark us added or deleted\n * @param {Object=} Control options.\n * - className {string} default ol-bookmark\n * - placeholder {string} input placeholder, default Add a new geomark...\n * - editable {bool} enable modification, default true\n * - marks a list of default bookmarks : { BM1:{pos:ol.coordinates, zoom: integer, permanent: true}, BM2:{pos:ol.coordinates, zoom: integer} }\n */\nol.control.GeoBookmark = function(options) {\n options = options || {};\n var self = this;\n\n var element = document.createElement('div');\n if (options.target) {\n element.className = options.className || \"ol-bookmark\";\n } else {\n element.className = (options.className || \"ol-bookmark\") +\n \" ol-unselectable ol-control ol-collapsed\";\n element.addEventListener(\"mouseleave\", function() {\n if (input !== document.activeElement) {\n menu.style.display = 'none';\n };\n });\n // Show bookmarks on click\n this.button = document.createElement('button');\n this.button.setAttribute('type', 'button');\n this.button.addEventListener('click', function(e) {\n menu.style.display = (menu.style.display === '' || menu.style.display === 'none' ? 'block': 'none');\n });\n element.appendChild(this.button);\n }\n // The menu\n var menu = document.createElement('div');\n element.appendChild(menu);\n var ul = document.createElement('ul');\n menu.appendChild(ul);\n var input = document.createElement('input');\n input.setAttribute(\"placeholder\", options.placeholder || \"Add a new geomark...\")\n input.addEventListener(\"change\", function(e) {\n console.log('change', this);\n var title = this.value;\n if (title) {\n self.addBookmark(title);\n this.value = '';\n self.dispatchEvent({\n type: \"add\",\n name: title\n });\n }\n menu.style.display = 'none';\n });\n input.addEventListener(\"blur\", function() {\n menu.style.display = 'none';\n });\n if (options.editable !== false) {\n menu.appendChild(input);\n };\n\n // Init\n ol.control.Control.call(this, {\n element: element,\n target: options.target\n });\n\n this.set(\"editable\", options.editable !== false);\n // Set default bmark\n this.setBookmarks(options.marks);\n};\nol.inherits(ol.control.GeoBookmark, ol.control.Control);\n\n/** Set bookmarks\n* @param {} bmark a list of bookmarks : { BM1:{pos:ol.coordinates, zoom: integer}, BM2:{pos:ol.coordinates, zoom: integer} }\n* @param [boolean} modify, default false\n*/\nol.control.GeoBookmark.prototype.setBookmarks = function(bmark) {\n if (!bmark) bmark = JSON.parse(localStorage[\"ol@bookmark\"] || \"{}\");\n var modify = this.get(\"editable\");\n var ul = this.element.querySelector(\"ul\");\n var menu = this.element.querySelector(\"div\");\n var self = this;\n\n localStorage[\"ol@bookmark\"] = JSON.stringify(bmark);\n // ul.innerHtml = '';\n Array.prototype.slice.call(ul.querySelectorAll('li')).forEach(function(li) {\n li.remove();\n });\n for (var b in bmark) {\n var li = document.createElement('li');\n li.textContent = b;\n li.setAttribute('data-bookmark', JSON.stringify(bmark[b]));\n li.addEventListener('click', function() {\n var bm = JSON.parse(this.getAttribute(\"data-bookmark\"));\n self\n .getMap()\n .getView()\n .setCenter(bm.pos);\n self\n .getMap()\n .getView()\n .setZoom(bm.zoom);\n menu.style.display = 'none';\n });\n ul.appendChild(li);\n if (modify && !bmark[b].permanent) {\n var button = document.createElement('button');\n button.setAttribute('data-name', b);\n button.setAttribute(\"title\", \"Suppr.\");\n button.addEventListener('click', function(e) {\n self.removeBookmark(this.getAttribute(\"data-name\"));\n self.dispatchEvent({ type: \"add\", name: this.getAttribute(\"data-name\") });\n e.stopPropagation();\n });\n li.appendChild(button);\n }\n }\n};\n\n/** Get Geo bookmarks\n* @return a list of bookmarks : { BM1:{pos:ol.coordinates, zoom: integer}, BM2:{pos:ol.coordinates, zoom: integer} }\n*/\nol.control.GeoBookmark.prototype.getBookmarks = function() {\n return JSON.parse(localStorage[\"ol@bookmark\"] || \"{}\");\n};\n\n/** Remove a Geo bookmark\n* @param {string} name\n*/\nol.control.GeoBookmark.prototype.removeBookmark = function(name) {\n if (!name) {\n return;\n };\n bmark = JSON.parse(localStorage[\"ol@bookmark\"] || \"{}\");\n delete bmark[name];\n this.setBookmarks(bmark);\n};\n\n/** Add a new Geo bookmark\n* @param {string} name\n* @param {ol.Coordintes} position, default current position\n* @param {number} zoom, default default map zoom\n* @param {bool} permanent: prevent from deletion, default false\n*/\nol.control.GeoBookmark.prototype.addBookmark = function(\n name,\n position,\n zoom,\n permanent\n) {\n if (!name) return;\n bmark = JSON.parse(localStorage[\"ol@bookmark\"] || \"{}\");\n bmark[name] = {\n pos:\n position ||\n this.getMap()\n .getView()\n .getCenter(),\n zoom:\n zoom ||\n this.getMap()\n .getView()\n .getZoom()\n };\n if (permanent) {\n bmark[name].permanent = true;\n }\n this.setBookmarks(bmark);\n};\n","slug","77bee632812a3441a72eb534603930a6","title","Simple OpenStreetMap Map","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","_d4NdgdDSV4h7LFT0Nv3G","startCommitId","forkedFrom","forkedFromVisibility",1507855065000,1508193424000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]