Geo-Wizardry 101: Creating a Web Map That Knows Where You Are!

How do you make a web map truly interactive? You gamify it based on the real-world location of each user, in real time! That's exactly what we did when we created our gnome map game, where players discover the delightful hidden gems of Prague while collecting Wroclaw's famous gnomes as tokens. Now it's your turn—we’re going to show you this little trick so you can build your dream web map even sooner!

By the end of this tutorial, you'll be able to create a basic web map with a button that reveals the user's location. We’ll walk you through it using JavaScript and Leaflet, a cracking open-source mapping library that’s completely free!

Ready, Set, Map!

Download the exercise files from our GitHub repository. You can either use the download button or, if you're feeling a bit techy, clone the repository with this command (don't forget to install git on your local machine first):

git clone https://github.com/useiteurope/dig-it-tutorials.git

For this tutorial, we’re focusing on the device-location folder. I’m using VS Code as my editor of choice, but feel free to use whichever tickles your fancy! Now, head over to the index.html file, where I’ve set up an empty map container and imported all the essential CSS and JavaScript. Next, open the webmap.js file inside the js folder—this is where the magic happens. I’ve already set up an OpenStreetMap basemap and added a button to the map. When we click it, we simply get an alert saying, “Button clicked” – pretty exciting stuff, right?

But here’s where the fun begins! To get the user's location in real time, we’ll use the built-in getCurrentPosition method. Think of it as the magic phrase that makes your device figure out where it is in the world (don’t worry, it won’t work unless the user says it’s okay to share their location!).

Replace the alert with:

navigator.geolocation.getCurrentPosition(position_success, position_error, position_options);

Let’s Get Locational

This method takes three parameters:

1. position_success—a function that tells the browser what to do with the location data,
2. position_error—a function that handles any errors (like if we can’t retrieve the location),
3. position_options—an object that gives special instructions to the browser, like whether to use high accuracy.

Let’s create those three objects (be sure to create them before you create the button), and make sure you pass the right object names to the getCurrentPosition method.

    // create position objects
    function position_success(pos) {
        // extract coordinates
        const coordinates = pos.coords;
        // add location to the map
        L.marker([coordinates.latitude, coordinates.longitude]).addTo(map);
    };

    function position_error(err) {
        alert(`${err.code}): ${err.message}`)
    };

    const position_options = { enableHighAccuracy: false };

• The position_success function will take the device’s location as a parameter, extract the longitude and latitude, and pop it onto the map as a marker.
• The position_error function will handle any hiccups by popping up an alert with the error code and message.
• The position_options object will have high accuracy turned off, so it’s a bit quicker to execute.

Moment of truth! Update your map, click the button, and give your consent to share your location (no worries, this is just local on your machine!). Can you see your location on the map? How cool is that!?