I'm using this function from Openlayers 3 cookbook:
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());
}
This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.
I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?
I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
padding : [100, 100, 100, 100]
});
}
Related
I'm using Scrollreveal.js to reveal some divs on my website.
Now i want Scrollreveal to call a function after it has revealed a specific div.
As the documentation says:
"
// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}"
My code:
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
afterReveal: function (domEl) {domEl.demo();}});
Can anyone tell me what the correct syntax is to call my variable after the div has been revealed?
I have tried for a long time to do it myself, with no positive results, so i think it's ok to ask someone for help now :)
Thanks!
Figured it out, it wasn't difficult, as i suspected, just me being new to this :)
so to shorten this, this is how i used CountUp.js with Scrollreveal.js
sr.reveal('#mails', {
duration : 600,
delay : 200,
distance : '220px',
easing : 'ease-out',
origin : 'left',
scale : 1,
viewFactor : 0.2,
beforeReveal: function(){var options = {
useEasing: true, useGrouping: true, separator: ',', decimal: '.',
};
var demo = new CountUp('mails', 0, 641, 0, 2.5, options);
if (!demo.error) {demo.start();
} else {console.error(demo.error);
}},
});
I'm using jQueryRotate to rotate my image.
Basically I want the image to start at 0 then rotate to -20 degrees then to 15 degrees then keep going back and forth between these 2 values and continue this infinitely.
So basically a little image shake, would this be possible with jQueryRotate or would you recommend another jquery plugin? Would need something with IE9 support.
Sorry forgot to post the code, but I was able to come up with a solution.
function() {
var rotation = function() {
$("#img1").rotate({
duration: 1000,
angle: 0,
animateTo: -15,
callback: function() {
$(this).rotate({
duration: 1000,
angle: -15,
animateTo: 0,
callback: function() {}
});
}
});
}
rotation();
I'm new to charting and js and don't have much experience with js and jqplot so maybe someone can help me out?
I try to replot a jqplot meter gauge when the browser window is resized. I could find some examples during my research that seem to work fine but as soon as I try it myself, I can't make it work.
Here is my code:
A fiddle can be found here
$(document).ready(function(){
s1 = [72];
var plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
$(window).resize(function() {
plot0.replot( { resetAxes: true } );
});
});
Maybe someone can see what I'm doing wrong? Any help is highly appreciated! I'm totally frustrated :(
UPDATE
So I read again through all the documents and found this little sentence on the jqplot homepage:
"A meterGauge plot does not support events."
So I guess it just won't work whatever I do?
Any other idea how to make the jqplot meter gauge responsive?
Wow, we finally found a solution.
For anybody else interested in the topic, here is how we did it in the end.
<script>
var plot0;
$(window).resize(function(){
$('#chart0').html('');
plotGauge();
});
$(document).ready(function(){
plotGauge();
});
s1 = [22]
function plotGauge(){
plot0 = $.jqplot('chart0',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'Your Score is <div class="score">' + s1 + '</div>', //Showing the value
labelPosition: 'bottom',
min: 0,
max: 100,
intervals:[30, 60, 80, 100],
intervalColors:['#cc6666', '#E7E658', '#93b75f', '#66cc66'],
ringColor: '#737373',
ringWidth: 0.00000000001,
background :"transparent",
intervalInnerRadius: 95,
hubRadius: 6,
showTicks: false,
needleThickness: 5,
showTickLabels: false,
}
}
});
}
</script>
<div id="chart0"></div>
The above solution had problem with animation of graph(update data and replot), because when you have updated the data before resizing, again it shows from starting.So, you have to update the data before replot the graph.
But i found one more solution for this graph(i don't know what exact problem with graph), but somehow i had managed the graph replot by adding some dummy data to replot function. Please follow the below snippet.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy:'dummy' });
});
The above snippet is working fine, and is best instead of creating new object.
Hope this is helpful.
I also faced this problem with Gauge replot.
What I did is passed a dummy parameter to replot and it worked for me.
$(window).resize(function() {
plot0.replot( { resetAxes: true, dummy: 'dummy' } );
});
I didn't dig into the jqPlot code, will open an issue in free time.
Using OpenLayers 2.13. I have a map with 2 vector layers, and a JQuery slider which allows adjustment of the layer opacity.
If I set up a selector to include both layers (for highlighting and popups), my JQuery slider to adjust the opacity doesn't work (layername.setOpacity(x) fails to set the opacity of the layer). If only one layer participates in the selector then setOpacity works fine. Both layers use the same styleMap.
$("#slider-id").slider({
value: 70,
min: 10,
max: 100,
step: 10,
slide: function(e, ui) {
layer1.setOpacity(ui.value / 100);
layer2.setOpacity(ui.value / 100);
} });
This selector allows the opacity to be set for both layers:
var selector = new OpenLayers.Control.SelectFeature(layer1,{
hover:false
});
But this selector does not (setOpacity() fails no matter what):
var selector = new OpenLayers.Control.SelectFeature([layer1, layer2],{
hover:false
});
The Selector is added and activated.
map.addControl(selector);
selector.handlers.feature.stopDown = false; //allow dragging on map
selector.activate();
Is there some way to have multiple layers participate in the selector, while allowing the opacity to be changed?
It might be bad form to answer your own question, but I found a workaround and am posting it here for anyone else with this problem.
Deactivate the selector before changing the opacity.
$("#slider-id").slider({
value: 70,
min: 10,
max: 100,
step: 10,
slide: function(e, ui) {
selector.deactivate();
layer1.setOpacity(ui.value / 100);
layer2.setOpacity(ui.value / 100);
selector.activate();
}
I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});
As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}
Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...