React-leaflet (crear proyect query)

 

Crear un nuevo proyecto React

Abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto React:

npx create-react-app inicio

Parece que hay un problema con la instalación de dependencias en tu proyecto de React. El error indica que falta el módulo 'ajv/dist/compile/codegen', que es una parte de la biblioteca ajv, utilizada para la validación de esquemas JSON.

Pasos para solucionarlo:

1. Eliminar y reinstalar dependencias
   Abre una terminal en la carpeta del proyecto y ejecuta:

   rm -rf node_modules package-lock.json
   npm install
   

   Luego intenta iniciar el proyecto de nuevo con:

   npm start
   

2. Forzar la instalación de ajv y ajv-keywords
   Si el problema persiste, instala manualmente las versiones correctas de ajv y ajv-keywords:

   npm install ajv@^8 ajv-keywords@^5
   

   Luego vuelve a ejecutar:

   npm start
   

3. Verificar versiones de react-scripts y webpack-dev-server
   A veces, hay conflictos entre versiones de react-scripts y webpack-dev-server. Intenta actualizar:

   npm install react-scripts@latest webpack-dev-server@latest
   

4. Usar npm dedupe para corregir dependencias duplicadas

   npm dedupe
   npm start
   

Si después de estos pasos sigues con el problema, dime qué versión de node y npm estás usando (node -v y npm -v) para revisar posibles incompatibilidades.

Este comando creará un nuevo directorio llamado inicio con la estructura básica de un proyecto React, posteriormente ingresar al directorio del proyecto

cd inicio

En seguida ya estando en el directorio del proyecto se instalar las dependencias de Leaflet y react-leaflet junto con las de react.

npm install react react-dom leaflet react-leaflet

Esto instalará las dependencias necesarias para trabajar con Leaflet y react-leaflet en tu proyecto y para finalizar, ejecuta el siguiente comando para iniciar tu aplicación React:

npm start

para realizar consultas simples instalaremos las siguientes dependencias .

npm install cors  pg axios

En nuestro archivo app.js 

import './App.css';

import MapView from './components/MapView';

function App() {

  return (

    <div>

      <MapView/>

    </div>

  );

}

export default App;

en el archivo MapView

import React, { useState } from 'react';

import { TileLayer, MapContainer, useMapEvents } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

import { useConsulta } from './consultas';

const MapEvents = ({ setLat, setLon }: { setLat: (lat: number) => void; setLon: (lon: number) => void }) => {

  useMapEvents({

    click(e) {

      setLat(e.latlng.lat);

      setLon(e.latlng.lng);

    },

  });

  return null;

};

const MapView = () => {

  const [lat, setLat] = useState(0);

  const [lon, setLon] = useState(0);

  const query2 = useConsulta(lon, lat);

  console.log("useConsulta", query2);

  return (

    <div style={{ height: '100vh', width: '100vw' }}>

      <MapContainer

        center={[20.521602, -99.893896]}

        zoom={5}

        minZoom={4}

        maxZoom={18}

        scrollWheelZoom={true}

        maxBoundsViscosity={1.0}

        style={{ height: '100%', width: '100%' }}

      >

        <TileLayer

          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

        />

        <MapEvents setLat={setLat} setLon={setLon} />

      </MapContainer>

    </div>

  );

};

export default MapView;

En el archivo de consulta 

import { useState, useEffect } from "react";
import axios from "axios";
export const useConsulta = (lon, lat) => {
    const [lugares, setLugares] = useState([]);
    useEffect(() => {
        if (lon === 0 && lat === 0) return; // Evitar consultas innecesarias con valores iniciales
        const fetchData = async () => {
            try {
                const response = await axios.get(`http://127.0.0.1:3001/api/calles?longitud=${lon}&latitud=${lat}`);
                setLugares(response.data);
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        };
        fetchData();
    }, [lon, lat]); // Agregar lon y lat como dependencias
    return lugares;
};

y por ultimo 

const express = require("express");
const { Pool } = require("pg");
const cors = require("cors");
const app = express();
const port = 3001;
// Configuración de la conexión a PostgreSQL
const pool = new Pool({
  user: "postgres",
  host: "localhost",
  database: "--------",
  password: "*****",
  port: 5432,
});
// Middleware
app.use(cors());
app.use(express.json());
// Comprobar la conexión antes de iniciar el servidor
pool.connect()
  .then(client => {
    console.log("Conexión a PostgreSQL exitosa");
    client.release();
    app.listen(port, () => {
      console.log(`Servidor corriendo en http://localhost:${port}`);
    });
  })
  .catch(err => {
    console.error("Error de conexión a PostgreSQL:", err);
    process.exit(1);
  });
// ✅ Ruta corregida para obtener calles más cercanas
app.get("/api/calles", async (req, res) => {
  try {
    // Extraer latitud y longitud de los parámetros de consulta
    const { longitud, latitud } = req.query;
    console.log("Coordenadas recibidas:", longitud, latitud); // 👀 Verifica los datos aquí
    // Validar si los parámetros existen y son números
    if (!longitud || !latitud || isNaN(longitud) || isNaN(latitud)) {
      return res.status(400).json({ error: "Parámetros inválidos" });
    }
    const query = `
      SELECT 
        id, nomvial, objectid, postalcode, st_name, 
        mun_name, sett_name, sett_type, area, 
        shape_leng, shape_area,
        ST_Distance(geom, ST_SetSRID(ST_MakePoint($1, $2), 4326)) AS distancia_metros
      FROM public.calle_corregida_eliminada
      ORDER BY distancia_metros
      LIMIT 1
    `;
    // Ejecutar consulta con valores convertidos a float
    const { rows } = await pool.query(query, [parseFloat(longitud), parseFloat(latitud)]);
    res.json(rows);
  } catch (err) {
    console.error("Error al obtener datos:", err);
    res.status(500).json({ error: "Error del servidor al obtener los datos" });
  }
});
// Manejo de errores global
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send("Algo salió mal!");
});

recuerda ejecutar el servidor express

PS D:\nuevo_proyecto\coordenadas\src\components> node server.js
Conexión a PostgreSQL exitosa
Servidor corriendo en http://localhost:3001

en el archivo de consulta