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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .marker { background-image: url('mapbox-icon.png'); background-size: cover; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } .mapboxgl-popup { max-width: 200px; } .mapboxgl-popup-content { text-align: center; font-family: 'Open Sans', sans-serif; } </style> </head> <body> <div id="map"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> mapboxgl.accessToken = 'TU_API_KEY'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v10', center: [-88.86767915737873, 13.724149743725818], zoom: 8 }); // add markers to map geojson.features.forEach(function(marker) { // create a HTML element for each feature var el = document.createElement('div'); el.className = 'marker'; // make a marker for each feature and add it to the map new mapboxgl.Marker(el) .setLngLat(marker.geometry.coordinates) .setPopup( new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML( '<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>' ) ) .addTo(map); }); </script> </body> </html> |
Como puede ver en el código de arriba, el mapa requiere varios opciones:
- mapboxgl.accessToken: corresponde al token de tu api de mapbox
- Container: Es el id del elemento <div>, que es donde se debe mostrar el mapa.
- 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”.
- Center: el punto central inicial del mapa en formato [longitud, latitud].
- 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:
|
1 2 3 4 5 6 7 8 9 10 |
var jsonData= $.ajax({ url: 'chart.php', //data: {'periodo':periodo,'action':'ajax'}, dataType: 'json', async: false }).responseText; var obj = jQuery.parseJSON(jsonData); var geojson =obj; |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php //http://geojson.io/#map=11/13.6150/-88.2339 //https://wtools.io/convert-json-to-php-array # conectare la base de datos $db_host="localhost"; $db_user="root"; $db_pass=""; $db_name="test_marcadores"; $con=@mysqli_connect($db_host, $db_user, $db_pass, $db_name); $sql="select * from direcciones"; $query=mysqli_query($con,$sql); $features = []; $i=0; while($row=mysqli_fetch_array($query)){ $lat=$row['latitud']; $long=$row['longitud']; $propiedades1=array ('title'=> $row['ciudad'],'description'=> $row['direccion']); $arreglo_datos=array ('type' => 'Feature','properties' => $propiedades1,'geometry' => array ('type' => 'Point','coordinates' => array (0 => $long,1 => $lat))); $features += ["$i" =>$arreglo_datos ]; $i++; } $array_multi=$features; $data= array ('type' => 'FeatureCollection','features' => $features); echo json_encode($data); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Base de datos: `test_marcadores` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `direcciones` -- CREATE TABLE `direcciones` ( `id` int(11) NOT NULL, `longitud` varchar(100) NOT NULL, `latitud` varchar(100) NOT NULL, `ciudad` varchar(100) NOT NULL, `direccion` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Volcado de datos para la tabla `direcciones` -- INSERT INTO `direcciones` (`id`, `longitud`, `latitud`, `ciudad`, `direccion`) VALUES (1, '-88.16993814958968', '13.504228835388787', 'SAN MIGUEL', '12 CALLE ORIENTE AV. LAS ROSAS'), (2, '-89.22438354217812', '13.69943957831677', 'SAN SALVADOR', 'PROLONGACION AUTOPISTA NORTE'), (3, '-89.65366809462125', '14.127001226881262', 'SANTA ANA', 'CANDELARIA DE LA FRONTERA'); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `direcciones` -- ALTER TABLE `direcciones` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `direcciones` -- ALTER TABLE `direcciones` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
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í:
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
