Cómo agregar el control en el mapa - Amazon Location Service
Agregación de controles de mapaConsejos de desarrolladores

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 agregar el control en el mapa

Amazon Location Service le permite agregar varios controles al mapa, incluidos los controles de navegación, geolocalización, pantalla completa, escala y atribución.

  • Control de navegación: contiene botones de zoom y una brújula.

  • Control de geolocalización: proporciona un botón que utiliza la API de geolocalización del navegador para localizar al usuario en el mapa.

  • Control de pantalla completa: contiene un botón para activar y desactivar el mapa en el modo de pantalla completa.

  • Control de escala: muestra la relación entre una distancia en el mapa y la distancia correspondiente en el suelo.

  • Control de atribución: presenta la información de atribución del mapa. De forma predeterminada, el control de atribución está expandido (independientemente del ancho del mapa).

Puede agregar los controles a cualquier esquina del mapa: arriba a la izquierda, abajo a la izquierda, abajo a la derecha o arriba a la derecha.

Agregación de controles de mapa

En el siguiente ejemplo, agregará los controles de mapa mostrados anteriormente.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Map Controls</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <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' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [-123.13203602550998, 49.28726257639254], // starting position [lng, lat]
                zoom: 10, // starting zoom
                attributionControl: false, // hide default attributionControl in bottom left
            });

            // Adding controls to the map
            map.addControl(new maplibregl.NavigationControl()); // Zoom and rotation controls
            map.addControl(new maplibregl.FullscreenControl()); // Fullscreen control
            map.addControl(new maplibregl.GeolocateControl()); // Geolocation control
            map.addControl(new maplibregl.AttributionControl(), 'bottom-left'); // Attribution in bottom-left
            map.addControl(new maplibregl.ScaleControl(), 'bottom-right'); // Scale control in bottom-right
        </script>
    </body>
</html>
style.css

body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }

Consejos de desarrolladores


new maplibregl.NavigationControl({ 
    showCompass: true, // show or hide compass (default: true)
    showZoom: true // show or hide zoom controls (default: true)
});
                

new maplibregl.GeolocateControl({ 
    positionOptions: { enableHighAccuracy: true }, // default: false
    trackUserLocation: true // default: false
});
                

new maplibregl.AttributionControl({
    compact: true, // compact (collapsed) mode (default: false)
});
                

new maplibregl.ScaleControl({ 
    maxWidth: 100, // width of the scale (default: 50)
    unit: 'imperial' // imperial or metric (default: metric)
});
                

map.addControl(new maplibregl.FullscreenControl({
    container: document.querySelector('body') // container for fullscreen mode
}));