busqueda-de-datos-personalizada-en-mapbox-usando-php-y-mysql

Búsqueda de datos personalizada en Mapbox usando PHP y MySQL

Siguiendo con nuestra serie de tutoriales relacionados con mapbox, en ocasión te mostraré cómo Crear un buscador personalizado de tiendas utilizando Mapbox GL JS, PHP y MySQL. Podrás buscar todas las ubicaciones almacenadas previamente en una base de datos mysql desde una caja de texto ubicada en la parte superior derecha del mapa y seleccionar una tienda específica para que nuestro script nos lleve a la ubicación exacta en el mapa de dicha tienda.

Para este ejemplo he tomado los datos que usamos en el tutorial anterior, el cual puedes revisar aquí: Crear un localizador de tiendas utilizando Mapbox GL JS, PHP y MySQL 

Vamos a crear algo muy similar al ejemplo mostrado en el tutorial anterior, solo que esta vez en lugar de listar los datos en la barra lateral derecha lo haremos usando una caja de texto para poder filtrar los datos de forma dinámica.

Si eres nuevo en Mapbox GL JS, es posible que primero necesites leer la documentación sobre las aplicaciones web de Mapbox.

A continuación se muestra como quedará nuestra aplicación ya finalizada:



Empezando

Hay algunos recursos que necesitará antes de comenzar:

  • Un token de acceso a tu cuenta. Utilizarás un token de acceso para asociar un mapa con tu cuenta. tu token de acceso puedes conseguirlo en tu cuenta de mapbox.
  • Mapbox GL JS. La biblioteca JavaScript de Mapbox que usa WebGL para representar mapas interactivos usando los estilos de Mapbox GL.
  • Un editor de texto. Después de todo, escribirás código PHP, HTML, CSS y JavaScript.
  • Un servidor web local, recomiendo XAMPP, pero puedes usar el que tu consideres necesario.
  • Un gestor de base datos MySQL. Durante el tutorial se ha recolectado algunas de las ubicaciones de Almacenes Vidrí y recuperamos los datos usando JSON.

Agregar estructura

En tu carpeta de proyecto, crea un archivo index.php. Configura el documento agregando Mapbox GL JS y CSS a su cabeza, el código de la estructura html del archivo se muestra a continuación.

Añadiendo código JavaScript

Luego vamos a crear otra carpeta siempre en el directorio root del proyecto, a dicha carpeta la vamos a nombrar js y dentro de ella creamos un archivo llamado script.js. El código es el siguiente.

El archivo que hicimos en el paso anterior, contiene una serie de funciones avanzadas que se encarga de pintar los datos en el mapa, mostrar el lista de tiendas encontradas mediante el buscador. El listado de tiendas se obtiene haciendo una llamada ajax utilizando la API Fetch de JavaScript.

Agregar marcadores mediante PHP y MySQL

Crear un archivo en la carpeta root del proyecto y lo llamaremos stores.php.

Este archivo recién creado, se encarga de conectarse a la base de datos y hacer una consulta a la base de datos para devolver mediante json un listado de las sucursales o tiendas encontradas en la base de datos, para que de ese modo se pueda crear el listado  de tiendas en el mapa con su respectiva ubicación.

Es muy importante editar y configurar los datos de conexión según corresponda a tu servidor web.

Creando nuestra base de datos

Ahora vamos a abrir nuestro gestor de base de datos mysql y vamos a crear una base de datos en blanco, para este ejemplo la llamaremos store_locator, una vez se ha creado la base de datos debemos seleccionarla y ejecutar el código sql siguiente:

La consulta SQL se encarga de crear una tabla llamada stores y también le inserta los datos de prueba.

Hemos creado un mapa, para luego permitir el filtro de lugares utilizando marcadores interactivos con datos personalizados usando la librería Mapbox GL JS. No olvides que puedes descargar los archivos fuentes y hacer tus pruebas.

VER DEMOSTRACIÓN DESCARGAR ARCHIVOS