I have a zoom listener in my mapbox gl (1.10) application
this.map.on('zoom' e => {
if (suchAndSuch()) {
stopTheZoomFromHappening(e);
}
})
I have tried e.originalEvent.preventDefault(), and e.originalEvent.stopPropagation(). I have also tried listening to the zoomstart event. The zoom is not cancelled.
I know there is disableScrollZoom, and other disable<type>Zoom, but it seems cumbersome to disable, enable in this way.
Is there a way to stop a single zoom event from having an effect on the map?
Related
How can I run function after camera's movement ends e.g send API request.
I am using MapBox and map controllers
Thanks!
I think what you're looking for is moveend event.
// Set an event listener that fires
// just after the map completes a transition.
map.on('moveend', function() {
console.log('A moveend event occurred.');
});
I am using mapbox to develop a map for a project, the map is being programmed with a global zoom out view and markers that allow you to click and zoom into the area (unclick and zoom out), basically it toggles between two views or zoom distances.
I want the close up view to be the satellite imagery. But the satellite imagery is confusing on the global view - and it would be better to move from a Mapbox style (dark / light) then when you click on a pointer you zoom into the satellite imagery.
Do let me know if this functionality exists and if possible pointers on how to implent?
Thanks!
B
It is possible to listen for zoom change. Once the zoom event has finished, the zoomEnd callback will be triggered.
In this callback you can get the zoom using the getZoom() method. Depending on your zoom level you can set your style. (e.g. Satellite or non-satellite)
// Initialize the map
var map = new mapboxgl.Map({ // map options });
// Set an event listener that fires
// just after a zoom transition finishes.
map.on('zoomend', function() {
var zoom = map.getZoom();
if(zoom < 10){
map.setStyle("mapbox://styles/mapbox/streets-v11");
}
});
You can construct your style in Mapbox Studio as a non-satellite style, but then add Mapbox Satellite as a layer with min zoom set such that it only shows up once zoomed in.
At Mapbox's site, https://www.mapbox.com/maps/ they appear to load an image until the map is ready to display in the hero banner. How have they done this? Also the map movement on mouse hover is great, how are they doing this as well?
You can use the map's load event [1] to know when the map is finished loading:
map.on('load', function () {
});
You can request a static map via the API https://docs.mapbox.com/api/maps/#static.
You can use some HTML, JavaScript and CSS to show the from the Mapbox Static API while the GL JS map is loading in the background behind your img. Once you have that load event you can hide your img to reveal the interactive map.
You must request that PNG image via the Static Map API, as it's against the Mapbox Terms of Service to download and cache it yourself [2].
To ease the map, you just need to listen to mousemove events and then slightly tweak the map bearing and/or pitch with map.jumpTo or map.easeTo [3].
[1] https://docs.mapbox.com/mapbox-gl-js/api/#map.event:load
[2] https://www.mapbox.com/tos/#[YmtcYmns]
[3] https://docs.mapbox.com/mapbox-gl-js/api/#map#jumpto
I am creating a website with kinetic js + html5 canvas, it display nicely in web but i having problem when the site display in mobile, May i know is there any way to "unlock" the mobile pan and zoom function in kinetic js ?
thanks for help.
I made a KineticJS plugin to make it easy to make pannable and pinchable Layer. Feel free to check/use it: PinchLayer plugin
What you could look for are JavaScript 'gesture' libraries like jGestures which support gestures which would be the pan and zoom functions.
You can also write a function of your own which records touch positions and analyze that to check if it's a 'swipe' and then that could mean pan or zoom.
Otherwise you need to build a button or something which will allow panning or zooming when you touch or drag it.
Add the property listening to false when you create your stage.
var stage = new Kinetic.Stage({
container: 'my_container',
listening: false
});
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).