I am developing an interactive map in HTML+JavaScript using mapboxgl (0.33.1). When the user clicks a button (which is associated with a particular location in the map), I call easeTo(), which put that location in the center of the map.
window.map.easeTo({
center: item.loc
});
Because my application has some overlapping UI over the bottom half of the map, I actually want to put that location not in the center of the map, but in the center of the top half of the map (25% from the top).
I'd appreciate if somebody could give me a hint how achieve it. My app knows the exact sizes of the window in Pixel (and also the zoom level), but (I assume) I need to convert it into the map-coordinate (from pixel) to add an appropriate offset to the "center" parameter I pass to easyTo() function.
I think I found the answer. I just need to call the project() method -- which was very hard to discover!
Related
Given a bound box like the below picture, how do you get all the features contained within, regardless of if they are visible or not.
I have tried to get all roads using
let features = map.querySourceFeatures('composite', {sourceLayer: 'road'})
But it only gives me roads that are visible if I am zoomed in.
I have also tried
let features = map.queryRenderedFeatures([tile_info.swPt, tile_info.nePt])
But again, it only gets features visible on the map based on zoom level.
I need all the features within the bounding box regardless of what you can see or zoom level
It is in the nature of vector tiles that you can not do what you want to do here. You can only query data which has been loaded into the browser, and the point of the vector tile architecture is to prevent that happening at lower zooms.
You could consider a server based approach like Tilequery.
I have a historical city map that I want to display using Leaflet.
I like to set the coordinates of this image to reflect the real world, e.g so I can click on the image and get the real coordinates.
I guess I can just make it an overlay to a real map, but there must be a better solution just define at what coordinates of the corners of the image.
For this image, the approx real world coordinates is NW: 60.34343, 18.43360, SE: 60.33761, 18.44819
My code, so far, is here:
http://stage1876.xn--regrund-80a.se/example3.html
Any ideas how to proceed? It feels like it there should be an easy way to do this?
Any help would be so appreciated!
EDIT: The implementation (so far) with tiles are optional. I could go for a one image-map as well.
I'm using Leaflet with Mapbox and I'd like to set the view of the map so :
all markers are visible
the center is set to a specific point
It's easy to do each points separately with setView and fitbounds but I don't know how to have both at the same time since setView changes the bounds and fitBounds changes the center. A solution could be to define a center and a zoom but how can I know which zoom will allow all my markers to be visible ?
EDIT
I implemented the solution suggested by IvanSanchez and it works as expected:
let ne=leafletBounds.getNorthEast();
let sw=leafletBounds.getSouthWest();
let neSymetric=[ne.lat + (center.lat - ne.lat)*2, ne.lng + (center.lng - ne.lng)*2];
let swSymetric=[sw.lat +(center.lat - sw.lat)*2, sw.lng + (center.lng - sw.lng)*2];
leafletBounds.extend(L.latLngBounds(swSymetric, neSymetric));
Get your bounds, and create a second L.Bounds instance by applying point symmetry along the centerpoint you want. Create a new L.Bounds containing the original bounds and the symmetric bounds. Run fitBounds() with that.
I found another solution to this. You can simply call map.panTo([lat, lng]) after you've adjusted your map with fitBound(). I am using VueJs and calling this in the mounted() lifecycle hook.
I am fitting bounds so you can see a user's location and also a geographic feature far away, but then I use panTo so the user's real location is at the center of the map after fitBounds. It seems to work seamlessly so far.
OK, here's the deal:
I have two views: simple and advanced. On the iPad, they come with a big-ass map view, with a marker that can be moved to indicate a position.
Each view has a different instance of MkMapView. When I switch from one to the other, I want to keep the map at exactly the same position and zoom level, so the user feels as if it is the same map.
However, the shape of the map view is slightly different for each of the views. This is because the advanced search has more stuff above the map.
When I open the map (this is code from an abstract superclass, so both instances get it), I set the region and marker position, like so:
[mapSearchView setRegion:[mapSearchView regionThatFits:[[BMLTAppDelegate getBMLTAppDelegate] searchMapRegion]]];
[myMarker setCoordinate:[[BMLTAppDelegate getBMLTAppDelegate] searchMapMarkerLoc]];
searchMapRegion and searchMapMarkerLoc are static, and reflect the currently displayed map's region and marker location (the center of the map).
Here's the problem:
Because the map is a slightly different shape, there is always a bit of adjusting. This can "bounce" back and forth, so that the map zoom keeps decreasing every time you switch, until you are looking at the whole world.
It doesn't matter whether or not I use regionThatFits. The same thing happens, even with this code:
[mapSearchView setRegion:[[BMLTAppDelegate getBMLTAppDelegate] searchMapRegion]];
[myMarker setCoordinate:[[BMLTAppDelegate getBMLTAppDelegate] searchMapMarkerLoc]];
All I want, is for the exact same zoom and center to be displayed. I don't care is the advanced view cuts a bit off.
How do I get the $##!! MapKit to stop tweaking the zoom factor?
Just FYI. I solved this by creating a custom model layer class that maintains the scale and center point, and is used by multiple MKMapViews. It works pretty well, but the MapKit does sometimes tweak the scale very slightly to fit one of its "detents."
I have a lot of annotations to manage inside the mapkit view.
The rules are :
1 -only show annotations when the mapView.region.span.longitudeDelta is above 0.042
2 -only show annotations inside the visible area.
3- remove the annotations when they comes out the visible area...
How I can do that ... Share your experience...
Thanks
You need a few things. One is to search your database for the pins with latitudes and longitudes inside the map's view. This is called a bounding box. The next is to remove the annotations when they move outside the visible rect of the map. Each time the map is moved, you'll have to recalculate what pins are in the box and what pins are outside but still on the map.
One hint I can give you is to divide the visible rect of the map into squares (maybe 17 x 23 squares of 20 x 20) and figure out if a pin goes into that square. If it does, mark that square as filled, and if another pin wants to go into that square, don't let it. This will allow you to filter the pins so there aren't too many on screen at one time.
It's not an easy problem, but if you do some search around you'll find your way through it. This cluster marker code for Google Maps might help.