StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavaScript: best way to maintain bounds (Google Maps)?
text
Body
copied!<p>I am using the <a href="http://code.google.com/apis/maps/documentation/javascript/basics.html" rel="nofollow">Google Maps v3 API</a>. I currently am making a request to fetch new data each time a person changes the viewport (by either zooming or shifting the map) and am throwing away the old data I have. This works great, but now I want to cache the data so that I don't need to fetch the data each time the viewport changes. The Google Maps API defines a viewport by its Northeast and Southwest coordinate consisting of a latitude and a longitude. They are stored in objects called <a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds" rel="nofollow">LatLngBounds</a>.</p> <p>I have come up with 2 ways I can do this:</p> <ol> <li>Store the bounds of each new viewport the user visits and check if the new viewport is in an old viewport and fetch new data only of the part of the new viewport that is not within an old viewport. Essentially, </li> <li>Divide each new viewport up into rectangular sections of data that we have and data that needs to be fetched. Store the bounds of each of the rectangular sections.</li> </ol> <p>If anyone can think of a better way to do this, feel free to suggest new approaches.</p> <p>My question is which one is going to be better in terms of better performance/memory usage and overall speed? They are both similar algorithms so does it really matter?</p> <p>Also, right now both algorithms rely on dividing up the new viewport based on old viewports. What would the algorithm to divide new viewports look like? (Assume I implemented my 2nd algorithm)</p> <pre><code>var prevBounds = [ /* Array of previously seen bounds */ ]; var newViewport = map.getBounds(); // New Viewport to divide up var sw = newViewport.getSouthWest(); var swlat = sw.lat(); var swlng = sw.lng(); var ne = newViewport.getNorthEast(); var nelat = ne.lat(); var nelng = ne.lng(); // newViewport.intersects(bounds) // Returns true if this bounds shares any points with this bounds. </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload