Forem: Niharika Khanna

Integrating MapBox with Next.js — the Cheaper Alternative to Google Maps

Niharika Khanna — Sat, 05 Dec 2020 08:18:49 +0000

Lately, I’ve been working on creating an online platform for eco hotels and resorts, and found myself needing to render a map with some clickable marker pins (which we are going to reproduce in this tutorial). After scouring the internet with possible solutions, two immediate options sprung up — Google Maps and MapBox. While most of us are familiar with Google Maps because of the overwhelming presence it has in all our lives, integrating it in an application, I found, is less than ideal. Building a bootstrapped project, I wanted to keep the costs at a minimum and Google Map’s pricing structure would mean that the costs would begin to add up.

Enter MapBox!

With a competitive pricing structure (the first 50,000 requests on web are free) and an easy-to-use and well documented API, MapBox is a good alternative to Google Maps. It is also built on top of OpenStreetMap, which is an open source mapping project. Win, win!

What are we building?

We’re going to be querying MapBox’s search api to get some locations of an infamous coffee shop called Greggs, focusing our search on the Greater London region. Then, we are going to render these places in our MapBox <Map> component with a bunch of clickable markers. On click, these markers will display some dismissible popups.

The finished product will look something like,

Let's Code!

Make a MapBox account to get your access token

The first thing you will need to do is to make a MapBox account so that you can get an access token. We will use this token to make requests to the various MapBox APIs.
Once you have your access token, it is time to set up your very own Next.js project and integrate all the juicy functionality that MapBox provides.

Setup a new Next.js project (Skip this if you already have a project of your own)

Setting up a Next.js project is straightforward, you can either follow the instructions laid out in the official documentation or run the following command to set up a new Next.js project (Make sure you have Node.js installed).

npx create-next-app mapbox-project

Then, cd into the mapbox-project directory and run the development server by running npm run dev or yarn dev . Et Voila! Your Next.js project is up and running!

Setup A MapBox Map

Next up, it’s time to render a MapBox map in our project. We do this by adding a MapBox library written by the team at Uber called react-map-gl. This contains a suite of React components for MapBox. Add this library to your project by running:

yarn add react-mapbox-gl

With this, we’re going to create a Map component which will live in components/Map.js.

Create your Map.js file and add the following code to it:

import { useState } from "react";
import ReactMapGL from "react-map-gl";
export default function Map() {
  const [viewport, setViewport] = useState({
  width: "100%",
  height: "100%",
  // The latitude and longitude of the center of London
  latitude: 51.5074,
  longitude: -0.1278,
  zoom: 10
});
return <ReactMapGL
  mapStyle="mapbox://styles/mapbox/streets-v11"
  mapboxApiAccessToken={process.env.MAPBOX_KEY}
  {...viewport}
  onViewportChange={(nextViewport) => setViewport(nextViewport)}
  >
</ReactMapGL>
}

This is not going to work just yet. One of the biggest features of Next.js is the server side rendering it offers. MapBox, however, requires the global window object in order to work correctly. If you are server side rendering your app, you will need to dynamically import it into your page. This means that instead of importing it like a regular component,

import Map from '../components/Map'

We will have to import it dynamically. We will do this by using Next.js dynamic imports.

In your pages/index.js file (or wherever you’re rendering your Map component) add the following code.

const Map = dynamic(() => import("../components/Map"), {
  loading: () => "Loading...",
  ssr: false
});

This means that our MapBox component will now selectively be rendered client side. Perfect!

The only thing we need to do now is to add MapBox’s CSS files to our project. The easiest way to do this is to modify your existing _app.js or by adding a custom _document.js file. Then add a link to the CSS to the <Head> in your render function. You can get the latest version of the CSS files in their API documentation.

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

Perfect. Your Map should now be up and running! Let’s take this a step further and try rendering some clickable pins on our map.

Use MapBox’s search API to fetch a list of landmarks

MapBox has a really handy geocoding API which you can be used to fetch a list of locations, with their latitudes and longitudes. We’re going to be fetching a list of Greggs (a take-away fast food and coffee shop) in London and render them as pins on our Map.
First, let’s query our list by adding a simple fetch call to the Mapbox geocoding API. We want to search within the geographic bounds of London and want to cap our search at 10 results (London is huge and Londoner’s love their Gregg’s vegan sausage rolls. We don’t want to overwhelm ourselves with all the possibilities!). MapBox’s Geocoding Place Search API takes the following parameters, with some additional query strings.

/geocoding/v5/mapbox.places/{search_text}.json

We will be using the limit query parameter to cap our results at 10, and the bbox parameter to specify the latitudinal and longitudinal bounds of London.
With all this in mind, our search url will look something like this:

https://api.mapbox.com/geocoding/v5/mapbox.places/greggs.json?access_token=${process.env.MAPBOX_KEY}&bbox=-0.227654%2C51.464102%2C0.060737%2C51.553421&limit=10

We can use this url, to make a simple fetch call in our page. Our modified page will now look something like,

const Map = dynamic(() => import("../components/Map"), {
  loading: () => "Loading...",
  ssr: false
});
const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/greggs.json?access_token=${process.env.MAPBOX_KEY}&bbox=-0.227654%2C51.464102%2C0.060737%2C51.553421&limit=10`;
export default function IndexPage() {
  const [locations, setLocations] = useState([]);
  useEffect(() => {
    const fetchLocations = async () => {
      await fetch(url).then((response) =>
        response.text()).then((res) => JSON.parse(res))
      .then((json) => {
        setLocations(json.features);
      }).catch((err) => console.log({ err }));
    };
    fetchLocations();
  }, []);
  return (<Container>
    <Map />
  </Container>);
}

We now have a list of 10 Greggs locations!

Using our search results to render pins on our map

Now that we have a list of places, we can render these on a Map. react-map-gl comes with a handy <Marker> component that makes our task pretty straight forward. First we need to pass these locations to our <Map> component.

return (<Container>
    <Map locations={locations} />
  </Container>);

Now, within out Map component, we need to render a pin for each of these locations by passing their latitude and longitude to the <Marker> component.

Our final Map component will look something like,

import { useState } from "react";
import ReactMapGL, { Marker } from "react-map-gl";
export default function Map({ locations }) {
  const [viewport, setViewport] = useState({
    width: "100%",
    height: "100%",
    // The latitude and longitude of the center of London
    latitude: 51.5074,
    longitude: -0.1278,
    zoom: 10
  });
return <ReactMapGL
  mapStyle="mapbox://styles/mapbox/streets-v11"
  mapboxApiAccessToken={process.env.MAPBOX_KEY}
  {...viewport}
  onViewportChange={(nextViewport) => setViewport(nextViewport)}
  >
  {locations.map((location) => (
    <div key={location.id}>
      <Marker
      latitude={location.center[1]}
      longitude={location.center[0]}
      offsetLeft={-20}
      offsetTop={-10}>
        <span role="img" aria-label="push-pin">📌</span>
      </Marker>
    </div>
  ))}
</ReactMapGL>
}

Making the pins clickable

We’re almost there! The last thing we want to do to make these maps fully functioning and interactive, is to add a popup with the name of the place. Again, Mapbox comes with a handy Popup component that makes this easy to do. We will simply add an onClick handler to our pins which will capture the details of the selected location, then we will pass the latitude and the longitude of the selected location to our <Popup> component. It’ll all be clear in a second!
Within the Map component, add a useState hook to capture the selected location.

export default function Map({ locations }) {
  // UseState hook
  const [selectedLocation, setSelectedLocation] = useState({})
  const [viewport, setViewport] = useState({
    width: "100%",
    height: "100%",
    // The latitude and longitude of the center of London
    latitude: 51.5074,
    longitude: -0.1278,
    zoom: 10
  });
......

We will also modify the render block to add an onClick handler and the <Popup> component that we just mentioned.

......
return <ReactMapGL
  mapStyle="mapbox://styles/mapbox/streets-v11"
  mapboxApiAccessToken={process.env.MAPBOX_KEY}
  {...viewport}
  onViewportChange={(nextViewport) => setViewport(nextViewport)}
  >
  {locations.map((location) => (
    <div key={location.id}>
      <Marker
      latitude={location.center[1]}
      longitude={location.center[0]}
      offsetLeft={-20}
      offsetTop={-10}>
        <a onClick={() => {
          setSelectedLocation(location);
        }}>
          <span role="img" aria-label="push-pin">📌</span>
        </a>
      </Marker>
      {selectLocation.id === location.id ? (
      <Popup
      onClose={() => setSelectedLocation({})}
      closeOnClick={true}
      latitude={location.center[1]}
      longitude={location.center[0]}>
        {location.place_name}
      </Popup>) : (false)}
    </div>
  ))}
</ReactMapGL>
}

The <Popup> component takes an onClose handler which sets the selectedLocation to {}.

And that is all! We’ve managed to render a map, rendered some pins on our map and managed to make them clickable with popups! Here’s our final result:

Name, Place, Animal, Thing — Revisiting a childhood game and bringing it online with React and WebSockets

Niharika Khanna — Fri, 15 May 2020 16:35:40 +0000

TL; DR: I made a game, play now: Name, Place, Animal, Thing!

There are two things I’ve done quite a bit in this time of social isolation — catch up with old friends and play a ridiculous amount of Skribbl.io and Ludo King with said old friends.

During one of these late night catch-ups, someone suggested that we play “Name, Place, Animal, Thing” — a multiplayer game we used to play in our middle school notebooks. For those unfamiliar with the rules, here’s a watered down version — the game lasts over multiple rounds, and at the beginning of each round, you get an alphabet. You then have 60 seconds to think of a “Name”, a “Place”, an “Animal” and a “Thing” — and note down words for each of those categories, but only words that begin with that letter. The person who gets the most correct answers over the course of the game wins. Easy enough!

Except, I couldn’t find an online version! Now what do we do? Wouldn’t not building my own online version of the game be an insult to my craft?

But what does making a game even entail?

I have no idea. Game design? UI design? Icons? Graphics? Avatars? Writing the actual code? Let’s organise our thoughts a little bit.

Defining Requirements

The first thing I needed to do was define gameplay and outline a set of bare minimum requirements for the game to be playable. Let’s break it down.

Game Setup

The game has to be multiplayer and sync between people real-time across different geographies (Hello, sockets!)
For starters, I only want the game to be playable in small private game rooms.
A player (the admin) would be able to create a new game room, which would generate the game code that could be shared with up to 10 people who will be able to join the game and play against each other
The admin would be able to define the number of rounds per game and the additional categories (besides name, place, animal and thing) in each game

Game Play

At the beginning of each round, a random alphabet needs to be selected — Once an alphabet is picked, it cannot be picked again
The rounds need to be timed at 60 seconds, but the timer stops as soon as the first person submits their response
Once all responses (or really, the first response) is submitted, we move to scoring
For starters, the game would be self scored — players are able to give themselves either 0, 5 or 10 points. 10 for every correct answer, and 5 for every answer they share with someone (I went back and forth on this. I think there is value in people scoring each other instead of themselves, but I didn’t want to add that complexity just yet — I also toyed with the idea of automatic scoring, but again — too much complexity for version 1)
Once all scores were collated, each player would be able to see everyone else’s score and then start the next round (I think having the ability to reject someone’s inputted score could be a possible update for future versions, but we’re keeping it simple)
and repeat! Once all the rounds are over, the game ends and the person with the highest score wins the game

Designs

Now, I am most definitely not a designer, but I wanted the game UI to have a notebook-y feel. I also am not a fan of (but mostly don’t know how to design) big and complex UIs. Let’s take the minimalistic approach (can you sense a pattern?):

I wanted the game to look careless — like it was handwritten on a sheet of paper
Fonts are important! I searched long and hard(ish) on Google Fonts, and went with Schoolbell. Since the game UI is not very complex, the font really would have to take centre stage
Time for some icons and graphics; I found some hand-drawn icon packs on FlatIcon that I could use for buttons and user avatars Et voila!

Tech Stack

Real-Time Communication with WebSockets

I am primarily a front-end engineer (with some back-end exposure), but this mini project would require a server that would enable players (we’re going to call each player a ‘socket’) to real-time communicate with each other. I was aware of the WebSockets protocol as a bi-directional communication solution, but had never implemented my own. I decided to go with Socket.io, a library that uses the WebSockets protocol to enable communication between the browser and the server, and also adds some additional features (like fallbacks, automatic reconnects and broadcasting to multiple “sockets”).
JavaScript always has been my language of choice and I didn’t want to make the learning curve steeper than it already was. The back-end would be a Node.js server using socket.io.
The internet has a plethora of resources written by competent backend engineers, so I will not go into the details of Node.js, WebSockets and Socket.io.

Front-End Implementation

I used create-react-app to bootstrap the project, but once I was done with the basic functionality, moved it over to Next.js because of the supposed improved SEO performance (my game did start indexing higher on google after this, but this was not a controlled experiment so I can’t really say).

I’ve also become a big fan of styled components, and having my CSS scoped to single components has really improved the developer experience for me. I don’t think I will be going back to the world of chaotic stylesheets anytime soon.
A couple of weeks in, and I managed to actually produce a playable v1 which I have been testing with friends and co-workers. Testing with actual people instead of repeatedly playing the game against myself has been a very insightful experience — I could write an entire post on that in itself — and I’ve got some really thoughtful, constructive and actionable feedback that I would like to take into future versions of the game, but for now, the first version is online and playable here.

Thoughts and feedback are always welcome and appreciated. Happy playing!

Hi, I'm Niharika Khanna

Niharika Khanna — Tue, 07 Mar 2017 13:07:48 +0000

I have been coding for 2 years.

You can find me on GitHub as niharikak101

I live in London.

I study at UCL.

I mostly program in these languages: Javascript.

I am currently learning more about FOSS.

Nice to meet you.