Open In App
Related Articles

How to create a Location finder app using ReactJS ?

Like Article
Save Article
Report issue

In this article, we will be building a location finder app that lets you search for different places on a map. Our app contains two sections, one for displaying the marker on the map and the other is for searching different places. For rendering the map and getting the coordinates for the searched location, we will be using Mapbox. Through this article, we will also learn how to work with Mapbox in React. 

Prerequisites: The pre-requisites for this project are:

Creating a React application and installing some npm packages:

Step 1: Create a react application by typing the following command in the terminal:

npx create-react-app location-finder

Step 2: Now, go to the project folder i.e. location-finder by running the following command:

cd location-finder

Step 3: Let’s install some npm packages required for this project:

npm install react-map-gl
npm install axios
npm install react-icons

Project Structure: It will look like this:

Example: Let us grab the Mapbox API key required for this project. Follow the simple steps below:

  • Go to the website: and create a free account.
  • Go to your account dashboard and at the bottom of the page you will find a section named “Access tokens”.
  • Copy the default public access token and save it somewhere to use it later.

Now in the App.js component, we will import the map using the react-map-gl package. Inside the map, we will use a marker to pinpoint the exact location by the coordinates and also a search box where users can type any city/location name. For more information related to react-map-gl visit their official Now write down the following code in the App.js component.

Remember to replace <YOUR_API_KEY> with your own Mapbox public access token.


import { useEffect, useState } from "react";
import ReactMapGL, { Marker, FlyToInterpolator }
      from "react-map-gl";
import Fly from "./Components/Fly";
import { ImLocation } from "react-icons/im";
import "./App.css";
function App() {
  // Setting up the state for the latitude
  // and longitude
  const [lat, setLat] = useState(22.5726);
  const [lon, setLon] = useState(88.3639);
  // Setting up the state for the map
  const [viewport, setViewport] = useState({
    latitude: lat,
    longitude: lon,
    zoom: 12,
    bearing: 0,
    pitch: 0,
    width: "100%",
    height: "100vh",
  // Map viewport updates whenever the
  // latitude and longitude changes
  useEffect(() => {
      latitude: lat,
      longitude: lon,
      zoom: 12,
        new FlyToInterpolator({ speed: 1.0 }),
      transitionDuration: "auto",
      width: "100%",
      height: "100vh",
  }, [lat, lon]);
  return (
      onViewportChange={(viewport) => setViewport(viewport)}
      <Marker latitude={lat} longitude={lon}>
        <ImLocation size="30px" />
      <Fly setLat={setLat} setLon={setLon} />
export default App;


In the App.js component, we have also imported our own custom component named “Fly” which is nothing but a simple box that takes user input, calls a forward geocoding API ( provided by Mapbox itself, and sets the coordinates accordingly. Let us create that component.

Create a folder under the src folder named “Components” and under that folder create a file named “Fly.jsx

Filename: Fly.jsx Now write down the following code in the Fly.jsx file.


import React, { useState } from "react";
import Axios from "axios";
const API_KEY = "<YOUR_API_KEY>";
const Fly = ({ setLat, setLon }) => {
  // Setting up the state variable to store user input
  const [city, setCity] = useState("Kolkata");
  // Function to call the API and set the
  // coordinates accordingly
  function getCoordinates() {
    ).then((res) => {
      // Longitude
      // Latitude
  return (
    <div className="fly">
      <h2>Enter a city name</h2>
      <div className="inp-box">
          onChange={(e) => {
        <button onClick={() => getCoordinates()}>Go</button>
export default Fly;


Remember to replace <YOUR_API_KEY> with your own Mapbox public access token.

Filename: App.css Now let’s edit the file named App.css to style our app.


.fly {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100px;
  color: white;
  background-color: #3061e7;
  margin-top: 1%;
  margin-left: 40%;
  padding: 10px;
  border-radius: 5px;
.fly input {
  padding-left: 5px;
  font-size: 18px;
  height: 30px;
.fly button {
  cursor: pointer;
  width: 50px;


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Last Updated : 04 Oct, 2021
Like Article
Save Article
Share your thoughts in the comments
Similar Reads