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.

Marca de imagen añadida al nombre de atributo

Un atributo cuyo valor sea la URL de una imagen puede tener un nombre que siga cualquiera de las dos siguientes convenciones:

<nombre-atributo>__image[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]

image[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]__<nombre-atributo>
  • <nombre-atributo> es cualquier cadena de caracteres válidos para un nombre de atributo. Este es el nombre que se mostrará en el encabezado dentro de la tabla de atributos.
  • Las siguiente parte es opcional:
    • <anchura-en-pixeles> es un valor numérico que indica la anchura en píxeles de la imagen reducida. Se puede sustituir por auto si no se quiere especificar la altura.
    • <altura-en-pixeles> es un valor numérico que indica la altura en píxeles de la imagen reducida. Se puede sustituir por auto si no se quiere especificar la anchura.

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>

Marca de imagen añadida al valor del atributo

Un atributo cuyo valor sea la URL de una imagen puede añadir la marca a la URL con cualquiera de las dos siguientes convenciones:

<url-imagen>__image[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]

image[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]__<url-imagen>
  • <url-imagen> es la dirección donde está alojado el archivo de la imagen.
  • Las siguiente parte es opcional:
    • <anchura-en-pixeles> es un valor numérico que indica la anchura en píxeles de la imagen reducida. Se puede sustituir por auto si no se quiere especificar la altura.
    • <altura-en-pixeles> es un valor numérico que indica la altura en píxeles de la imagen reducida. Se puede sustituir por auto si no se quiere especificar la anchura.

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.

Marca de vídeo añadida al nombre de atributo

Un atributo cuyo valor sea la URL de un vídeo puede tener un nombre que siga cualquiera de las dos siguientes convenciones:

<nombre-atributo>__video[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]

video[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]__<nombre-atributo>
  • <nombre-atributo> es cualquier cadena de caracteres válidos para un nombre de atributo. Este es el nombre que se mostrará en el encabezado dentro de la tabla de atributos.
  • Las siguiente parte es opcional:
    • <anchura-en-pixeles> es un valor numérico que indica la anchura en píxeles del reproductor. Se puede sustituir por auto si no se quiere especificar la altura.
    • <altura-en-pixeles> es un valor numérico que indica la altura en píxeles del reproductor. Se puede sustituir por auto si no se quiere especificar la anchura.

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>

Marca de vídeo añadida al valor del atributo

Un atributo cuyo valor sea la URL de un vídeo puede añadir la marca a la URL con cualquiera de las dos siguientes convenciones:

<url-video>__video[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]

video[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]__<url-video>
  • <url-video> es la dirección donde está alojado el archivo del vídeo o la dirección de Youtube.
  • Las siguiente parte es opcional:
    • <anchura-en-pixeles> es un valor numérico que indica la anchura en píxeles del reproductor. Se puede sustituir por auto si no se quiere especificar la altura.
    • <altura-en-pixeles> es un valor numérico que indica la altura en píxeles del reproductor. Se puede sustituir por auto si no se quiere especificar la anchura.

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>

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.

Marca de recurso incrustado añadida al nombre de atributo

Un atributo cuyo valor sea la URL de un recurso a incrustar puede tener un nombre que siga cualquiera de las dos siguientes convenciones:

<nombre-atributo>__embed[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]

embed[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]__<nombre-atributo>
  • <nombre-atributo> es cualquier cadena de caracteres válidos para un nombre de atributo. Este es el nombre que se mostrará en el encabezado dentro de la tabla de atributos.
  • Las siguiente parte es opcional:
    • <anchura-en-pixeles> es un valor numérico que indica la anchura en píxeles del elemento iframe. Se puede sustituir por auto si no se quiere especificar la altura.
    • <altura-en-pixeles> es un valor numérico que indica la altura en píxeles del elemento iframe. Se puede sustituir por auto si no se quiere especificar la anchura.

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 GeoPamplona.
        map.addMarker([610818, 4741558], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Información de edificio__embed_300_200": "https://tinyurl.com/y3kaaxz7"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>

Marca de recurso incrustado añadida al valor del atributo

Un atributo cuyo valor sea la URL de un recurso a incrustar puede añadir la marca a la URL con cualquiera de las dos siguientes convenciones:

<url-recurso>__embed[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]

embed[_{<anchura-en-pixeles>|auto}_{<altura-en-pixeles>|auto}]__<url-recurso>
  • <url-recurso> es la dirección del recurso que quiere incrustarse en la tabla de atributos.
  • Las siguiente parte es opcional:
    • <anchura-en-pixeles> es un valor numérico que indica la anchura en píxeles del elemento iframe. Se puede sustituir por auto si no se quiere especificar la altura.
    • <altura-en-pixeles> es un valor numérico que indica la altura en píxeles del elemento iframe. Se puede sustituir por auto si no se quiere especificar la anchura.

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 GeoPamplona.
        map.addMarker([610818, 4741558], {
            showPopup: true, // Hacemos que la tabla de atributos se muestre automáticamente
            data: {
                "Información de edificio": "embed_300_200__https://tinyurl.com/y3kaaxz7"
            }
        });
		// Centrar el mapa en el marcador.
		map.zoomToMarkers();
    });
</script>