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.
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Búsqueda de datos personalizadas en Mapbox usando PHP y MySQL </title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script> <link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } </style> </head> <body> <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script> <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> <div id="map"></div> <script src="js/script.js"></script> </body> </html> |
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.
|
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 |
var apiToken = "TU_API_KEY_AQUI"; var defaultMap = [-89.2436391, 13.6894234]; //Coordenas para que cargue el mapa por default mapboxgl.accessToken = apiToken; //Creando el mapa var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v10', center: defaultMap, zoom: 10 }); //La API Fetch proporciona una interfaz JavaScript para //acceder y manipular peticiones y respuestas HTTP. var urlStores="stores.php";//URL que devuelve un objeto json fetch(urlStores) .then(function(response) { return response.json(); }) .then(function(datos) { customData = datos; }); //Funcion para mostrar los datos personalizados function forwardGeocoder(query) { var matchingFeatures = []; for (var i = 0; i < customData.features.length; i++) { var feature = customData.features[i]; // manejar consultas con mayúsculas diferentes a los datos de origen llamando la funcion LowerCase() if ( feature.properties.title .toLowerCase() .search(query.toLowerCase()) !== -1 ) { // agregar un emoji como prefijo para resultados de datos personalizados //https://emojipedia.org/check-mark/ // utilizando el formato geojson: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md feature['place_name'] = '✔️ ' + feature.properties.title; feature['center'] = feature.geometry.coordinates; feature['place_type'] = ['place']; matchingFeatures.push(feature); } } return matchingFeatures; } map.addControl( new MapboxGeocoder({ accessToken: mapboxgl.accessToken, localGeocoder: forwardGeocoder, zoom: 13, placeholder: 'Búsqueda, Ejemplo: Vidrí', mapboxgl: mapboxgl }) ); |
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.
|
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 |
<?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="store_locator"; $con=@mysqli_connect($db_host, $db_user, $db_pass, $db_name); $sql="select * from stores"; $query=mysqli_query($con,$sql); $features = []; $i=0; while($row=mysqli_fetch_array($query)){ $lat=$row['latitude']; $long=$row['longitude']; $propiedades1=array ('phoneFormatted'=> $row['phoneFormatted'],'description'=> $row['address'],'city'=> $row['city'],'country'=> $row['country'] ,'postalCode'=> $row['postalCode'],'title'=>$row['storeName']); $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); |
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:
|
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 |
CREATE TABLE `stores` ( `id` int(11) NOT NULL, `storeName` varchar(100) DEFAULT NULL, `phoneFormatted` varchar(100) DEFAULT NULL, `address` varchar(100) DEFAULT NULL, `city` varchar(100) DEFAULT NULL, `country` varchar(100) DEFAULT NULL, `postalCode` varchar(100) DEFAULT NULL, `latitude` varchar(100) NOT NULL, `longitude` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Volcado de datos para la tabla `stores` -- INSERT INTO `stores` (`id`, `storeName`, `phoneFormatted`, `address`, `city`, `country`, `postalCode`, `latitude`, `longitude`) VALUES (1, 'Vidrí San Miguel', '(503) 2210-0000', 'Calle el delirio. Urbanización jardines del río.', 'San Miguel', 'El Salvador', '20005', '13.4542469', '-88.1610564'), (2, 'Almacenes Vidrí Venezuela', '(503) 2278-3033', '21 Avenida sur entre 12 y 14 calle poniente', 'San Salvador', 'El Salvador', '20037', '13.6940612', '-89.2051787'), (3, 'Vidrí Merliot', '(503) 2278-3033', 'Bulevard Merliot y carretera al puerto de la libertad', 'La Libertad', 'El Salvador', '20037', '13.6759777', '-89.2665569'), (4, 'Vidrí Santa Ana', '(503) 2448-1122', '4 Ave. sur #5 entre 1a y 3a calle poniente', 'Santa Ana', 'El Salvador', '20037', '13.9938217', '-89.5608017'), (5, 'Vidrí Ejercito', '(503) 2277-7333', 'Km. 6 Bulevard del Ejercito', 'San Salvador', 'El Salvador', '20037', '13.6973159', '-89.1462172'), (6, 'Vidrí San Miguelito', '(503) 2277-7333', '29 calle poniente y 1a. Ave. norte No. 207', 'San Salvador', 'El Salvador', '20037', '13.713037', '-89.1935422'), (7, 'Vidrí Soyapango', '(503) 2277-7333', 'Calle a Tonacatepeque y ciudadela Don Bosco', 'Soyapango', 'El Salvador', '20037', '13.7168524', '-89.1439835'), (8, 'Vidrí Centro', '(503) 2271-3033', '1a calle poniente y avenida España', 'San Salvador', 'El Salvador', '20037', '13.6999626', '-89.1936537'), (9, 'Vidrí San Benito', '(503) 2264-3033', 'Bulevard El Hipodromo y calle Circunvalacion No. 428 Colonia San Benito', 'San Salvador', 'El Salvador', '20037', '13.6894234', '-89.2436391'); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `stores` -- ALTER TABLE `stores` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `stores` -- ALTER TABLE `stores` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10; COMMIT; |
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
