Cómo añadir multimedia y páginas web incrustadas

En la API SITNA, los atributos de una entidad geográfica se muestran en una tabla en dos columnas, la primera muestra los nombres de los atributos y la segunda sus valores.

Pero en el caso de elementos multimedia o direcciones de páginas web, se pueden mostrar de una manera más accesible. Para ello se ha definido una convención para marcar los atributos de la entidad geográfica que tienen tipos especiales de dato. Estas marcas se pueden añadir al nombre o al valor del atributo.

Imágenes

Un atributo de entidad geográfica con la marca convenida mostrará en su tabla de atributos la imagen en tamaño reducido. Pulsando en la imagen esta se amplía al tamaño original o al máximo disponible en la pantalla si el tamaño original es mayor que el tamaño de la pantalla.

Alternativa 1: Marca añadida al nombre de atributo

A un atributo cuyo valor se desee tratar como la URL de una imagen se le puede asignar un nombre que siga alguno de los siguientes formatos:

1.a. Marca como sufijo

Expresión regular:

/^(.)+__image(?:_(\d+|auto)_(\d+|auto))?$/

1.b. Marca como prefijo

Expresión regular:

/^image(?:_(\d+|auto)_(\d+|auto))?__(.)+$/

Ejemplo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de la imagen.
        map.addMarker([611061, 4741133], {
		    showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Imagen adjunta__image_200_auto": "https://upload.wikimedia.org/wikipedia/commons/9/90/Pamplona_-_Monumento_al_Encierro.jpg",
                "Licencia de uso": "Zarateman, CC0, via Wikimedia Commons"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Alternativa 2: Marca añadida al valor del atributo

En un atributo cuyo valor se desee tratar como la URL de una imagen se puede añadir la marca a la URL con alguno de los siguientes formatos:

2.a. Marca como sufijo

Expresión regular:

/^(.)+__image(?:_(\d+|auto)_(\d+|auto))?$/

2.b. Marca como prefijo

Expresión regular:

/^image(?:_(\d+|auto)_(\d+|auto))?__(.)+$/

Ejemplo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de la imagen.
        map.addMarker([611061, 4741133], {
		    showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Imagen adjunta": "image_200_auto__https://upload.wikimedia.org/wikipedia/commons/9/90/Pamplona_-_Monumento_al_Encierro.jpg",
                "Licencia de uso": "Zarateman, CC0, via Wikimedia Commons"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Vídeos

Un atributo de entidad geográfica que tenga la marca convenida mostrará incrustado en su tabla de atributos un reproductor del vídeo. El valor del atributo puede ser una URL de un archivo de vídeo o un enlace de Youtube. Se soportan tres tipos de URL de Youtube:

• El que se refiere a un vídeo en una página independiente, con formato https://www.youtube.com/watch?v=XXXXXXXXXXX
• El que se utiliza en código HTML de inserción, con formato https://www.youtube.com/embed/XXXXXXXXXXX
• El acortado, con formato https://youtu.be/XXXXXXXXXXX

En los tres casos la URL se se transformará al formato de inserción para incrustar el vídeo en la tabla de atributos.

Alternativa 1: Marca añadida al nombre de atributo

A un atributo cuyo valor se desee tratar como la URL de un vídeo se le puede asignar un nombre con alguno de los siguientes formatos:

1.a. Marca como sufijo

Expresión regular:

/^(.)+__video(?:_(\d+|auto)_(\d+|auto))?$/

1.b. Marca como prefijo

Expresión regular:

/^video(?:_(\d+|auto)_(\d+|auto))?__(.)+$/

Ejemplos

Archivo de vídeo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de un archivo de vídeo.
        map.addMarker([613529, 4747122], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Parque fluvial__video_640_auto": "data/Slowmotion_River_Water.mp4"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Vídeo de Youtube

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de Youtube.
        map.addMarker([621107, 4670766], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Sobrevuelo__video": "https://www.youtube.com/watch?v=Fz32nY6wKv4"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Alternativa 2: Marca añadida al valor del atributo

En un atributo cuyo valor se desee tratar como la URL de un vídeo se puede añadir la marca a la URL con alguno de los siguientes formatos:

2.a. Marca como sufijo

Expresión regular:

/^(.)+__video(?:_(\d+|auto)_(\d+|auto))?$/

2.b. Marca como prefijo

Expresión regular:

/^video(?:_(\d+|auto)_(\d+|auto))?__(.)+$/

Ejemplos

Archivo de vídeo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de un archivo de vídeo.
        map.addMarker([613529, 4747122], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Parque fluvial": "video_640_auto__data/Slowmotion_River_Water.mp4"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Vídeo de Youtube

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de Youtube.
        map.addMarker([621107, 4670766], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Sobrevuelo": "video__https://www.youtube.com/watch?v=Fz32nY6wKv4"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Audios

Un atributo de entidad geográfica con la marca convenida mostrará en su tabla de atributos un reproductor de audio.

Alternativa 1: Marca añadida al nombre de atributo

A un atributo cuyo valor se desee tratar como la URL de un archivo de audio se le puede asignar un nombre con alguno de los siguientes formatos:

1.a. Marca como sufijo

Expresión regular:

/^(.)+__audio$/

1.b. Marca como prefijo

Expresión regular:

/^audio__(.)+$/

Ejemplo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de un archivo de audio.
        map.addMarker([611036, 4741241], {
		    showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Teatro Gayarre__audio": "data/aplausos.mp3"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Alternativa 2: Marca añadida al valor del atributo

En un atributo cuyo valor se desee tratar como la URL de un archivo de audio se puede añadir la marca a la URL con alguno de los siguientes formatos:

2.a. Marca como sufijo

Expresión regular:

/^(.)+__audio$/

2.b. Marca como prefijo

Expresión regular:

/^audio__(.)+$/

Ejemplo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con la URL de un archivo de audio.
        map.addMarker([611036, 4741241], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Teatro Gayarre": "audio__data/aplausos.mp3"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Recursos incrustados

Un atributo de entidad geográfica que tenga la marca convenida mostrará incrustada en su tabla de atributos un recurso dentro de un elemento iframe. El valor del atributo es la URL del recurso.

Alternativa 1: Marca añadida al nombre de atributo

A un atributo cuyo valor sea la URL de un recurso a incrustar se le puede asignar un nombre que encaje con una de las dos siguientes expresiones regulares:

1.a. Marca como sufijo

Expresión regular:

/^(.)+__embed(?:_(\d+|auto)_(\d+|auto))?$/

1.b. Marca como prefijo

Expresión regular:

/^embed(?:_(\d+|auto)_(\d+|auto))?__(.)+$/

Ejemplo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con un enlace a su ficha catastral.
        map.addMarker([610818, 4741558], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Información catastral__embed_640_200": "https://catastro.navarra.es/ref_catastral/unidades.aspx?C=201&PO=1&PA=1"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Alternativa 2: Marca añadida al valor del atributo

En un atributo cuyo valor sea la URL de un recurso a incrustar se puede añadir la marca a la URL con alguno de los siguientes formatos:

2.a. Marca como sufijo

Expresión regular:

/^(.)+__embed(?:_(\d+|auto)_(\d+|auto))?$/

2.b. Marca como prefijo

Expresión regular:

/^embed(?:_(\d+|auto)_(\d+|auto))?__(.)+$/

Ejemplo

Ver en vivo

<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador con un atributo con un enlace a su ficha catastral.
        map.addMarker([610818, 4741558], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Información catastral": "embed_640_200__https://catastro.navarra.es/ref_catastral/unidades.aspx?C=201&PO=1&PA=1"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>