I am right now using Ol3 to display static image(like http://openlayers.org/en/latest/examples/static-image.html) . Although when I am zoomed in and start panning/dragging i can see white space as seen in example. I don't want to see that.
Is it possible to pan only till the end of image so that white space does not appear?
You can restrict the dragging of the image by restricting its extent.
Here's an inline link to fiddle.
map.on('moveend', function(evt){
console.log(view.getZoom());
if(view.getZoom()<=2){
view.setZoom(3);
}
});
var constrainPan = function() {
console.log("move");
var extents=[0, 0, 1024, 968]
var visible = view.calculateExtent(map.getSize());
var centre = view.getCenter();
var delta;
var adjust = false;
if ((delta = extents[0] - visible[0]) > 0) {
adjust = true;
//console.log(delta);
centre[0] += delta;
} else if ((delta = extents[2] - visible[2]) < 0) {
adjust = true;
centre[0] += delta;
}
if ((delta = extents[1] - visible[1]) > 0) {
adjust = true;
centre[1] += delta;
} else if ((delta = extents[3] - visible[3]) < 0) {
adjust = true;
centre[1] += delta;
}
if (adjust) {
view.setCenter(centre);
}
};
view.on('change:resolution', constrainPan);
view.on('change:center', constrainPan);
Related
In my project, we are using the highchart version: Highcharts JS v3.0.10.
What should be equivalent code or property which is suitable for allowOverlap = false according to the newer version?
How to achieve alloOverlap= false in the older version?
Link: https://api.highcharts.com/highcharts/series.timeline.dataLabels.allowOverlap
The code that is responsible for hiding the overlapping data labels is currently in Highcharts core: https://code.highcharts.com/highcharts.src.js, but previously it was a separate module: https://code.highcharts.com/5/modules/overlapping-datalabels.src.js
However, to make it work you would have to make many changes in your code. I think using the plugin below will be the best solution for you:
(function(H) {
var each = H.each,
extend = H.extend;
/**
* Hide overlapping labels. Labels are moved and faded in and out on zoom to provide a smooth
* visual imression.
*/
H.Series.prototype.hideOverlappingDataLabels = function() {
var points = this.points,
len = points.length,
i,
j,
label1,
label2,
intersectRect = function(pos1, pos2, size1, size2) {
return !(
pos2.x > pos1.x + size1.width ||
pos2.x + size2.width < pos1.x ||
pos2.y > pos1.y + size1.height ||
pos2.y + size2.height < pos1.y
);
};
// Mark with initial opacity
each(points, function(point, label) {
label = point.dataLabel;
if (label) {
label.oldOpacity = label.opacity;
label.newOpacity = 1;
}
});
// Detect overlapping labels
for (i = 0; i < len - 1; ++i) {
label1 = points[i].dataLabel;
for (j = i + 1; j < len; ++j) {
label2 = points[j].dataLabel;
if (label1 && label2 && label1.newOpacity !== 0 && label2.newOpacity !== 0 &&
intersectRect(label1.alignAttr, label2.alignAttr, label1, label2)) {
(points[i].labelrank < points[j].labelrank ? label1 : label2).newOpacity = 0;
}
}
}
// Hide or show
each(points, function(point, label) {
label = point.dataLabel;
if (label) {
if (label.oldOpacity !== label.newOpacity) {
label[label.isOld ? 'animate' : 'attr'](extend({
opacity: label.newOpacity
}, label.alignAttr));
}
label.isOld = true;
}
});
};
H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
proceed.call(this);
this.hideOverlappingDataLabels();
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/6s5ycrwa/
I have rectangle WMS of small area and want to restrict panning outside WMS extends, so there aren't white or black area outside the map visible at all.
Adding extent to View does not work for me and in documentation about this option is written
The extent that constrains the center, in other words, center cannot
be set outside this extent.
But as I understand this if center is in the area of extent, but on the very corner, it will show white area outside this extent, but I don't want to see white area at all.
Is it possible to achieve this with OL3?
Here's my solution. I wrote it just now, and so it is not extensively tested. It would probably break if you start rotating the map, for example, and it may be glitchy if you zoom out too far.
var constrainPan = function() {
var visible = view.calculateExtent(map.getSize());
var centre = view.getCenter();
var delta;
var adjust = false;
if ((delta = extent[0] - visible[0]) > 0) {
adjust = true;
centre[0] += delta;
} else if ((delta = extent[2] - visible[2]) < 0) {
adjust = true;
centre[0] += delta;
}
if ((delta = extent[1] - visible[1]) > 0) {
adjust = true;
centre[1] += delta;
} else if ((delta = extent[3] - visible[3]) < 0) {
adjust = true;
centre[1] += delta;
}
if (adjust) {
view.setCenter(centre);
}
};
view.on('change:resolution', constrainPan);
view.on('change:center', constrainPan);
This expects the variables map, view (with obvious meanings) and extent (the xmin, ymin, xmax, ymax you want to be visible) to be available.
Here's a more robust implementation that should work really well in any case. It's written in ES6, and requires isEqual method (from lodash or anything else ...)
const extent = [-357823.2365, 6037008.6939, 1313632.3628, 7230727.3772];
const view = this.olMap.getView();
const modifyValues = {};
// Trick to forbid panning outside extent
let constrainPan = (e) => {
const type = e.type;
const newValue = e.target.get(e.key);
const oldValue = e.oldValue;
if (isEqual(oldValue, newValue)) {
// Do nothing when event doesn't change the value
return;
}
if (isEqual(modifyValues[type], newValue)) {
// Break possible infinite loop
delete modifyValues[type];
return;
}
if (type === 'change:resolution' && newValue < oldValue) {
// Always allow zoom-in.
return;
}
const visibleExtent = view.calculateExtent(this.olMap.getSize());
const intersection = ol.extent.getIntersection(visibleExtent, extent);
const modify = !isEqual(intersection, visibleExtent);
if (modify) {
if (type === 'change:center') {
const newCenter = newValue.slice(0);
if (ol.extent.getWidth(visibleExtent) !== ol.extent.getWidth(intersection)) {
newCenter[0] = oldValue[0];
}
if (ol.extent.getHeight(visibleExtent) !== ol.extent.getHeight(intersection)) {
newCenter[1] = oldValue[1];
}
modifyValues[type] = newCenter;
view.setCenter(newCenter);
} else if (type === 'change:resolution') {
modifyValues[type] = oldValue;
view.setResolution(oldValue);
}
}
};
view.on('change:resolution', constrainPan);
view.on('change:center', constrainPan);
This is an extension to #tremby answer, but to long for a comment.
First of all, his solution works really well for me, but it was called way to often. Therefore I wrapped it in a debounce function.
So
view.on('change:resolution', constrainPan);
view.on('change:center', constrainPan);
becomes
var dConstrainPan = debounce(constrainPan);
view.on('change:resolution', dConstrainPan);
view.on('change:center', dConstrainPan);
This will result in a slight flicker, when moving outside the bounding box, bot zooming/ moving works without delay.
Still not perfect but a useful improvement from my point of view.
Debounce code:
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
Soruce: https://davidwalsh.name/javascript-debounce-function , in underscore.js
Currently I'm working on a project recreating a mario level, my issue is that when I do not hard code the bottomLimit (the floor, currently set to 400) Mario will eventually just fall through.
Another thing I can't quite figure out is how I can move my invisible block that creates the floor boundary to accomodate the flooring. The level chosen is the Fortress level of Super Mario Brothers 3, if that helps picture what I'm trying to do with it.
There are a couple .as files to my code, I will put my troublesome file in along with my collision code.
package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.ui.Keyboard;
import flash.events.KeyboardEvent;
import flash.media.Sound;
public class FortressMap extends MovieClip
{
private var _mario:SmallMario;
private var vx:Number = 0;
private var vy:Number = 0;
private var _ceiling:Array = new Array();
private var _floor:Array = new Array();
public const accy:Number = 0.20;
public const termv:Number = 15;
public var onGround:Boolean;
public var bottomLimit:Number;
public function FortressMap()
{
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
_mario = new SmallMario();
addChild(_mario);
_mario.x = 50;
_mario.y = 400;
//Creating the blocks for the floor
createFloor(16, 416);
//Creating the blocks for the ceiling
createCeiling(16, 352);
}
private function createFloor(xPos:Number, yPos:Number):void
{
var floor:Floor = new Floor();
addChild(floor);
floor.x = xPos;
floor.y = yPos;
floor.height = 16;
_floor.push(floor);
floor.visible = false;
}
private function createCeiling(xPos:Number, yPos:Number):void
{
var ceiling:Ceiling = new Ceiling();
addChild(ceiling);
ceiling.x = xPos;
ceiling.y = yPos;
ceiling.height = 16;
_ceiling.push(ceiling);
ceiling.visible = false;
}
private function addedToStageHandler(event:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
addEventListener(Event.ENTER_FRAME, frameHandler);
addEventListener(Event.REMOVED_FROM_STAGE, removeStageHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
}
private function frameHandler(event:Event):void
{
_mario.x += vx;
_mario.y += vy;
if (_mario.x < 16)
{
_mario.x = 16;
}
vy += accy;
for (var i:int = 0; i < _ceiling.length; ++i)
{
Collision.block(_mario, _ceiling[i]);
}
for (var j:int = 0; j < _floor.length; ++j)
{
Collision.block(_mario, _floor[j]);
}
bottomLimit = 400;
if(_mario.y >= bottomLimit)
{
_mario.y = bottomLimit;
vy = 0;
onGround = true;
}
else
{
onGround = false;
}
}
private function keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.LEFT)
{
vx = -5;
return;
}
if (event.keyCode == Keyboard.RIGHT)
{
vx = 5;
return;
}
if (event.keyCode == Keyboard.UP)
{
if(onGround == true)
{
vy = -5;
trace("My people need me!");
}
return;
}
if (event.keyCode == Keyboard.DOWN)
{
//vy = 5;
return;
}
}
private function keyUpHandler(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.RIGHT)
{
vx = 0;
return;
}
if (event.keyCode == Keyboard.UP || event.keyCode == Keyboard.DOWN)
{
//vy = 0;
return;
}
}
private function removeStageHandler(event:Event):void
{
removeEventListener(Event.ENTER_FRAME, frameHandler);
removeEventListener(Event.REMOVED_FROM_STAGE, removeStageHandler);
stage.removeEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.removeEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
}
}
package
{
import flash.display.Sprite;
public class Collision
{
static public var collisionSide:String = "";
public function Collision()
{
}
static public function block(r1:Sprite, r2:Sprite):Boolean
{
var isBlocked:Boolean;
//Calculate the distance vector
var vx:Number
= (r1.x + (r1.width / 2))
- (r2.x + (r2.width / 2));
var vy:Number
= (r1.y + (r1.height / 2))
- (r2.y + (r2.height / 2));
//Check whether vx
//is less than the combined half widths
if(Math.abs(vx) < r1.width / 2 + r2.width / 2)
{
//A collision might be occurring! Check
//whether vy is less than the combined half heights
if(Math.abs(vy) < r1.height / 2 + r2.height / 2)
{
//A collision has ocurred! This is good!
//Find out the size of the overlap on both the X and Y axes
var overlap_X:Number
= r1.width / 2
+ r2.width / 2
- Math.abs(vx);
var overlap_Y:Number
= r1.height / 2
+ r2.height / 2
- Math.abs(vy);
//The collision has occurred on the axis with the
//*smallest* amount of overlap. Let's figure out which
//axis that is
if(overlap_X >= overlap_Y)
{
//The collision is happening on the X axis
//But on which side? _v0's vy can tell us
if(vy > 0)
{
collisionSide = "Top";
//Move the rectangle out of the collision
r1.y = r1.y + overlap_Y;
//r1 is being blocked
isBlocked = true;
}
else
{
collisionSide = "Bottom";
//Move the rectangle out of the collision
r1.y = r1.y - overlap_Y;
//r1 is being blocked
isBlocked = true;
}
}
else
{
//The collision is happening on the Y axis
//But on which side? _v0's vx can tell us
if(vx > 0)
{
collisionSide = "Left";
//Move the rectangle out of the collision
r1.x = r1.x + overlap_X;
//r1 is being blocked
isBlocked = true;
}
else
{
collisionSide = "Right";
//Move the rectangle out of the collision
r1.x = r1.x - overlap_X;
//r1 is being blocked
isBlocked = true;
}
}
}
else
{
//No collision
collisionSide = "No collision";
//r1 is not being blocked
isBlocked = false;
}
}
else
{
//No collision
collisionSide = "No collision";
//r1 is not being blocked
isBlocked = false;
}
return isBlocked;
}
}
}
I think what you want to do is to set the bottomlimit, but not hardcode the number 400, correct?
I would do change your createFloor method:
private function createFloor(xPos:Number, yPos:Number):void
{
var floor:Floor = new Floor();
addChild(floor);
floor.x = xPos;
floor.y = yPos;
floor.height = 16;
_floor.push(floor);
floor.visible = false;
// set bottom limit here
bottomLimit = yPos;
}
... then you wouldnt need to set it to 400.
However, another option is to change your if statement:
if(_mario.y >= Floor(_floor[0]).y)
{
_mario.y = Floor(_floor[0]).y;
vy = 0;
onGround = true;
}
else
{
onGround = false;
}
... and then you can get rid of the bottomLimit variable completely
(assuming I understood your code, and that the floor tiles are always going to be at the bottomLimit)
I have tested this on an iPad (3 generation). The line chart appears perfectly smooth.
http://justindarc.github.com/flot.touch/example/index.html
I have tried diffing the code with my flot code and cannot see any significant difference that would cause it to run in retina mode. My flot is version 0.7, same as his code. No matter what I try my own chart runs in non-retina mode.
What is the trick in running retina mode?
My setup code is rather long.
function setup_chart0(setup_options) {
var point_data = [];
if(setup_options.use_sample_data_for_chart0) {
point_data = generate_dummy_data(
setup_options.timestamp_generate_min,
setup_options.timestamp_generate_max
);
}
var average_data = henderson23(point_data);
var datasets = make_chart0_datasets(point_data, average_data);
if(is_dualaxis_detail_mode) {
datasets = make_chart0_dual_datasets(
[],
[],
[],
[]
);
}
var options = default_plot_options();
options.xaxis.min = setup_options.timestamp_visible_min;
options.xaxis.max = setup_options.timestamp_visible_max;
options.xaxis.panRange = [setup_options.timestamp_pan_min, setup_options.timestamp_pan_max];
options.yaxis.min = -0.025;
options.yaxis.max = 1.025;
options.yaxis.panRange = [-0.025, 1.025];
options.legend = { container: '#legend0', noColumns: 2 };
options.grid.markings = compute_markings_with_alertlevels;
if(is_dualaxis_detail_mode) {
options.y2axis = {};
options.y2axis.position = "right";
options.y2axis.min = -0.025;
options.y2axis.max = 1.025;
options.y2axis.panRange = [-0.025, 1.025];
options.legend = { container: '#legend_hidden', noColumns: 2 };
}
//save_as_file({ samples: point_data, average: average_data });
var el_placeholder0 = $("#placeholder0");
if(el_placeholder0.length){
//console.log('plotting chart 0');
var fade = false;
var el = el_placeholder0;
var el_outer = $("#placeholder0_outer");
var original_offset = el_outer.offset();
if(fade) {
el_outer.offset({ top: -5000, left: 0 }); // move plot container off screen
}
chart0 = $.plot(el, datasets, options);
if(fade) {
el.hide(); // hide plot - must do *after* creation
el_outer.offset(original_offset); // put plot back where it belongs
el.fadeIn('slow'); // fade in
}
/*var s = ' width: ' + chart0.width() + ' height: ' + chart0.height();
$('#label0').append(s);*/
if(solo_pan_mode) {
el.bind('plotpan', function (event, plot) {
set_data_should_redraw_chart0 = true;
set_data_should_redraw_chart1 = false;
set_data_should_redraw_chart2 = false;
fetch_data_for_chart(chart0, setup_options.timestamp);
show_loading_empty('#loader1');
show_loading_empty('#loader2');
});
el.bind('plotpanend', function (event, plot) {
set_data_should_redraw_chart0 = true;
set_data_should_redraw_chart1 = true;
set_data_should_redraw_chart2 = true;
copy_min_max(chart0, chart1, '#placeholder1');
copy_min_max(chart0, chart2, '#placeholder2');
hack_hide_loading_wheels = true;
maybe_hide_loading_wheels();
});
} else {
el.bind('plotpan', function (event, plot) {
fetch_data_for_chart(chart0, setup_options.timestamp);
sync_with_chart0();
});
}
}
}
I have modified jquery.flot.js like this:
In the top I have added
retinaMode = (window.devicePixelRatio > 1),
I have extended these functions
function makeCanvas(skipPositioning, cls) {
var c = document.createElement('canvas');
c.className = cls;
c.width = canvasWidth;
c.height = canvasHeight;
if (!skipPositioning)
$(c).css({ position: 'absolute', left: 0, top: 0 });
$(c).appendTo(placeholder);
if(retinaMode) {
c.width = canvasWidth * 2;
c.height = canvasHeight * 2;
c.style.width = '' + canvasWidth + 'px';
c.style.height = '' + canvasHeight + 'px';
}
if (!c.getContext) // excanvas hack
c = window.G_vmlCanvasManager.initElement(c);
// used for resetting in case we get replotted
c.getContext("2d").save();
if (retinaMode) {
c.getContext("2d").scale(2,2);
}
return c;
}
function getCanvasDimensions() {
canvasWidth = placeholder.width();
canvasHeight = placeholder.height();
if (canvasWidth <= 0 || canvasHeight <= 0)
throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
}
function resizeCanvas(c) {
// resizing should reset the state (excanvas seems to be
// buggy though)
if (c.width != canvasWidth) {
c.width = canvasWidth;
if(retinaMode) {
c.width = canvasWidth * 2;
}
c.style.width = '' + canvasWidth + 'px';
}
if (c.height != canvasHeight) {
c.height = canvasHeight;
if(retinaMode) {
c.height = canvasHeight * 2;
}
c.style.height = '' + canvasHeight + 'px';
}
// so try to get back to the initial state (even if it's
// gone now, this should be safe according to the spec)
var cctx = c.getContext("2d");
cctx.restore();
// and save again
cctx.save();
if(retinaMode) {
cctx.scale(2, 2);
}
}
I developped a code including a table with all its cells as droppable. The table container is div with a fix height and a scrollbar.
I would like drag an element (yellow square in my example) into the last table cell at the bottom of my table. Everything works fine, but to activate the scrollbar of my div container when I am dragging the element, I must move the mouse all the time.
Is there a possibility to scroll down automatically when my element is dragging near the bottom of my div container without moving mouse?
Here is my example : http://jsbin.com/upunek/19/edit
Thanks in advance
I figure it out this morning.
I created setInterval function when the drag event position is located at 70px of the border
Here is the fiddle I made : http://jsfiddle.net/pPn3v/22/
var yellow = $('#yellow');
var offset = yellow.offset();
var offsetWidth = offset.left + yellow.width();
var offsetHeight = offset.top + yellow.height();
var red = $('#red');
var intRightHandler = null;
var intLeftHandler = null;
var intTopHandler= null;
var intBottomHandler= null;
var distance = 70;
var timer = 100;
var step = 10;
function clearInetervals()
{
clearInterval(intRightHandler);
clearInterval(intLeftHandler);
clearInterval(intTopHandler);
clearInterval(intBottomHandler);
}
red.draggable({
start : function(){},
stop: function(){clearInetervals(); },
drag : function(e){
var isMoving = false;
//Left
if((e.pageX - offset.left) <= distance)
{
isMoving = true;
clearInetervals();
intLeftHandler= setInterval(function(){
yellow.scrollLeft(yellow.scrollLeft() - step)
},timer);
console.log('left')
}
//Right
if(e.pageX >= (offsetWidth - distance))
{
isMoving = true;
clearInetervals();
intRightHandler = setInterval(function(){
yellow.scrollLeft(yellow.scrollLeft() + step)
},timer);
console.log('right')
}
//Top
if((e.pageY - offset.top) <= distance)
{
isMoving = true;
clearInetervals();
intTopHandler= setInterval(function(){
yellow.scrollTop(yellow.scrollTop() - step)
},timer);
console.log('top')
}
//Bottom
if(e.pageY >= (offsetHeight - distance))
{
isMoving = true;
clearInetervals();
intBottomHandler= setInterval(function(){
yellow.scrollTop(yellow.scrollTop() + step)
},timer);
console.log('bottom')
}
//No events
if(!isMoving)
clearInetervals();
}
});