Burger Map: Fetching and Displaying Data with React
Tags: react, mapbox, api, tutorial
Published: 2021-12-15 09:26:52

---
title: Burger Map: Fetching and Displaying Data with React
published: true
description: Fetching Data from an API and displaying it on a Map
tags: react, mapbox, api, tutorial,
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3uzcz82siowev2b7f5e.PNG
---

Learning web development can be pretty dreary and gray. So it's always good to involve things you like into your learning process.
Ania Kubów made a Burger API in her YouTube Video **[How to mock your own API](https://youtu.be/FLnxgSZ0DG4)**. 

I took the liberty and used that API to create a Burger Map with React. And here i show you how.

If you have any questions [hit me up von Twitter](https://twitter.com/Dom_TheDev)

[TL;DR](#tldr)

### List of content
- [Create React App](#cra)
- [Fetching Burger Data](#fetch-data)
- [Mapbox API](#mapbox)
- [Append Latitude and Longitude Values to the Response](#latlong)
- [Display the World Map] (#world-map)
- [Render Data on the Map](#render-data)

## Create React App <a name="cra"></a>

Let's setup our frontend application by typing the following command into your terminal:

```CLI 
npx create-react-app burger-map
```

This command will boilerplate a complete react application for you.

Jump into your project with `cd burger-map` and then start the development server with `yarn start`,

This will start the react application which you can then visit at `http://localhost:3000`.

Once this is done we can open up this project in the editor of our choice.

In the main file `App.js` safely remove all the stuff which is not needed the file will look like this:

```react
import './App.css';

function App() {
    return (
        <div className="App">
           
        </div>
    );
}

export default App;
```

## Fetching Burger Data <a name="fetch-data"></a>

The next step is to fetch the data which we want to display. For that purpose we are going to use the npm module `axios` which will execute our HTTP requests. 

Install it with yarn via the terminal:

```CLI 
yarn add axios
```

To add a state to our application, we need to import the useState hook. Since we want to call up the data right at the beginning of our application, we need the useEffect hook right away. 
Import them at the beginning of `App.js`

```react
import {useState, useEffect} from 'react';
```

We need one state to set our application into the loading state while fetching data, and one to store the burger data.
Lets to this with this to lines of code:


```react
const [loading, setLoading] = useState(true)
const [burgers, setBurgers] = useState(null)
```

The function to fetch the data we place the useEffect hook, to be sure it is called right at the beginning of our application.
As mentiond we use `axios` to handle the get-request. 
The URL of the API is where we get the burgers from is `https://my-burger-api.herokuapp.com/burgers`.

The useEffect hook should now look like this:

```react
useEffect(() => {
    const fetchBurgers = async () => {

        const {data} = await axios.get("https://my-burger-api.herokuapp.com/burgers")

        setBurgers(data)
        setLoading(false)
    }

    fetchBurgers()
}, []);
```

## Mapbox API<a name="mapbox"></a>

For further purposes we need to create an free account at [mapbox.com](mapbox.com). Then under your Account you can create an Access Token which we need to call the Mapbox Api.
Copy this token and put it in ca `const` in your application.

```react
const MAPBOX_TOKEN = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
```

## Append Latitude and Longitude Values to the Response <a name="latlong"></a>

When we check the response for e.g. with `console.log(data)`
we see that currently the address for each burger looks something like that:

```json
[
    {
    addressId: 0
        country: "United Kingdom"
        line1: "Brick Lane"
        line2: "Shoreditch"
        number: "104"
        postcode: "E1 6RL"
    },
    ...
]
```

Since the Mapbox App is needing the `latitude` and `longitude` values to display the data on the correct position we have to call the geocoding endpoint. Here we have to pass the address object as a string seperated with ampersands. 

For that case create the getLatLong function like that:

```react
const getLatLong = async (address) => {
    const {line1, line2, number, postcode, country} = address;
    let searchKey = [line1, line2, number, postcode, country].filter(Boolean).join().replaceAll(" ", "&");

    const {data: {features}} = await axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${searchKey}.json?access_token=${MAPBOX_TOKEN}`)

    return features[0].center;
}
```

Now we need to call this function for each burger so adjust the `fetchBurgers` function to look like that:

```react
useEffect(() => {
    const fetchBurgers = async () => {
        let burgers = []
        const {data} = await axios.get("https://my-burger-api.herokuapp.com/burgers")

        for (const burger of data) {
            burger.latLong = await getLatLong(burger.addresses[0])
            burgers.push(burger)
        }

        setBurgers(burgers)
        setLoading(false)
    }

    fetchBurgers()
}, []);
```

Now when we check our burger object we see a property `latLong` which is an array containing the lat and long values.

## Display the World Map <a name="world-map"></a>

To display the data on a map let's install the [ReactMapGL](https://visgl.github.io/react-map-gl/) component.

```cli
yarn add react-map-gl
```

Then import the Map as well as the Markers Component at the beginning of our App.

```react
import ReactMapGL, {Marker} from 'react-map-gl';
```

Let's adjust the return from our App.js and add the Map Component like that:

```react

if (loading) {
    return 'loading burgers..'
}

return (
    <div className="App">
        <div>
            <h1 style={{textAlign: 'center'}}>World Map</h1>
        </div>
            
        <ReactMapGL
            width="100vw"
            height="100vh"
            mapboxApiAccessToken={MAPBOX_TOKEN}
        >
        </ReactMapGL>
    </div>
);
```

Now you already should be able to see a fullscreen map in your browser. 

To make our map interactive we need to add a so called viewport as well as the function to change it. 

So add a new state, as well as adjust the Map Component:

```react
const [vieport, setVieport] = useState({})
```


```react
<ReactMapGL
    {...vieport}
    width="100vw"
    height="100vh"
    onViewportChange={nextVieport => setVieport(nextVieport)}            
    mapboxApiAccessToken={MAPBOX_TOKEN}
>
</ReactMapGL>
```

Go and check the map. You can now drag and drop, as well as zoom in and zoom out.

## Render Data on the Map <a name="render-data"></a>

Now we come to the last part. We have to combine the data and the map.

For that create the `renderBurgers` function and call inside of the ReactMapGL component.
The renderBurgers function maps over all burgers, passes the lat and long values to the Marker and returns them on their location.
Whatever you pass inside the Marker Component will then be displayed on the map. In this case we render a `X` for each burger.

```react
function renderBurgers() {
    return burgers.map(burger => (
        <Marker
            key={burger.id}
            latitude={burger.latLong[1]}
            longitude={burger.latLong[0]}
        >
            X
        </Marker>
    ))
}
```

The last step is to call the `renderBurgers` function in the ReactMapGl Component. So let's add it:

```react
<ReactMapGL
    {...vieport}
    width="100vw"
    height="100vh"
    onViewportChange={nextVieport => setVieport(nextVieport)}
    mapboxApiAccessToken={MAPBOX_TOKEN}
>
    {renderBurgers()}
</ReactMapGL>
```

## Conclusion
In this I showed you how to create a react app, fetch data from an API. Then we used the Mapbox react component to display the data on the Map. 

This was my first article ever, if you liked it let me now. And if you didn't liked it let me now what can be improved.

### Thanks for reading!

GitHub: https://github.com/dom-the-dev/burger-map

**TL;DR** <a name="tldr"></a>

I also made a step by step video for this burger map on my [YouTube Channel](#https://www.youtube.com/channel/UCAa2t4QIxlaUuPO2FKq5TDw). 

{% youtube FuOODVaByNA %}