I am using leaflet js to show a world map using cloudmade tiles. When I setMaxBounds to the map the bounds work great except to north. That is, however, not my biggest concern. My concern is, as I use maxBounds I can not zoom out to see whole world in any screen size.
The bound I used reaches all the way from north east corner of canada to south west of australia. I can pan to reach the bounds but cant zoom out to see whole map. I set minZoom to 0. Without maxBound, it is zoomed out too far you can see the world repeat thrice on big screen.
map = L.map('canvas',{zoomControl: false}).setView([38.82259, -2.8125], 0);
map.setMaxBounds([[84.67351256610522, -174.0234375], [-58.995311187950925, 223.2421875]]);
Any help is appriciated.
Anil
If I understand correctly, your problem is that you want to be able to see the entire world in your view, but you want to be able to restrict the user from seeing the tiles wrapped around.
First, Leaflet is doing exactly what you are telling it to do. Check out this JSFiddle I created with your code. http://jsfiddle.net/zF6bf/ I can zoom out to see the entire world, but only if I resize the result pane to be large enough to show the entire world, without violating your maxBounds rule. This appears to be correct behavior to me.
Second, if you really do not want the world to wrap, you can also set the noWrap option to true when creating a layer.
var osmLayer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { noWrap: true}).addTo(map);
This will prevent that layer from wrapping around the map. If this wrapping is what made you create the bounds in the first place, then perhaps removing the wrapping will remove your need to set the maxBounds. Then the map will be able to be panned and zoomed freely.
Related
I am using xamarin forms map for a tracking application, so the view tends to move across the landscape and tiles need to be loaded to show the new area. I am scrolling using map.MoveToRegion
Sometimes the map tiles are loading extremely slowly, to the point where the entire region is just white with no graphics. Initially I thought it was a data speed issue, but it turns out that if I rotate the device, changing the layout landscape/portrait, this makes the map instantly refresh, so the data was apparently available, it was just not being rendered. Zooming can have the same effect, albeit not quite as effectively.
How can I force a refresh, or alternatively just make the map refresh more quickly?
Turns out the issue is that the way to move the forms.map is by MoveToRegion, and that animates the motion. If the animation takes one second and new positions are being set at a higher, or equal, frequency, the map is effectively always in the middle of an animation.
When the map is animating, it is not willing to refresh the tiles, and so the map eventually becomes blank.
When I rotated the device, this constant animation was interrupted, and it could refresh the tile graphics.
The solution was to make a custom renderer with an alternative - non animated - method to move map focus.
private void moveToFast(Location location)
{
var update = CameraUpdateFactory.NewLatLng(new
Android.Gms.Maps.Model.LatLng(location.Latitude, location.Longitude));
googleMap.MoveCamera(update);
}
There are plenty of examples of custom map renderes, so I will not post that here. The main takeaway is really just that...
while the map is animating, it will not refresh its tiles, so if you constantly update the map location, you should do so in a non-animated way.
i've got 40 images. I want to place them on a grid (or at specific location on a map). The fact that imageA is in point [0,0] depends on some info from the user actually logged in.
Which means, for user1, he will see in [0,0] the imageA, and for user2 he could see in [0,0] imageC.
That could be done with some css, but the problem is, all those images are supposed to be part of a map. So users can zoomin/out/pan, managing click on specific area etc...
My first though would be using leaflet with transparent tiles. My 40 images could be 40 imageoverlays placed on the map. But that would be pretty rough to adjust sizing, and it would require to have 40*4 images (if i want 4 levels of zoom). Something like generating my imageA in 1000*1000, 500*500, 250*250, 125*125 and hope thats actually the good sizing.
Do you have any idea (not specificaly on leaflet) how could i achieve that ?
If you don't want your images to scale, then it sounds like your grid is based off the viewport? In which case, using html/css to handle things sounds like the best option.
Otherwise, you can consider using InfoWindows. You can have an image within the InfoWindow. The location on the map will stay the same and the size of the window should not scale with the zoom either.
I'm trying to display property boundaries on top of a Google Map by using KineticJS and a Google Maps OverviewLayer.
It works great (1000 parcels being shown at a time. Much faster than Google.Maps.Polygon())
When I drag the Google Map down, then zoom in/out, the top shapes get cut off and don't re-draw when I zoom back out.
I'm guessing its a setX, setY thing but I don't understand the underlying concepts enough.
Any help would be appreciated.
Here is my app:
KineticJS and Google Maps OverlayView test site
I added a light-green background to the KineticJS canvas to see what it happening when you zoom in.
The canvas seems to stay locked in place and the same width/height but when you zoom in I'm guessing the canvas should grow proportionally.
I can't figure out how to do that though....
Any help would be appreciated!
I would like draw a filled polygon on iPhone with Google map (Version 1.1.1, the last one).
Anyone knows how to do like that on ios :
(My code on Android)
mMap.addPolygon(new PolygonOptions()
.addAll(latLngList)
.fillColor(Color.BLUE)
.strokeColor(Color.RED)
.strokeWidth(3));
Regards,
PS : If you have many solutions, keep in mind that I have many Polygon to draw.
The SDK currently doesn't support filled polygons, however there is a feature request to add them here:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5070
In the meantime, one option could be to draw your polygons into an image, and then add them as a ground overlay. This would be very limiting, but might work as a temporary workaround.
Another option is to add another view over the top of the map view and draw the polygons into it, and then update them whenever the map view moves. It isn't possible to perfectly synchronize another view with the map view, so your polygons will lag behind a bit as you pan/zoom around, but this might also be okay for you as a temporary workaround.
UPDATE
These are just some random ideas to try for the ground overlay approach, I'm not sure if they would work, but they might get you started:
I would suggest converting the lat/lon corners of the rectangle into MKMapPoint (using MKMapPointForCoordinate). These are equivalent to Google's coordinate system at zoom level 20.
You can then use the aspect ratio of the width/height of the rectangle in MKMapPoint coordinates to determine the aspect ratio of your ground overlay UIImage. Once you have the aspect ratio, you'll just need to experiment with actual sizes (ie guess a width, calculate the height from the aspect ratio) to find one which looks okay. The bigger it is, the finer the detail of your rectangle will be, but the more memory it will use, and probably the slower the performance will be. Also you might hit a hard limit at some size - I'm guessing the UIImage gets converted by the Google Maps SDK into a texture, and textures have a max size of 2048x2048 on iPhone 3GS+.
Then, use something similar to How to setRegion with google maps sdk for iOS? to calculate a zoom level and centre lat/lon. Instead of the map view width/height you would use your UIImage width/height, and you'd use the bounds of your rectangle instead of the bounds of the desired view. You also wouldn't need to calculate the scale from both the width and height (as the scale should be the same) - so just use one of them. Instead of creating a camera with the zoom level and centre lat/lon, set them on the GMSGroundOverlayOptions. Also set the ground overlay's anchor to the centre of the image (ie 0.5, 0.5).
The above describes how to add one GroundOverlay per rectangle. If you have lots of overlapping or nearby rectangles you could probably combine them into a single UIImage, but that would be a bit more complicated.
i'm trying to use overlays on a custom google StreetView Panorama.
I was able to simply put one on my pano, but the position is totally random (i made some attempts until the effect was alright), and the change of rendering mode (in chrome which renders as a sphere) changes the effect.
The problem is clear: the custom panorama has no information about its dimensions (it has only a LatLng), so the relative positions are wrong.
Am i missing something?
The only thing i need is to put some clickable labels on the walls of a room, which modify themselves along with the rotating panorama. I searched a lot, but my efforts were inconclusive.
Mapsicle seemed to do what i needed, but if i understood correcly it's a dead project.