I'm using maps.googleapis.com/maps/api/js?v=3.21 and displaying zoom slider using
mapOptions.zoomControl = true;
mapOptions.zoomControlOptions= {
style:google.maps.ZoomControlStyle.LARGE
};
Every thing work as expected. The only thing which does not look so great is the zoom-in and zoom-out using slider . Its not very smooth and it seems that I can zoom-in/zoom-out by discrete zoom levels and not continuous. But I can see that Google maps has a zoom slider which works in very smooth and continuous manner. How can I get the same effect in my application ?
Google maps work only with finite zoom level.
The zoom level is an integer and is directly related to the maps tile showed ..
alias for each zoom level the map tiles retrivied by google maps are determinated by a direct relation for the zoom level and the earth surface mapping.
THe only difference with the slide is the aspect and the fact you can change zoom level directly moving the slider..
Related
I want to upgrade my Web-Mapping-Application from OL2 to OL3 and now I was stopped by a problem of smooth zooming. In the OL2 I used the map.fractionalZoom feature, because my app uses a single Tile WMS and it's necessary for me to zoom exactly to any scale by using a slider or a ZoomBox (DragZoom in OL3).
Can anyone help me and show how to get the same functionality in OL3?
Thanks and best regards from Germany
Evgeni T.
OpenLayers 3 works the opposite way: it supports any fractional zoom level out of the box, but its controls and interactions constrain the zoom they set to integer zoom levels. This means that you can set a fractional zoom level programmatically:
map.getView().setZoom(9.3);
map.getView().fit(extent, size, {constrainResolution: false});
This also means that you can create custom controls and interactions that do not constrain the zoom level to integers. If, for example, you want to fit the view to an exact extent you created using ol.interaction.DragBox, your custom zoom box interaction could look like this:
var zoomBox = new ol.interaction.DragBox();
zoomBox.on('boxend', function() {
map.getView().fit(zoomBox.getGeometry(), map.getSize(),
{constrainResolution: false});
});
Update: Recent OpenLayers versions (v3.20.0 and above) do not restrict zoom levels any more when using wheel or pinch zoom.
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'm working on creating custom map tiles (.PNG) which I can show with ImageMapType from the Google Maps API range. In general, the tiles are shown fine and I get the tiles I want with no real problems.
However, an issue which I can not seem to solve at all, is a weird upwards push of the tiles at a single specific zoom level (9). My original tiles do have many gaps for the ocean in them, so I generate blank tiles to fill in the gaps by surrounding my original map tiles with transparent points in a grid.
For testing purposes, and to show you the exact issue, i've made the grid points visible, and quickly taken a snapshot of the upwards push during the transition phase. The top left of the dark region is where the corner was for the previous layer, and after zooming in, the top marked section is where the corner moved it.
After I go past this layer, into layer 10, the corner goes back down a level, to where it would have been if layer 9 wasnt so buggy.
Hope I've provided enough information and I'll be grateful of any advice.
For zoom problem keep one transparent div with z-index and then set map zoom on 9 also hide its zoom control from map By this no one can zoom your map and for tile problem I need its demo page for more information but with this answer i attached a url for your help with full tutorial just check it : https://developers.google.com/maps/documentation/javascript/v2/overlays#Custom_Map_Types
Gud luck
I have a static image, which I wanna be able to zoom into with the Google Maps API. However, I do not have any higher resolution tiles available, so the idea was to simply zoom in the one image and stretch it accordingly. This works fine if I make the getTileURL() function return null, and instead define the image as a GroundOverlay. The problem is, zooming in on images for GroundOverlays has to resize and reposition them, and you can notice that process distinctly. This is an example from the Google Maps Developer's Guide, which has the same problem:
https://google-developers.appspot.com/maps/documentation/javascript/examples/groundoverlay-simple
If you zoom in on the map, you will notice the image appearing again in regular size for a split second, then be stretched and repositioned to fit the coordinates.
Is there a way to disable that entirely? I know it can zoom into images smoothly, because it does that with regular image tiles, it zooms in and the replaces them as soon as the higher resolution tiles have loaded. Is it possible to somehow emulate this effect for GroundOverlays?
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?