Creación de un mapaCreate a map

En este artículo se muestran formas de crear y animar un mapa.This article shows you ways to create a map and animate a map.

Carga de un mapaLoading a map

Para cargar una asignación, cree una nueva instancia de la clase Map.To load a map, create a new instance of the Map class. Al inicializar el mapa, se pasa un identificador de elemento DIV para representar el mapa y un conjunto de opciones que se van a usar cuando se cargue el mapa.When initializing the map, a DIV element ID to render the map and a set of options to use when loading the map are passed in. Si no se especifica la información de autenticación predeterminada en el espacio de nombres atlas, esta información tendrá que especificarse en las opciones del mapa cuando se cargue el mapa.If default authentication information isn't specified on the atlas namespace, this information will need to be specified in the map options when loading the map. El mapa carga varios recursos de forma asincrónica para mayor rendimiento.The map loads several resources asynchronously for performance. Por lo tanto, después de crear la instancia del mapa, adjunte un evento ready o load al mapa y, luego, agregue algún código adicional que interactúe con el mapa en ese controlador de eventos.As such, after creating the map instance, attach a ready or load event to the map and then add any additional code that interacts with the map in that event handler. El evento ready se activa en cuanto el mapa tiene suficientes recursos cargados para que se interactúe con él mediante programación.The ready event fires as soon as the map has enough resources loaded to be interacted with programmatically. El evento load se activa después de que la vista inicial del mapa ha terminado de cargarse por completo.The load event fires after the initial map view has finished loading completely.


Sugerencia

Se pueden cargar varios mapas en la misma página, y cada uno puede usar la misma configuración de idioma o autenticación o usar otras diferentes.Multiple maps can be loaded on the same page and each one can use the same or different authentication and language settings.

Mostrar una sola copia del mundoShow a single copy of the world

Cuando se aleja el mapa en una pantalla ancha, se mostrarán varias copias del mundo horizontalmente.When the map is zoomed out on a wide screen, multiple copies of the world will appear horizontally. Esto está bien para la mayoría de los escenarios, pero para algunas aplicaciones puede ser preferible ver solo una copia del mundo.This is great for most scenarios, but some for some applications it may be desirable to only see a single copy of the world. Esto puede hacerse estableciendo la opción renderWorldCopies del mapa en false.This can be done by setting the maps renderWorldCopies option to false.


Control de la cámara del mapaControlling the map camera

Hay dos maneras de establecer el área mostrada del mapa mediante la cámara.There are two ways you can set the displayed area of the map using the camera. Al cargar el mapa, puede establecer las opciones de cámara, como centro y zoom, o llamar a la opción setCamera en cualquier momento después de que se haya cargado el mapa para actualizar mediante programación la vista del mapa.You can set camera options such as center, and zoom, when loading the map, or call the setCamera option anytime after the map has loaded to programmatically update the map view.

Establecimiento de la cámaraSet the camera

En el código siguiente, se crea un objeto Map y se establecen las opciones de centro y zoom.In the following code, a Map object is created and the center and zoom options are set. Las propiedades del mapa, como el centro y el nivel de zoom, forman parte de CameraOptions.Map properties such as center, and zoom level are part of the CameraOptions.


Establecimiento de los límites de cámaraSet the camera bounds

En el código siguiente, se crea un objeto Map mediante new atlas.Map().In the following code, a Map object is constructed via new atlas.Map(). Las propiedades del mapa, como CameraBoundsOptions, se pueden definir a través de la función setCamera de la clase Map.Map properties such as CameraBoundsOptions can be defined via setCamera function of the Map class. Los límites y las propiedades de relleno se establecen mediante setCamera.Bounds and padding properties are set using setCamera.


Animación de la vista de mapaAnimate map view

En el código siguiente, el primer bloque de código crea un mapa y establece los valores de estilo, centro y zoom del mapa.In the following code, the first code block creates a map and sets the map style, center and zoom values. En el segundo bloque de código, se crea un controlador de eventos click para el botón Animate.In the second code block, a click event handler is created for the animate button. Cuando se hace clic en este botón, se llama a la función setCamera con algunos valores aleatorios para CameraOptions, AnimationOptions.When this button is clicked the setCamera function is called with some random values for the CameraOptions, AnimationOptions.


Prueba del códigoTry out the code

Eche un vistazo al código de ejemplo anterior.Take a look at the sample code above. Puede modificar el código JavaScript en la pestaña JS a la izquierda y ver los cambios de la vista de mapa en la pestaña de resultados de la derecha.You can edit the JavaScript code on the JS tab on the left and see the map view changes on the Result tab on the right. También puede hacer clic en el botón Editar en CodePen y modificar el código en CodePen.You can also click on the Edit on CodePen button and edit the code in CodePen.

Pasos siguientesNext steps

Más información sobre las clases y los métodos utilizados en este artículo:Learn more about the classes and methods used in this article:

Vea los siguientes ejemplos de código para agregar funcionalidad a la aplicación:See code examples to add functionality to your app: