Zoom map to lat long in OpenLayers

Zoom-in to by coordinates of location in OpenLayers

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.

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.

  1. At line 2-13, we are defining OpenLayers map. The default projection will be EPSG:3857.
  2. 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.
  3. 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
  4. After zooming to lat long, at line number 45, we are also displaying overlay or popup to pin point the lat long location

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.

We also offer freelancing services. Please email us at contact@spatial-dev.guru for any query.

1 thought on “Zoom map to lat long in OpenLayers”

  1. Pingback: OpenLayers zoom in and zoom out by box selection - Spatial Dev Guru

Leave a ReplyCancel reply