I'm using Here Maps, and I was wondering if there was a way to lock the zooming unless I'm ctrl + mouse wheel zooming.
When scrolling through the page, sometimes the mouse is over the map. This makes it so the map accidentally zooms in or out of the map depending on the direction of the mouse wheel scroll. I don't want that to happen!
I know that Google Maps has this functionality. I was wondering if Here Maps has the same functionality as well.
This is currently not supported by the JavaScript API but an interesting functionality. It is certainly something that we should have on the radar and will add it to the backlog.
Related
I have several embedded maps on my website. The source of these maps are from....
Plugin WP GPX Maps
uMap (iframe)
I want to avoid panning and zooming when swiping with one finger on smartphone. Panning and zooming should be only possible by using two fingers.
Accordingly using a computer dragging and zooming should be only possible by pressing the CTRL-key when using the mouse.
Is there a plugin for Wordpress or a code for css or functions.php to realise this?
You can use the leaflet map plugin and set dragging to false and keep touchZoom on true.
See also: https://stackoverflow.com/a/41631385/288568
I'm really new with A-Frame / Web VR. I'd like to ask you when I am on my mobile in VR mode how can I prevent the controll / camera move? For example when I switch to VR mode I want to use my usb mouse for moving just like in "normal mode" and not the device's sensor. Is it possible?
Thanks.
I don't think this is currently possible. Another potential issue with this approach is that it will likely cause simulator sickness:
The most important guideline in designing for virtual reality is to always maintain head tracking. Never stop tracking the user’s head position inside of the application. Even a short pause in head tracking will cause some users to feel ill.
https://designguidelines.withgoogle.com/cardboard/designing-for-google-cardboard/physiological-considerations.html
That said, if you're purpose for this functionality is for spectating on a 2d screen, A-Frame 0.8.0 allows you to add a spectator camera:
https://aframe.io/docs/0.8.0/components/camera.html#properties
There are no tutorials for this yet, but you could try adding asking another question here or on a-frame slack on how to get it up and running.
I'm using the Google Maps API to browse my own maps. The problem is, I only have one rather small resolution file, that I wanna display fully at level 0, which means it's not gonna get any more accurate when zooming. I still wanna be able to zoom though, by just enlarging the image. This would be useful for the markers and polygons I intend to draw on it, as they could be viewed in larger detail.
I could just create dummy tiles, that show no higher resolution than the original, but that seems like a roundabout solution that would do nothing but create more unnecessary server requests for the map files, as well as more traffic.
The problem seems to be the getTileUrl() function, as it is required. I can't think of a clever way to abuse it either, to only show different sections of the same map.
I know it already supports image enlarging, as you can observe the effect when you zoom in. The question is, if you could make that effect permanent somehow, and not make the image disappear if no new image is provided.
Suggestion:
Use the ImageMapType only to hide tiles at all(therefore let getTileUrl() simply return null)
For your own map don't use tiles, create a GroundOverlay instead.
I'm using OpenLayers with Google Layer, and I have a strange behaviour about vectors on the map.
On mobile (Android), when doing a multitouch event on the map (zoom), vectors move and zoom as the touchmove event is active. But when the touchend event is trigger, vectors are refresh at the right place and with their real size.
This is not happening with OpenstreetMap layer. I also tested some web pages implementing OpenLayers & Google Layer & a vector layer on my mobile, and they all have the same issue. Any idea why ?
I tested this one, if someone want to reproduce : http://www.macfh.co.uk/Test/Google_with_OpenLayers.html With a multitouch event, marker is moving/zooming, and then go back to its initial place.
I already took care about the sphericalMercator specifity, so I think it's not the problem.
Thanks in advance !
Tiles positionning for google layers is done through their api, which doesn't allow to make pinch zoom work the same way it’s done for all others layers: Pinch zooming doesn't work with google layers.
If you want pinch zoom to work, you should consider using layers with direct access to tiles (OSM, Bing, …). And your mobile will thank you for the decrease of number of scripts to load ;).
I've inherited a small project. The person before me created a native app for iPhone, implemented in objective-c, and my job is to remake it as a webapp with PhoneGap for iOS and Android.
In my predecessor's original implementation, part of the app has the functionality of allowing the user to drop a marker on a map to select a location. I found a comparable way of doing this, but the supervisor wants the exact way she'd done it, which I'm having a little trouble with. Let me describe:
In her native app, the map appears with a marker in the center of it. The user then slides the map around beneath the marker (which stays in place on the screen), until the marker is positioned over the spot they want. Then they hit a button marked "Select," and those coordinates are sent to the app for irrelevant other operations.
I'm trying to do the exact same thing with the google-maps javascript api and html/css, and I can't figure it out. Do any of you Gmaps pros have any ideas?
You may observe the center_changed-Event of the map. When it fires set the position of the marker to the new center of the map.
Another suggestion:
For a better effect instead of a marker you may use a custom control. You may insert a marker-image there so it will look like a marker. To place it in the center, push the control to
map.controls[google.maps.ControlPosition.RIGHT_CENTER]
(it will be vertically centered then) and apply the horizontal centering by adding a right-margin to the control