I’m working on a draw tool using draw interaction. When the user has finished drawing one object the draw interaction should be deactivated. I tried with setActive(false) in the ‘drawend’ event. But then it seems the draw interaction is canceled prematurely. For example the zoom interaction get triggered if the drawing is finished with double click.
My workaround was to set a timeout, like this:
drawTool = new ol.interaction.Draw({
features: drawOverlay.getFeatures(),
type: activeTool,
style: style
});
drawTool.on('drawend', function(e) {
setTimeout(function(){drawTool.setActive(false);},100);
});
Is there a better way?
Try this way:
source.on('addfeature', function(evt){
drawTool.setActive(false);
});
If you need to check if the added feature is from draw interaction then you need some more code. Let me know if this is your case.
Apparently the problem is already outlined as an issue in ol3. Time delay seems to be the current workaround.
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
I have a map where a user can choose some object/feature on the map and draw a line to another object/feature. When the user selects the feature i would like do add a draw interaction and already set the first point to the selected feature without the user having to click again on the map.
Here is a fiddle: Sample
The commented code below should be executed programmatically without user interaction, after pressing the draw button
geometryFunction: function (c, g) {
if (goog.isDef(g)) {
g.setCoordinates(c);
} else {
// DO THIS AUTOMATICALLY ON PRESSING DRAW
// TO INITIALIZE AND START THE DRAWING PROCESS
c[0][0] = 1174072.754460305;
c[0][1] = 332653.94709708635;
g = new ol.geom.LineString(c);
}
...
}
The current behaviour is that you click on the Draw button and can click on the map to start drawing (but i overwrite the first node with my desired starting location -- in this example near central africa)
Is it possible to click on Draw and the first node is already programmatically set, without having to click on map first?
It is not currently possible to do manually append points to the OpenLayers 3 ol.interaction.Draw, but it would make sense to be able to support it (in my mind). It would be "as-if" the user had clicked.
You should ask the OL3-dev mailing this about adding such a feature to see what they think about it. If they agree and you're willing to work on this, you could provide a pull request. See: https://groups.google.com/forum/#!forum/ol3-dev
If you don't mind using a private method in OL you can do this to achieve what you want.
var event = $.Event('click'); //create a click event in your draw method using JQuery
event.coordinate = [1174072.754460305,332653.94709708635];// set your starting coordinate
draw_interaction.startDrawing_(event);// tell your interaction to start drawing
I was looking at this example of openLayers ( http://openlayers.org/en/v3.14.1/examples/custom-interactions.html?q=custom ) and I was wondering how can I load a small image like the one in the example on mouse down on the map? I tried several things but couldn't figure it out. Any ideas?
Thanks!
The example you link to uses custom interactions to drag existing features around the map - this code is very useful and I used it to work out how to drag markers around my map.
However, there is a simpler way to add the markers in the first place, which is to use the map's singleclick event handler:
map.on("singleclick", function(event) {
// Add icon here...
})
I've put a complete example here, showing how I did it:
http://www.freytag.org.uk/pages/2016/03/06/openlayers-addfeature.html
Once you've got that working, you can use the custom interactions in the OL3 example to then drag those markers around the map.
I am using setExtremes to zoom in on detail in a chart, as well as allowing the user to zoom 'x,y' by selecting in the chart. When the user zooms, they get a 'reset zoom' button, however when I call setExtremes, I don't.
Is there a way for me to force the 'reset zoom' button to appear programatically ?
UPDATE:
calling
if( !chart.resetZoomButton ) {
chart.showResetZoom();
}
inside the afterSetExtremes event handler makes the button appear, but clicking it doesn't do anything.
UPDATE:
Rather than calling setExtremes, I've changed to calling
chart.xaxis[0].zoom(minx, maxx);
chart.yaxis[0].zoom(miny, maxy);
chart.redraw();
This has the same affect as the user zoomin in by selecting on the chart.
Just had a look around the HighCharts source code, it looks like this may work out for you:
chart.showResetZoom();
Also, in order for the button to work correctly, you should use axis.zoom instead of setting the extremes:
axis.zoom(newMin,newMax);
Let me know if it works!
You can use showResetZoom, but you have to check if the reset button is already visible, otherwise it won't desapear.
if( !chart.resetZoomButton ) {
chart.showResetZoom();
}
This approach works well:
if (!$('.highcharts-button').length) {
chart.showResetZoom();
}
This is assuming that the only button that might show is the "Reset Zoom" button. If it is already there, don't show another.
If you don't do this check, a new button is added each time you call showResetZoom(). Clicking the visible (most recent) button resets the zoom and removes the button but the older buttons are still visible and do nothing.
If you are using setExtremes you can also set min and max to null to reset:
chart.xAxis[0].setExtremes(null, null)
I have a highchart displaying multiple series, each contains 100+ data points
I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line
My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place
Does anyone know how to handle this?
Thanks
Rather than calling hide() for each series, call setVisible(false, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.
Then, after you're done changing visibilities, call chart.redraw() once.
http://api.highcharts.com/highcharts#Series.setVisible
as answered in:
Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
highcharts draw each time a show or hide is called;
disabling and enabling the redraw function worked for me;
var _redraw = this.chart.redraw;
this.chart.redraw = function(){};
//do work
this.chart.redraw = _redraw;
this.chart.redraw();
How about adding visible: false for the series that are hidden before calling Highcharts.chart()?
Please see references: 1. Highcharts API and 2. Demo
In my case, above approach showed the best performance comparing to the followings:
series.hide()
setVisible(false, false)
setVisible(false, true) or setVisible(false, false); redraw();