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/
Related
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.
A continuation of my previous question: How to change the layering of KML and Tile Overlays in Google Maps?
I am currently rewriting some of the code regarding the buttons which enable and disable tile overlays using arrays. In doing so, I'm trying to combine all of the button's individual functions into a single function, but since I have two methods of rendering the overlays, I was hoping to try and simply focus on only one method. The first uses "overlayMapTypes":
map.overlayMapTypes.insertAt(0, beloitMapType);
The second, using a script provided in my previous question:
this.getPanes().overlayShadow.appendChild(this.settings.div_);
The former method is my original approach; however, since I use polygons on the Satellite view I needed a way to place icon/name overlays above the colored polygons. To achieve this, I sought something akin to the latter method where certain overlays could be placed onto a pane higher than the polygons and thus appear above them.
However, in the time between my previous question and now, as well as through some of my own research, I've come to realize that the latter method, rather than placing the tiles into their places, estimates the location of the tile and places it as an image overlay. As a result, a part of my accessibility layer which colors in inaccessible paths had been misaligned by a pixel or two, or my building name overlay currently has names on the border of two tiles which have a sharp line through them as those two tiles overlap slightly. In addition, these two issues come and go each time the map is loaded with each tile being placed on the map with a variance of 1-2 pixels in any direction.
Thus, I would very much prefer to use the former method with overlayMapTypes, which is more reliable and accurate, on all of the overlays, but I also need a way to bring some of these overlays higher than the "overlayLayer" pane and above the polygons. Is this possible and, if so, how could it be done?
Addition: I have an additional need to try and find a method to achieve the reassignment of panes with the overlayMapType method: the script I'm using to achieve this doesn't appear to work in IE7/8. I'm going to investigate this angle myself, but I'd still prefer to drop the script entirely if possible.
Well, I've hit upon a possible solution and, for the sake of sharing it, allow me to explain:
Polygons do not necessarily need to be visible to still have click and hover events.
Since the polygons are used to color the buildings and poi in Satellite view, such a visual component could easily be done by an overlay.
Thus, a possible solution is to have all polygons invisible and simply use them for click and hover events. Likewise, a second overlay, or a modification of an existing one, would replace the polygon's original visual component. Since this visual component is now an overlay like everything else, it can be easily layered with any other overlay using the "MapType" method.
(This however doesn't answer the question; namely, can tile overlays and polygons be layered only with the MapType method? I would still like to know that, but in the event that there is no answer, this hopefully is a possible alternative.)
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
I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.
By the way, this is a Javascript project.
I'm thinking of representing each tile as a square div with the image loaded as a background image.
My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?
Thanks!
About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.
About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.
About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).
About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.
Some further reference:
Tile5: Tiling Interfaces
gTile: Javascript tile based game engine
Experiments in rendering a Tiled Map in javascript/html…
There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.
To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.
If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.
But, again, if this is real work, don't implement it yourself. There's no reason to.
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...