How to: Mapbox with React.js

#tutorial #react #webdev

Getting started

Generate a MapBox access token in your account page
Download the npm library using yarn add mapbox-gl
Include the css in the <head> of your index.html file:

<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />

Creating a map

Create a BaseMap component:

import React, { useEffect } from "react";
import mapboxgl from "mapbox-gl";
import "./BaseMap.scss";

const BaseMap = () => {
  mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;

  useEffect(() => {
    new mapboxgl.Map({
      container: "mapContainer",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 9,
    });
  }, []);

  return <div id="mapContainer" className="map"></div>;
};

export default BaseMap;

container: The HTML element in which Mapbox GL JS will render the map, or the element's string id. The specified element must have no children.
style: choose from a pre-defined Mapbox style or create your own using Mapbox studio
center: refers to the starting position in [long,lat]
zoom: refers to the initial zoom level

Other option parameters for Map can be found here.

Next, add basic styles in BaseMap.scss:

.map {
  width: 100%;
  height: 100%;
}

Finally, add BaseMap into your view e.g. HomePage.js

import React from "react";
import BaseMap from "~Components/BaseMap/BaseMap";

const HomePage = () => {
  return (
    <>
      <h1>My map</h1>
      <BaseMap />
    </>
  );
};

export default HomePage;

Displaying markers and controls

Navigation

This adds a zoom buttons and a compass.

const nav = new mapboxgl.NavigationControl();
map.addControl(nav, "top-right");

Marker

This adds a marker component.

const marker = new mapboxgl.Marker()
  .setLngLat([103.811279, 1.345399])
  .addTo(map);

Geolocate

This locates the user on the map based on the browser's geolocation API.

const geolocate = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});

map.addControl(geolocate, "top-right")