maginfier control

adding a magnify control

by Pavlos Tsagkis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css">
<div id="mymap" class="map">
</div>

CSS

.map {
  width: 100%;
  height: 300px;
}

JavaScript

/**
 * @classdesc
 * Make map cursor act as a magnify lense
 *
 * @constructor
 * @extends {ol.control.Control}
 * @param {olx.control.Otpions=} opt_options MagnifierControl options.
 */
ol.control.MagnifierControl = function(opt_options) {
/**
 * get and set config options
 * @scaleOffSet {integer} (optional) default is 2. 
 * @radius {integer} (optional) default is 100.
 * @lineWidth {integer} (optional) default is 5.
 * @strokeStyle {stirng) (optional) red+green+blue+alpha chanel
 * @layers {ol.layer[]} (optional) an Array of layers. Default is parent's map exisitng layers
 */
var options = opt_options || {};
//console.log("this.getMap()",this.getMap())
options.scaleOffSet  = typeof(options.scaleOffSet) !== 'undefined' ? options.scaleOffSet  : 2;
options.radius       = typeof(options.radius)      !== 'undefined' ? options.radius       : 100;
options.lineWidth    = typeof(options.lineWidth)   !== 'undefined' ? options.lineWidth    : 5;
options.strokeStyle  = typeof(options.strokeStyle) !== 'undefined' ? options.strokeStyle  : 'rgba(255,0,0,1)';
options.layers       = typeof(options.layers)      !== 'undefined' ? options.layers       : [];
options.synchMaps    = typeof(options.synchMaps)   !== 'undefined' ? options.synchMaps    : false;

//attach options to the control
this.options = options;
//vars with global scope
this.initialised = false;
this.magmap;//ol.map
this.mousePosition = null;
this.targetMapDivId; 

//control toggle button
var button = document.createElement('button');
button.innerHTML = 'M';
var this_ = this;
/**
 * toggling the magnifing lense
 * intialise if first time
 * else show/hide the lense 
 */
this.toggleMagCntrl = function() {
   if (this_.isVisble===true ){//need to hide lense and detach all listners
   document.getElementById('magmap').style.display = 'none';
   //remove all the listeners 
   ol.Observable.unByKey(this_.precomposeListener);
   ol.Observable.unByKey(this_.postcomposeListener);
  ...