Skip to content

Latest commit

 

History

History
167 lines (101 loc) · 5.11 KB

intro-to-mapbox.md

File metadata and controls

167 lines (101 loc) · 5.11 KB
Raw

General Assembly Logo

React Mapbox

Learning Objectives

  • Learn to implement a basic map using the react-map-gl library

Mapping Libraries

There are several popular JavaScript mapping libraries to choose from including:

React Versions

All of these libraries have been ported over to React with each one having several different React libraries to choose from. When making the decision on which library to choose it's always best to do some research and see which one is trending on npmtrends. Let's take a look at a few of the Mapbox NPM libraries:

We will be using react-map-gl as we can see from the results that it is the far more popular React library.

⏰ Activity - 2min - React-Map-GL

Since were working with the react-map-gl library why don't we take a look at their documentation.

Starter Code

Here is the Starter CodeSandbox we will be using for this lecture which already imports the react-map-gl library.



Another import required is the mapbox-gl.css file which has also been imported via a a link tag in public/index.html

 <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css'>

⏰ Activity - 2min - Mapbox Access Token

Working with Mapbox requires that we sign up at Mapbox to create an access token.

Take a few minutes to sign up and create an access token.

Creating A Mapbox

Now that we have an API token, let’s begin coding. To build a map, we will take advantage of the ReactMapGl component provided by react-map-gl.

It takes in a number of props, including:

  • API token: required to use the library
  • viewport: Dimensions of your map, the center point, and the zoom constant.
  • mapStyle: Various styles are available on Mapbox (with different combinations of color scheme, street-view, labels, etc.), or even create your own here.
  • onViewportChange: Function that controls viewport transition (i.e. updating the viewport when a user drags the map).

The ReactMapGl Component

Let's first import ReactMapGl into the Map component.

import ReactMapGL from 'react-map-gl';

And then render it.

const Map = () => {
  return (
    <>
      <div>Map Goes Here</div>
      <ReactMapGL />
    </>
  );
};

Nothing will appear to happen but if we example React Dev Tools we should see the following:

Viewport Settings

The viewport settings define the Dimension of our map, the center point, and the zoom constant. Let's create a viewport variable to include those key:value pairs.

const viewport = {
    width: 400,
    height: 400,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8
}

And then update ReactMapGL to include them.

<ReactMapGL {...viewport} />

At this point we should the following which means our map is working to some extent but still needs a bit more configuration to render the actual map.

Mapbox Token

One additional piece we need to add is the Access Token.

const mapboxToken = "add your token here"

<ReactMapGL 
    mapboxApiAccessToken={mapboxToken}
{...viewport} 
/>

And with that we should now see the map.

Adding Mapbox Styles

Mapbox comes with several additional styles that we can use of such as light, dark, satelite and several others.

Implementing one of these styles is done by adding the mapStyle prop and setting it's value to one of the styles defined in the official Mapbox Documentation.

<ReactMapGL 
     mapboxApiAccessToken={mapboxToken}
    {...viewport} 
    mapStyle='mapbox://styles/mapbox/satellite-v9'
/>

Bonus

Instructor will perform a codealong and add markers to the map.

Additional Resources