I have a map that has a search box. A user types an address, and presses enter. The map then zooms out, pans to wherever the target is, then zooms in again. I understand from documentation that this is default behavior and that it's commonly referred to as "Fly To".
The question is... How do you disable this? I don't need fancy animation, I just want it to quickly draw a new map at the Lat/Long chosen and set the zoom level I specify.
Can this be done?
I assume you're using Mapbox-GL-Geocoder.
Just use setFlyTo:
geocoder.setFlyTo(false);
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 developing a weather radar viewer using Mapbox. In a certain mode, there are 2 Mapbox maps on the screen at the same time showing different modes of the radar. The maps are locked to each other. When one map moves, rotates, or pans - the other one does as well. I did this by simply passing the properties of one map to the other. In the below screenshot, you will see how they are showing identical locations.
What I want to do is - when the user is hovering the mouse over "map1", I would like an identical (ghost or false) cursor on "map2". Here is what I am looking to do:
(edit: What you are looking at is an actual screenshot. Each map is enclosed in a DIV with 50% width of the screen, if this helps to explain)
I don't know if this is even possible in Mapbox. Hopefully someone can give some guidance as I can't find any other questions related to this and I really have no code to show without knowing where to start.
If you attempt to do this inside Mapbox-GL-JS (for instance, by constantly updating the location of a GeoJSON feature layer), I think the performance will be pretty poor.
But since the two views are exactly locked (and presumably the exact same dimensions), you can just do this at an HTML/CSS level. Detect mouse movement on the first map, and update the location of an absolutely-positioned element hovering over the second map to match.
Another approach would be using a canvas element overlaid over the second map, similarly updated.
I have several GeoJSON features on the map and wonder if leaflet could notify me when I am over a feature. I think that's geofencing?
Yes, and there is nothing very complicated to implement it.
What do you mean by "I am over a feature"?
If you mean your mouse pointer or a kind of marker / point that represents your current position, you would simply need a plugin like leaflet-pip to determine which features contain your position, if any (react on map"mousemove" event for the mouse).
If you mean the current map view intersects some of the features, that would be slightly more complex, but still easily solved through another library like turf. Look for turf.intersect method. You would need to iterate over all your features, checked against a rectangle built from the current map view (probably something like: L.rectangle(map.getBounds()).toGeoJSON()).
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.
I am using CLLocationManager to retrieve current location in my app and display using MapView, i want to slide the map so that the current location should also change to the new location where the map slides and it should annotate to the new location, how to do it? Please give your suggestions with sample code.
You probably don't mean "the current" since that means where the phone actually is, unless you want to transport the phone to another place when using this app which would be quite a feat. So, how about drawing a layer over the top of your map that keeps a pin drawn at the centre so it looks as if the pin is moving over the map, but really the map is moving under the pin.