After some digging in the ol-source and a weekend of not pondering on this one, I found the following solution/workaround:
// namespace
window.app = {};
var app = window.app;
app.customControl = function (opt_options) {
var options = opt_options || {};
var button = document.createElement("button");
// This will be the Tooltip text or an empty string if not set
var buttonTipLabel = options.buttonTipLabel ? options.buttonTipLabel : "";
button.innerHTML = "<img src='img/custom_control_icon.svg'></img>";
var custCtrlFct = function (e) {
// Function logic
};
button.addEventListener('click', cstCtrlFct, false);
var element = document.createElement('div');
element.className = "custom-button ol-unselectable ol-control";
//Set title of the button to display the tooltip
button.title = buttonTipLabel;
button.className = "custom-control";
element.appendChild(button);
ol.control.Control.call(this, {
element: element,
target: options.target
})
};
ol.inherits(app.customControl, ol.control.Control);
Set the tooltip-text at map creation:
var map = new ol.Map({
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([new app.customControl({buttonTipLabel: "Tooltip Text"})]),
//[...]
});
after creating the map, add the following code:
$(".custom-control").tooltip({
placement: "right" // customize as needed
});
this will get you a tooltip with the same look as the default tooltip.
I don't know if it's the correct way, but OL can simulate latitudes over 180 and below -180. Eg. you can modify the right longitude of your pacific region to 360-125.85937.
At least this works with extents. Here are examples:
Fitting to the West
Fitting to the East
Best Answer
This might not be the best way to do it, but it's one way. You can improve on it.
DEMO LINK
The key here is to move the wrapper/trigger around onFeatureHighlighted event.