Compartir el mapa como mapa web

A veces, iniciará un mapa con ArcGIS Pro y se dará cuenta de que necesita crear una versión web del mismo para poder compartirlo de forma interactiva. Puede compartir el mapa en ArcGIS Online y continuar con su trabajo ahí.

  1. Descargue el archivo zip Ancient cities in Africa y descomprímalo en una ubicación de su equipo, por ejemplo, su unidad C:\.
  2. Abra la carpeta descomprimida y haga doble clic en Ancient cities in Africa.aprx para abrir el proyecto en ArcGIS Pro.

    El archivo Ancient cities in Africa.aprx en una ventana del explorador de archivos

  3. Si se le pide, inicie sesión en su cuenta de ArcGIS.
    Nota:

    Si no tiene acceso a ArcGIS Pro o una cuenta de organización de ArcGIS, consulte las opciones de acceso a software.

    Aparece un mapa que muestra las ubicaciones de 37 ciudades antiguas de África. Este mapa se creó a partir de una lista de las ciudades habitadas de forma constante más antiguas de África en Wikipedia. Si desea aprender a crear este mapa, pruebe el tutorial Convertir una lista de lugares históricos en un mapa.

    Mapa de las ciudades antiguas de África

    Necesita crear una versión interactiva de este mapa. Empezará compartiendo el mapa como un mapa web, que se convertirá en un mapa que se puede visualizar y editar en ArcGIS Online.

  4. En la cinta, haga clic en la pestaña Compartir. En el grupo Compartir como, haga clic en Mapa web.

    Botón Mapa web en la pestaña Compartir de la cinta

  5. En el panel Compartir como mapa web, cambie los siguientes parámetros:
    • En Nombre, escriba Mapa web Ciudades antiguas de África, seguido de sus iniciales.
    • En Resumen, escriba Algunas de las ciudades habitadas de forma constante más antiguas de África.
    • En Etiquetas, escriba el nombre de su clase: Historia antigua.
    • En Seleccionar una configuración, elija Copiar todos los datos: exploración.
    • Asegúrese de que Utilizar tipos de símbolos compatibles con todos los clientes esté activado.
    • En Compartir con, marque Todos.

    Panel Compartir como mapa web

  6. Haga clic en el botón Analizar.

    Botón Analizar

    Aparecen dos errores en la pestaña Mensajes. No podrá compartir el mapa hasta que se hayan resuelto todos los errores.

  7. Expanda el mensaje de error y, si es necesario, arrastre el borde del panel para que pueda leer el mensaje completo.

    Arrastrar el borde del panel para ampliarlo

    Se han identificado dos tipos de error. Primero, abordará el error de proyección de mapa.

    Dos de las capas del mapa tienen una proyección diferente a la proyección del mapa. Se trata de un error habitual porque los mapas web presentan requisitos más estrictos sobre los sistemas de coordenadas que en ArcGIS Pro. Para resolver el error y seguir compartiendo, cambiará el sistema de coordenadas del mapa para que coincida con el sistema de coordenadas de Web Mercator utilizado por las capas de mapa base. Un mapa web debe usar el mismo sistema de coordenadas que su mapa base.

  8. Apunte a uno de los mensajes de error anidados y haga clic en el botón Opciones que aparece.

    Botón Opciones en un mensaje de error

  9. En el menú que aparece, haga clic Actualizar mapa para usar el sistema de coordenadas del mapa base.

    Actualizar mapa para usar el sistema de coordenadas del mapa base en el menú contextual del mensaje de error

    Uno de los mensajes de error en rojo se actualiza con una marca de verificación en verde, lo que indica que se ha resuelto.

  10. Vuelva a hacer clic en Analizar.

    El error de proyección de mapa se ha resuelto, pero hay un error pendiente por resolver.

  11. Haga doble clic en el error de Id. numéricos únicos.

    Error relacionado con Id. numéricos únicos en los resultados de Analizar

    Aparece la ventana Propiedades del mapa en la pestaña General.

  12. Active la casilla Permitir asignación de Id. numéricos únicos para compartir capas web.

    Permitir asignación de Id. numéricos únicos para compartir capas web activado en la ventana Propiedades del mapa

  13. Haga clic en Aceptar.

    El mensaje de error se actualiza con una marca de verificación en verde, lo que indica que se ha resuelto.

  14. En el panel Compartir como mapa web, haga clic en Analizar.

    No se encontró ningún error ni advertencia. Al actualizar el mapa para utilizar el sistema de coordenadas del mapa base, se resolvieron ambos errores de proyección.

    Nota:

    Puede obtener más información sobre proyecciones en mapas web en el tutorial Crear un mapa web sin Web Mercator.

  15. Haga clic en Compartir.

    Una vez ha terminado de compartir, aparece un banner de mensaje en verde en la parte inferior del panel.

  16. Haga clic en Administrar el mapa web para ver el mapa web en ArcGIS Online.

    Vínculo Administrar el mapa web

    La página de detalles del elemento del mapa web aparece en un navegador.

  17. Cierre ArcGIS Pro.

    No es necesario guardar el mapa.

Configurar capas de mapa base para distintas escalas

El mapa ahora existe como mapa web, que podría compartir con sus estudiantes. Sin embargo, preferiría crear una experiencia un poco más personalizada para que sea más fácil explorar el mapa y crear las conexiones que ha tratado en la clase. Una forma de lograrlo es controlar qué mapas base aparecen en distintas escalas.

  1. En la parte superior de la página de detalles de los elementos, haga clic en Iniciar sesión e inicie sesión en su cuenta de ArcGIS. Utilice la misma cuenta que utilizó para iniciar sesión en ArcGIS Pro.
  2. Haga clic en Abrir en Map Viewer.
    Nota:

    ArcGIS Online ofrece dos visores de mapas para ver, usar y crear mapas. Este tutorial utiliza el nuevo Map Viewer. Si su botón indica Abrir en Map Viewer Classic, haga clic en el botón de flecha y elija Abrir en Map Viewer en su lugar.

    Botón Abrir en Map Viewer

  3. Si aparece una ventana con el mensaje Map Viewer ya no está en la versión beta, haga clic en Aceptar.
  4. En la barra de herramientas Contenido (oscura), haga clic en Mapa base.

    Botón Mapa base en la barra de herramientas Contenido

    Aparece una lista de opciones de mapa base. Le gustaría seguir usando el mapa base actual al alejar el mapa, pero mostrar el mapa base de imágenes cuando se acerca. Para ello, agregará varios mapas base al mapa y controlará cuándo estará visible cada uno.

  5. Haga clic en Mapa base actual World Hillshade.

    Mapa base actual World Hillshade en el panel Mapa base

    Se enumeran dos capas: Modern Antique y World Hillshade.

  6. Haga clic en Agregar capa.

    Botón Agregar capa en el panel Mapa base

  7. En la parte superior del panel Agregar capa, haga clic en Mi contenido y seleccione Living Atlas.
  8. En la barra de búsqueda, escriba Imágenes y pulse Intro.
  9. En los resultados de búsqueda, en la tarjeta World Imagery, haga clic en el botón Agregar capa a mapa base.

    Botón Agregar capa a mapa base en la tarjeta World Imagery

    El mapa se actualiza con las imágenes. Sin embargo, no tiene ninguna etiqueta. Las agregará como una capa separada.

  10. Busque Hybrid Reference Layer. Desplácese por los resultados de la búsqueda hasta que encuentre la capa de teselas Hybrid Reference Layer propiedad de Esri y haga clic en el botón Agregar capa a mapa base.

    Botón Agregar capa a mapa base en la tarjeta Hybrid Reference Layer

  11. En la parte superior del panel Agregar capa, haga clic en el botón Atrás.

    Ahora hay cuatro capas enumeradas en el panel Mapa base.

    Cuatro capas en el panel Mapa base

  12. Haga clic en Hybrid Reference Layer.

    Aparece el panel Propiedades de la capa. Ajustará su rango visible para que solo aparezca a ciertas escalas.

  13. En la parte inferior del panel Propiedades, en Rango visible, haga clic en Mundo y cámbielo a Ciudades.

    Primera parada en el control deslizante Rango visible establecido en Ciudades 1:160.000.

    El control deslizante se actualiza para indicar que la capa solo estará visible cuando el mapa se acerque más allá de la escala Ciudades.

    Control deslizante de Rango visible establecido para abarcar de Ciudades a Habitación.

  14. En el panel Mapa base, haga clic en World Imagery. En el panel Propiedades, en Rango visible, haga clic en Mundo y cámbielo a Ciudades.

    Las capas World Imagery y Hybrid Reference deben tener el mismo rango visible.

    El mapa base de imágenes desaparece del mapa. En el panel Mapa base, las dos capas superiores están atenuadas para indicar que no están visibles actualmente. A continuación, ajustará las otras dos capas para que solo estén visibles al alejarse.

  15. Haga clic en la capa Modern Antique. En Rango visible, haga clic en Habitación y cámbielo a Ciudades.

    Control deslizante de Rango visible definido para abarcar de Mundo a Ciudades.

  16. Haga clic en la capa World Hillshade. En Rango visible, haga clic en Habitación y cámbielo a Ciudades.

    Las capas Modern Antique y World Hillshade deben tener el mismo rango visible.

    A continuación, probará que los rangos visibles que ha establecido para sus mapas base funcionan correctamente.

  17. En el mapa, acérquese a una de las ciudades.

    A medida que se acerca a la ciudad, el mapa base se debería actualizar para mostrar las imágenes.

    Cuatro capas de mapa base y mapa de Alejandría con mapa base de imágenes

  18. Aléjese hasta que pueda ver toda África. Centre el continente en medio del mapa.

    El mapa base Modern Antique debería estar visible.

  19. En el panel Contenido, haga clic en Guardar y abrir y haga clic en Guardar.

    Botón Guardar en el menú contextual Guardar y abrir

  20. En la ventana Mapa web, haga clic en Guardar este mapa.

Crear un cuadro de mando

A continuación, empaquetará su mapa dentro de una aplicación web. Las aplicaciones web proporcionan interfaces más sencillas para compartir mapas. En una aplicación web, puede controlar y simplificar las opciones del mapa. Creará una aplicación que permita a sus estudiantes explorar las ciudades mediante el mapa y una lista al mismo tiempo.

  1. En la barra de herramientas Contenido, haga clic en Más y Crear aplicación.

    Botón Crear aplicación

    Aparecen varias opciones. Son distintos métodos para crear aplicaciones web, cada uno adaptado a distintos formatos. Para elegir el mejor método, primero debe imaginar el aspecto que desea que tenga su aplicación y cómo desea que se comporte. Después, puede elegir la plantilla que mejor se ajuste a su visión.

    Menú con opciones para Instant Apps, Experience Builder, StoryMaps y Dashboards

    Para esta aplicación, quiere ofrecer una lista de todas las ciudades para que los estudiantes puedan hacer clic en cada ciudad sucesivamente, ver su información de atributos y explorar su ubicación en el mapa. Tras experimentar con ArcGIS StoryMaps y ArcGIS Instant Apps, descubrió que ArcGIS Dashboards ofrecía la experiencia más próxima a lo que deseaba.

  2. Haga clic en Dashboards.
  3. En la ventana Crear nuevo cuadro de mando, en Título, escriba Explorar ciudades antiguas de África, seguido de sus iniciales.

    Las Etiquetas y el Resumen ya deben estar rellenos, tomando sus valores del mapa web.

  4. Haga clic en Crear cuadro de mando.

    Aparece el nuevo cuadro de mando con el mapa que abarca todo el espacio. Agregará algunos elementos más a este espacio, pero empezará por configurar el mapa.

  5. Apunte a la esquina superior izquierda del mapa hasta que aparezca un conjunto de botones. Haga clic en el botón Configurar.

    Botón Configurar en el elemento de mapa

  6. En la ventana Mapa, en la pestaña Configuración, desactive Elementos emergentes.

    Expondrá los atributos de los datos en otra parte de la aplicación, por lo que incluir elementos emergentes será redundante.

    La mayoría de las veces, el mapa se acercará a las distintas ciudades. Necesitará un botón de extensión predeterminado para que los estudiantes puedan volver de forma más fácil a una escala en la que puedan ver toda África.

  7. Active Extensión y marcadores predeterminados.

    Agregará algunos controles más para facilitar la navegación por el mapa.

  8. Active Buscar y Acercar/alejar.

    Configuración de elemento de mapa

  9. Haga clic en Hecho.

    A continuación, agregará un elemento de detalles para mostrar los atributos de cada ciudad.

  10. En la barra de herramientas del cuadro de mando, haga clic en Vista.
    Sugerencia:

    En la parte inferior de la barra de herramientas del cuadro de mando, puede hacer clic en Expandir o Contraer para expandir y contraer la barra de herramientas.

    Ver en la barra de herramientas del cuadro de mando

    Para crear un elemento de detalles, debe elegir una capa a partir de la cual crearlo. Elegirá la única capa de su cuadro de mando: la capa de ciudades antiguas.

  11. En el panel Vista, haga clic en Agregar elemento y haga clic en Detalles.

    Detalles en las opciones de Agregar elemento

  12. En la ventana Seleccionar una capa, haga clic en Africa_Geocoded.

    Aparecen una vista previa y opciones para el elemento de detalles. Espera que la mayoría de los estudiantes vean esta aplicación en un dispositivo móvil en lugar de en un equipo de escritorio, por lo que buscará formas de ahorrar espacio.

  13. Haga clic en la pestaña Detalles y desactive Título.

    El Título es el mismo que el campo Nombre, de modo que no es necesario.

    Título desactivado en las opciones de Detalles.

  14. Haga clic en Hecho.

    El elemento de detalles aparece en la vista previa del cuadro de mando, junto al mapa, y ocupa la mitad del espacio del cuadro de mando. Reorganizará todos los elementos más adelante.

    Panel Detalles que muestra los atributos de Agadez.

Configurar una lista interactiva

A continuación, agregará un elemento de lista para enumerar todas las ciudades. También utilizará acciones para conectar la lista al resto del cuadro de mando de modo que los estudiantes puedan usarlo como una herramienta de navegación.

  1. En el panel Vista, haga clic en el botón Agregar elemento y haga clic en Lista.
  2. En la ventana Seleccionar una capa, haga clic en Africa_Geocoded.

    Aparecen una vista previa y opciones de la lista. Hay 37 ciudades en su dataset, por lo que deberá asegurarse de que todas estén incluidas en la lista.

  3. En el panel Opciones de datos, en Máximo de entidades visualizadas, escriba 37.

    Máximo de entidades visualizadas establecido en 37 en Opciones de datos.

    A continuación, eliminará los símbolos de puntos que aparecen junto a cada nombre de ciudad en la lista. Así ahorrará espacio, que es valioso en pantallas más pequeñas.

  4. Haga clic en la pestaña Lista. En Icono de elemento de línea, elija Ninguno.

    Icono de elemento de línea establecido en Ninguno en Opciones de lista.

    Los símbolos de punto desaparecen de la lista.

    Por último, vinculará la lista al mapa y a los elementos de detalles, de modo que cuando se haga clic en una ciudad en la lista, el resto del cuadro de mando reaccione.

  5. Haga clic en la pestaña Acciones. En Cuando cambie la selección expanda Filtro.

    Filtro expandido en la pestaña Acciones

    Filtrará el elemento de detalles siempre que se realice una selección en el elemento de lista.

  6. En Filtro, active Detalles (1).

    Detalles (1) activado en Filtro

    A continuación, agregará más acciones para que el mapa también responda a una selección de la lista.

  7. Expanda Desplazamiento panorámico y active el mapa web Ciudades antiguas de África. Expanda Zoom y active el mapa web Ciudades antiguas de África.

    Tres acciones configuradas para cuando cambia la selección.

  8. Haga clic en Hecho.
  9. En el cuadro de mando, en la lista de elementos, haga clic en una de las ciudades de la lista.

    El elemento de detalles se rellena con información sobre esa ciudad y el mapa se acerca a la ciudad, mostrando el mapa base de imágenes.

    Elemento de detalles y mapa de Mombasa

Reorganizar el cuadro de mando

Actualmente, la lista ocupa la mayor parte del espacio del cuadro de mando. Preferiría que el mapa sea el elemento más grande. También debe asegurarse de que el diseño funcione tanto en las pantallas de escritorio como de móviles.

  1. Apunte a la esquina superior del elemento de lista hasta que aparezca el botón. Haga clic en el botón Arrastrar elemento y manténgalo pulsado.

    Botón Arrastrar elemento en el elemento de lista

  2. Arrastre el elemento de lista sobre el elemento de mapa hasta que aparezcan las posiciones de acoplamiento. Suelte la lista en la posición inferior de acoplamiento para acoplarla como una fila.

    Arrastrar el elemento de lista hasta la posición de acoplamiento inferior del elemento de mapa

  3. Arrastre el elemento de detalles y acóplelo como columna a la derecha del elemento de mapa.

    Acoplar elemento como una columna junto al elemento de lista

    Ahora el cuadro de mando tiene el mapa en la parte superior y los elementos de lista y detalles debajo.

  4. Apunte al divisor entre el mapa y el resto de elementos y arrástrelo hacia abajo hasta que alcance aproximadamente un 60 por ciento.

    Arrastrar el espacio entre la lista y los elementos de mapa

  5. Arrastre el divisor entre la lista y los elementos de detalles hasta que alcance aproximadamente un 30 por ciento.

    Arrastrar el espacio entre la lista y los elementos de detalles

    El elemento de detalles debe tener el espacio más grande. A continuación, probará si este diseño funciona en una pantalla más pequeña.

  6. Pulse Ctrl+Mayús+I para abrir la ventana de inspección del navegador. Pulse Ctrl+Mayús+M para cambiar a la vista de diseño interactiva.
    Nota:

    Estos accesos directos funcionan para Chrome, Firefox y Microsoft Edge. Si utiliza Safari, teclee Opción+Comando+R. Si utiliza Internet Explorer, pulse F12 y, a continuación, Ctrl+Mayús+M.

    La vista del cuadro de mando se reduce para imitar la pantalla de un dispositivo móvil.

    Vista de móvil del cuadro de mando que muestra Alejandría

  7. Experimente con el desplazamiento panorámico, el zoom, el desplazamiento y el clic en la vista pequeña del cuadro de mando.

    Esta vista del cuadro de mando incluye una cinta en la parte superior con los controles de edición del cuadro de mando. No aparecerán en la versión final del cuadro de mando, por lo que tendrá un poco más de espacio vertical.

    Este diseño se puede leer y utilizar tanto en una pantalla de escritorio como de móvil.

Agregar texto para describir el cuadro de mando

Para completar el cuadro de mando, incluirá algo de información sobre el mapa y algunas preguntas para guiar la exploración de los estudiantes.

  1. Cierre la ventana de inspección para volver a la vista normal del cuadro de mando.
  2. En el panel Vista, haga clic en el botón Agregar elemento y haga clic en Texto enriquecido.
  3. En el editor de texto, pegue lo siguiente:

    Ciudades antiguas de África

    Este mapa muestra algunas de las ciudades habitadas de forma constante más antiguas de África. Haga clic en los nombres de ciudades de la lista para visitar cada una de estas ciudades antiguas en un mapa moderno.

    A medida que explora las imágenes del mapa, ¿puede encontrar alguna prueba que apunte a un pasado antiguo; por ejemplo, barrios o edificios antiguos? En tal caso, ¿en qué ciudades?

    Este mapa solo muestra los lugares que aún están habitados en la actualidad. Algunos lugares que eran importantes ciudades en el pasado ahora solo son pueblos pequeños. ¿Puede encontrar alguna en este mapa?

    Algunas otras ciudades importantes del pasado ya no están habitadas, como Gran Zimbabue. ¿Puede encontrar las ruinas de Gran Zimbabue en este mapa?

    Sugerencia:

    Pulse Ctrl+Mayús+V para pegar el texto sin su formato original. Si está usando Safari, pulse Comando+Mayús+V.

  4. Resalte la primera línea de texto y haga clic en el botón Negrita.

    Primera línea de texto resaltada y formateada como negrita en el editor de texto.

  5. Resalte la primera referencia a Gran Zimbabue y haga clic en el botón Vínculo.
  6. En la ventana Vínculo, en URL, pegue https://en.wikipedia.org/wiki/Great_Zimbabwe. Haga clic en Aceptar.
  7. A continuación, resalte todo el texto en un mapa moderno. Haga clic en el botón Insertar/Eliminar lista numerada.

    Últimos tres párrafos resaltados y convertidos en una lista numerada en el editor de texto.

  8. Haga clic en Hecho.
  9. Arrastre el elemento de texto enriquecido al centro del mapa para apilar los dos elementos.

    El elemento de texto enriquecido se oculta detrás del mapa y se puede acceder a él mediante una pestaña debajo del mapa.

  10. Haga clic en la pestaña Texto enriquecido debajo del mapa.

    Pestaña Texto enriquecido

  11. En la lista, seleccione y anule la selección de las ciudades para probar el cuadro de mando.

    Aparece el texto reemplazando el mapa. Puede parecer que hay demasiado espacio para el texto, pero el espacio adicional será necesario al visualizar el cuadro de mando en un dispositivo móvil.

    Elemento de texto enriquecido

  12. En la pestaña Texto enriquecido, haga clic en el botón Editar.
  13. Escriba Acerca del mapa y pulse Intro para cambiar el nombre de la pestaña.
  14. Haga clic en la pestaña Mapa. Explore el cuadro de mando para asegurarse de que funciona como espera.

    Cuadro de mando con los elementos de mapa, lista y detalles visibles

Guardar y compartir el cuadro de mando

Tiene todo listo para compartir el cuadro de mando con sus estudiantes. Actualizará el nivel de uso compartido y los metadatos y les enviará la URL correcta para el uso compartido.

  1. En la barra de herramientas del cuadro de mando, haga clic en Guardar y haga clic en Guardar.
  2. En la parte superior de la pantalla, junto al título del cuadro de mando, haga clic en el botón de menú y haga clic en Detalles de elementos del cuadro de mando.

    Opción Detalles de elementos del cuadro de mando en el menú Inicio

    Aparece la página de elemento de su cuadro de mando. Agregará algunos metadatos al elemento antes de compartirlo.

  3. Junto a Agregue un breve resumen sobre el elemento, haga clic en el botón Editar y escriba Algunas de las ciudades habitadas de forma constante más antiguas de África. Haga clic en Guardar.
  4. Asimismo, edite la Descripción. Escriba (o copie y pegue) Fuente de datos: https://en.wikipedia.org/wiki/List_of_oldest_continuously_inhabited_cities.

    A continuación, compartirá el cuadro de mando públicamente para asegurarse de que sus estudiantes puedan verlo, aunque no tengan una sesión iniciada en ArcGIS Online.

  5. Haga clic en Compartir. En la ventana Compartir haga clic en Todos (público) y haga clic en Guardar.

    Botón Todos (público) en la ventana Compartir

  6. En la parte inferior de la página de detalles del elemento, en URL, haga clic en el botón Copiar.

    Botón Copiar para la URL

    Esta es la URL que puede compartir con sus estudiantes.

    Sugerencia:

    Si se pide a los estudiantes que inicien sesión antes de acceder al cuadro de mando, asegúrese de que tanto el cuadro de mando como el mapa se compartan con Todos (público).

  7. Haga clic en Ver cuadro de mando para visualizar la aplicación terminada en una nueva pestaña.

Los mapas web y estáticos ofrecen distintas ventajas y desafíos. Si su mapa comienza de una forma, no está limitado a ella. En este tutorial, ha convertido un mapa estático en una aplicación web interactiva y ha aprovechado algunas de las ventajas de esa forma, incluidos varios mapas base, control de visibilidad de escala, listas interactivas y vistas de atributos. Ha aprendido a compartir un mapa de ArcGIS Pro a ArcGIS Online, a convertir un mapa web en una aplicación de cuadro de mando y a configurar un diseño de cuadro de mando que puede funcionar tanto para dispositivos móviles como de escritorio.

Para obtener más información sobre la creación de diseños de aplicaciones web, pruebe el tutorial Elaborar un diseño para un mapa temático en ArcGIS Experience Builder.

Encontrará más tutoriales de cartografía en la página Cómo crear un mapa.