Zooming to your location

Browsers provide an API to get the current location of the user. We want to use this feature to zoom the map to where the user currently is. To make it easier for the user to see what is going on on the map, we want to animate the zoom.

Application changes

First of all, we need to assign the map to a constant, so we can access it from other components we're going to add in this exercise:

const map = new Map({

To add the geolocation functionality, we append a short code block to our main.js file:

navigator.geolocation.getCurrentPosition(function(pos) {
  const coords = proj.fromLonLat([pos.coords.longitude, pos.coords.latitude]);
  map.getView().animate({center: coords, zoom: 10});
});

This requires a new import for the proj.fromLonLat() function, which converts longitude/latitude coordinates into the coordinate system OpenLayers uses by default for the map view (Web Mercator, EPSG:3857).

import proj from 'ol/proj';

View the result

When we look at the map in the web browser (http://localhost:3000/), we will probably get asked whether we want to give the page access to our location. After answering 'Yes', an animated zoom should take us to our current location.

results matching ""

    No results matching ""