Librería: Mapbox
Descripción: El usuario sólo dos puntos sobre el mapa y el sistema captura los puntos, muestra la ruta resaltada y muestra las indicaciones para ir en coche, a pie o en bicicleta.
Archivo CSS
#map{
width: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.listing-group {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
position: absolute;
top: 210px;
right: 10px;
z-index: 1;
border-radius: 3px;
max-width: 20%;
color: #fff;
}
.listing-group input[type='checkbox']:first-child + label {
border-radius: 3px 3px 0 0;
}
.listing-group label:last-child {
border-radius: 0 0 3px 3px;
border: none;
}
.listing-group input[type='checkbox'] {
display: none;
}
.listing-group input[type='checkbox'] + label {
background-color: #3386c0;
display: block;
cursor: pointer;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.listing-group input[type='checkbox'] + label {
background-color: #3386c0;
text-transform: capitalize;
}
.listing-group input[type='checkbox'] + label:hover,
.listing-group input[type='checkbox']:checked + label {
background-color: #4ea0da;
}
.listing-group input[type='checkbox']:checked + label:before {
content: '✔';
margin-right: 5px;
Archivo HMTL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='<https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css>' rel='stylesheet' />
<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">
<link rel="stylesheet" type="text/css" href="mapbox-gl-directions-master/src/mapbox-gl-directions.css">
<link rel="stylesheet" type="text/css" href="mapa_directions.css">
<title>Mi primer Mapa</title>
</head>
<body>
<div id='map'></div>
<nav id="listing-group" class="listing-group">
<input type="checkbox" id="scrollZoom" checked="checked">
<label for="scrollZoom">Scroll Zoom</label>
<input type="checkbox" id="boxZoom" checked="checked">
<label for="boxZoom">Box zoom</label>
<input type="checkbox" id="dragRotate" checked="checked">
<label for="dragRotate">Drag rotate</label>
<input type="checkbox" id="dragPan" checked="checked">
<label for="dragPan">Drag pan</label>
<input type="checkbox" id="keyboard" checked="checked">
<label for="keyboard">Keyboard</label>
<input type="checkbox" id="doubleClickZoom" checked="checked">
<label for="doubleClickZoom">Double click zoom</label>
<input type="checkbox" id="touchZoomRotate" checked="checked">
<label for="touchZoomRotate">Touch zoom rotate</label>
</nav>
<script src='<https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js>'></script>
<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>
<script type="text/javascript" src="mapbox-gl-directions-master/dist/mapbox-gl-directions.js"></script>
<script type="text/javascript" src='mapa_directions.js'></script>
</body>
</html>
Archivo JavaScript:
// Agrega tu token
mapboxgl.accessToken = 'TU TOKEN XXXXXX';
// Agregar mapa con estilo, coordenadas de centro y zoom
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.082412,4.639386],
zoom: 9
});
// Agregar barra de navegacion
document
.getElementById('listing-group')
.addEventListener('change', function(e)
{
var handler = e.target.id;
if(e.target.checked){
map[handler].enable();
} else {
map[handler].disable();
}
});
// Agregar la lista de sitios definidos para buscar
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;
}
// Agregar el geocodificador
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 14,
placeholder: 'Ingrese un lugara buscar',
mapboxgl: mapboxgl
})
);
// Agregar rutas
map.addControl(
new MapboxDirections({
accessToken: mapboxgl.accessToken,
}),
"top-left"
);
// Agregar barra de zoom
map.addControl(new mapboxgl.NavigationControl());
// Edificios en 3D
map.on("load", () => {
const layers = map.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === "symbol" && layer.layout["text-field"]
).id;
map.addLayer(
{
id: "add-3d-buildings",
source: "composite",
"source-layer": "building",
filter: ["==", "extrude", "true"],
type: "fill-extrusion",
minzoom: 15,
paint: {
"fill-extrusion-color": "#aaa",
"fill-extrusion-height": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "height"],
],
"fill-extrusion-base": [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "min_height"],
],
"fill-extrusion-opacity": 0.6,
},
},
labelLayerId
);
});