KineticJS canvas on top of Google Map. Shapes fall apart on drag and zoom - google-maps-api-3

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!

Related

xamarin forms map sometimes very slow to update tiles, unless I rotate device

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.

leafletjs setMaxBounds wont let zoom out to see whole world

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.

Google Earth overlay disappearing

I've created a simple triangular overlay using the Winforms GE API. As I'm zooming in and out parts or all of the overlay will disappear. The overlay is on the order of 80 miles in length.
The overlay is set to an altitude of 100 so I understand that when the overlay goes through a terrain feature it will disappear. My concern is when it is completely visible and I zoom in it disappears completely or in part. Since it is visible at a higher altitude shouldn't it also be visible at a lower altitude? (and I do realize that once I go 'below' the overlay it will disappear. This is not my problem.)
Any ideas or thoughts?
Actually, a ground overlay should stay on top of the terrain. So when the terrain is higher than '100' the overlay should be 'wrapped' over top of it. I am not sure about the overlay 'disappearing' at various heights (POV)
Recently, there was this question on SO - and the OP ended up saying they had contacted Google and the consensus was it was some sort of bug.......

Google map api overlay takes controls

I'm displaying an image over the entire google map. The image is transparent. I follower the documentation from google and everything worked out fine. The image will change each time i move or zoom on the map. After a while I can't zoom or move the map anymore, I'm zooming and moving only the image. Why does this happen and how can I solve it?
There are multiple issues contributing to problems on the page:
You are destroying and recreating your overlay on center_changed and zoom_changed events. Instead, you should just be updating the image within the overlay. You should really only need to create the overlay once.
Instead of adding your weather image to your OverlayView, you are adding it to a div that covers the map. This is what is blocking your events from effecting the map (the click and drag events are occurring on your weather div not the map).

Handling overlays on Google Streetview custom panoramas

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.

Resources