React - Leaflet (Teselas)

 

Para usar imágenes en formato PNG como teselas en un mapa de React-Leaflet y cargarlas desde un almacenamiento local, puedes seguir los pasos que se detallan a continuación. Esto es útil si tienes tus propios mapas o imágenes generadas que deseas mostrar como teselas personalizadas.

Pasos para usar imágenes PNG como teselas en React-Leaflet

1. Coloca las teselas en la carpeta public/tiles

   React utiliza la carpeta public para servir archivos estáticos directamente en el servidor. Esto significa que cualquier archivo colocado en esta carpeta estará disponible a través de la URL raíz (/).

   Pasos:

1. Asegúrate de que tus teselas estén organizadas en la estructura estándar:

   public/tiles/{z}/{x}/{y}.png

public/
    └──tiles/ 
        └── 5/ 
            └── 0/ 
                ├── 8.png  
                └── ...

1. Sirve las teselas usando un servidor externo simple

   Si prefieres mantener las teselas separadas del proyecto o necesitas distribuirlas a varias aplicaciones, puedes usar un servidor ligero como http-server, Python, o cualquier otro servidor estático.

   Pasos con http-server:

1. Instala http-server globalmente:

   npm install -g http-server
   

2. Ve a la carpeta donde tienes las teselas y ejecuta:

   http-server -p 3001
   

3. Tus teselas estarán disponibles en:

   http://localhost:3001/{z}/{x}/{y}.png
   

4. Configura la URL en tu proyecto React:

   <TileLayer
     url="http://localhost:3001/{z}/{x}/{y}.png"
     attribution="&copy; Teselas Externas"
     minZoom={12}
     maxZoom={16}
     tms={true}
   />

ERROR ESPERADO

El error 404 (Not Found) indica que las teselas no están siendo encontradas en la ubicación especificada. Aquí tienes un plan para solucionar el problema paso a paso:

Solución Paso a Paso

1. Confirma la estructura de las teselas

Asegúrate de que las teselas estén organizadas correctamente en carpetas y sigan este formato:

/tiles/{z}/{x}/{y}.png

Por ejemplo, para nivel de zoom 12:

tiles/
  └── 12/
       └── 2048/
            ├── 2048.png
            ├── 2049.png
            └── ...

2. Verifica manualmente las teselas en el navegador

Abre una URL de ejemplo en el navegador para confirmar que la ruta es válida:

http://127.0.0.1:3001/tiles/12/2048/2048.png

• Si ves la imagen: La ruta es correcta.
• Si no ves la imagen: El servidor no está configurado correctamente o la estructura del directorio no coincide.

3. Asegúrate de que el servidor esté funcionando

Si estás usando un servidor como http-server para servir las teselas, asegúrate de iniciarlo correctamente desde la carpeta raíz donde están las teselas.

Ejemplo:

1. Ve a la carpeta donde se encuentran las teselas:

   cd /ruta/a/tiles
   

2. Inicia el servidor:

   http-server -p 3001
   

3. Verifica que el servidor funciona abriendo esta URL en el navegador:

   http://127.0.0.1:3001/tiles/12/2048/2048.png

4. Revisa la ruta en React

Si las teselas están dentro de la carpeta public de tu proyecto React, la ruta debe ser relativa y debería verse así:

<TileLayer
  url="/tiles/{z}/{x}/{y}.png"
  attribution="&copy; Local Tiles"
  minZoom={12}
  maxZoom={12}
  tms={true}
  noWrap={true}
/>

Importante: Cuando las teselas están en public, no necesitas un servidor adicional. React automáticamente las servirá desde esa carpeta.

5. Configura errorTileUrl para depuración

Agrega un marcador visual para las teselas faltantes usando errorTileUrl:

<TileLayer
  url="/tiles/{z}/{x}/{y}.png"
  errorTileUrl="https://via.placeholder.com/256?text=Tile+Not+Found"
  attribution="&copy; Local Tiles"
  minZoom={12}
  maxZoom={12}
  tms={true}
  noWrap={true}
/>

Esto mostrará una imagen alternativa en lugar de las teselas faltantes, ayudándote a verificar qué coordenadas están fallando.

6. Depuración con herramientas del navegador

1. Abre las herramientas de desarrollo (F12).
2. Ve a la pestaña Red (Network) y busca las solicitudes a /tiles.
3. Haz clic en una solicitud que haya fallado (404) y revisa:
• URL completa: Asegúrate de que la ruta a las teselas sea correcta.
• Coordenadas: Confirma que las carpetas y archivos en el servidor coincidan con las coordenadas solicitadas.

Ejemplo Final Funcional

Si las teselas están en public/tiles, el código debería ser este:

import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const MapView = () => {
  const center = [22.998454881156057, -102.01011787179473]; // Centro del mapa
  const zoom = 12; // Nivel de zoom inicial

  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <MapContainer
        center={center}
        zoom={zoom}
        style={{ width: "100%", height: "100%" }}
        attributionControl={false}
        scrollWheelZoom={true}
      >
        <TileLayer
          url="/tiles/{z}/{x}/{y}.png"
          errorTileUrl="https://via.placeholder.com/256?text=Tile+Not+Found"
          attribution="&copy; Local Tiles"
          minZoom={12}
          maxZoom={12}
          tms={true}
          noWrap={true}
        />
      </MapContainer>
    </div>
  );
};

export default MapView;

Crear teselas (QGis)

La herramienta "Generar teselas XYZ (Directorio)" en QGIS permite crear un conjunto de teselas ráster en formato XYZ a partir de una capa ráster o una composición de impresión. Estas teselas pueden ser utilizadas en servidores de mapas o como capas en proyectos de QGIS.

Pasos para usar "Generar teselas XYZ (Directorio)" en QGIS

1. Abrir la herramienta

   • Ve a Procesos > Caja de herramientas > Raster Tools > Generar teselas XYZ (Directorio).

2. Configurar los parámetros

   • Capa de entrada: Selecciona el ráster o la composición de impresión que deseas teselar.
   • Directorio de salida: Elige la carpeta donde se guardarán las teselas.
   • Nivel mínimo y máximo de zoom: Define el rango de zoom (valores típicos: 0 a 18).
   • Formato de salida: Generalmente "PNG" o "JPEG", dependiendo de la calidad que necesites.
   • Tamaño de las teselas: Normalmente es 256x256 píxeles.

3. Ejecutar el proceso

   • Haz clic en Ejecutar y espera a que se generen las teselas.

4. Ver las teselas en QGIS

   • Para visualizar las teselas generadas, agrega una nueva capa XYZ en QGIS:
     • Ve a Gestor de fuentes de datos (Ctrl+L).
     • En la pestaña XYZ, haz clic en Nueva conexión.
     • Ingresa la URL local del directorio donde guardaste las teselas (por ejemplo, file:///ruta/a/mis/teselas/{z}/{x}/{y}.png).
     • Agrega la capa al proyecto.