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
Related
I have added a Google Maps Javascript API (dynamic map) to my web-site. I want to put a static picture in the bottom left corner over the maps div - something like a legend. It will not move when the user scrows around.
Is there a way to do it through Google Javascript API or shall I just add a div, put it over the map with CSS?
Yes, there is a way to add this sort of thing using the Google Maps Javascript API. It is considered a Custom Control, and here is a link to the documentation. You would do that if you need to have your element move around when screen real estate gets tight and you want Google Maps to take care of it.
If you aren't concerned with reflowing the other controls as the map appears on screens of various sizes, you can just go with an absolutely positioned element. If you don't want your overlay to affect the map ui by capturing mouse events, just set pointer-events:none; on that element.
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?
How to create big dynamic map in canvas (like google maps- with some kind dynamic tiles), when I scroll the map- the area should be loaded dynamically? I found this- https://github.com/slav123/SpryMap but this is rather for one big image not for dynamic loading
I found something like this- very simple example, but it works pretty, found on https://gamedev.stackexchange.com/questions/42038/what-would-be-a-good-way-to-implement-render-a-2d-tiled-map-for-a-browser-game, first answer
Based on google maps, i believe they have many small images that they dynamically load into the map, they are of different zoom levels and locations, but always the same size. Making it easy to know which to load. You would want to load a buffer around the edges of your canvas to help reduce a loading time if you scroll quickly.
You can see what i'm talking about if you open maps.google.com, it will load block by block and if you scroll you will notice that a buffer of a single tile is loaded around the viewing window.
Ever noticed that when you go to maps.google.com and do a search (say, car wash), it renders a lot of results (represented by small circles) and a few prominent ones (seen as regular-size pins)?
Notice how quickly it does this?
From what I can tell from analyzing this in Firebug, much of this is generated on the server and sent to the client as a static image.
However, it's still dynamic. You can still zoom in and out, or click on a result and see a dynamic InfoWindow rendered.
Google have made the map quick and smooth using static images, while still making it flexible.
Is there a way to do this kind of 'pre-loading' with my own Google Map (implemented with the Google Maps API)?
The technology that maps.google.com uses is similar to that used in a GLayer. The server dynamically builds tiles and "hotspot" info. The GLayer tiles are also constructed dynamically (and possibly cached) even though the underlying data is fairly static. From the client side, the searched dots technology is identical to the Wikipedia or Panoramio GLayer. The only new trick is that the dot information is generated dynamically on Google's big fast servers.
The API does not (yet) provide any tools for creating custom GLayers. If you want to do the same sort of thing yourself, using your own database of locations, there are three steps that you need to code:
Create your own custom tileserver
which searches your database for
items in the tile area and uses a
graphics library like gd or
imagemagic to place dots on the
tile. Use those tiles to create a
GTileLayerOverlay on the client.
When the user clicks on the map,
send the location of that click to a
second server. That server should
check your database and return the
infowindow text for the dot at that
location, if any. Returning all the infowindow contents from all the dots imaged by the tileserver would be unacceptably slow, so you have to fetch them one by one, as needed.
Changing the cursor when the mouse
is over a dot is more tricky. What Google
do is return a list of hotspot
coordinates for all the dots on each
tile. Whenever the mouse moves, the
API determines which tile the
pointer is over and uses a quadtree
algorithm to see if the pointer is
over a hotspot, and change the
cursor if necessary. If you only
have a modest number of hotspots per
tile, then a linear search would
probably be acceptably fast. If you might have thousands of dots per tile, then you'll probably need to write your own quadtree algorithm. The Google quadtree code is not exposed, so you can't use it.
Here's a page where somebody has done all that. In this case the hotspots are calculated as circles, by comparing the distance from the centre point, even though the dots are square. On maps.google.com the hotspots are calculated as rectangles, by using GBounds.containsPoint(), even though the dots are round.
I'm doing something similar - but instead using a tile layer, I just send server-clustered markers to the browser whenever the view changes. If your data is static, you can pre-cluster your markers and it would be incredibly fast with tens of thousands of markers.
Our site can't use pre-clustering because the markers can be searched and filtered, but it's still pretty fast up to about 20,000 markers. Still working on it...
Slippy maps are web widgets which allow the user pan around a two dimensional plane by grabbing and dragging it. This control was made popular by Google maps, and can be seen on many modern mapping systems today. It's obvious as you watch them load that they are actually a grid of images which are loaded as-needed as the user pans. My question is; how are those images aligned, moved, and dynamically loaded in HTML/JS/CSS? Are they divs with background images? Are they loaded into a parent div with overflow:hidden? What strategies do they use to keep from leaking memory as the user pans around. Are there any third party libraries that make it easier to build them. I'm not interested in geographic maps persay, just the interface that's commonly used to display them. Thanks!
Normally a grid of image elements are moved around, and as some move off the end of the viewer and become hidden they are moved to the opposite side of the grid and the src attributes changed to point to the new map tile.
All these, as you say, will be loaded into a parent element with overflow:hidden;
In terms of examples you can look at the open source Open Layers implementation:
http://openlayers.org/