+ Contenido

Leaflet JS, como cargar marcadores desde una base de datos MySQL con PHP y JavaScript.

Leaflet es una de las librerías en JavaScript más populares y comunes para crear mapas interactivos en la web, la carga de puntos o marcadores en los mapas se realiza normalmente a través de archivos GeoJSON que deben ser reemplazados en el servidor cada vez que se efectúa una actualización de datos, a algunos nos resulta tedioso y podemos evitarlo si conseguimos que Leaflet cargue directamente los puntos desde la base de datos. Si bien en PHP existe la función json_encode que codifica las tablas MySQL en GeoJSON para cargar información en Leaflet, la misma falla con frecuencia por situaciones que no llegamos a descifrar. Para quienes hayan tenido curiosidad sobre el tema comparto el código de programación infalible que he desarrollado para codificar una base de datos MySQL al formato GeoJSON y su carga en Leaflet.

1. CONSTRUCCION DE LA TABLA

Desde phpMyAdmin u otra aplicación para bases de datos MySQL construimos una tabla que alojaremos en nuestro servidor, en este ejemplo le puse el nombre de "markers" a mi tabla y así lo recomiendo; los campos son id, name, latitud y longitud. Luego ingresamos cuatro registros con coordenadas de ubicación geográficas en grados decimales, el sistema es EPSG:4326. Incluyo captura de la estructura de la tabla, hay un scroll horizontal para poder visualizar todo el ancho de la imagen.

2. EL ARCHIVO PHP

Creamos un archivo con extensión PHP en el servidor e introducimos el siguiente código.

3. EXPLICACION

- Entre la linea 1 y la linea 7 se realiza la conexión con la base de datos MySQL de nuestro servidor.
- En las lineas 12 y 13 se cargan leaflet.js y leaflet.css, indispensables ya que constituyen el núcleo de Leaflet.
- Entre las lineas 14 y 21 se definen las medidas del mapa y de su contenedor.
- Entre la linea 24 y la linea 36 se encuentra el aporte que he desarrollado. Se combina código de JavaScript con código de PHP con la finalidad de replicar la estructura de un archivo GeoJSON. El resultado queda guardado en la variable "puntos".
- En la linea 37 se inserta el mapa de Leaflet en el que posteriormente cargaremos los marcadores.
- En la linea 39 se definen los niveles de zoom, se inserta el control del zoom y se indica la ubicación de la vista inicial de nuestro mapa.
- Entre las lineas 40 y 43 se inserta un mapa base de fondo, el cual no es indispensable pero sirve de referencia para la ubicación, en este caso es un servicio WMTS gratuito de ESRI.
- Entre la linea 44 y la linea 48 se define una función de popup cuya finalidad es mostrar el nombre de los elementos del mapa al cliquear con el cursor o tocar con el dedo.
- Entre la lineas 49 y 51 se carga en el mapa la entidad GeoJSON invocando a la variable "puntos" que hemos creado y a la función "popups".

ENLACE A UN MAPA EN LEAFLET CREADO CON EL SCRIPT >>