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.
Related
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..
I want leaflet to just use the tiles zoomed to level 20 and disregard the lower zoom level tiles.
Is there any way to make Leaflet use chosen zoom level no matter how much the map is actually zoomed?
I thought that zIndex option of TileLayer would do it but it doesn't seem to do anything (I'm not sure what it's supposed to do).
To say it another way:
I want to be able to zoom still and force Leaflet to use 4 tiles to form one tile of a lower zoom level.
Is the better solution is to just combine the tiles beforehand and then feed those combined tiles to leaflet?
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
Seatgeek has a zoomable draggable tiled interface.
An example is here:
http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#
I want to implement a scrollable draggable interface like this but I cannot use Google's code for google maps.
Also I need the tile system like google maps where it pulls tiles from the server for rendering the map.
Need to implement in javascript. What library can I use? How can I do it?
How does seatgeek do it?
I de-compiled their javascript http://pastebin.com/PVjahhnH
Map Client
OpenLayers
OpenLayers Examples
Map Data
OpenStreetMap
This kind of interface seems complex to implement, but it is just some math tricks. If you decide to implement your own algorithm, try this out:
Take the full image and create tiles in different scales and consequently with different depth.
The user start looking at the scene in real scale, composed by 16 tiles created from the original scene.
If the user drags, all tiles moves equaly. If the user zoom in, all tiles are scaled up.
If the user zoom more than X, you change the 16 tiles by their 16 child tiles! Got it? Higher the zoom, higher the detail. To avoid having 36000 tiles at the same time, generate with different depth and switch them on the fly.
You just need to load and move the tiles. Multiply tile x, y, width, height by the zoom. Keep the focus of the scene in the mouse position. Take a look at this example. It does exactly the steps above, but with a lot of microscope images. It is the same idea of google maps.
CloudMade map tile is one of the server based map tile service. Please read this page server http://cloudmade.com/documentation/map-tiles or contact with alex#cloudmade.com for more information.
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?