Widget:WorldMapViewer

This is some text.

<script src="/widget_code/jq.dragscrollable.js" ></script>

  <script>
   window.addEventListener("load", function () { 
     function makeDoubleRightClickHandler( handler ) {
           var timeout = 0, clicked = false;
           return function(e) {

               e.preventDefault();

               if( clicked ) {
                   clearTimeout(timeout);
                   clicked = false;
                   return handler.apply( this, arguments );
               }
               else {
                   clicked = true;
                   timeout = setTimeout( function() {
                       clicked = false;
                   }, 300 );
               }
           };
       }

      console.log("Loaded");
      var $worldMapContainer = $("#worldMapContainer");

      var $worldMap = $worldMapContainer.find("img").eq(0);
      $worldMap.panzoom({

       startTransform: 'scale(0.2)',
           increment: 0.3,
           minScale: 0.2,
           contain: 'invert',
           $zoomIn: $("#zoomin"),
           $zoomOut: $("#zoomout")
      }).panzoom('zoom');
      $worldMap.dblclick(function (ev) { 
         $worldMap.panzoom("zoom", false, { 'focal': ev });
      });
      

     $worldMap.contextmenu( makeDoubleRightClickHandler( function(ev) {
         $worldMap.panzoom("zoom", true, { 'focal': ev });
     }));

console.log($worldMap); });

 </script>
 <style>
   .world-map {
  perspective: 1px; 
   min-height: 450px;
   max-height: 450px;
   border-radius: 15px;
   }
   .world-map-container {
     cusor: grab;
   position: relative;
   padding: 0px !important;
   }
   .world-map-heading {
       font-family: "Agincourt W01",Georgia,Arial;
       font-size: 3em;
       width: 100%;
       text-align: center;
       text-shadow: 0px 0px 28px rgba(255,255,255,1);
       position: absolute;
       top: 0.5em;
       z-index: 3;
   }
   .zoom-button {
     margin-right: 10px;
       font-family: Georgia;
     color: #ffffff;
     font-size: 23px;
     background: #8f5c10;
     padding: 0px;
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align:center;
     border: 0px;
     text-decoration: none;
   }

   .zoom-button:hover {
     background: #9e6223;
     text-decoration: none;
   }
   .zoom-button {
     background: ;
   }
   .world-map-vin {
  perspective: 1px; 
   border-radius: 15px;
   pointer-events: none;
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0px;
       left: 0px;
       z-index:2;
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center bottom;
       box-shadow: 0 0 100px rgba(0,0,0,0.9) inset;
   }
   .world-map-controls {
   position: absolute;
   right: 20px;
   bottom: 20px;
   z-index:4;
   }
 </style>

World Map

    <button class="zoom-button" id="zoomin">+</button>
     <button class="zoom-button"  id="zoomout">-</button>