Ahora vamos a agregar un buscador, siguiendo con lo explicado en Cómo agregar barra de navegación en Mapbox

Es necesario ajustar el HMTL agregando el CSS del plugin mapbox-gl-geocoder:

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css" type="text/css">

Y al final debemos agregar los JS del mismo plugin:

<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
<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>

---

Ajustamos el archivo JS agregando la función forwardGeocoder:

var customData = {
	'features': [
	{
		'type': 'Feature',
		'properties': {
			'title': 'Parque la Florida'
		},
	'geometry': {
		'coordinates': [-74.14476235609635,4.730750597247051],
		'type': 'Point'
		}
	},
	{
		'type': 'Feature',
		'properties': {
			'title': 'Parque del Café'
		},
	'geometry': {
		'coordinates': [-75.77064810284882,4.540568666186622],
		'type': 'Point'
		}
	},
	{
		'type': 'Feature',
		'properties': {
			'title': 'Parque Arqueologico San Agustin'
		},
	'geometry': {
		'coordinates': [-76.29526180284667,1.8879367358700043],
		'type': 'Point'
		}
	}
	],
	'type': 'FeatureCollection'
};
 
function forwardGeocoder(query) {
	var matchingFeatures = [];
	for (var i = 0; i < customData.features.length; i++) {
		var feature = customData.features[i];
		// Handle queries with different capitalization
		// than the source data by calling toLowerCase().
		if (
			feature.properties.title
				.toLowerCase()
				.search(query.toLowerCase()) !== -1
		) {
			// Add a tree emoji as a prefix for custom
			// data results using carmen geojson format:
			// https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
			feature['place_name'] = '🌲 ' + feature.properties.title;
			feature['center'] = feature.geometry.coordinates;
			feature['place_type'] = ['park'];
			matchingFeatures.push(feature);
			}
	}
	return matchingFeatures;
}
 
// Add the control to the map.
map.addControl(
	new MapboxGeocoder({
		accessToken: mapboxgl.accessToken,
		localGeocoder: forwardGeocoder,
		zoom: 14,
		placeholder: 'Ingrese un lugara buscar',
		mapboxgl: mapboxgl
	})
);

---

¿Qué es el plugin mapbox-gl-compare?

Por último te quiero explicar que es y como funciona el plugin mapbox-gl-compare. Es una extensión para Mapbox GL JS que permite agregar una barra deslizadora interactiva para comparar visualmente dos mapas o capas superpuestas.

Es útil cuando quieres comparar:

• Imágenes satelitales de diferentes fechas.
• Capas temáticas diferentes (uso del suelo, cobertura vegetal, etc.).
• Mapas base personalizados frente a los predeterminados.

---

¿Cómo funciona?

Este plugin crea una interfaz dividida (como un “antes y después”) donde puedes mover una barra horizontal o vertical para mostrar u ocultar partes de dos mapas sincronizados.

• Tienes dos instancias de mapboxgl.Map en la misma página HTML.
• El plugin las sincroniza automáticamente en zoom, rotación y desplazamiento.
• La barra se puede arrastrar para revelar más de un mapa u otro.

---

Cómo usarlo:

1. Incluir librerías en tu HTML:

<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css" rel="stylesheet" />

<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>

2. Crear dos contenedores para los mapas:

<div id="comparison-container">
  <div id="antes" class="map"></div>
  <div id="despues" class="map"></div>
</div>

3. Estilos CSS:

#comparison-container {
  position: relative;
  width: 100%;
  height: 600px;
}

.map {
  position: absolute;
  top: 0; bottom: 0; width: 100%;
}

4. Código JavaScript:

mapboxgl.accessToken = 'TU_ACCESS_TOKEN';
var antesMap = new mapboxgl.Map({
	container: 'antes',
	style: 'mapbox://styles/mapbox/light-v10',
	center: [-74.082412,4.639386],
	zoom: 9
});

var despuesMap = new mapboxgl.Map({
	container: 'despues',
	style: 'mapbox://styles/mapbox/dark-v10',
	center: [-74.082412,4.639386],
	zoom: 9
});

var contanier = '#compare-container';

var map = new mapboxgl.Compare(antesMap,despuesMap,contanier,{
	//mousemove: true
})

---

Este plugin es valioso en aplicaciones de análisis espacial, porque permite:

• Visualizar cambios en el territorio (deforestación, expansión urbana, inundaciones).
• Comparar estilos cartográficos.
• Presentar mapas en modo interactivo para tomadores de decisiones o ciudadanos.

---

En el video te explico todo: