Develop Reference

Adding an opacity slider to an Openlayers map

It is straightforward to add an opacity slider for a raster layer using this line of code:
layer.setOpacity(this.value) to lyr_MyMapImage.setOpacity(this.value)
But this is untidy as the slider is located above the map.
How can I insert a slider (horizontal or vertical) onto the map to control the opacity of the layer so that it looks similar to the other map controls? Is there a plugin?
Thanks.

you can use jQuery slider. Example below:
$("#sliderLayer").slider({
min: 0,
max: 100,
value: 100,
slide: function(event, e) {
lyr_MyMapImage.setOpacity(e.value / 100);
},
disabled: true
});
Also, here is jsFiddle:
https://jsfiddle.net/Svinjica/L7edtgx3/19/
Hope it helps:)

In my jsfiddle I position the slider inside a proper openlayers custom control:
const sliderita = document.createElement('div');
sliderita.className = 'ol-control ol-unselectable slider';
sliderita.innerHTML = '<div id="sliderOSM"> <div id="custom-handle" class="ui-slider-handle"></div></div>';
map.addControl(new ol.control.Control({element: sliderita}));
https://jsfiddle.net/5w6sahx4/5/

Zoom to Openlayers 3 function

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]
});
}

jquery slider alter step value based on control peripheral used

Code so that you can see what im working with.
$("#slider-markup").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 500,
value: 0,
step: 0.01,
slide: function (event, ui) {
$("#markupRate").text(ui.value);
calcNow();
}
});
Okay so I know how to step increment as you can see here its a very fine step I'm using but its difficult to get to the right value due to the high range.
I also know that the slider can be used with the mouse and once activated can be moved to the next step with the keyboards arrows.
What I would like to be able to do is set a mouse step of 1. then a keyboard step of 0.01
Is this possible, has it been done? I've been looking around for this sort of functionality of sliders but am coming up empty.

The quick answer:
$(function() {
$("#slider-markup").slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 500,
value: 0,
step: 0.01,
slide: function(event, ui) {
$("#markupRate").text(ui.value);
}
});
$("#slider-markup .ui-slider-handle").mousedown(function() {
$("#slider-markup").slider("option", "step", 1.0);
}).mouseup(function() {
$("#slider-markup").slider("option", "step", 0.1);
});
});
Working Example: https://jsfiddle.net/Twisty/xkwq87j6/
You can adjust the step option by biding a callback to specific events.

jQuery UI .scale() effect producing odd positioning jumps

Fiddle here.
Description of problem:
I'm attempting to make this image scale into view (centered), and then give the appearance that it's "bouncing" away from the screen briefly after reaching its maximum size of 100%. Unfortunately, it is moving down and to the right with each new effect chain. Why?
Note that the effect I'm attempting to achieve is completely different from the bounce effect.

Try 'scale': 'box' option for scale effect.
scale (default: "both")
Type: String
Which areas of the element will be resized: "both", "box", "content". Box resizes the border and padding of the element; content resizes any content inside of the element.
As yours box div doesn't actually have any content, probably, that's the reason of unwanted shifts...
Yours fiddle with modification.
Another fiddle variant.
Upd.
As you can see in second fiddle, you can use separate function for each animation phase (effect). So, just in outermost phase pick current box size, and in each next phase calc scale percentage with honored current/initial box size, like following:
var box = $('.box');
box.data('size', {'w': box.width(), 'h': box.height()});
box.show(scale_effect(box, 100, 250, function () {
box.stop().effect(scale_effect(box, 80, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
box.stop().effect(scale_effect(box, 90, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
}));
}));
}));
}));
}));
function scale_effect(box, percent, duration, complete) {
box = $(box);
var size = box.data('size');
var absolutePercent = percent * size.w / box.width();
console.log(absolutePercent);
return {
'effect': "scale",
'percent': absolutePercent,
'scale': 'box',
'duration': duration,
'queue': false,
'complete': complete
};
}
See the fiddle for preview.
And here's some nifty variant with following syntax:
$('.box').bouncedScale([
{'percent': 100, 'duration': 250},
{'percent': 80, 'duration': 100},
{'percent': 100, 'duration': 100},
{'percent': 90, 'duration': 100},
{'percent': 100, 'duration': 100},
]);

Kinetic color fill tween not working

Im trying to change the color of the target node on mouse over and am currently using this code:
layer.on('mouseenter', function(evt) {
var shape = evt.targetNode;
shape.moveTo(secondLayer);
stage.draw()
var tween = new Kinetic.Tween({
node: shape,
duration: 0.05,
scaleX: 1.5,
scaleY: 1.5,
fillRed: 255,
fillGreen: 102,
fillBlue: 0,
});
tween.play()
});
secondLayer.on('mouseout', function(evt) {
var shape = evt.targetNode;
var tween = new Kinetic.Tween({
node: shape,
duration: 0.05,
scaleX: 1,
scaleY: 1,
fillRed: 17,
fillGreen: 17,
fillBlue: 17,
onFinish: function() {
shape.moveTo(layer);
layer.draw();
}
});
tween.play();
});
The scale tween works fine however the color does not change at all. Not entirely sure what Im doing wrong.
Heres a jsfiddle of it:
http://jsfiddle.net/y2C3Z/5/

The 'fill' attribute that you set for the triangle has priority over fillRed, fillGreen, and fillBlue... so you would also have to set the color with those RGB attributes when creating the triangle.
From the official change log:
the color component API has changed a lot. fillR() has changed to
fillRed(), fillB() has changed to fillBlue(), etc. The same goes for
stroke and shadowColor components. The RGB() methods have been removed
because they have muddied up the API. i.e. fillRGB(), strokeRGB(), and
shadowColorRGB() have been removed. The components are now actual
attrs. the fill attr has priority over components. i.e. if you set
fill to 'blue' but you set the fillRed and fillGreen values, the fill
will resolve to blue.
Here is a working jsfiddle of your code using the latest version of Kinetic JS. Note that I also had to change evt.targetNode to evt.target.