Cómo mostrar los detalles del transporte público en un mapa - Amazon Location Service
Crea un mapa con detalles de tránsito

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Cómo mostrar los detalles del transporte público en un mapa

Amazon Location Service te permite añadir funciones de transporte público a los mapas. TransitTravelModeMuestra información sobre las rutas del transporte público, como las líneas de tren codificadas por colores. Consulta también cómo configurar la logística TravelMode para ver opciones adicionales.

Crea un mapa con detalles de tránsito

En este ejemplo, se muestra cómo crear un mapa con detalles de transporte público con Transit TravelMode para transporte público.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Transit Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Transit&key=${apiKey}`,
                center: [-74.0060 ,40.7128],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
style.css
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}