Ckeditor scrollbar marker / Text Position Indicator - ckeditor

I would like to implement scrollbar marker into ckeditor and i can't seem to find the right way to do it i have triyed this code
var win = new CKEDITOR.dom.window( window );
var pos = win.getScrollPosition();
console.log(pos);
but it only return the google chrome scrollbar x=0 & Y=0
var win = new CKEDITOR.dom.window( domWindow );
var pos = win.getScrollPosition();
console.log(pos);
and this give me an error domWindow is not defined
i found this example it may help: https://codepen.io/Rplus/pen/mEjWJm
(() => {
var containerQS = '.article';
var container = document.querySelector(containerQS);
var form = document.querySelector('.form');
var input = form.querySelector('input[type="text"]');
var markClass = 'mark';
var markerHeight = '2px';
var _color = 'currentColor';
var containerY = container.offsetTop;
var containerH = container.scrollHeight;
var customStyle = document.createElement('style');
container.appendChild(customStyle);
var renderScrollMarker = ($parent, posArr) => {
var _posArr = posArr.map(i => {
return `transparent ${i}, ${_color} ${i}, ${_color} calc(${i} +
${markerHeight}), transparent calc(${i} + ${markerHeight})`;
});
customStyle.innerHTML = `article::-webkit-scrollbar-track {
background-image: linear-gradient(${_posArr.join()});
}`;
};
var calcEleRelativePos = ($ele) => {
return ($ele.offsetTop - containerY) / containerH;
};
var markOpt = {
className: markClass,
done: function () {
var marks = document.querySelectorAll(`.${markClass}`);
var allY = [].map.call(marks, (mark) => {
return (calcEleRelativePos(mark) * 100).toFixed(2) + '%';
});
renderScrollMarker(container, allY);
console.log(allY);
}
};
var instance = new Mark(container);
form.addEventListener('submit', (e) => {
e.preventDefault();
var _text = input.value.trim();
console.log(_text, form.oldText);
if (_text === '') {
instance.unmark(markOpt);
return;
}
form.oldText = _text;
instance.unmark().mark(_text, markOpt);
});
// trigger
form.querySelector('input[type="submit"]').click();
})();
but as ckeditor secures a lot of element, i would love to know if any one has done this before with CKeditor

i just got the real editor scrollbar position, i only need to put a marker using style or any availble methode
var win=CKEDITOR.instances.editor1.document.getWindow();
var pos = win.getScrollPosition().y;
console.log(pos);

this worked for me :
var jqDocument = $(editor.document.$);
var documentHeight = jqDocument.height();
var scrollTo =jqDocument.scrollTop();
var docHeight = jqDocument.height();
var scrollPercent = (scroll)/(docHeight);
var scrollPercentRounded = Math.round(scrollPercent*100);
$(".ui-slider-handle").css("bottom", 100-scrollPercentRounded+"%");

Related

Cemetery Mapping search with Leaflet

How can I do when I retrieve a person from the BD and create a link to direct to the grave on the map?
I do a search in the BD and when I find a person, I want to create a url that, when clicked, shows the map of the cemetery showing the location of the grave.
Here's the code I have so far. It shows me the map, but it doesn't show the grave marker.
<script >
$(document).ready(function(){
var prev_path = prev_marker = null;
$('.btn_search').on('click',function(){
var firstname = $('input[name="deceased_firstname"]').val();
var lastname = $('input[name="deceased_lastname"]').val();
/* var f_firstname = firstname.replace(/ /g, '%20');
var l_lastname = lastname.replace(/ /g, '%20');
*/
var url = '<?=base_url()?>/pages/search_burial/'+firstname+'/'+lastname;
console.log(url);
$.getJSON(url, function(data){
if (data == null) { alert("no results found!"); }
console.log(data);
var icon_grave = L.icon({
iconUrl: "<?=base_url()?>" +'user_template/icons/catholicgrave.png',
iconSize: [30,30] });
var latlngs = []
if(data != null || data != undefined) {
var route = JSON.parse(data.lot_coordinates);
for (var i = 0, len = route.length; i < len; i++) {
latlngs.push(new L.LatLng(route[i][0], route[i][1]));
}
} else {
latlngs = [];
}
var path = L.polyline(latlngs);
var marker = L.marker(latlngs[len - 1]).addTo(map).bindPopup("</br>"+"<strong>Fullname:</strong>"+" "+data.occupant_firstname+" "+data.occupant_middlename+" "+ data.occupant_lastname +"</br>" +
"<strong>Date of Birth:</strong>"+" " +data.occupant_dateofbirth + "</br>"+
"<strong>Date of Death:</strong>"+" " +data.occupant_dateofdeath + "</br>"+
"<strong>Garden:</strong>"+" " +data.garden_name + "</br>"+
"<strong>Block:</strong>"+" " +data.block_name + "</br>"+
"<strong>Lot:</strong>"+" " +data.lot_name + "</br>"+
"<strong>Longitude:</strong>"+" "+data.lot_long + "</br>"+
"<strong>Latitude:</strong>"+" "+data.lot_lat ).openPopup();
if (prev_path != null){
map.removeLayer(prev_path);
}
if(prev_marker != null){
map.removeLayer(prev_marker);
}
prev_path = path;
prev_marker = marker;
//map.removeLayer(path)
//map.addLayer(L.marker(latlngs[0]));
if(latlngs.length > 0) {
map.addLayer(marker);
}
map.addLayer(path);
setTimeout(function(){ path.snakeIn(); }, 3000);
//path.snakeIn();
});
});
});
</script>
<script>
// Creating a map object
var map = L.map('map').setView([-1.055588,2.109375],1);
var base_url = "<?=base_url()?>";
// Creating a Layer object
L.tileLayer('<?php echo base_url("user_template/map/{z}/{x}/{y}.png"); ?>',
{
minZoom: 2,
maxZoom: 4,
continousWorld: false,
noWrap: true,
}).addTo(map);
var bounds = new L.LatLngBounds(new L.LatLng(-70.020587,-132.242584), new L.LatLng(69.900118,140.680943));
map.fitBounds(bounds);
//add standard controls
L.control.coordinates().addTo(map);
//add configured controls
L.control.coordinates({
position:"bottomleft",
decimals:6,
decimalSeperator:".",
labelTemplateLat:"Latitude: {y}",
labelTemplateLng:"Longitude: {x}"
}).addTo(map); //mao ni siya bert naa diay sa taas ang code adto
/*Legend specific*/
var legend = L.control({ position: "bottomright" });
legend.onAdd = function(map) {
var div = L.DomUtil.create("div", "legend");
div.innerHTML += "<h5>Legend:</h5>";
div.innerHTML += '<i style="background: #e8851e"></i><span>Garden</span><br>';
div.innerHTML += '<i style="background: #448D40"></i><span>Block</span><br>';
div.innerHTML += '<i style="background: #ff0000"></i><span>Lot</span><br>';
return div;
};
legend.addTo(map);
var marker_1 = L.marker([-60.064840460104506,13.005095612485837]).addTo(map).bindPopup("Gate is here").openPopup();
map.addLayer(marker_1);
$.getJSON(base_url+"pages/map_gardens", function(data)
{
$.each(data, function(i, field)
{
var mapgarden_longitude_1 = parseFloat(data[0].garden_longitude1);
var mapgarden_latitude_1 = parseFloat(data[0].garden_latitude1);
var mapgarden_longitude_2 = parseFloat(data[0].garden_longitude2);
var mapgarden_latitude_2 = parseFloat(data[0].garden_latitude2);
var mapgarden_longitude_3 = parseFloat(data[0].garden_longitude3);
var mapgarden_latitude_3 = parseFloat(data[0].garden_latitude3);
var mapgarden_longitude_4 = parseFloat(data[0].garden_longitude4);
var mapgarden_latitude_4 = parseFloat(data[0].garden_latitude4);
var polylinePoints = [
[mapgarden_longitude_1, mapgarden_latitude_1],
[mapgarden_longitude_2, mapgarden_latitude_2],
[mapgarden_longitude_3, mapgarden_latitude_3],
[mapgarden_longitude_4, mapgarden_latitude_4],
[mapgarden_longitude_1, mapgarden_latitude_1]];
var polyline = L.polyline(polylinePoints).addTo(map);
});
});
$.getJSON(base_url+"pages/map_gardens", function(data)
{
$.each(data, function(i, field)
{
var mapgarden_longitude_1 = parseFloat(data[i].garden_long1);
var mapgarden_latitude_1 = parseFloat(data[i].garden_lat1);
var mapgarden_longitude_2 = parseFloat(data[i].garden_long2);
var mapgarden_latitude_2 = parseFloat(data[i].garden_lat2);
var mapgarden_longitude_3 = parseFloat(data[i].garden_long3);
var mapgarden_latitude_3 = parseFloat(data[i].garden_lat3);
var mapgarden_longitude_4 = parseFloat(data[i].garden_long4);
var mapgarden_latitude_4 = parseFloat(data[i].garden_lat4);
var mapgarden_longitude_5 = parseFloat(data[i].garden_long5);
var mapgarden_latitude_5 = parseFloat(data[i].garden_lat5);
var mapgarden_longitude_6 = parseFloat(data[i].garden_long6);
var mapgarden_latitude_6 = parseFloat(data[i].garden_lat6);
var mapgarden_longitude_7 = parseFloat(data[i].garden_long7);
var mapgarden_latitude_7 = parseFloat(data[i].garden_lat7);
var mapgarden_longitude_8 = parseFloat(data[i].garden_long8);
var mapgarden_latitude_8 = parseFloat(data[i].garden_lat8);
var mapgarden_longitude_9 = parseFloat(data[i].garden_long9);
var mapgarden_latitude_9 = parseFloat(data[i].garden_lat9);
var mapgarden_longitude_10 = parseFloat(data[i].garden_long10);
var mapgarden_latitude_10 = parseFloat(data[i].garden_lat10);
var mapgarden_longitude_11 = parseFloat(data[i].garden_long11);
var mapgarden_latitude_11 = parseFloat(data[i].garden_lat11);
var mapgarden_longitude_12 = parseFloat(data[i].garden_long12);
var mapgarden_latitude_12 = parseFloat(data[i].garden_lat12);
var mapgarden_longitude_13 = parseFloat(data[i].garden_long13);
var mapgarden_latitude_13 = parseFloat(data[i].garden_lat13);
var mapgarden_longitude_14 = parseFloat(data[i].garden_long14);
var mapgarden_latitude_14 = parseFloat(data[i].garden_lat14);
var mapgarden_longitude_15 = parseFloat(data[i].garden_long15);
var mapgarden_latitude_15 = parseFloat(data[i].garden_lat15);
var mapgarden_longitude_16 = parseFloat(data[i].garden_long16);
var mapgarden_latitude_16 = parseFloat(data[i].garden_lat16);
var polylinePoints_1 = [
[mapgarden_longitude_1, mapgarden_latitude_1],
[mapgarden_longitude_2, mapgarden_latitude_2],
[mapgarden_longitude_3, mapgarden_latitude_3],
[mapgarden_longitude_4, mapgarden_latitude_4],
[mapgarden_longitude_5, mapgarden_latitude_5],
[mapgarden_longitude_6, mapgarden_latitude_6],
[mapgarden_longitude_7, mapgarden_latitude_7],
[mapgarden_longitude_8, mapgarden_latitude_8],
[mapgarden_longitude_9, mapgarden_latitude_9],
[mapgarden_longitude_10, mapgarden_latitude_10],
[mapgarden_longitude_11, mapgarden_latitude_11],
[mapgarden_longitude_12, mapgarden_latitude_12],
[mapgarden_longitude_13, mapgarden_latitude_13],
[mapgarden_longitude_14, mapgarden_latitude_14],
[mapgarden_longitude_15, mapgarden_latitude_15],
[mapgarden_longitude_16, mapgarden_latitude_16],
[mapgarden_longitude_1, mapgarden_latitude_1]];
var polyline = L.polyline(polylinePoints_1, {
color: "#e8851e",
}).addTo(map);
});
});
$.getJSON(base_url+"pages/map_blocks", function(data)
{
$.each(data, function(i, field)
{
var mapblocks_longitude_1 = parseFloat(data[i].block_long1);
var mapblocks_latitude_1 = parseFloat(data[i].block_lat1);
var mapblocks_longitude_2 = parseFloat(data[i].block_long2);
var mapblocks_latitude_2 = parseFloat(data[i].block_lat2);
var mapblocks_longitude_3 = parseFloat(data[i].block_long3);
var mapblocks_latitude_3 = parseFloat(data[i].block_lat3);
var mapblocks_longitude_4 = parseFloat(data[i].block_long4);
var mapblocks_latitude_4 = parseFloat(data[i].block_lat4);
var polygonPoints = [
[mapblocks_longitude_1, mapblocks_latitude_1],
[mapblocks_longitude_2, mapblocks_latitude_2],
[mapblocks_longitude_3, mapblocks_latitude_3],
[mapblocks_longitude_4, mapblocks_latitude_4]];
var poly = L.polygon([polygonPoints],{
color: "green"
}).addTo(map);
});
});
$.getJSON(base_url+"pages/map_lots", function(data)
{
$.each(data, function(i, field)
{
var mapLots_longitude = parseFloat(data[i].lot_long);
var mapLots_latitude = parseFloat(data[i].lot_lat);
var circle = L.circle([mapLots_longitude, mapLots_latitude], {
color: "red",
fillColor: "#f03",
fillOpacity: 1.5,
radius: 50.0
}).addTo(map);
});
});
</script>

Mapbox GL Menu Doesn't Respond to First Click

Similar to this question, the layer switcher in my Map does not react to the first click. I learned that this issue has something to do with the definition of the initial visibility on the layers.
Here is the code. Unfortunately I don't know how and where to insert default visibility - do you have an idea?
map.on('click', ({ point }) => {
const features = map.queryRenderedFeatures(point, {
layers: ['City'] // replace with your layer name
});
if (!features.length) {
return;
}
const feature = features[0]; const popup = new mapboxgl.Popup({offset: [0, -15], closeButton: false, closeOnMove: true})
.setMaxWidth("auto")
.setLngLat(feature.geometry.coordinates)
.setHTML(
`<table>\
<tr>\
<td>City</td>\
<td>${feature.properties.City}</td>
</tr>\ </table>`
)
.addTo(map); }); var toggleableLayerIds = ['City']
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i]
var link = document.createElement('a')
link.href = '#'
link.className = 'active'
link.textContent = id
link.onclick = function (e) {
var clickedLayer = this.textContent
e.preventDefault()
e.stopPropagation()
var visibility = map.getLayoutProperty(clickedLayer, 'visibility')
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none')
this.className = ''
} else {
this.className = 'active'
map.setLayoutProperty(clickedLayer, 'visibility', 'visible')
}
}
var layers = document.getElementById('menu')
layers.appendChild(link)
}

Moving element on Window scroll

You'll see in this JsFiddle https://jsfiddle.net/xpvt214o/402281/ there is an image scrolling within another one on window scroll.
How can I modify the below so that it doesn't start scrolling until it hits that element (after all the br tags)?
I've tried offsetting it but not getting anywhere.
It would also be fine if it just scrolled a lot slower.
jQuery(document).ready(
function() {
var $w = $(window);
var $d = $('.oh');
$(window).scroll(function(event) {
var st = $w.scrollTop();
_x = st;
lastScrollTop = st;
$d.css('bottom', _x);
});
});
Here's an example of what I'm trying to achieve https://www.sketchapp.com/
I found this which does what I'm looking for
https://codepen.io/JTParrett/pen/BkDie
$.fn.moveIt = function(){
var $window = $(window);
var instances = [];
$(this).each(function(){
instances.push(new moveItItem($(this)));
});
window.addEventListener('scroll', function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}, {passive: true});
}
var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop){
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) +
'px)');
};
// Initialization
$(function(){
$('[data-scroll-speed]').moveIt();
});

Bing Map Pushpin - How to add clustering layer on Bing Map with custom data (co-ordinates) using Bing Maps V8 interactive SDK?

I found an official article which is showing, how to add clustering layer to Map but that example takes input from a TestDataGenerator function.I don't know how to pass my information so that map will generate pushpin based on my data.
Bing Map Official Article on "Add clustering layer to map"
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(39.393486, -98.100769),
zoom: 3
});
Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
// Creating sample Pushpin data within map view
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
map.layers.insert(clusterLayer);
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
Please visit the above link if anything is un-clear.
The test data generator returns an array of pushpins. Simply loop through your custom data and create an array of pushpins and then pass that into the clustering layer.
First add a new to your page with id and style display:none
add a gridview to this div
Bind your data to this gridview
Code Sample to bind data to map - works in ie - recently started having issues in Edge and Firefor - works on Safari
Issues seem to be related to attempts to add second cluster layer
Comments appreciated
function loadMap() {
var MaxLat = 0;
var MinLon = 0;
var MinLat = 0;
var MaxLon = 0;
var MLon = 0;
var MLat = 0;
var c;
var Val2;
var Val3;
var Lat;
var Lon;
var Val1;
var PPO;
var Val4;
var Val5;
if (typeof GVBounds !== "undefined" && GVBounds !== null) {
var Mcell = GVBounds.rows[1].cells;
MaxLat = Mcell(0).innerHTML;
MinLon = Mcell(1).innerHTML;
MinLat = Mcell(2).innerHTML;
MaxLon = Mcell(3).innerHTML;
MLat = Mcell(4).innerHTML;
MLon = Mcell(5).innerHTML;
}
var map;
var Rec = MaxLat + "," + MinLon + "," + MinLat + "," + MaxLon
var box = Microsoft.Maps.LocationRect.fromString(Rec);
//var PPCDr = new Microsoft.Maps.Layer();
//var PPCPU = new Microsoft.Maps.Layer();
//var PPCD = new Microsoft.Maps.Layer();
//var PPC = []
var pinDr;
var pinPU;
var pinD;
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
//center: new Microsoft.Maps.Location(MLat, MLon)
}
);
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var Pins = [];
Pins = GetPins();
//Create a ClusterLayer and add it to the map.
clusterLayer = new Microsoft.Maps.ClusterLayer(Pins, { gridSize: 10 });
map.layers.insert(clusterLayer);
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var DrPins = [];
DrPins = GetDrPins();
//Create a ClusterLayer and add it to the map.
DrclusterLayer = new Microsoft.Maps.ClusterLayer(DrPins, { gridSize: 1 });
map.layers.insert(DrclusterLayer);
});
map.setView({ bounds: box, padding: 20 });
}
RayD

OpenLayers3 : Draggable OverviewMapControl

In OpenLayers 2, in the OverviewMapControl, you can drag the "box" to move the map.
You can not do this in OpenLayers 3.
I've tried to implement a custom control based on https://github.com/openlayers/ol3/blob/master/src/ol/control/overviewmapcontrol.js, but you can not use goog.xxx or other fancy stuff like ol.extent.scaleFromCenter when you are not in debug !
How should I proceed ?
basically, implementing drag'n drop is fairly "simple" :
var dragging = null;
var getMap = this.getMap.bind(this); //during ctor of a control, we have no access to the map !
$(document.body).on("mousemove", function (e) {
if (dragging) {
dragging.el.offset({
top: e.pageY,
left: e.pageX
});
}
});
$(box).on("mousedown", function (e) {
dragging = {
el: $(e.target)
};
});
$(document.body).on("mouseup", function (e) {
if (dragging) {
debugger;
var coords = ovmap.getEventCoordinate(e.originalEvent);
//TODO: taking event coordinates is not good, we must use center of the box coordinates
//the problem is that ovmap.getCoordinateFromPixel(dragging.el.offset()) is not working at all because we need to adjust ovmap viewport
getMap().getView().setCenter(coords);
dragging = null;
}
});
For those interested (which does not seem to be the case at the moment :)), here is the way I solved
/**
* Mostly a big copy/paste from https://raw.githubusercontent.com/openlayers/ol3/master/src/ol/control/overviewmapcontrol.js
* without rotation and zoom/dezoom plus some adapations from http://ol3.qtibia.ro/build/examples/overviewmap-custom-drag.html
* to add the possibility to drag the box on the minimap to move the main map
*/
ol.control.CustomOverviewMap = function (opt_options) {
var options = typeof opt_options !== 'undefined' ? opt_options : {};
this.collapsed_ = typeof options.collapsed !== 'undefined' ? options.collapsed : true;
this.onCollapseOrExpand = options.onCollapseOrExpand || function () { };
this.needFirstRenderUpdate_ = this.collapsed_; //prepare the hack to render the map when uncollapsed the first time
var tipLabel = typeof options.tipLabel !== 'undefined' ? options.tipLabel : 'Overview map';
this.collapseLabel_ = $('<span>\u00BB</span>').get(0);
this.label_ = $('<span>\u00AB</span>').get(0);
var activeLabel = (!this.collapsed_) ? this.collapseLabel_ : this.label_;
var button = $('<button type="button" title="{0}"></button>'.replace('{0}', tipLabel)).append(activeLabel);
button.on('click', this.handleClick_.bind(this));
//ol.control.Control.bindMouseOutFocusOutBlur(button);
button.on('mouseout', function () { this.blur(); });
button.on('focusout', function () { this.blur(); });
var ovmapDiv = $('<div class="ol-overviewmap-map"></div>').get(0);
this.ovmap_ = new ol.Map({
controls: new ol.Collection(),
interactions: new ol.Collection(),
layers: [options.tileLayer],
target: ovmapDiv,
view: new ol.View(opt_options.view)
});
var box = $('<div class="ol-overviewmap-box"></div>');
this.boxOverlay_ = new ol.Overlay({
position: [0, 0],
positioning: 'bottom-left',
element: box.get(0)
});
this.ovmap_.addOverlay(this.boxOverlay_);
var cssClasses = 'ol-overviewmap ol-unselectable ol-control' +
(this.collapsed_ ? ' ol-collapsed' : '');
var element = $('<div class="{0}"></div>'.replace('{0}', cssClasses)).append(ovmapDiv).append(button).get(0);
ol.control.Control.call(this, {
element: element,
render: ol.control.CustomOverviewMap.render
});
// deal with dragable minimap
this.dragging = null;
box.on("mousedown", this.onStartDrag.bind(this));
$(document.body).on("mousemove", this.onDrag.bind(this));
$(document.body).on("mouseup", this.onEndDrag.bind(this));
};
ol.inherits(ol.control.CustomOverviewMap, ol.control.Control);
ol.control.CustomOverviewMap.prototype.onStartDrag = function (e) {
// remember some data to use during onDrag or onDragEnd
var box = $(e.target);
this.dragging = {
el: box,
evPos: { top: e.pageY, left: e.pageX },
elPos: box.offset()
};
}
ol.control.CustomOverviewMap.prototype.onDrag = function (e) {
if (this.dragging) {
//set the position of the box to be oldPos+translation(ev)
var curOffset = this.dragging.el.offset();
var newOffset = {
top: curOffset.top + (e.pageY - this.dragging.evPos.top),
left: curOffset.left + (e.pageX - this.dragging.evPos.left)
};
this.dragging.evPos = { top: e.pageY, left: e.pageX };
this.dragging.el.offset(newOffset);
}
}
ol.control.CustomOverviewMap.prototype.onEndDrag = function (e) {
if (this.dragging) {
//see ol3.qtibia.ro href at the top of the class to understand this
var map = this.getMap();
var offset = this.dragging.el.position();
var divSize = [this.dragging.el.width(), this.dragging.el.height()];
var mapSize = map.getSize();
var c = map.getView().getResolution();
var xMove = offset.left * (Math.abs(mapSize[0] / divSize[0]));
var yMove = offset.top * (Math.abs(mapSize[1] / divSize[1]));
var bottomLeft = [0 + xMove, mapSize[1] + yMove];
var topRight = [mapSize[0] + xMove, 0 + yMove];
var left = map.getCoordinateFromPixel(bottomLeft);
var top = map.getCoordinateFromPixel(topRight);
var extent = [left[0], left[1], top[0], top[1]];
map.getView().fitExtent(extent, map.getSize());
map.getView().setResolution(c);
//reset the element at the original position so that when the main map will trigger
//the moveend event, this event will be replayed on the box of the minimap
this.dragging.el.offset(this.dragging.elPos);
this.dragging = null;
}
}
ol.control.CustomOverviewMap.render = function (mapEvent) {
//see original OverviewMap href at the top of the class to understand this
var map = this.getMap();
var ovmap = this.ovmap_;
var mapSize = map.getSize();
var view = map.getView();
var ovview = ovmap.getView();
var overlay = this.boxOverlay_;
var box = this.boxOverlay_.getElement();
var extent = view.calculateExtent(mapSize);
var ovresolution = ovview.getResolution();
var bottomLeft = ol.extent.getBottomLeft(extent);
var topRight = ol.extent.getTopRight(extent);
overlay.setPosition(bottomLeft);
// set box size calculated from map extent size and overview map resolution
if (box) {
var boxWidth = Math.abs((bottomLeft[0] - topRight[0]) / ovresolution);
var boxHeight = Math.abs((topRight[1] - bottomLeft[1]) / ovresolution);
$(box).width(boxWidth).height(boxHeight);
}
};
ol.control.CustomOverviewMap.prototype.handleClick_ = function (event) {
event.preventDefault();
this.collapsed_ = !this.collapsed_;
$(this.element).toggleClass('ol-collapsed');
// change label
if (this.collapsed_) {
this.collapseLabel_.parentNode.replaceChild(this.label_, this.collapseLabel_);
} else {
this.label_.parentNode.replaceChild(this.collapseLabel_, this.label_);
}
// manage overview map if it had not been rendered before and control is expanded
if (!this.collapsed_ && this.needFirstRenderUpdate_) {
this.needFirstRenderUpdate_ = false;
this.ovmap_.updateSize();
this.ovmap_.once("postrender", function () {
this.render();
}.bind(this));
}
//trigger event
this.onCollapseOrExpand(this.collapsed_);
};

Resources