Integración avanzada
Beta:
La integración avanzada está en beta. Si encuentra problemas o dificultades con una función beta, comparta sus comentarios en la Comunidad de Esri.
Aunque es poco probable, los cambios en los componentes internos de ArcGIS StoryMaps pueden afectar o romper su código personalizado. Asegúrese de limitar sus personalizaciones a características esenciales y anulaciones de estilo.
Se dispone de integraciones avanzadas para historias, informes y colecciones.
Los desarrolladores web pueden utilizar integraciones avanzadas para integrar un elemento de ArcGIS StoryMaps en su sitio web y compartirlo con un enlace personalizado en su dominio web, como https://www.my-organization.gov/annual-report. También permite modificar la apariencia de un elemento de ArcGIS StoryMaps y agregar funcionalidad personalizada usando HTML, CSS y JavaScript.
La integración avanzada se realiza utilizando etiquetas <script> que permiten tratar el contenido de un elemento de ArcGIS StoryMaps como parte de la página web anfitriona. Esto proporciona más control sobre el estilo del contenido y elimina barras de desplazamiento adicionales que pueden estar presentes al usar integración estándar con un <iframe>. El código de la aplicación ArcGIS StoryMaps permanece alojado en los servidores de Esri y se actualiza automáticamente para ofrecerle las mejoras más recientes y destacadas en seguridad y rendimiento.
Con integración avanzada, puede hacer lo siguiente:
Integrar un elemento de ArcGIS StoryMaps en una URL específica en su dominio web
Integrar un elemento de ArcGIS StoryMaps en la navegación global del sitio web utilizando el encabezado y el pie de página estándar de su organización
Evitar varias barras de desplazamiento al integrar contenido de ArcGIS StoryMaps en su sitio web
Usar sus propias fuentes
Aplicar estilos personalizados a imágenes, hipervínculos, botones y otros elementos de contenido
Agregar componentes personalizados, como una pantalla de inicio que muestre cuándo se carga la página por primera vez o un panel extensible que los lectores puedan usar para enviar preguntas o comentarios
Crear nuevas experiencias de usuario, como un formulario que pida al lector que introduzca su código postal y luego navegue por un mapa hasta esa ubicación
Hacer un seguimiento de la interacción de los lectores usando su servicio de análisis preferido
Sugerencia:
Para más información y ejemplos, consulte los ejemplos para desarrolladores de ArcGIS StoryMaps en GitHub.
Habilitar integración avanzada
Lleve a cabo los pasos siguientes para habilitar la integración avanzada:
En el builder, haga clic el botón Más****⋯ en el encabezado y selecciona Configuración.
En la pestaña Avanzado, haga clic en Habilitar integración avanzada.
En Dominios permitidos, introduzca el nombre de un dominio donde tenga previsto integrar el elemento de ArcGIS StoryMaps; por ejemplo,
www.example.com. No incluya ningún protocolo ni número de puerto.Haga clic en Agregar.
Repita el proceso para agregar más dominios, si es necesario.
Publique el elemento de ArcGIS StoryMaps.
Importante:
Un elemento de ArcGIS StoryMaps debe compartirse con todos para integrarlo en otra página web.
Copiar fragmento de código de integración
Una vez que se habilite la integración avanzada y que el elemento de ArcGIS StoryMaps se publique y comparta con todos, utilice los siguientes pasos para obtener el fragmento de código necesario para integrarlo.
Edite el elemento de ArcGIS StoryMaps.
Haga clic en el botón Más ⋯ en el encabezado y elija Integrar esta historia.
En el menú desplegable, seleccione Secuencia de comandos (avanzado).
Haga clic en Copiar.
El código de integración se copia.
El código de integración también puede obtenerse al visualizar un elemento publicado de ArcGIS StoryMaps desde el menú Compartir en la pestaña Integrar.
El fragmento de código es una etiqueta <script> similar a la que se muestra abajo. Coloque la segunda etiqueta de secuencia de comandos en la página donde quiera que se agregue el elemento de ArcGIS StoryMaps.
<script>
window.storyMapsEmbedConfig = {
storyId: '[StoryMapItemID]',
rootNode: '.storymaps-root',
};
</script>
<script src="https://storymaps.arcgis.com/embed/view"></script>