I'm making an animated map showing a series of points using Mapbox.js. Ideally, I want to smoothly switch focus between points by combining zoom and pan like this example created in d3.js. I wonder if there is anyway to control the pan & zoom animation speed (mainly to slow it down). In the code below, I've tried both setView() and panTo() functions and the transition is too fast. Any suggestion will be highly appreciated, thanks!
L.mapbox.accessToken = "#Token Here";
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([34.01, -118.48], 5, {
pan: { animate: true },
zoom: { animate: true }
});
map.setView([33.98, -118.42], 5);
Take a look at this fiddle.
You can use a function like:
function jumpTo(index){
map.setView(positions[index], 4, {
pan: {
animate: true,
duration: 2
},
zoom: {
animate: true
}
});
}
And control it on moveend event.
Related
I have a system with lots of highcharts which can be positioned basically anywhere on the page.
Some are very small (e.g. 50px x 50px).
I see we can set tooltip.outside : true
tooltip: {
outside: true
}
This stops the tooltip taking over the whole chart container by breaking it out of the chart and into the window.
However this can cause overflow issues with the window when you're near the edge of the page and I personally prefer a static tooltip.
I'd like to always fix the tooltip to float above the chart, top left with a bit of padding, which for my application will almost always be visible and will avoid overflow issues, e.g.;
I've looked into setting a custom positioner, however, as the "outside" tooltip is now part of the window and not relative to the chart, the positioner sets a fixed position, which isn't suitable for my application.
I'd like the tooltip to always be above the chart regardless of mouse or scroll positions.
Of course I could add a custom element and position it above the chart myself, then applying the tooltip to that, but we have a lot of charts and this seems cumbersome.
Tooltip outside Fiddle
Suggestions?
Thanks
After a bit of poking around in the highstock Tooltip.prototype.getPosition code, it turns out what I needed was this.point.chart.pointer.getChartPosition();
tooltip: {
distance: 40,
outside: true,
positioner: function () {
var point = this;
var chart = point.chart;
var chartPosition = chart.pointer.getChartPosition();
var distance = point.distance;
//Position relative to renderTo container
return {
x: chartPosition.left - distance,
y: chartPosition.top - distance - (point.options.useHTML == true ? point.label.div.offsetHeight : point.label.height)
}
//Alternatively - Position relative to chart plot (ignoring legend)
var containerScaling = chart.containerScaling;
var scaleX = function (val) {
return (containerScaling ? val * containerScaling.scaleX : val);
};
var scaleY = function (val) {
return (containerScaling ? val * containerScaling.scaleY : val);
};
return {
x: chartPosition.left - distance + scaleX(chart.plotLeft),
y: chartPosition.top - distance + scaleY(chart.plotTop) - point.label.height
}
},
},
See working fiddle.
I find it odd that this method is attached to pointer, but it's what I was after.
One thing to note, in the fiddle I use point.label.height, if useHTML:true; use point.label.div.height.
What about using the positioner callback without setting the 'outside' option? It will set the wanted position inside the chart area.
Demo: https://jsfiddle.net/BlackLabel/gabjwd2e/
API: https://api.highcharts.com/highcharts/tooltip.positioner
In Highcharts time series currently we are able to zoom in data and we can reset zoom through button but i want something that can zoom out in steps in same manner like how we zoom in. Is there any way? Any help would be great.Thanks in advance
The idea is to find, after zooming selection, new xAxis extremes, and keep them in extremesXmin and extremesXmax arrays, then set these previous extremes after clicked resetZoomButton:
chart: {
zoomType: 'x',
events: {
selection: function(e) {
if (e.xAxis) {
extremesXmin.push(e.xAxis[0].min)
extremesXmax.push(e.xAxis[0].max)
}
zoomLevel++;
}
}
},
To control the button and set new extremes, you need to overwrite zoomOut() function inside showResetZoom() function inside Highcharts prototype:
function zoomOut() {
if (zoomLevel > 1) {
chart.xAxis[0].setExtremes(extremesXmin[extremesXmin.length - 2], extremesXmax[extremesXmax.length - 2])
extremesXmin.pop()
extremesXmax.pop()
zoomLevel--;
} else {
chart.zoomOut();
}
}
Working demo: https://jsfiddle.net/BlackLabel/h8af7L9g/
I recently upgraded to Highcharts 6, and noticed a marker animation that wasn't there before. I would like to disable it, and can't seem to do so. Before I raise it with Highcharts, I was wondering if I've done something wrong.
To be clear:
I would like on hover styling (increased marker radius and halo)
I do not want any animation on marker hover - either animating in, or animating out
To see the misbehaving markers, load this fiddle and move your mouse over a point and away again. If you comment out the recent Highcharts import and instead use 4.2.5, you'll see the behaviour I'm after.
The only way I can see in the docs to disable on hover animation is to set the animation duration to 0. I tried to do this at three points in the configuration:
plotOptions.spline.marker.states.hover.animation.duration
plotOptions.spline.states.hover.animation.duration
plotOptions.spline.states.hover.marker.states.hover.animation.duration
Like so..
plotOptions: {
spline: {
marker: {
states: {
hover: {
animation: {
duration: 0
}
}
}
},
states: {
hover: {
animation: {
duration: 0
},
marker: {
states: {
hover: {
animation: {
duration: 0
}
}
}
}
}
}
}
}
But nothing worked. Help very much appreciated. Thanks in advance!
Disabling chart.animation seems to resolve the problem. It disables overall animation for all chart updating but, as API states, it can be overridden for each individual API method as a function parameter.
API Reference:
http://api.highcharts.com/highcharts/chart.animation.html
Example:
https://jsfiddle.net/sgz9dq8h/
I want the to prevent slider animation during page refresh, but allow it during the operation of my program.
I'm almost there:
// Initialise var animate as false
var animate = false;
// Jquery UI
function slider(min, max, step) {
$(target_slider).slider({
min: min,
max: max,
range: "min",
step: step,
// var animate set to false on load, so no animation from this guy:
animate: animate,
// var animate now set to true to allow animation every time slider is changed from now on:
var animate = true;
slide: function (event, ui) {
console.log("slider is moving!");
};
},
});
}
// Initialise slider
slider(0, 200, 0.01);
However, the code on line 13 that turns var animate to true is regarded and syntactically incorrect by jquery UI, so how can I change the variable "animate"?
I'm also still a little shaky with javascript's scope. If jquery UI did accept my variable change, would my logic work? I'm assuming it would because var animate is first declared in the global scope, but please correct me if I'm wrong!
You would want to change the value of animate after the initialization of the slider:
...
slider(0, 200, 0.01);
animate = true;
...
Also, after a variable is defined, you do not need to use the var keyword to access it.
Update After looking at the API documentation you can use the setter method to set the animate property after initialization. Try this:
function slider(min, max, step) {
$(target_slider).slider({
min: min,
max: max,
range: "min",
step: step,
animate: false,
slide: function (event, ui) {
console.log("slider is moving!");
}
});
}
// Initialise slider
slider(0, 200, 0.01);
$(target_slider).slider('option', 'animate', 'fast');
From the JQuery reference # http://api.jquery.com/animate/ :
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle' }, 5000, function() {
// Animation complete.
});
It seems we can only modify real CSS properties, however I wish I could animate JQuery object properties as well. As example I would like to animate the 'value' property of a progressbar:
http://jqueryui.com/demos/progressbar/#option-value
//setter
$('.selector').progressbar('option', 'value', 37);
I couldn't find a way to animate this 'value' property of the progressbar, is there any way to do so?
Thanks for help..
If it's to animate the value couldn't you use javascript setInterval() and clearInterval() method?
You could do something like:
var progressBar = $('#progress');
var index=0;
var maxCount=100;
var theInterval = setInterval (function(){
progressBar.progressbar({value:index});
if (index == maxCount) {
clearInterval(theInterval);
}
index++;
}, 100 );
In the above example the setInterval function fires every 100 milliseconds and just increases the value by 1 each time, when it hits 100 the clearInterval function stops it animating.
You might find this link useful: http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon.
Not exactely what you wanted but you could get around and implement your own step function to update the progress bar.
var step_def = $.fx.step._default;
$.fx.step._default = function (fx) {
if ( fx.prop != 'progress' ) return step_def(fx);
fx.elem[fx.prop] = fx.now;
$(fx.elem).progressbar('option', 'value', fx.now);
};
// Now call animate
$('.selector').progressbar('option', 'value', 0)[0].progress = 0;
$('.selector').animate({ progress: 100 }, { duration: 1000 });