Mapbox – Cost-effective alternative to Google Maps

Whenever we think of maps for desktop and mobile, the first thing that comes to our mind is Google Maps.

In the initial days, Google Maps used to provide 25000 dynamic map renders free per day, later from July 2018 it limited the dynamic map renders to 28000 per month and started charging $7 per every 1000 requests after free tier.

If your application uses Maps heavily and looking for a cost-effective solution and with similar map service experience as Google Maps, Mapbox is a cost-effective alternate choice. Mapbox provides 50000 dynamic map renders per month and charges $5 per every 1000 requests after free tier.

In this blog post we will try to build a basic map component using ReactJS and Mapbox GL JS

Prerequisites for getting started with this application

• Basic knowledge of React JS app
• Node.js and npm
• Mapbox access token (you can get the token by registering at https://account.mapbox.com/ and it doesn’t require a credit card)
• Visual Studio Code or your favourite JavaScript IDE

Follow the steps below to create the application

1. Open the command prompt and navigate to the directory where you want to create the application and run the following command to create a new react application.

npx create-react-app basicmapCode language: Python (python)

2. Change directory to basicmap and install the Mapbox JS library

cd basicmap && npm i mapbox-glCode language: Python (python)

3. Open basicmap app in your editor

4. Open the App.js file and remove welcome message code and add the following imports in the file

import React, { useEffect, useRef, useState } from "react";
import "./App.css";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";Code language: Python (python)

5. Set the mapbox access token

mapboxgl.accessToken = <your-mpabox-access-token>Code language: JavaScript (javascript)

6. Now we will define 2 state variables and one reference variable inside App.js component to maintain the state of Map , Langitude, Lattitude and zoom.

const [map, setMap] = useState(null);
const [state, setState] = useState({   lng: 0,    lat: 0,    zoom: 1.5,  });
const mapContainer = useRef(null);Code language: JavaScript (javascript)

7. We initialize map and mapcontainer using the useEffect hook

useEffect(() => {
    const initializeMap = ({ setMap, mapContainer }) => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/outdoors-v11",
        center: [state.lng, state.lat],
        zoom: state.zoom,
      });

      map.on("load", () => {
        setMap(map);
      });
    };

    if (!map) initializeMap({ setMap, mapContainer });
  }, [map, state]);
Code language: JavaScript (javascript)

• mapboxgl.Map initializes the map
• The container option tells Mapbox GL JS to render the map inside a specific DOM element.
• The style option defines the style that the map will use. Here we are using outdoor style (outdoors-v11). Other style options which are available – Light(light-v10), Dark (dark-v10), Sattelite (satellite-v9)
• The center and zoom options set the center coordinates and zoom level of the map using the values of lng, lat, and zoom that are stored in state

8. Now it’s time to write the code that displays the map in the browser. Inside the App component return method write the following code

<>
   <div ref={(el) => (mapContainer.current = el)}  style={styles} />
</>Code language: JavaScript (javascript)

The mapContainer ref specifies that map should be drawn to the HTML page in a new <div> element.

9. We have to define the style for the map. We’ll define an inline style

const styles = {
  width: "100vw",
  height: "100vh",
  position: "absolute",
};Code language: JavaScript (javascript)

10. Run following command to start the application. It should open a browser window and should show the map.

npm startCode language: JavaScript (javascript)

You can download full source code of this blog post from https://github.com/sureshgadupu/mapbox/tree/master/basicmap

In the coming blog posts, I am going to post a few examples of map visualizations.