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.
Create Feature Information Popup tool in OpenLayers on map click
Get feature information in OpenLayers using getFeatureInfoUrl and display retrieved information in popup/dialog.
There are some points to note here.
1. Our OpenLayers map is in projected coordinate system i.e. EPSG:3857
2. The coordinates that we will input are latitudes and longitudes of Geographic Coordinate system i.e. EPSG:4326
3. We need to project lat long to 3857 and then we will zoom to it on map
To get full source code for this tutorial, click here.
To check the live demo for this tutorial, click here.
Please refer to the following code snippet.
- At line 2-13, we are defining OpenLayers map. The default projection will be EPSG:3857.
- At line number 16-25, we are creating an overlay and adding it to map. We will use this overlay to pin point lat-long on map.
- At line number 28-45, we are creating a function to zoom to lat long on submit. This function take two parameters lat and long, convert them to projected coordinate system EPSG:3857 and finally zoom to it.
At line number 33, we are projecting lat long to EPSG:3857 using ol.proj.fromLonLat module.
At line number 36, we are using map.setView to zoom to projected lat long - After zooming to lat long, at line number 45, we are also displaying overlay or popup to pin point the lat long location
|
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 |
//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 }) }); // Define overlay popup for dislayong lat lon var element = document.getElementById("popup") var overlay = new ol.Overlay({ element: element, offset: [0, -15], positioning: 'bottom-center', className: 'ol-tooltip-measure ol-tooltip .ol-tooltip-static' }); overlay.setPosition([0,0]); overlay.element.style.display = 'block'; map.addOverlay(overlay); // Get lat lon from inputs and zoom to lat lon on map document.getElementById('submit').addEventListener('click', function() { var lat = parseFloat(document.getElementById('lat').value); var lon = parseFloat(document.getElementById('lon').value); // Converting lat long to mercator projection proj_lat_long = ol.proj.fromLonLat([lat, lon]) // Zoom to lat lon map.setView( new ol.View({ center: proj_lat_long, zoom: 17 })); overlay.element.innerHTML = 'Lat: ' + lat + '<br/> Lon: ' + lon; // Set popup position to lat lon overlay.setPosition(proj_lat_long); }); |
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.
Pingback: OpenLayers zoom in and zoom out by box selection - Spatial Dev Guru