-
-
Save ThomasG77/f1634b7e22626f6485db0a73e5843381 to your computer and use it in GitHub Desktop.
Listen to get zoom/resolution before/after a zoom/unzoom from a user (due to https://gis.stackexchange.com/questions/280354/get-both-the-old-and-new-zoom-values-in-openlayers-4)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8> | |
| <meta name=description content=""> | |
| <meta name=viewport content="width=device-width, initial-scale=1"> | |
| <title>Simple Map - Listen to get zoom/resolution before/after a zoom/unzoom from a user</title> | |
| <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> | |
| <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> | |
| <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> | |
| <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> | |
| </head> | |
| <body> | |
| <div id="map" class="map"></div> | |
| <script> | |
| var map = new ol.Map({ | |
| layers: [ | |
| new ol.layer.Tile({ | |
| source: new ol.source.OSM() | |
| }) | |
| ], | |
| target: 'map', | |
| view: new ol.View({ | |
| center: [0, 0], | |
| zoom: 2 | |
| }) | |
| }); | |
| // Approach 1, playing with resolution | |
| // Issue is the fact there not one value at start and one | |
| // at the end but resolution change step by step to smooth behavior | |
| map.getView().on('change:resolution', function(e) { | |
| console.log('Old resolution', e.oldValue); | |
| console.log('New resolution', e.target.get(e.key)); | |
| }); | |
| // Approach 2 with only 2 values | |
| // Not happy when zooming, I would expect the start zoom to be 2 whereas it's 2.0686654766274386 | |
| // Rounding to integer could help but it's just bypass the issue | |
| // to not get an integer value, not fix it | |
| map.on(['movestart', 'moveend'], function(e) { | |
| if (e.type == 'movestart') { | |
| console.log('Start zoom', e.map.getView().getZoom()); | |
| } else if (e.type == 'moveend') { | |
| console.log('End zoom', e.map.getView().getZoom()); | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment