Map Navigation Guide: Displaying Routes And User Location

Aug 8, 2025 by Omar Yusuf 58 views

Room Navigation on Map: A Comprehensive Guide

Hey everyone! As students, we've all been there – wandering around campus, trying to find that one specific room in a maze of buildings. Well, fear no more! This guide will walk you through how to implement a fantastic room navigation feature on a map, making it super easy for anyone to find their way around.

Story

The main goal here is simple: as a student, I want to get clear and easy-to-follow directions to a building or room directly on a map. This will save time, reduce stress, and make campus navigation a breeze.

Acceptance Criteria

To make this navigation system a reality, we'll be focusing on the Map.tsx component and leveraging the power of the Mapbox API. Here's what we need to achieve:

Display User Location on the Map

Input: The user should be able to initiate the process by clicking a button or prompt labeled "Get Directions".
We'll assume the user agrees to share their location (because, you know, it's kinda essential for navigation!).
Output: The map should display a clear pin or marker indicating the user's current location. This is the starting point for our directions!

Display Route to a Building

Input: We'll need two key pieces of information: the room's location (latitude and longitude) and the user's location (also latitude and longitude).
Output: The map should beautifully display a route, like a highlighted path, from the user's current location to the pin or marker representing the room or building.

Resources

We're not starting from scratch! The mapbox-map branch already has some initial routing implementation, which will give us a fantastic head start. Think of it as the foundation upon which we'll build our awesome navigation system.

Diving Deep: Implementing Room Navigation with Mapbox

Alright, let's get into the nitty-gritty of how we can make this happen. We'll break down the implementation into key steps, making it easier to follow along and contribute.

1. Setting Up Mapbox

First things first, you'll need a Mapbox account and an access token. Mapbox is a powerful platform for creating custom maps and geospatial applications. Think of it as the canvas and the brushes we'll use to paint our navigation system.

Create a Mapbox Account: If you don't already have one, head over to the Mapbox website and sign up for a free account. They offer generous free tiers that are perfect for development and testing.
Get an Access Token: Once you're logged in, navigate to your account dashboard. You'll find an option to create an access token. This token is like your key to the Mapbox kingdom, allowing your application to use Mapbox's services.
Secure Your Token: Keep your access token safe! It's best practice to store it in an environment variable rather than directly in your code. This prevents it from being exposed if your code is shared or committed to a public repository.

2. Integrating Mapbox into Your React Component

Now that we have our Mapbox setup, let's integrate it into our Map.tsx component. We'll use the react-map-gl library, a popular and well-maintained React wrapper for Mapbox GL JS. This library makes it super easy to work with Mapbox maps in our React application.

Install react-map-gl: If you haven't already, install the library using your favorite package manager:
```
npm install react-map-gl
# or
yarn add react-map-gl
```
Import the necessary components: In your Map.tsx file, import the Map component from react-map-gl:
```
import Map from 'react-map-gl';
```
Create a Map Component: Now, let's create a basic Map component in your Map.tsx file:
```
import React, { useState } from 'react';
import Map, { Marker } from 'react-map-gl';

const MapComponent = () => {
  const [viewport, setViewport] = useState({
    latitude: -34.9215,
    longitude: 138.6006,
    zoom: 14
  });

  return (
    <Map
      {...viewport}
      style={{width: '100%', height: '100%'}}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      onMove={evt => setViewport(evt.viewState)}
    >
      {/* Markers will go here */}
    </Map>
  );
};

export default MapComponent;
```
Let's break down this code:
- We import useState from React to manage the map's viewport (the center point and zoom level).
- We import Map and Marker from react-map-gl.
- We initialize the viewport state with some default coordinates (e.g., a university campus) and a zoom level.
- We render the Map component, passing in the viewport, a mapStyle (you can choose different styles from Mapbox), and your Mapbox access token (from the environment variables).
- The onMove prop allows the user to interact with the map and move around. This functionality is linked to updating the viewport with the setViewport hook function.

3. Getting the User's Location

Next up, we need to get the user's location. Modern browsers have a built-in Geolocation API that makes this relatively straightforward. This API is our key to pinpointing where the user is on the globe.

Create a "Get Directions" Button: Add a button or prompt in your component that triggers the location retrieval process. This could be as simple as a <button> element with an onClick handler.
Use the Geolocation API: Inside the button's click handler, use the navigator.geolocation.getCurrentPosition() method to request the user's location.
```
const handleGetDirectionsClick = () => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      // Do something with the user's location
      console.log('User location:', latitude, longitude);
    },
    (error) => {
      console.error('Error getting location:', error);
      // Handle errors, e.g., user denied location access
    }
  );
};
```
- navigator.geolocation.getCurrentPosition() takes two callback functions:
  - The first callback is executed if the location is successfully retrieved. It receives a position object containing the user's latitude and longitude in position.coords.
  - The second callback is executed if there's an error, such as the user denying location access. It receives an error object.
Handle Errors: It's crucial to handle errors gracefully. If the user denies location access, display an informative message explaining why location access is needed. Consider implementing a fallback mechanism, such as allowing the user to manually enter their location.

Update the Map Viewport: Once you have the user's location, update the map's viewport to center on their location and adjust the zoom level for a better view.

const handleGetDirectionsClick = () => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      setViewport({
        ...viewport,
        latitude,
        longitude,
        zoom: 16, // Adjust zoom level as needed
      });
    },
    (error) => {
      console.error('Error getting location:', error);
      // Handle errors, e.g., user denied location access
    }
  );
};

Display a User Location Pin: Add a Marker component to the map to visually represent the user's location.

<Map
  {...viewport}
  style={{width: '100%', height: '100%'}}
  mapStyle="mapbox://styles/mapbox/streets-v9"
  mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
  onMove={evt => setViewport(evt.viewState)}
>
  <Marker longitude={viewport.longitude} latitude={viewport.latitude} color="red" />
</Map>

This will add a red marker to the map at the user's location.

4. Displaying a Route to a Building

Now for the exciting part: displaying a route from the user's location to a specific building or room. We'll use Mapbox's Directions API for this. This API is like our personal navigation assistant, calculating the best route based on real-time data.

Get the Room's Location: You'll need the latitude and longitude of the room or building you want to navigate to. This data could come from a database, an API, or a hardcoded list (for testing purposes).

Call the Mapbox Directions API: Use the fetch API (or a library like axios) to make a request to the Mapbox Directions API.

const getRoute = async (start, end) => {
  // start and end are arrays of [longitude, latitude]
  const query = await fetch(
    `https://api.mapbox.com/directions/v5/mapbox/walking/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${mapboxAccessToken}`
  );
  const json = await query.json();
  const data = json.routes[0];
  const route = data.geometry.coordinates;
  const geojson = {
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'LineString',
      coordinates: route
    }
  };
  // if there is already a route on the map, we reset it using setData
  if (map.getSource('route')) {
    map.getSource('route').setData(geojson);
  } else {
    // otherwise, we make a new request
    map.addLayer({
      id: 'route',
      type: 'line',
      source: {
        type: 'geojson',
        data: geojson,
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#3887be',
        'line-width': 5,
        'line-opacity': 0.75
      }
    });
  }
};

Let's break down this code:

Replace YOUR_MAPBOX_ACCESS_TOKEN with your actual Mapbox access token.
The API endpoint is constructed using the user's coordinates and the room's coordinates.
We specify walking as the profile (you can also use driving, cycling, etc.).
We request steps=true to get turn-by-turn instructions (which we won't display in this basic example but could be a future enhancement).
We request geometries=geojson to get the route geometry in GeoJSON format, which is easy to work with in Mapbox.

Parse the Response: The API response will be a JSON object. You'll need to parse it to extract the route geometry.
```
const data = json.routes[0];
const route = data.geometry.coordinates;
const geojson = {
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'LineString',
    coordinates: route
  }
};
```
This code extracts the coordinates from the response and formats them into a GeoJSON object.

Display the Route on the Map: Use Mapbox GL JS's addLayer method to add a line layer to the map, representing the route. This layer will use the GeoJSON data we parsed earlier.

if (map.getSource('route')) {
  map.getSource('route').setData(geojson);
} else {
  map.addLayer({
    id: 'route',
    type: 'line',
    source: {
      type: 'geojson',
      data: geojson,
    },
    layout: {
      'line-join': 'round',
      'line-cap': 'round'
    },
    paint: {
      'line-color': '#3887be',
      'line-width': 5,
      'line-opacity': 0.75
    }
  });
}

This code checks if a route layer already exists. If it does, it updates the data. If not, it adds a new line layer to the map with the route geometry. The paint property controls the appearance of the route line.

Add a Room Pin: Just like we added a pin for the user's location, add a pin for the room's location using the Marker component.
```
<Marker longitude={roomLongitude} latitude={roomLatitude} color="blue" />
```
This will add a blue marker at the room's location.

5. Optimizing and Enhancing the Navigation

We've got the basic navigation working, but there's always room for improvement! Here are some ideas to take it to the next level:

Display Turn-by-Turn Instructions: The Mapbox Directions API provides turn-by-turn instructions. You could display these instructions in a separate panel or overlay on the map. This would provide a more detailed and user-friendly navigation experience.
Real-time Updates: As the user moves, you could update the route in real-time based on their current location. This would ensure that the directions are always accurate, even if the user deviates from the original route. Think of it as a GPS system in your pocket!
Search Functionality: Implement a search bar that allows users to search for rooms or buildings by name. This would make it even easier to find specific locations on campus. Imagine typing in "Library" and instantly seeing it on the map!
Accessibility: Ensure that your navigation system is accessible to all users, including those with disabilities. This might involve using ARIA attributes, providing alternative text for images, and ensuring sufficient color contrast. Let's make sure everyone can find their way around!

Conclusion

And there you have it! A comprehensive guide to implementing room navigation on a map using Mapbox. By following these steps, you can create a powerful tool that helps students (and anyone else) easily find their way around campus. Remember, the key is to break down the problem into smaller, manageable steps and to leverage the fantastic resources that Mapbox provides. Happy coding, and happy navigating!