Crear marcadores personalizados usando PHP y MySQL con Mapbox

En este tutorial te mostraré como construir un mapa web interactivo usando marcadores personalizados de la librería Mapbox GL JS, mediante el uso de JavaScript, PHP y MySQL . Aprenderás cómo cargar datos con desde un documento externo con json, usando el lenguaje de programación PHP y el gestor de base de datos MySQL

Empezando

Para este proyecto, he creado un directorio llamado “marcadores_php_mysql”, pero tu puedes nombrarlo como desees, para alojar tus archivos del proyecto dentro de dicho directorio.

Para continuar con este tutotial necesitaras:

  • Un token de acceso. desde tu cuenta de mapbox. Lo puedes conseguir desde tu cuenta de mapbox
  • Un editor de texto, puesto que escribiremos código HTML, CSS y JavaScript
  • Imagen personalizada del marcador.
  • Servidor Web con PHP instalado
  • Gestor de base de datos MySQL

Descargar imagen

Crear un mapa con  Mapbox GL JS

¡Ahora estás listo para crear un mapa con Mapbox GL JS! Para comenzar, crea un nuevo archivo  y lo nombras index.php y escribe el código siguiente para inicializar un mapa Mapbox GL JS.

Como puede ver en el código de arriba, el mapa requiere varios opciones:

  1. mapboxgl.accessToken: corresponde al token de tu api de mapbox
  2. Container: Es el id del elemento <div>, que es donde se debe mostrar el mapa.
  3. Style: la url que contiene los estilos CSS del mapa, para este caso se esta usando los estilos de la librería mapbox: “mapbox://styles/mapbox/light-v10”.
  4. Center: el punto central inicial del mapa en formato [longitud, latitud].
  5. Zoom: el nivel de zoom inicial del mapa.

Cargar los datos con JSON

En el archivo index.php que creamos en el paso anterior se debe hacer una llamada mediante mediante ajax y json a un archivo que yo he nombrado chart.php (luego le vamos a crear). El código que se encarga de traer los datos vía json es el siguiente:

El código anterior lo debemos colocar justo después de la variable  “mapboxgl.accessToken”

Agregar marcadores mediante PHP y MySQL

Ahora vamos a crear un archivo llamado chart.php, el cual se va encargar de conectarse con nuestra base de datos y realizar una consulta a la base de datos para poder agregar los datos en formato json, a continuación crea el archivo “chart.php” y colócalo en el directorio raíz de nuestro proyecto y copia y pega el siguiente código:

En el archivo anterior primero nos conectamos a nuestra base de datos, y luego realizamos una consulta a la tabla que contiene información relacionada con nuestras direcciones.  Otro punto muy importante es que debes configurar los datos que correspondan a tu conexión de base de datos.

Creando nuestra base de datos

Para crear una nueva base de datos, debes abrir tu gestor de base de datos y nombrar tu base de datos como tu así desees, para este ejemplo yo la he nombrado: test_marcadores, una vez creada la base de datos, se selecciona la base de datos y se ejecuta el siguiente código SQL:

La tabla direcciones incluye datos de prueba, dichos datos los puedes modificar posteriormente y asignarle los datos que corresponda a las direcciones que desees añadir. A continación te dejo un enlace para que puedas buscar tus direcciones y obtener los datos de latitud y longitud: GeoJson.io

Producto final

El mapa final que vamos a construir se verá así:
Crear marcadores personalizados usando PHP y MySQL con Mapbox

Hemos creado un mapa utilizando marcadores interactivos con datos y estilos personalizados utilizando la librería Mapbox GL JS. No olvides que puedes descargar los archivos fuentes y hacer tus pruebas :D.


DESCARGAR ARCHIVOS