I would like to follow my finger movement on an iPhone screen. However this results in rubber banding and scrolling and therefore I have to turn off the default behaviours.
As explained on this website
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
I've added eventlisteners, like so
document.addEventListener('touchmove', touchMove, false);
document.addEventListener('gesturechange', gestureChange, false);
and disabled the default behaviour, like so
function touchMove(event){event.preventDefault(); //other code here}
function gestureChange(event){event.preventDefault(); //other code here}
Now, I can do what I intended to, but I can not scale the page anymore. I'm still able to retrieve the touchstart coordinates and retrieve a zoom factor from gesturechange. Logically, I would like to use those to programmatically change the page zoom. How to do that with javascript?
So far I have some success with applying the eventlistener to a div (instead of the document) and turn oft the touchmove call using a boolean once gesturestart is detected. Actually this works pretty good. I can zoom, pan and double tap on the whole document and zoom and double tap on the div. But a pan on the div executes a function to pass the coordinates (and does not pan).
Related
Fairly new to Mapbox and getting there (slowly).
I have a map initially loaded at zoom level 1 for use in a web browser. When a user clicks on a marker, it'll center and zoom to level 10.
When that marker loses focus, I'd like to zoom back out to level 1.
This page discussing web applications does it (link below), but there doesn't seem to be (that I can find - sorry!) any documentation on how to achieve this.
https://docs.mapbox.com/help/getting-started/web-apps/
Any and all help appreciated!
For the first event, to zoom in when clicking a marker, you could adapt this example to zoom in addition to panning when calling flyTo
https://docs.mapbox.com/mapbox-gl-js/example/center-on-feature/
For the second part, you'd need to add a listener for another event depending on what you have in mind by "losing focus".
https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events
I am using Leaflet in a mobile app and want to get rid of the two zooming buttons in the top corner, but I need the exact same effect (zooming without the possibility of panning around with it) but using a pinching gesture. Alas, the default pinching gesture does not keep the view centred!
I don't know why, but keeping the zoom centred when using the mousewheel or doubleclick are available options for the map object:
If passed 'center', double-click zoom will zoom to the center of the view regardless of where the mouse was.
If passed 'center', it will zoom to the center of the view regardless of where the mouse was.
But not for touchZoom, I tried. maybe the nice people at Leaflet thought the effect doesn't "feel" nice, but I really wish I could try it nonetheless and judge it by myself.
Anyone knows how to get a similar effect? I don't really want to end up calling setView() at every "zoom" event call, if that even was an option...
Found out that I could use the maxBounds option. If you set both corners on a single point (the one you'd use for setView, for example), the map won't be able to pan away from it.
For a page with a scrollviewer - using the hand gesture allows the user to scroll up and down and across or whatever. Using a pen doesn't do anything.
The requirement is to have a button to reverse the functionality of pen and touch.
If this button is pushed the touch can draw ink strokes on a canvas and the pen cannot. This works.
I'm not entirely sure how to proceed with the situations:
pen to be "gesture" to scroll page instead of touch.
hand to draw ink stroke on a canvas that is within a scrollviewer.
Is there a method or attribute that i can set that makes the pen/hand accept gestures?
thanks.
So I found a suggestion (can't remember where) ... that i should disable the zooming and scrolling. When that was set I called the method to allow for inking. Not entirely sure if that's the correct way of doing it but through various testing...it worked.
How do I disable just the grab aspect of panning for bing maps AJAX control 7.0?
I have tried this -
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "bing maps credentials", mapTypeId: Microsoft.Maps.MapTypeId.road, disablePanning: true});
But setting the disablePanning property in the map options not only disables grab panning but also zoom panning. Zoom becomes not completely disabled but instead will only zoom in and out on the center of the map. No doubt you will have come accross zoom panning where you can use the mouse scroll wheel to zoom in on the map under the cursor and therefore can pan around by zooming in and out and moving the cursor. I would like to have zoom panning enabled but grab panning (where the user depresses the mouse and drags it around) to be disabled.
I am aiming for functionality very similar to when using the my places editor on the main bing maps site. When using the polyline tool to draw on the map grab panning is disabled and zoom panning is enabled just as I would like. I am actually intending on creating a custom drawing tool similar to the polyline tool in the my places editor.
I have been studying the api but have not discovered how to do it yet. I have also tried to discover how it is done on the main bing maps site but as the javascript code is all minified I am finding it very difficult. I have managed to gleen that the polyline tool hijacks the mouse, but that is about all.
Surely there must be a simple way of doing this. How is it done?
I don't think there is a map option you can set to achieve the behavior you want(enable zoom panning/disable grab panning). However, there is an easy way to hack it. The panning is initiated by the user clicking down on the map and moving the mouse. So if you can supply your own mousedown event handler for the map, and in its implementation prevent the default behavior of the mousedown, you should be good to go. Turns out the handled property on MouseEventArgs does just this:
Microsoft.Maps.Events.addHandler(yourMapObj, 'mousedown', function (mouseEvent) {
mouseEvent.handled = true; //A boolean indicating whether the event is handled. If this property is set to true, the default map control behavior for the event is cancelled.
});
With this, mousedown events on the map are processed by you and ignored by the map. So when the user tries to pan the map using the mouse, nothing happens. They can still click and zoom around as usual. Keep in mind if you have other elements on the map such as pushpins and shapes, this will prevent the mousedown event from reaching them. So any mousedown event handlers you registered on them will not get called. You can handle this either by unregistering the above handler when you want the other mousedown events to be called(preferable), or interogate the target property on your MouseEventArgs to see what fired the mousedown(messy).
I'd like to make a "video wall" type application, where multiple images are mapped onto a cylinder, I'd like to then enable each of these images as buttons.
Is this possible? I'm not sure if objects in an openGL space can act as buttons.
sure, it's possible. When the user clicks the opengl context you should be able to get back a x, y location where they clicked. It's then a matter of just doing your projection math backwards to find out what part of the scene they clicked.
You can also render the entire scene to a back buffer with each button set as a different color, then do a glReadPixels from this back buffer at the location of the click. The color value returned is the button they clicked.
And here's an example with a even faster method: http://www.lighthouse3d.com/opengl/picking/
There you only draw the picking buffer when the user clicks the mouse, and only for the single pixel they clicked.
Note: not all of these methods may work with OpenGL ES....so you'll have to pick the one that's right for you.
As a side note, this is also how many FPS games accomplish hit detection.