Google Maps API v3: Smooth zoom on Ground Overlay - javascript

I have a static image, which I wanna be able to zoom into with the Google Maps API. However, I do not have any higher resolution tiles available, so the idea was to simply zoom in the one image and stretch it accordingly. This works fine if I make the getTileURL() function return null, and instead define the image as a GroundOverlay. The problem is, zooming in on images for GroundOverlays has to resize and reposition them, and you can notice that process distinctly. This is an example from the Google Maps Developer's Guide, which has the same problem:
https://google-developers.appspot.com/maps/documentation/javascript/examples/groundoverlay-simple
If you zoom in on the map, you will notice the image appearing again in regular size for a split second, then be stretched and repositioned to fit the coordinates.
Is there a way to disable that entirely? I know it can zoom into images smoothly, because it does that with regular image tiles, it zooms in and the replaces them as soon as the higher resolution tiles have loaded. Is it possible to somehow emulate this effect for GroundOverlays?

Related

slippy map tile zoom tool

So I've found many jquery simulated zoom tool demonstrations (example) where a small image and large image are stored on the server. When the mouse pans over the small image a mapped portion of the larger image is shown in a zoom window.
The zoom feature I am hoping to employ will be used on a slippy map (openlayers,tilelite,mapnik) so it will be easier for my old eyes to see the street names. So it is not practical to have larger versions of all the image tiles on hand for zooming. Is it possible to actually zoom (as opposed to simulated zoom) over dynamic web page content?
I do realize I can change the font sizes in the mapnik configuration files and I will do that if there are no other options available, but I'd like to avoid that if possible.

Get smooth zoom-in and zoom-out in google map

I'm using maps.googleapis.com/maps/api/js?v=3.21 and displaying zoom slider using
mapOptions.zoomControl = true;
mapOptions.zoomControlOptions= {
style:google.maps.ZoomControlStyle.LARGE
};
Every thing work as expected. The only thing which does not look so great is the zoom-in and zoom-out using slider . Its not very smooth and it seems that I can zoom-in/zoom-out by discrete zoom levels and not continuous. But I can see that Google maps has a zoom slider which works in very smooth and continuous manner. How can I get the same effect in my application ?
Google maps work only with finite zoom level.
The zoom level is an integer and is directly related to the maps tile showed ..
alias for each zoom level the map tiles retrivied by google maps are determinated by a direct relation for the zoom level and the earth surface mapping.
THe only difference with the slide is the aspect and the fact you can change zoom level directly moving the slider..

Mapbox not drawing all tiles, when inside a Telerik splitter

We have a legacy website from which the powers-that-be have decided we need to remove all of our Google maps, replacing them with maps provided by MapBox. So I'm in the middle of a crash project to swap out the old for the new.
And here's my problem: the old site is written in ASP.NET, making heavy use of Telerik's controls. In this page we have a RadSplitter, and a Google map being drawn in a RadPane.
Swapping out the Google map with the MapBox map was simple enough, except that the MapBox map isn't rendering correctly. Only the tiles along the left edge of the pane are drawing. But - when I resize the browser window, the rest of the tiles draw.
The div is defined with position: absolute, and top, bottom, right, and left set to 0. Which Google maps worked with.
My guess is that Telerik is doing something that is confusing the MapBox rendering code about the actual size of the div. And that when the window resizes, MapBox re-evaluates things, and gets it right.
I've been playing around with this for a couple of hours now, and getting nowhere:
I've tried triggering a resize event in code, and the tiles didn't draw.
I've tried placing the map in a fixed-size div, inside the pane, and the map drew to the edges, and then the div sat inside the pane with scrollbars, which confirms, to me, that I'm dealing with a sizing issue, but I can't have the scrollbars, so
I've tried setting the width and height of the div to the size of the pane, in code, and that didn't trigger the map to draw the missing panes.
I'm running out of ideas.
Is there some event or function on the MapBox renderer that will cause it to redraw the way it does when the browser resizes?
Turns out the answer was pretty simple:
map.invalidateSize();
Edited - a few days layer
Turns out that only works in IE. In Chrome, invalidateSize() doesn't cause the map to properly resize itself.
so the map is being drawn in a pseudo-frame, which is probably throwing off the calculations for what's "visible"...
do you have a way of sharing the actual output HTML? like jsfiddle?
are there any console errors? maybe it's something as simple as you've met your quota for the map tile server...
try a different tile server?

Google Maps: Custom Tiles being pushed up

I'm working on creating custom map tiles (.PNG) which I can show with ImageMapType from the Google Maps API range. In general, the tiles are shown fine and I get the tiles I want with no real problems.
However, an issue which I can not seem to solve at all, is a weird upwards push of the tiles at a single specific zoom level (9). My original tiles do have many gaps for the ocean in them, so I generate blank tiles to fill in the gaps by surrounding my original map tiles with transparent points in a grid.
For testing purposes, and to show you the exact issue, i've made the grid points visible, and quickly taken a snapshot of the upwards push during the transition phase. The top left of the dark region is where the corner was for the previous layer, and after zooming in, the top marked section is where the corner moved it.
After I go past this layer, into layer 10, the corner goes back down a level, to where it would have been if layer 9 wasnt so buggy.
Hope I've provided enough information and I'll be grateful of any advice.
For zoom problem keep one transparent div with z-index and then set map zoom on 9 also hide its zoom control from map By this no one can zoom your map and for tile problem I need its demo page for more information but with this answer i attached a url for your help with full tutorial just check it : https://developers.google.com/maps/documentation/javascript/v2/overlays#Custom_Map_Types
Gud luck

Fill google maps viewport with single tile

Basically what I am trying to do is find a way to load ONLY one image/tile which will fill the viewport and not have any surrounding tiles loaded. It appears this is the methodology the good folks at Weather Underground are doing w/their Wundermap.
I've tried digging through their code but to no avail. I tried simply using larger tiles - larger than the actual viewport - but this has several adverse side effects. There was a similar question asked in WMS as a single tile image in Google Maps v3 but that was more about just using larger tiles than using a single tile.
Thanks in advance.
UPDATE:
Here is a link to a page/map on their site that loads a single tile/image that spans the entire viewport:
http://wxug.us/o4ia
If you have the Net tab open in firebug you can see that there is a single tile request. Also, if you keep it open and pan the map - while keeping the mouse down - the data does not fill in until you release the mouse. For all the tiled maps I have seen, as soon as you pan, it starts filling in new tiles.
They're using a custom overlay. You'll need to set up a server-side way of serving out your own image overlays to display on Google Maps, based on the viewport (presuming you want to serve 1 image that displays over the entire viewport). http://goo.gl/zgEKB

Categories