I am loading 10,000 polygons using map.data.addGeoJson technique in a map all at once — so obviously it takes a while to load them based on the RAM of the computer.
How can I make them load based on the viewport of the computer screen? And load the rest when bounds_changed event is fired?
Depends for example if you have also stored the center of the poligon you can query the polygon with the center inside of the bounds of the viewport of the computer screen.
Get the bounds is not a problem you can use
map.getBounds();
The real problem is how you can query the polygon who satisfied the condition for a correct select.
Related
I am using google maps api to insert a map in my page and inside of it I insert a rectangle. Everything works fine but I have this question: if the users zooms in or zooms out, I would like to "capture" the real width/height of the map (latitude/longitude left top and latitude/longitude bottom right) so I can select the points in my database that should be inside the viewport of the map.
I can easily select from my databas all the points that are inside a well defined rectangle, so how do I know the real with/height of the map that is being displayed (considering always the zoom applied)?
You're not looking for width and height, you're looking to get the bounds of the map which, conveniently enough is available via the [getBounds][1] method on the map object.
You probably want to do something like this:
google.maps.event.addListener(map,'idle',function() {
//make some ajax request with map.getBounds()
});
Every time the user moves the map (pans/zooms) you can use the getBounds() method to get the lat/lng at the corners of the map.
I tried asking question at super user first at https://superuser.com/questions/763734/how-to-get-larger-map-on-iss-live-stream, with no luck. I am just an observer watching the live Internation Space Station (ISS) stream whenever I get a chance. I don't own/can not modify at the source, the pages I am visiting. I just want to use firebug to enlarge element on the screen that's already there.
Site http://eol.jsc.nasa.gov/HDEV/ streams pictures from camera's on International Space Station. On right hand side there a flash window that shows trajectory and underneath it is a google map. On my monitor the current position with red dot is always lost as map size is very small and I don't get any options like centre here. Ctrl+ keys makes things little bigger, but problem essentially persists.
If I go to http://www.esa.int/Our_Activities/Human_Spaceflight/International_Space_Station/Where_is_the_International_Space_Station, I get same screen, but maps area is more usable, but I loose ability to watch live stream.
Is there any way I can set height of google maps using firebug or similar so that map is more usable and I can relate the actual location? I tried inspecting elements and changing various values, but could not figure out how height is managed.
Resize the maps origin element (most likely a DIV) and then run google.maps.event.trigger(map, "resize"); in the JS console of your preferred browser (assumes that 'map' is a global var set to the map object - you have have to hunt for this).
We are developing a GIS application on top of Google Map (using Google Map API v3), however the application requires the user to zoom in close since some of the map objects are small (down to about 1 meter), and will require graphic editing.
What is the best way to extend the zoom-range in Google Map API, down to maybe zoom level 30? Can we implement a tile server that "takes over" when Googles tileserver hits the limit? Or make Google Map API just use graphic enlargement for the zoom levels beyond what it has data for? Any other possible approach?
This problem is especially troublesome when using Hybrit or Satellite map, since they have a more shallow zoom level (seems to be around 18 on our locations).
The picture below shows the deepest zoom and how its not quite enough:
/Magnus
The way you extend the zoom range is by creating a custom MapType. Then you can specify the minZoom and maxZoom. If your map tiles are ordinary images, you can use the ImageMapType which will do some of the bookkeeping for you. Or you can go for a full-blown custom MapType if necessary.
Here's an example of an ImageMapType that has custom zoom levels and image tiles.
Here is how I finally solved it. Not a perfect solution, but good enough for my purposes:
Create and add a custom maptype with nothing but blank tiles, but with a high max-zoom.
Hook into mousewheel event before Google gets it (see here: Hooking into mousewheel event in Google Map API )
When zooming in with mousewheel, check if at maxZoom and if so switch to blank map (and mark for switching back when zooming out). Since mousewheel hook is before google gets it, the zoom will not be interrupted even though the maptype is changed.
The biggest problem was to determine if map is at max zoom (the MaxZoomService only works for satellite images). I ended up with an ultra-ugly solution: checking the position of the zoon-handle in the zoom control :-)
This might be better than the code you use to look at the scroll bar, because on small screens that might be different.
If the zoom doesn't change, that means google is at max zoom.
var wheelEvent = function() {
console.log('zoom before', map.getZoom());
setTimeout(function() {
return console.log('zoom after', map.getZoom());
}, 0);
};
})(this);
$('#map-canvas')[0].addEventListener('mousewheel', wheelEvent, true);
$('#map-canvas')[0].addEventListener('DOMMouseScroll', wheelEvent, true);
The closest example of what I'm trying to accomplish is a store locator. I have 6,000+ locations that need to be plotted onto a map of Canada.
My original plan was to use Google maps to place markers on each location, but it doesn't make sense to plot them all every time someone attempts to view the map, or various parts of the map.
How does one only put markers on the locations in view? Do I have to send the geo data of all 6000 locations to the client each time they load the map?
Is this doable with maps? (I'm sure it's got to be) Or is there a better service for this kind of thing?
Definitely do not draw all the locations at the same time if they are not all visible. Consider using MarkerManager (article here) or MarkerLight (code: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/, demo: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/randommarkers.html). If your initial map and data is such that all the markers would be visible initially, this is definitely the way to go.
You can also use the GEvent object (docs) to detect a "move" event, then check the current display coordinates, draw any that are in bounds. This is the best route if your initial map is too zoomed or small, and/or your marker set is too large to fit on the map's initial view. Your user will be moving the map around, so you can react to that movement and only draw the relevant markers. Take a look at http://econym.org.uk/gmap/gevent.htm for a list of other GEvent events (couldn't find an official list on the API), you might also want to watch "zoom" events.
The two methods can also be combined.
You can use getBounds() to determine the viewable portion of the map. I'd use this data to request from the server all locations within those bounds. Use the bounds_changed event to monitor changes to the viewport and request additional locations as necessary. You'll probably want to set either a minimum zoom level, or maximum number of results to avoid displaying too many locations than is reasonable. Eg, when the map is zoomed out to display all of Canada in a single view.
I have a store locator that displays stores as markers on the map and lists them in a sidebar. There are ~600 stores and they are all loaded at once on the page load via AJAX. So I have access to all them in an array at all times. Now, the functionality I want is that when the user moves/zooms around in the viewport, I get the bounds of the current area being displayed and filter the results in the sidebar (the array of locations, each location has a lat and long) based on whether or not they would be in that area being displayed. Then I would draw the markers of the relevant locations. Basically, whatever locations would be viewable in the viewport would also be listed in the sidebar, staying in sync.
Could someone point me in the right direction to implement this? Does this even sound like an efficient way of handling this functionality?
You need to write a handler for bounds_changed event (more documentation here)
google.maps.event.addListener(map, 'bounds_changed', function(){
// your logic here - map.getBounds() will give you the updated bounds
});
As for efficiency, loading everything at once is probably not the most scalable approach. What if you have 6000 stores next year or you add additional data for every store? A better approach is to pass the bounds back to the server using an AJAX call and only return stores that fall into the area.
You can attach moves/zooms event to the map and basically do a bound check to hide/show markers within the viewing bound. You can achieve this using LatLngBounds(sw?:LatLng, ne?:LatLng) and check the markers LatLng against the map's current bounds using getBounds();. Furthermore within LatLngBounds there's a method to check to see if the LatLtn is within Bounds contains(latLng:LatLng). So you would loop through your markers' LatLng and check against it.
Google Map API LatLngBounds
and
Google Map API Map
As far as the sidebar goes, if you have markers saved then you can just remove or hide the associated locations on the sidebar.