I have a map with a series of overlays constructed from external data displaying information. I was wondering though is there is a way to set an overlay so it wont draw on top of the map controls?
By default they cover and hide the controls when in the location happens to overlap.
It appears that by default overlays will appear as expected underneath controls.
What was going on in my case was the div that contained the overlay data had received a z-index style which was forcing it higher than the controls.
It has to do with the way controls are added to your map.
Zoom in and out buttons is the default ol.control.Zoom and so it is the first control added on map. Then your custom control is added afterwards and so is overlapping the zoom control.
To overcome it, disable the default zoom control during map init like so:
......new ol.Map({
controls: ol.control.defaults({
zoom:false//here is the disable
........
Then add your custom control and then, on top if it , add the zoom control.
All together should be :
var map = new ol.Map({
controls: ol.control.defaults({
zoom:false
}).extend([
new app.CustomControl(),
new ol.control.Zoom()
]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
rotation: 1
})
});
Here is a fiddle to see it in action
UPDATE
To deal with Overlays, during overlay init set insertFirst:true so the overlay is displayed below the controls. Check the api doc here
Related
Please have a look at
www.jsbin.com/wigokojina/1/edit?html,css,js,output
I've added custom svg icons to the konva transformer, but the middle rotator icon is draggable even if i set draggable to false. The two other icons are fine and as expected, as far as dragging is concerned.
My questions are:
How do i disable the dragging for the rotator anchor, so that the icon doesnt move?
How do i disable all event handlers for an anchor, and add one click event? Ive tried shape.off('dragmove') etc. The only thing that helps is setting listening to false, but then im prevented from adding a new event listener. I want to disable all event handlers for the top right anchor, and add one onclick listener afterwards.
Is it possible to add the icons to the shape itself using fillPatternImage? Instead of adding the icon as a new shape like im doing. If its possible, please provide an example using the jsbin.
Thanks very much :-)
At the current moment konva#4.0.16 doesn't support fully customized Konva.Transformer. But you are making a good attempt.
How do i disable the dragging for the rotator anchor, so that the icon doesn't move at all?
You can reset the position in transform event (almost as you do it). But at the current moment, for performance reasons, inside transform events all anchors has "old" positions. So you see dragging of the icon from rotater anchor. To fix the issue we can force update a transformer:
circle.on('transform', function(){
transformer.update();
for (var button in buttons) {
var selector = button.replace('_', '-');
var shape = transformer.findOne('.' + selector);
var icon = transformer.findOne('.' + selector + '-icon');
icon.position(shape.position());
icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
layer.batchDraw();
}
});
How do I disable all event handlers for an anchor, and add one-click event
It can be something like this:
shape.listening(false);
icon.on('click', () => {
alert('delete');
});
Demo: https://jsbin.com/galetahara/4/edit?js,output
when I drag in the chart, it triggered a zoom action, how to change it to the behavior like Google Map? drag the map, map will move, and scale the map with mouse wheel.
I found a way to do this:
download Highmaps
import highmaps/modules/map.js into html file
add mapNavigation option to the chart:
mapNavigation: {
enabled: true,
enableButtons: false
}
How do I toggle the Mouse Wheel Zoom functionality?
I know you can set the mousewheelzoom default at map creation:
interactions: ol.interaction.defaults({
mouseWheelZoom: false
}),
But how do I change it once the map is created i.e. when user clicks the map I want to run a routine which switches mouse wheel zoom back on?
I know this was tricky in Openlayers2 - you had to cycle through the controls:
function PMA_Mapping_Enable_Mouse_Wheel_Zoom(map) {
//Need to go through all controls - don't know why!
controls = map.getControlsByClass('OpenLayers.Control.Navigation');
for (var i = 0; i < controls.length; ++i)
controls[i].enableZoomWheel();};
Don't know if that helps but thought I should include it.
Does anyone know how to achieve this in openlayers 3?
Mouseweel is an interaction not a control.
so, you can always use the
interaction.setActive(true), interaction.setActive(false) to toggle the interaction.
Start your map initialazation like so:
......interactions: ol.interaction.defaults({
mouseWheelZoom: false
}), .......
Then once your map is ready create the mouseWheel interaction like so:
var mouseWheelInt = new ol.interaction.MouseWheelZoom();
map.addInteraction(mouseWheelInt)
and then toggle it :
mouseWheelInt.setActive(!mouseWheelInt.getActive())
The web application that I'm working with consists of a jsTree (v3.1.1) with the contextmenu plugin. This is all working correctly, but when I right click on a node that is close to the bottom of the page it cuts off some options. See image below:
Contextmenu on jsTree getting cut off if too close to the bottom of the browser window
I have had a look at the jsTree API Show at Node, but this just specify whether the context menu should display below the selected node or at the position of the mouse click.
If someone could please provide me with some guidance on how to calculate that if there is not enough space for the entire context menu to be displayed (all options visible), to display it in such a way that the user is able to see all the options. If a node is selected and there is enough space for the context menu, it should work like it is currently by default.
So I know what to do, but it is the how & where I'm not sure on how to implement it on the jsTree where I'm struggling:
Get location of the node selected
Determine height of the context menu
Determine available space from the select node to the bottom of the browser window
If available space is less that that of the context menu, display the context menu to the top of the node. If there is no space issue, display as it does currently.
Any assistance would be appreciated.
Surely there is a more elegant solution but you may wait for it quite long.
As a quick fix I propose simply to move the context menu to the position you want after it is shown. A user won't notice it anyway. See below and check fiddle - Fiddle. Probably you would want to check if node is at screen bottom before moving menu which I haven't done.
$("#dutchData")
.on("show_contextmenu.jstree", function (e, data) {
var $node = $('#'+data.node.id),
$menu = $('.vakata-context').first(),
nodeTop = $node.offset().top,
menuTop = nodeTop + $node.height() - $menu.height(),
menuLeft = 200,
$subMenu = $menu.find('ul'),
subMenuTop = $menu.height()-$subMenu.height();
$menu.offset({left: menuLeft, top: menuTop });
$subMenu.offset({top: subMenuTop });
})
.jstree({
"core" : {
"data" : data,
"themes": {
"url": true,
"icons": true
}
},
plugins: ['contextmenu']
});
I am using this plugin: http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html (dropdown style)
And it is working well but when i add a selectmenu at the bottom of my page then this happends:
How can i fix this that when the selectmenu is on the bottom that the dropdown comes above instead of under?
The JS i use:
$('select').not("select.multiple").selectmenu({
style: 'dropdown',
transferClasses: true,
width: null
});
I think the version you are using is not the very latest. You should check the source from the GitHub repository, which is the official repository.
The version from GitHub uses jquery.ui.position from jQuery UI, which allows you to specify where to display the menu relatively to the element ("top top", "left bottom"...) and also allows collision detection.
From the documentation:
When the positioned element overflows the window in some direction,
move it to an alternative position. Similar to my and at, this accepts
a single value or a pair for horizontal/vertical, eg. "flip", "fit",
"fit flip", "fit none".
So you'd rather use the plugin this way:
$('#myelement').selectmenu({
...
position: {
my: "left top", // default
at: "left bottom", // default
// "flip" will show the menu opposite side if there
// is not enough available space
collision: "flip" // default is ""
}
});
Check the following question for similar problem explained (the method _refreshPosition() seems to not exist anymore as is but the option position is of course still there).