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.
<!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:
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:
<?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:
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.
Comentarios