Incorporación de controles a un mapa

Artículo
06/28/2023

Este artículo muestra cómo agregar controles a un mapa, incluyendo cómo crear un mapa con todos los controles y un selector de estilos.

Agregar un control de zoom

Un control de zoom agrega botones para acercar y alejar el mapa. En el siguiente ejemplo de código, se crea una instancia de la clase ZoomControl y se agrega a la esquina inferior derecha del mapa.

//Construct a zoom control and add it to the map.
map.controls.add(new atlas.control.ZoomControl(), {
    position: 'bottom-right'
});

Agregar un control de inclinación

Un control de inclinación agrega botones para inclinar el mapa con respecto al horizonte. En el siguiente ejemplo de código, se crea una instancia de la clase PitchControl. Después, esta instancia se agrega en la esquina superior derecha del mapa.

//Construct a pitch control and add it to the map.
map.controls.add(new atlas.control.PitchControl(), {
    position: 'top-right'
});

Agregar un control de brújula

Un control de brújula agrega un botón para girar el mapa. El siguiente ejemplo de código crea una instancia de la clase CompassControl y la agrega a la esquina inferior izquierda del mapa.

//Construct a compass control and add it to the map.
map.controls.add(new atlas.control.CompassControl(), {
    position: 'bottom-left'
});

Mapa con todos los controles

Se pueden colocar varios controles en una matriz, agregarlos al mapa a la vez y colocarlos en la misma área del mapa para simplificar el desarrollo. El siguiente fragmento de código agrega los controles de navegación estándar al mapa usando este método.

map.controls.add([
    new atlas.control.ZoomControl(),
    new atlas.control.CompassControl(),
    new atlas.control.PitchControl(),
    new atlas.control.StyleControl()
], {
    position: "top-right"
});

En la imagen siguiente, se muestra un mapa con los controles de zoom, inclinación, brújula y selector de estilo en la esquina superior derecha del mapa. Observe cómo se apilan automáticamente. El orden de los objetos de control del script determina el orden en que aparecen en el mapa. Para cambiar el orden de los controles en el mapa, puede cambiar su orden en la matriz.

El control selector de estilo se define mediante la clase StyleControl. Para más información sobre el uso del control selector de estilo, consulte el artículo en el que se explica cómo elegir un estilo de mapa.

Personalización de controles

El ejemplo de Opciones de control de navegación es una herramienta para probar las distintas opciones de personalización de los controles. Para obtener el código fuente de este ejemplo, consulte el código fuente de Opciones de control de la navegación.

Si desea crear controles de navegación personalizados, cree una clase que extienda desde la clase atlas.Control, o bien cree un elemento HTML y colóquelo encima de la división del mapa. Haga que este control de la interfaz de usuario llame a la función setCamera de Maps para mover el mapa.