In this tutorial, we will create small functionality where we will zoom in to and zoom out from map by drawing a box selection as shown in above GIF. This tool is one of the most common tool in GIS map.
Zoom map to lat long in OpenLayers – Spatial Dev Guru
In this tutorial, we will create small functionality where we will input latitude and longitude coordinates and zoom to that coordinates on map. This is one of the very common functionality of GIS map.
To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
This tool is fairly simple to implement. In fact, it is already present in OpenLayers. You just have to enable it.
To implement zoom in/out by box selection, we will use one the interaction available in OpenLayers. The interaction we will be using is ol.interaction.DragZoom. We will create zoom in/out by box selection step by step. Please refer below code snippet:
- Define OpenLayers map(Line numbers: 2-13)
- Define zoom_by_box function (Line number: 24-32). In this function we are creating DragZoom interaction and adding it to map. Once this interaction is activated, it will allow us to draw a box and will be automatically zoom in to it’s extent.
If you want to reverse the functionality meaning to zoom out on box selection, we will pass out property (line number 29) as true. Then it will zoom out from map on box selection. - At line number 36 and 44, we listening to zoom in and zoom out button click event and calling zoom_by_box function accordingly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
//Define Map var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([-0.1275, 51.507222]), zoom: 9 }) }); // Get size of default interactions let default_interactions_size = map.getInteractions().getArray().length; /* Activate box zoom in/out interaction. This method takes flag value. True means zooming out on box selection and False means zooming in on box selection */ function zoom_by_box(flag){ let box_selection = new ol.interaction.DragZoom({ condition: (e) => { return ol.events.condition.click }, out: flag }); map.addInteraction(box_selection); } // Box selection zoom in document.getElementById('zoomin').addEventListener('click', (e) => { if (map.getInteractions().getArray().length > default_interactions_size) { map.removeInteraction(map.getInteractions().getArray()[default_interactions_size]) } zoom_by_box(false) }); // Box Selection zoom out document.getElementById('zoomout').addEventListener('click', (e) => { if (map.getInteractions().getArray().length > default_interactions_size) { map.removeInteraction(map.getInteractions().getArray()[default_interactions_size]) } zoom_by_box(true) }); |
I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an email at contact@spatial-dev.guru.
Very good example. I would like one more button, to remove this iteration of box selection, to continue doing other activities on the map. How should I proceed? Only this code did not work:
if (map.getInteractions().getArray().length > default_interactions_size) {
map.removeInteraction(map.getInteractions().getArray()[default_interactions_size])
}