In GoogleMaps when users zooms In/Out using mouse wheel the point under cursor stays the same (its coordinates), but OpenLayers map has different approach - when zooming center of the map is constant. Can one use GoogleMaps zoom style in OpenLayers map?
EDIT:
Actually current behaviour in my OpenLayers is that when I zoom in with some position under the cursor it moves that position to map center on the next zoom level. Probably it is some issue related to my map specific settings (like projection).
I guess you are using OpenLayers.Control.MouseDefaults control for navigation. Well, you shouldn't, because this control is replaced with OpenLayers.Control.Navigation and will be deprecated in OpenLayers 3.0.
A quick look at source code for MouseDefaults shows that it definitely centers map on the cursor position:
defaultWheelDown: function(evt) {
if (this.map.getZoom() > 0) {
this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
this.map.getZoom() - 1);
}
},
While cursor stays at the same position the map will centered to new location every time you zoom in/out, which is confusing.
OpenLayers.Control.Navigation uses the same approach as Google Maps. OpenStreetMap uses it and you can see that it works the same way here
Actually, when looking at the Basic Example at OpenLayers, it seems like the map zooms around the mouse pointer, just as Google Maps does. Or am I missing some detail in your question?
Related
My current implementation is, when I open the html via browser it zooms to North America map with 4 markers. On click of the markers, the maps is zoomed to that location with few more markers added. Now I would like to add a back button so when the button is clicked it should take me to the initial maps page with 4 markers.
Your help is much appreciated.
Thanks,
Chitra
The features of Google Maps API that you will need to use are bounds. For a rough understanding, imagine providing a top left corner point and a bottom right corner point and just telling the viewport to zoom and track to fit them in. There is a good answer here: Google Map API v3 — set bounds and center
As for how you implement the actual button to trigger the feature, that is a separate question and there are many potential solutions. Again, it has already been discussed here: Put a button on top of a google map
I'm trying to create a circular masked overlay using Leaflet 0.8 that is positioned over the users currently location, extending a radius of 1000 meters. Essentially making the map visible around the user (as a circle), and grayed out beyond 1000 meters
Mockup:
As the user zooms in/out on the map, the circle should resize accordingly.
I tried using leaflet-maskcanvas, a plugin for Leaflet that looks like it would do exactly what I need, unfortunately with all refactoring done in Leaflet 0.8-dev, this plugin isn't compatible.
Has anyone been able to achieve this effect successfully with Leaflet 0.8?
I'm thinking of one hacky way of doing this is using Turf.js to take the map's current center point(map.getCenter()), buffer it 1000 meters with Turf, take that result, and then grab the map viewport's current bounds(map.getBounds()), and use turf erase on it. Then draw the resulting polygon on the map(which is the difference), and then update this on any move events.
http://turfjs.org/static/docs/module-turf_buffer.html
http://turfjs.org/static/docs/module-turf_intersect.html
http://turfjs.org/static/docs/module-turf_erase.html
I am using the following google map and everything looks perfect:
Google map
The only problem is that when a person zoom in to the street level and wants to zoom out he needs to have a mouse and use mouse wheel and if he does not have mouse working with this map is a pain.
So I need to put zooming bar for example at left side of my map like this:
Is it possible to do that and how can I do that?(I appreciate any help)
You need to add the control to your map, like this:
map.addControl(new GSmallZoomControl());
You can find more information about GMaps controls here: https://developers.google.com/maps/documentation/javascript/v2/controls
This quote is from the above mentioned documentation
GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.
I have a heatmap and set of markers that are rendering fine in OpenLayers. Afterwards, when I change the center of the map programmatically using map.setCenter the heatmap appears offset by exactly double the change of center location. (So if the new center is 1km east, the heatmap appears offset by 2km east)
It's almost as though the redrawing of the heatmap layer is over compensating.
Has anyone come across this before and solved it? I've tried called heatmapLayer.redraw() to no avail.
I'm using OpenLayers 2.13.1 and Patrick Weid's heatmap.js' openlayers support.
I've managed to find a fix. No idea why this seems to work though when heatmaplayer.redraw() doesn't.
For the benefit of others:-
this.map.setCenter( new OpenLayers.LonLat(lon,lat).transform(
this.transformWgs84, this.map.projection), zoom,true,true);
the second 'true' did the trick. According to the OpenLayers docs this should just force a zoom change. It seems to also force a heatmap layer redraw. (The first true parameter forces drag events)
Docs: http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.setCenter
I'm displaying a custom layer on top of the standard google map (v3). Now the users can pan out of the extents of my custom layer.
Is it possible to constrain the viewable area to a square given by the top-left and bottom right coordinates?
What you could do is prevent the user being able to pan the map at all. Set draggable:false in the mapOptions, and perhaps remove the pan control as well - panControl:false
Another idea; you could allow the user to drag/pan the map, but then if they move it outwith your bounds, you could call the panToBounds function on the map to move it back to where you want it.