¿Cómo crear una aplicación de búsqueda de ubicación usando ReactJS?

En este artículo, crearemos una aplicación de búsqueda de ubicación que le permite buscar diferentes lugares en un mapa. Nuestra aplicación contiene dos secciones, una para mostrar el marcador en el mapa y la otra para buscar en diferentes lugares. Para representar el mapa y obtener las coordenadas de la ubicación buscada, usaremos Mapbox. A través de este artículo, también aprenderemos a trabajar con Mapbox en React. 

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar
• Componentes funcionales
• Ganchos de reacción
• Reaccionar Axios y API
• JavaScript ES6

Creando una aplicación React e instalando algunos paquetes npm:

Paso 1: Cree una aplicación de reacción escribiendo el siguiente comando en la terminal:

npx create-react-app location-finder

Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, al buscador de ubicación, ejecutando el siguiente comando:

cd location-finder

Paso 3: instalemos algunos paquetes npm necesarios para este proyecto:

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

Estructura del proyecto: Se verá así:

Ejemplo: tomemos la clave API de Mapbox requerida para este proyecto. Siga los sencillos pasos a continuación:

• Vaya al sitio web: https://www.mapbox.com/ y cree una cuenta gratuita.
• Vaya al panel de control de su cuenta y en la parte inferior de la página encontrará una sección llamada «Tokens de acceso».

• Copie el token de acceso público predeterminado y guárdelo en algún lugar para usarlo más tarde.

Ahora, en el componente App.js , importaremos el mapa usando el paquete react-map-gl . Dentro del mapa, usaremos un marcador para señalar la ubicación exacta por las coordenadas y también un cuadro de búsqueda donde los usuarios pueden escribir cualquier nombre de ciudad/ubicación. Para obtener más información relacionada con react-map-gl, visite su https://visgl.github.io/react-map-gl/ oficial. Ahora escriba el siguiente código en el componente App.js.

Recuerde reemplazar <YOUR_API_KEY> con su propio token de acceso público de Mapbox.

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(() => {
    setViewport({
      latitude: lat,
      longitude: lon,
      zoom: 12,
      transitionInterpolator: 
        new FlyToInterpolator({ speed: 1.0 }),
      transitionDuration: "auto",
      width: "100%",
      height: "100vh",
    });
  }, [lat, lon]);
  
  return (
    <ReactMapGL
      mapboxApiAccessToken={"<YOUR_API_KEY>"}
      {...viewport}
      onViewportChange={(viewport) => setViewport(viewport)}
    >
      <Marker latitude={lat} longitude={lon}>
        <ImLocation size="30px" />
      </Marker>
      <Fly setLat={setLat} setLon={setLon} />
    </ReactMapGL>
  );
}
  
export default App;

En el componente App.js, también hemos importado nuestro propio componente personalizado llamado «Volar», que no es más que un cuadro simple que toma la entrada del usuario, llama a una API de geocodificación directa (https://docs.mapbox.com/api/search /geocodificación/) proporcionada por el propio Mapbox, y establece las coordenadas en consecuencia. Vamos a crear ese componente.

Cree una carpeta debajo de la carpeta src llamada » Componentes » y debajo de esa carpeta cree un archivo llamado » Fly.jsx «

Nombre de archivo: Fly.jsx Ahora escriba el siguiente código en el archivo Fly.jsx.

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() {
    Axios.get(
      `https://api.mapbox.com/geocoding/v5/
        mapbox.places/${city}.json?access_token=${API_KEY}`
    ).then((res) => {
  
      // Longitude
      setLon(res.data.features[0].geometry.coordinates[0]);
        
      // Latitude
      setLat(res.data.features[0].geometry.coordinates[1]);
    });
  }
  
  return (
    <div className="fly">
      <h2>Enter a city name</h2>
      <div className="inp-box">
        <input
          type="text"
          onChange={(e) => {
            setCity(e.target.value);
          }}
        />
        <button onClick={() => getCoordinates()}>Go</button>
      </div>
    </div>
  );
};
  
export default Fly;

Recuerde reemplazar <YOUR_API_KEY> con su propio token de acceso público de Mapbox.

Nombre de archivo: App.css Ahora vamos a editar el archivo llamado App.css para darle estilo a nuestra aplicación.

.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;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: