ol-contextmenu/dist/ol-contextmenu.iife.js

Custom Context Menu for Openlayers

  /*!
  * ol-contextmenu - v6.0.0
  * https://github.com/jonataswalker/ol-contextmenu
  * Built: 2026-01-05T22:44:21.378Z
  */

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.ol-ctx-menu-container{position:absolute;padding:8px;background:#fff;color:#222;font-size:13px;border-radius:5px;box-shadow:#0003 3px 3px 5px;box-sizing:border-box}.ol-ctx-menu-container div,.ol-ctx-menu-container span,.ol-ctx-menu-container a,.ol-ctx-menu-container img,.ol-ctx-menu-container ul,.ol-ctx-menu-container li{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}.ol-ctx-menu-container a img{border:none}.ol-ctx-menu-container *,.ol-ctx-menu-container *:before,.ol-ctx-menu-container *:after{box-sizing:inherit}.ol-ctx-menu-container.ol-ctx-menu-hidden{opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container ul{list-style:none}.ol-ctx-menu-container li{position:relative;line-height:20px;padding:2px 5px;white-space:nowrap}.ol-ctx-menu-container li:not(.ol-ctx-menu-separator):hover{cursor:pointer;background-color:#333;color:#eee}.ol-ctx-menu-container li.ol-ctx-menu-submenu .ol-ctx-menu-container{border:1px solid #eee;padding:8px;top:0;opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container li.ol-ctx-menu-submenu:after{position:absolute;top:7px;right:10px;content:"";display:inline-block;width:.6em;height:.6em;border-right:.3em solid #222;border-top:.3em solid #222;transform:rotate(45deg)}.ol-ctx-menu-container li.ol-ctx-menu-submenu:hover:after{border-color:#eee}.ol-ctx-menu-container:not(.ol-ctx-menu-hidden) li.ol-ctx-menu-submenu:hover>.ol-ctx-menu-container{opacity:1;visibility:visible;transition-delay:0s}.ol-ctx-menu-container li.ol-ctx-menu-separator{padding:0}.ol-ctx-menu-container li.ol-ctx-menu-separator hr{border:0;height:1px;background-image:linear-gradient(to left,#0000,#000000bf,#0000)}.ol-ctx-menu-icon{text-indent:20px;background-size:20px auto;background-repeat:no-repeat;background-position:left center}.ol-ctx-menu-zoom-in{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABaUlEQVQ4T72U7VHCQBCGn90GtAMuNGCswFiBWIFQgWMFxg6wArECsQKhArEBiB1Qwa1zgQn5IAYcxv13k71n3919L8KJQ07M47+BzgG9TRfZ/JBuWhS6BJFHRJICYrZGZIz3z5Ct2+B7gG6I6kt+wewdkQVwjtkAkR5mC8yu26A1oItR/cTsOweQBdgutD8G7jGm2PJ2n8oqUKIpIjd4HxTM8gvaT/F+AlmWnyWaIXKF95eNguFzTYFhNsdWu9kFgFlaFMANUH3D8wDLoLgSTSD2il8NCe2ZXQBxWDGwxmyUzzOMBZ7wy7Qb2K0wQfXjMOBuhlFpZtNty5sFaTQBuTusZdymeqs1SpYKcO9HkE3KbTd9WFijMHJQ5hBNEAYNq5Qd0dhyke0GiE4QzjqfW23mHT8Hl4DG4Lce3FPE7AtbBSdsbNqpoJLgYkRnNeUV+xwJDHTnUEkxHGbhBXUs5TjJjew/KPy94g+NRaIVRYmMXwAAAABJRU5ErkJggg==)}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-in{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABc0lEQVQ4T71U21ECQRDsJgGdvQDECMQIxAjECMQILCPwzAAjECIQI0AiEDPQAPaWCBhrcKHuCUcV5f7dY3v6tUscefHIePhfwBBCF8CZqRCReRs1tQxDCH1VfQLQz4EsSY4AvIjIsgm8AhhCGKrqa9zwrqoLAKckB5HtguR1E2gBMITQU9VPAD8GICIGtl3e+xHJBwBT59xtHcsCYJZlUwA3kcGHbfDep51OZywi3/acZZm9vyJ5WR5o38uACmDunNt6ZwAkUxFZDwghDFT1jeSjiJinhVUBVNVJkiTDKO8CQA+AsbNQ7s1Ps0VVn5MkSfcCtmBoDZi1Bdx4eJ7zbBolrwPy3o9J3rWSHPs3A1BbjVKlYBaIyDgvu9LDXDU2RTZmXVW1oKyLxRD+OrkOrJLy5mVM0iaftDhuhVbsvBzMglzKUNW6IV/OOWtCM8MmVvEkmbwt83LaB19fdgOtVquUZJeknaDdobTwbOcvBzPcN/AXH1DFFWP7u9oAAAAASUVORK5CYII=)}.ol-ctx-menu-zoom-out{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABU0lEQVQ4T72U7VECMRRFz3sNaAdkacC1AtcKxApcKnCsQOwAK3CtQKxAqEBsANYOqCDPyTIC+8WCw5jfybn33dxEOPGSE/P4b6BzQG89RT47ZJoWhy5B5BGRZAMxWyEyxvtnyFdt8AagS1F9KQ6YvSMyB84xGyDSw2yO2XUbtAJ0MaqfmH0XAPIA2y7tj4F7jAm2uG1yWQZKNEHkBu+Dg2njWBJNEbnC+8uaIFRuWfuG2QxbbrOrUd0A1Tc8D7AIjkur7DAAsVf8MiWMZ3ZR2m02LPIMscATfjHqBnY7TFD9OAy4zTCCPG/MUKMM5O6wkXFr9dZq7FQqqHk/hDzbFa73cFONTZFDdRyiCcKg5rrSiLaXkiI6RjjrfG6VzDs+B5eAxuDXeYpmNRGzL2wZ/wof+du4GNFpBVqqz5HA4MM5VEYYDrOs+1I6Q9u/4Q8O9wN/AGgWjBVqQjjgAAAAAElFTkSuQmCC)}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-out{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABYklEQVQ4T72U4VHCQBCF36tA91KAWIFYgViBWIFYgWMFYgdYgVCBWAFSgdiBFpAsFWSdxcDkQoBkhnF/ZjbfvX377ogjF4/Mw/8CVbUD4MynEJF5k2lqFapqz8yeAPRKkCXJEYAXEVnugm8BVXVgZq/FD+9mtgBwSrJfqF2QvN4FjYCq2jWzTwA/DhARh20qTdMRyQcA0xDCbZ3KCJhl2RTATaHgo+6HLMv8+xXJy+qB3l8FGoB5CKHsXcRV1b6ZvZF8FBH3NKotoJlNkiQZFONdlLtJ3rufbouZPSdJMjwIbKDQEzBrClx7eC4i33Uepmk6JnnXaOQifzMAtdGoRApugYiMI1uqKkrRWAfZo9MxM1+UZzFewl8mN4nYdVM83L7BkwbXLUrF3sfBLQDQBbDy08x8vOohXyEE71lVq9emuEk+3gZa3XYroCvwFyjP8yHJDsnxwaU08GxvS2uFhw78BbzWrxXgMbsHAAAAAElFTkSuQmCC)}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}})();
var ContextMenu=(function(m,u){"use strict";var B=Object.defineProperty;var j=(m,u,d)=>u in m?B(m,u,{enumerable:!0,configurable:!0,writable:!0,value:d}):m[u]=d;var c=(m,u,d)=>j(m,typeof u!="symbol"?u+"":u,d);var d={exports:{}},A;function $(){if(A)return d.exports;A=1;function o(){}return o.prototype={on:function(i,t,e){var s=this.e||(this.e={});return(s[i]||(s[i]=[])).push({fn:t,ctx:e}),this},once:function(i,t,e){var s=this;function n(){s.off(i,n),t.apply(e,arguments)}return n._=t,this.on(i,n,e)},emit:function(i){var t=[].slice.call(arguments,1),e=((this.e||(this.e={}))[i]||[]).slice(),s=0,n=e.length;for(s;s<n;s++)e[s].fn.apply(e[s].ctx,t);return this},off:function(i,t){var e=this.e||(this.e={}),s=e[i],n=[];if(s&&t)for(var a=0,h=s.length;a<h;a++)s[a].fn!==t&&s[a].fn._!==t&&n.push(s[a]);return n.length?e[i]=n:delete e[i],this}},d.exports=o,d.exports.TinyEmitter=o,d.exports}var _=$(),L=(o=>(o.CONTEXTMENU="contextmenu",o.CLICK="click",o.DBLCLICK="dblclick",o))(L||{}),f=(o=>(o.BEFOREOPEN="beforeopen",o.OPEN="open",o.CLOSE="close",o.ADD_MENU_ENTRY="add-menu-entry",o))(f||{});class C extends u{constructor(i){super(i.type,i.map,i.originalEvent)}}const D={defaultItems:!0,eventType:L.CONTEXTMENU,items:[],scrollAt:4,width:150},E="ol-ctx-menu",r={container:`${E}-container`,hidden:`${E}-hidden`,icon:`${E}-icon`,separator:`${E}-separator`,submenu:`${E}-submenu`,unselectable:"ol-unselectable",zoomIn:`${E}-zoom-in`,zoomOut:`${E}-zoom-out`},P=8*2,S=10,M=2,T=[{callback:(o,i)=>{const t=i.getView();t.animate({center:o.coordinate,duration:700,zoom:Number(t.getZoom())+1})},classname:`${r.zoomIn} ${r.icon}`,text:"Zoom In"},{callback:(o,i)=>{const t=i.getView();t.animate({center:o.coordinate,duration:700,zoom:Number(t.getZoom())-1})},classname:`${r.zoomOut} ${r.icon}`,text:"Zoom Out"}];function v(o){const i=document.createDocumentFragment(),t=document.createElement("div");for(t.innerHTML=o;t.firstChild;)i.append(t.firstChild);return i}function k(o){const i=document.importNode(o),t=o.offsetWidth;i.style.cssText=`position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ${t}px`;const e=v("<span>Foo</span>"),s=v("<span>Foo</span>"),n=document.createElement("li"),a=document.createElement("li");n.append(e),a.append(s),i.append(n),i.append(a),o.parentNode?.append(i);const h=i.offsetHeight/2;return o.parentNode?.removeChild(i),h}function I({emitter:o,isInsideSubmenu:i=!1,isSubmenu:t=!1,item:e,parentNode:s}){const n=`_${Math.random().toString(36).slice(2,11)}`;if(typeof e!="string"&&"text"in e){const x=`<span>${e.text}</span>`,y=v(x),l=document.createElement("li");e.classname=e.classname||"",e.icon&&(e.classname===""?e.classname=r.icon:e.classname.includes(r.icon)===!1&&(e.classname+=` ${r.icon}`),l.setAttribute("style",`background-image:url(${e.icon})`)),l.id=n,l.className=e.classname,l.append(y),s.append(l);const O={callback:"callback"in e?e.callback:null,data:"data"in e?e.data:null,id:n,isInsideSubmenu:i,isSeparator:!1,isSubmenu:t};return o.emit(f.ADD_MENU_ENTRY,O,l),l}const a=`<li id="${n}" class="${r.separator}"><hr></li>`,h=v(a);s.append(h);const g=s.lastChild,b={callback:null,data:null,id:n,isInsideSubmenu:!1,isSeparator:!0,isSubmenu:!1};return o.emit(f.ADD_MENU_ENTRY,b,g),g}function N({container:o,emitter:i,isInsideSubmenu:t,items:e,menuWidth:s}){e.forEach(n=>{if(typeof n!="string"&&"items"in n&&Array.isArray(n.items)){const a=I({emitter:i,isSubmenu:!0,item:n,parentNode:o});a.classList.add(r.submenu);const h=document.createElement("ul");h.classList.add(r.container),h.style.width=`${s}px`,a.append(h),N({container:h,emitter:i,isInsideSubmenu:!0,items:n.items,menuWidth:s})}else I({emitter:i,isInsideSubmenu:t,isSubmenu:!1,item:n,parentNode:o})})}function w(o,i){if(!o)throw new Error(i)}class H extends m{constructor(t={}){w(typeof t=="object","@param `opts` should be object type!");const e=document.createElement("div");super({element:e});c(this,"map");c(this,"emitter",new _.TinyEmitter);c(this,"container");c(this,"coordinate",[]);c(this,"pixel",[]);c(this,"contextMenuEventListener");c(this,"entryCallbackEventListener");c(this,"mapMoveListener");c(this,"lineHeight",0);c(this,"disabled");c(this,"opened");c(this,"items",[]);c(this,"menuEntries",new Map);c(this,"options");this.options={...D,...t};const s=document.createElement("ul");e.append(s),e.style.width=`${this.options.width}px`,e.classList.add(r.container,r.unselectable,r.hidden),this.container=e,this.contextMenuEventListener=n=>{this.handleContextMenu(n)},this.entryCallbackEventListener=n=>{this.handleEntryCallback(n)},this.mapMoveListener=()=>{this.handleMapMove()},this.disabled=!1,this.opened=!1,window.addEventListener("beforeunload",()=>{this.removeListeners()},{once:!0})}clear(){for(const t of this.menuEntries.keys())this.removeMenuEntry(t);this.container.replaceChildren(),this.container.append(document.createElement("ul"))}enable(){this.disabled=!1}disable(){this.disabled=!0}getDefaultItems(){return T}countItems(){return this.menuEntries.size}extend(t){w(Array.isArray(t),"@param `items` should be an Array."),N({container:this.container.firstElementChild,emitter:this.emitter,items:t,menuWidth:this.options.width})}closeMenu(){this.opened=!1,this.container.classList.add(r.hidden),this.dispatchEvent(f.CLOSE)}isOpen(){return this.opened}updatePosition(t){w(Array.isArray(t),"@param `pixel` should be an Array."),this.isOpen()&&(this.pixel=t,this.positionContainer())}pop(){const t=Array.from(this.menuEntries.keys()).pop();t&&this.removeMenuEntry(t)}shift(){const t=Array.from(this.menuEntries.keys()).shift();t&&this.removeMenuEntry(t)}push(t){t&&this.extend([t])}setMap(t){if(super.setMap(t),t){this.map=t,t.getViewport().addEventListener(this.options.eventType,this.contextMenuEventListener,!1),t.on("movestart",()=>{this.handleMapMove()}),this.emitter.on(f.ADD_MENU_ENTRY,(s,n)=>{this.handleAddMenuEntry(s,n)},this),this.items=this.options.defaultItems?this.options.items.concat(T):this.options.items,N({container:this.container.firstElementChild,emitter:this.emitter,items:this.items,menuWidth:this.options.width});const e=this.getMenuEntriesLength();this.lineHeight=e>0?this.container.offsetHeight/e:k(this.container)}else this.removeListeners(),this.clear()}removeListeners(){this.map.getViewport().removeEventListener(this.options.eventType,this.contextMenuEventListener,!1),this.emitter.off(f.ADD_MENU_ENTRY)}removeMenuEntry(t){let e=document.getElementById(t);e?.remove(),e=null,this.menuEntries.delete(t)}handleContextMenu(t){this.coordinate=this.map.getEventCoordinate(t),this.pixel=this.map.getEventPixel(t),this.dispatchEvent(new C({map:this.map,originalEvent:t,type:f.BEFOREOPEN})),!this.disabled&&(this.options.eventType===L.CONTEXTMENU&&(t.stopPropagation(),t.preventDefault()),setTimeout(()=>{this.openMenu(t)}),t.target?.addEventListener("pointerdown",e=>{this.opened&&(e.stopPropagation(),this.closeMenu())},{once:!0}))}openMenu(t){this.opened=!0,this.positionContainer(),this.container.classList.remove(r.hidden),this.dispatchEvent(new C({map:this.map,originalEvent:t,type:f.OPEN}))}getMenuEntriesLength(){return Array.from(this.menuEntries).filter(([,t])=>t.isSeparator===!1&&t.isSubmenu===!1&&t.isInsideSubmenu===!1).length}calculateMenuSize(){const t=this.getMenuEntriesLength(),s=Math.round(this.lineHeight*t)+P,n=this.container.offsetHeight,a=!this.container.classList.contains(r.hidden);return{h:n>0&&a?n:s,w:this.container.offsetWidth}}calculateVerticalPosition(t,e,s){let n;return e.h>=s.h?(n=this.pixel[1]-S,n+s.h>t[1]&&(n=Math.max(0,t[1]-s.h-M))):(n=this.pixel[1]-s.h,n<0&&(n=s.h<=t[1]?0:Math.max(0,t[1]-s.h)),n+s.h>t[1]&&(n=Math.max(0,t[1]-s.h-M))),Math.max(0,Math.min(n,t[1]-s.h-M))}adjustPositionAfterRender(t,e){if(!this.container.classList.contains(r.hidden)){const s=this.container.offsetHeight;s>0&&s!==e.h&&(Number.parseInt(this.container.style.top,10)||0)+s>t[1]&&(this.container.style.top=`${Math.max(0,t[1]-s-M)}px`)}}positionContainer(){const t=this.map.getSize()||[0,0],e=[t[0]||0,t[1]||0],s={h:e[1]-this.pixel[1],w:e[0]-this.pixel[0]},n=this.calculateMenuSize(),a=s.w>=n.w?this.pixel[0]+5:this.pixel[0]-n.w;this.container.style.left=`${a}px`;const h=this.calculateVerticalPosition(e,s,n);this.container.style.top=`${h}px`,this.container.style.right="auto",this.container.style.bottom="auto",this.adjustPositionAfterRender(e,n),s.w-=n.w;const g=y=>Array.from(y.children).filter(l=>l.tagName==="LI"&&l.classList.contains(r.submenu));let b=0;const x=(y,l)=>{b+=1,g(y).forEach(R=>{const U=l>=n.w?n.w-8:(n.w+8)*-1,p=R.querySelector(`ul.${r.container}`),F=Math.round(this.lineHeight*Array.from(p.children).filter(V=>V.tagName==="LI").length);p.style.left=`${U}px`,p.style.right="auto",p.style.top=s.h>=F+n.h?"0":`-${p.offsetHeight-25}px`,p.style.bottom="auto",p.style.zIndex=String(b),g(p).length>0&&x(p,l-n.w)})};x(this.container.firstElementChild,s.w)}handleMapMove(){this.closeMenu()}handleEntryCallback(t){t.preventDefault(),t.stopPropagation();const e=t.currentTarget,s=this.menuEntries.get(e.id);if(!s)return;const n={coordinate:this.coordinate,data:s.data};this.closeMenu(),s.callback?.(n,this.map)}handleAddMenuEntry(t,e){this.menuEntries.set(t.id,t),this.positionContainer(),"callback"in t&&typeof t.callback=="function"&&e.addEventListener("click",this.entryCallbackEventListener,!1)}}return H})(ol.control.Control,ol.MapBrowserEvent);