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);
Related
I recently set up a non geographical map with leaflet using an image layer. This obviously is a stupid decision working with 'bigger' maps due to high memory usage and the need to load the big image file so I decided to use a tile layer instead.
Working mostly as expected aside from one thing: I can't seem to be able to drag outside of the map, it just jumps back so the map covers the screen. I'm not sure what causes that as I read that this behaviour usually needs to be set manually using maxBounds. Tried setting that to null, doesn't change. The only new thing introduced is Leaflet Rastercoords (https://github.com/commenthol/leaflet-rastercoords) which I'm unsure if that's causing the problems.
Any way to resolve that? Not sure where to look next.Thank you!
I achieved the behaviour you want using the following work around:
map.setMaxBounds(null); //map being the leaflet map.
This need to be called after the initialization of the map and of the raster coords layer.
I want to have google map displaying whole planet(zoomed out maximally). Then, I would like to put overlay over map with button. When user click on button the overlay is removed and google map is automatically animating to the location i want.
So, I am not asking for complete solution, I just want you to tell me if it's possible to do that using google map js api, and if you can give me some direction, that would be awesome. I have searched a lot but found nothing on this subject.
Thanks.
I've noticed, that if difference between current zoom level and new zoom level more that 2, google maps won't make smooth zooming.
You can take a look at same question: How to zoom in smoothly on a marker in Google Maps?
map.setCenter(new google.maps.LatLng(theLatitude, theLongitude));
map.setZoom(yourZoomLevel);
See also: change location to preset coordinates and zoom with click of a button
I need to use Longitude and Latitude coordinates on a map that will be loaded in by an external program, and I need to be able to draw things on this map and be able to zoom in and out. Thing is, I cannot draw this map, and I need to be able to interact with both the map elements and with what I'm drawing.
I tried using Google, and found that I was able to control either my canvas or the map, but not both at the same time. Plus, I could not draw things properly on top of Google's map (I'm using Easel.js).
If anyone has any sources or advice, it will be much appreciated.
OK I figured this out with help from my web dev friend. He suggested I use Google Maps, and even though I have that whole "layering" issue (with all my events being captured in the canvas and not trickling down to the 'map-canvas' div), I should go and set up events that capture things like zoom and drag, and pipe them along to my Google Map, and the result is prefect for what I am looking for.
So now I have my Easel.js canvas on top of my Google map, and I just have to set up lat/lng positions for my objects when I want them to be part of the map!
Thanks for the help, everyone!
In my Meteor/Cordova/famo.us App I need a map that can be rotated with two fingers, zoomed in and out and (ideally) the names (street, city etc.) should stay horizontally aligned.
The reason is that I haven't found a (free) map like leaflet.js, Google Maps etc. that can rotate in JS. Google Maps SDK for Android and iOS respectively can do this, but the corresponding plugin (plugin.google.maps) led to trouble with famo.us.
The rotation could be done with a famo.us Surface, and I've been told that in leaflet one could pull separately the map tiles and the names (vector/jpeg?).
I apprechiate your help.
Map rotation isn't possible in Leaflet. Read this answer: https://stackoverflow.com/a/22938733/2019281. However, it is possible in openlayers but it would also rotate the labels since they are embedded in the maptiles. See this example: http://openlayers.org/en/master/examples/rotation.html. You could use a tilelayer without labels and add create your own separate layer with vectorlabels and counterrotate those. This would be a very complex solution and i guess will put an enormous strain on your performance since you're talking about a mobile solution. I would rethink the concept.
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.