Getting Started With Mapbox GL JS: User Location With Geolocation

Creating a map you can set to any location, with a button relocating to the user’s location

Dallas Bille
Aug 23, 2019 · 4 min read
Image for post
Image for post

I am excited to be in new territory here. Did I tell you I love maps? I wish I had gotten into Mapbox earlier; as a developer and geography enthusiast, it’s a dream come true.

Although, with these articles, I am merely documenting getting started with it, as I am, and hopefully it will be of use to someone. You can also read part 1, Getting Started with React and MapBox GL JS.

Goal: Switch to the User’s Location

This is actually a pretty easy task.

If you are familiar with React and have followed the previous tutorial, you’ll be in great shape. If you haven’t set up a map yet, follow my first tutorial linked above.

What We Need

  1. The map we built in the last tutorial.
  2. navigator.geolocation.getCurrentPosition()

And that’s pretty much it. It’s quite easy and, in a couple of minutes, you will be able to click a button and the map will be zoomed in to your location.

In the end, you will say: “Gee Dallas, what a powerful concept. And easy too!”

Deeper Dive

Navigator

Unless you have been working with JavaScript for a while, it’s possible you haven’t heard of the navigator object. This is going to be of great use to us when we locate our users.

This is a JavaScript feature, available on all major browsers. I won’t go too far into detail with it but if you inspect a webpage, type navigator into the console, and open the navigator object, you see something like this:

Image for post
Image for post

As w3Schools puts it:

“The navigator object contains information about the browser.”

Uh oh, this means that any website can access my location at any time through navigator object? You’ll see later why the answer is no.

Navigator.geolocation

You will notice a key in the navigator object, labeled geolocation. This points to an object with keys, all of which I don’t know the function of (except getCurrentPosition).

Navigator.geolocation.getCurrentPosition

Now, we have the main course after those appetizers, the function. So, navigator.geolocation.getCurrentPosition returns a function. This function is asynchronous and requires a callback.

This is the general structure:

navigation.geolocation.getCurrentPosition(position => {  // right now "position" is an object
})

This returns a position object. With a coords key, which is an object that contains the latitudes and longitudes of your location right now.

It looks like this:

Image for post
Image for post

And that is how you get a user’s location.

Applying This to Our App

So, the concept is pretty simple. On page load (or maybe you want a button or something), we can grab the user’s current location and update the viewport state.

For this tutorial, we will use a button. And, so far, we have this (from the last tutorial). It zooms in to a point in Grants Pass, Oregon (beautiful place).

Image for post
Image for post

But, we would prefer it to zoom in to our location. So, we will make a button and, once clicked, it will zoom into our location.

setUserLocation = () => {
navigator.geolocation.getCurrentPosition(position => {
let newViewport = {
height: "100vh",
width: "100vw",
latitude: position.coords.latitude,
longitude: position.coords.longitude,
zoom: 12
}
this.setState({
viewport: newViewport
})
})
}
  1. Add a button above the ReactMapGL component.
  2. Put an onClick in it which will change our component’s state.

So, now our render in App.js looks like this:

Image for post
Image for post

Important note

Remember before, when I said, “Uh oh, this means that any website can access my location at any time through navigator object? You’ll see later why the answer is no.”?

Right now is later.

Lucky for us, if a user doesn’t want to share their location, they don’t have to. It is built in that the browser asks the user’s permission first (in the form of an alert).

Before button-click

Image for post
Image for post

After button-click (should be your location)

Image for post
Image for post

Yup, I moved to the “biggest little apple in the world”.

Ready To Add Markers to Your Map?

User Location Marker with a Marker Component

Conclusion

Maps are da bomb. I really enjoy playing around with MapBox and writing about it. And, now you have a map that you can set to any location you want and a button that relocates to the user’s location.

Thanks for reading and I hope this was helpful. In the next post, I will cover adding points on the map.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Dallas Bille

Written by

Full Stack Web Developer, Adventurer, Soccer Player/Coach

Better Programming

Advice for programmers.

Dallas Bille

Written by

Full Stack Web Developer, Adventurer, Soccer Player/Coach

Better Programming

Advice for programmers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store