I am building a UI using Openlayers 4. The request I have received is to not allow the user to double click to complete the current .Draw interaction. I have manages this on the LineString by using the maxPoints option and only allowing the user to draw straight lines (as per my requirements).
I need to do the same thing with the Polygon but cannot get it to work. I have tried using the finishCondition but this does not help.
Is this something that can be done in Openlayers?
JS Fiddle is throwing massive errors on my machine at the minute, I'll add an example as soon as I can.
EDIT
Here is a basic jsfiddle. You can toggle the return boolean from finishCondition, when set to true the single and double click end the polygon drawing. When set to false the drawing cannot end.
I need to find the codtion that will allow me to return false if the user double clicks and true otherwise.
Ok, after a bit of further investigation I have found a solution, shown in this jsfiddle.
I have used the on drawstart event to calculate and set the coordinate of the first point in the polygon, in the finishCondition I find the current pixel it is at, then using that to see if it is within 10px of the clicked point, if it is end the polygon if not then keep drawing.
I am happy if anyone out there can show me a more elegant way to do this, but for now this seems to do the trick.
Had a look go with this aswell, and you can return whether or not the the finish coordinate of the interaction
finishCondition: event => {
return this.interaction.finishCoordinate_ === this.interaction.sketchCoords_[0][0];
};
Related
I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :
(here is the codesandbox corresponding :https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js)
first and foremost I want a smooth scroll and can't seem to be able to make it, I used the lerp function to make it but the result doesn't work very well :
let scroll = 0;
scroll = (scroll - scrollTargetMapped) * 0.03;
// any other frame, groupRef.current is undefined, don't really know why
// but because of it, i must put my logic inside an if loop
if (groupRef.current) {
groupRef.current.position.x = THREE.MathUtils.lerp(
scroll,
-scrollTarget,
0.01
);
}
secondly, the elements on my scene are placed kind of in a random way and the scene is not at all responsive. I would love to mimic the html logic and put my first element like 50px away from the left side of the screen but not sure if it's really possible with react threejs :)
If someone has any answer to one of those question, I take it 🙂
Thanks in advance !
For those interested, I managed to find a solution, using one of drei components : ScrollControl, it works perfectly !
https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js
For more info on the said component, check out the doc : https://docs.pmnd.rs/drei/controls/scroll-controls
As the title states, I have a Leaflet (version 1.02) map that breaks if I try to zoom in after calling a flyTo() action. Oddly, if I zoom out first, I can then zoom freely, in or out without the map breaking. Panning also works after the flyTo(), but zooming in will still break the map unless I first call a zoomOut action.
I am not at max zoom, and this happens in multiple maps with different sets of markers. If, at zoomend of the flyTo(), I setZoom at the current level, I can then zoom freely, in or out, but this causes the map to flicker after the flyTo() and is very unappealing.
Any thoughts about this?
Thanks in advance!
I know this post is somewhat old at this point, but if anyone runs into a situation where they're using leaflet with the flyTo() function and getting subsequent weird behaviour with zooming then the issue may be what format you're passing your arguments to flyTo().
Make sure the lat, lon are cast to float and zoom is cast to int. I ran into this issue and it turned out to be due to my parameters being passed in a strings. flyTo() seems to operate fine with strings as parameters but subsequent zoom operations act erratically.
I also ran into that bug and I manage to find out a workaround, assuming that the 'zoom' function in 'flyTo' was somehow corrupting the following zoom in action made by clicking on the "+" icon.
I decided to make the flyTo immediately followed by a setZoom action. Here's the code :
map.flyTo(latlong, zoom, {animate: true, duration: 3});
setTimeout(function(){ map.setZoom(zoom);}, 3000);
Options make the flyTo sequence last for 3 seconds
Next line waits 3 second, i.e. exact time for the flyTo to end end and then performs a setZoom, thus canceling any mysterious action of the flyTo that breaks the zoomIn action of the user.
Then it works.
I ran into the same problem. After a .flyTo() call pressing the Zoom + button caused the map to go to maximum zoom, but pressing the Zoom - first meant everything worked OK.
After reading dageshi above, that proved to be the issue.
Make sure the lat, lon are cast to float and zoom is cast to int.
Adding a parseInt() to the value passed to .flyTo() fixed it straight away.
Thanks dageshi
I have trouble getting Map behave properly when calling ZoomToResolution and PanTo
I need to be able to Zoom into specific coordinate and center map.
The only way I got it working is by removing animations:
this.MapControl.ZoomDuration = new TimeSpan(0);
this.MapControl.PanDuration = new TimeSpan(0);
Otherwise if I make call like this:
control.MapControl.ZoomToResolution(ZoomLevel);
control.MapControl.PanTo(MapPoint());
It does one or another (i.e. pan or zoom, but not both). If (after animation) I call this code second time (map already zoomed or panned to needed position/level) - it does second part.
Tried this:
control.MapControl.ZoomToResolution(ZoomLevel, MapPoint());
Same issue, internally it calls above commands
So, my only workaround right now is to set Zoom/Pan duration to 0. And it makes for bad UX when using mouse.
I also tried something like this:
this.MapControl.ZoomDuration = new TimeSpan(0);
this.MapControl.PanDuration = new TimeSpan(0);
control.MapControl.ZoomToResolution(ZoomLevel);
control.MapControl.PanTo(MapPoint());
this.MapControl.ZoomDuration = new TimeSpan(750);
this.MapControl.PanDuration = new TimeSpan(750);
Which seems to be working, but then mouse interaction becomes "crazy". Mouse scroll will make map jump and zoom to random places.
Is there known solution?
The problem is the second operation replaces the previous one. You would have to wait for one to complete before starting the next one. But that probably doesn't give the effect you want.
Instead zoom to an extent, and you'll get the desired behavior. If you don't have the extent but only center and resolution, you can create one using the following:
var zoomToExtent = new Envelope(point.X - resolution * MapControl.ActualWidth/2, point.Y, point.X + resolution * MapControl.ActualWidth/2, point.Y);
Btw it's a little confusing in your code that you call your resolution "ZoomLevel". I assume this is a map resolution, and not a level number right? The esri map control doesn't deal with service-specific levels, but is agnostic to the data's levels and uses a more generic "units per pixels" resolution value.
Our app has a rotating map view which aligns with the compass heading. We counter-rotate the annotations so that their callouts remain horizontal for reading. This works fine on iOS5 devices but is broken on iOS6 (problem seen with same binary as used on iOS5 device and with binary built with iOS6 SDK). The annotations initially rotate to the correct horizontal position and then a short time later revert to the un-corrected rotation. We cannot see any events that are causing this. This is the code snippet we are using in - (MKAnnotationView *)mapView:(MKMapView *)theMapView viewForAnnotation:(id )annotation
CATransform3D transformZ = CATransform3DIdentity;
transformZ = CATransform3DRotate(transformZ, _rotationZ, 0, 0, 1);
annotation.myView.layer.transform = transformZ;
Anyone else seen this and anyone got any suggestions on how to fix it on iOS6?
I had an identical problem so my workaround may work for you. I've also submitted a bug to Apple on it. For me, every time the map got panned by the user the Annotations would get "unrotated".
In my code I set the rotations using CGAffineTransformMakeRotation and I don't set it in viewForAnnotation but whenever the users location get's updated. So that is a bit different than you.
My workaround was to add an additional minor rotation at the bottom of my viewForAnnotation method.
if(is6orMore) {
[annView setTransform:CGAffineTransformMakeRotation(.001)]; //iOS6 BUG WORKAROUND !!!!!!!
}
So for you, I'm not sure if that works, since you are rotating differently and doing it in viewForAnnotation. But give it a try.
Took me forever to find and I just happened across this fix.
You can see the code there: http://jsfiddle.net/jocose/CkL5F/901/
(double click on the box and move your mouse)
NOTE: This is a simplified example that is part of a larger system. My ultimate goal is to manipulate individual vertices of a path.
Update: I crunched the numbers and the math actually apears to be correct. What I want to do is calculate the offset from each point to the mouse, and then move that point to the mouses position + the offset.
So if I have a mouse of 224 then 224-103 = 121 then I add: 121+224=345
These creates a cycle of ups and downs that I am seeing. I don't know why these is stumping me so badly, any help would be much appreciated.
I need to manually update a Raphael path element.
To do this I convert an absolute path into an array using Raphael great built in function "parsePathString"
I then loop through that array and modify the values based off the mouse position.
The update is done to the X values only, and is in real time; called each time the mouse moves.
When the element moves it flickers back and forth between the correct position and some anomalous one.
I have no clue why its doing this. I have spent almost 5 hours trying to figure this out and I'm officially stuck.
Here is a sample of the result where you can see the values jumping around:
MOUSE224
M,103.676287
MOUSE225
M,346.323713
MOUSE227
M,107.676287
MOUSE228
M,348.323713 12
MOUSE228
M,107.676287
MOUSE229
M,350.323713
MOUSE231
M,111.67S287
MOUSE232
M,3S2.323713
MOUSE233
M,113.676287
MOUSE233
M,3S2.323713
Here's my version of your fiddle modified to do what I think you need. At least, it seems to work. It's the same type of problem I had to fix for the Raphael 2 transformations here.
Basically, in your mousemove, I've changed mx to be a calculation of the offset between where your mouse is now and where it was the last time mousemove was called. Your move() function now only has to add this value to the x-coords.
Hope this helps you out somewhat