new Map( div [, options ] )

Descripción

Objeto principal de la API, instancia un mapa dentro de un elemento del DOM. Nótese que la inicialización del mapa es asíncrona, por tanto cualquier código que haga uso de este objeto debería estar dentro de una función de callback pasada como parámetro al método loaded.

Las opciones de configuración del mapa son una combinación de las opciones de configuración global (definidas en SITNA.Cfg, las opciones definidas por la maquetación que utilicemos, y las opciones pasadas como parámetro al constructor. Estas opciones están ordenadas de menor a mayor prevalencia, de modo que por ejemplo una opción pasada como parámetro del constructor siempre sobreescribirá una opción de la configuración global.

Parámetros
Nombre Type Atributos Descripción
div HTMLElement | string

Elemento del DOM en el que crear el mapa o valor de atributo id de dicho elemento.

options MapOptions <optional>

Objeto de opciones de configuración del mapa. Sus propiedades sobreescriben las del objeto de configuración global SITNA.Cfg.

Ejemplos

<div id="mapa"/>
<script>
    // Crear un mapa con las opciones por defecto.
    var map = new SITNA.Map("mapa");
</script>

<div id="mapa"/>
<script>
    // Crear un mapa en el sistema de referencia WGS 84 con el de mapa de fondo.
    var map = new SITNA.Map("mapa", {
        crs: "EPSG:4326",
        initialExtent: [ // Coordenadas en grados decimales, porque el sistema de referencia espacial es WGS 84.
            -2.84820556640625,
            41.78912492257675,
            -0.32135009765625,
            43.55789822064767
        ],
        maxExtent: [
            -2.84820556640625,
            41.78912492257675,
            -0.32135009765625,
            43.55789822064767
        ],
        baselayerExtent: [
            -2.84820556640625,
            41.78912492257675,
            -0.32135009765625,
            43.55789822064767
        ],
        baseLayers: [
            SITNA.Consts.layer.IDENA_DYNBASEMAP
        ],
        defaultBaseLayer: SITNA.Consts.layer.IDENA_DYNBASEMAP,
        // Establecemos el mapa de situación con una capa compatible con WGS 84
        controls: {
            overviewMap: {
                layer: SITNA.Consts.layer.IDENA_DYNBASEMAP
            }
        }
    });
</script>

<div id="mapa"/>
<script>
    // Crear un mapa que tenga como contenido las capas de toponimia y mallas cartográficas del WMS de IDENA.
    var map = new SITNA.Map("mapa", {
        workLayers: [
            {
                id: "topo_mallas",
                title: "Toponimia y mallas cartográficas",
                type: SITNA.Consts.layerType.WMS,
                url: "//idena.navarra.es/ogc/wms",
                layerNames: "IDENA:TOPONI_Txt_Toponimos,IDENA:mallas"
            }
        ]
    });
</script>

Métodos


<async> addLayer( layer [, callback ] )

Descripción

Añade una capa al mapa. Si se le pasa un objeto del Tipo LayerOptions como parámetro layer y tiene definida la propiedad url, establece por defecto el tipo de capa a SITNA.Consts.layerType.KML si la URL acaba en .kml.

El tipo de la capa no puede ser SITNA.Consts.layerType.WFS.

Parámetros
Nombre Type Atributos Descripción
layer string | LayerOptions

Identificador de capa u objeto de opciones de capa.

callback function <optional>

Función a la que se llama tras ser añadida la capa.

Ejemplos

<div id="mapa"></div>
<script>
    // Crear un mapa con las opciones por defecto.
    var map = new SITNA.Map("mapa");
    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir al mapa la capa de cartografía topográfica de IDENA
        map.addLayer(SITNA.Consts.layer.IDENA_CARTO);
    });
</script>

<div id="mapa"></div>
<script>
    // Crear un mapa con las opciones por defecto.
    var map = new SITNA.Map("mapa");

    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir al mapa un documento KML
        map.addLayer({
            id: "capa_kml",
            title: "Museos en Navarra",
            type: SITNA.Consts.layerType.KML,
            url: "data/MUSEOSNAVARRA.kml"
        });
    });
</script>

addMarker( coords [, options ] )

Descripción

Añade un marcador (un punto asociado a un icono) al mapa.

Parámetros
Nombre Type Atributos Descripción
coords array

Coordenadas x e y del punto en las unidades del sistema de referencia del mapa.

options MarkerOptions <optional>

Objeto de opciones de marcador.

Ejemplos

<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.
        map.addMarker([610749, 4741648]);
        // Centrar el mapa en el marcador.
        map.zoomToMarkers();
    });
</script> 
   
<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 marcadores al grupo "Marcadores colgantes"
        // cuyo icono se ancle al punto en el centro hacia abajo.
        // Establecer un icono adecuado.
        var markerOptions = {
            group: "Marcadores colgantes",
            url: "data/colgante.png",
            anchor: [0.5, 0]
        };
        map.addMarker([610887, 4741244], markerOptions);
        map.addMarker([615364, 4657556], markerOptions);
        // Centrar el mapa en los marcadores.
        map.zoomToMarkers();
    });
</script> 

<div id="mapa"></div>
<script>
    // Crear un mapa con una capa vectorial, centrado en la Ciudadela de Pamplona.
    var map = new SITNA.Map("mapa", {
        initialExtent: [
            609627,
            4740225,
            611191,
            4741395
        ],
        workLayers: [{
            id: "markers",
            title: "Marcadores geográficos",
            type: SITNA.Consts.layerType.VECTOR
        }]
    });
    // Cuando esté todo cargado proceder a trabajar con el mapa.
    map.loaded(function () {
        // Añadir un marcador en la capa "markers",
        // asignarle un grupo para que salga en tabla de contenidos y leyenda.
        map.addMarker([610431, 4740837], {
            layer: "markers",
            group: "Ciudadela"
        });
    });
</script>
  
<div id="mapa"></div>
<script>
    // Añadir información emergente al mapa.
    SITNA.Cfg.controls.popup = true;
    
    // Crear un 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 icono de 40x40 píxeles definido por la clase CSS kiosko.
        // Asignarle unos datos asociados que se muestren por defecto.
        map.addMarker([615366, 4657426], {
            cssClass: "kiosko",
            width: 40,
            height: 40,
            data: {
                "Nombre": "Plaza de la Constitución, Tudela",
                "Sitio web": "http://www.tudela.es/"
            },
            showPopup: true
        });
        // Centrar el mapa en el marcador.
        map.zoomToMarkers();
    });
</script> 

exportImage() → {string}

Descripción

Exporta el mapa a una imagen PNG. Para poder utilizar este método hay que establecer la opción crossOrigin al instanciar SITNA.Map.

Returns

Imagen en un data URI.

Ejemplos
 
<div id="controls" class="controls">
    <button id="imageBtn">Exportar imagen</button>
</div>
<div id="mapa"></div>
<script>
    // Crear un mapa con la opción de imágenes CORS habilitada.
    var map = new SITNA.Map("mapa", { crossOrigin: "anonymous" });
    
    var exportImage = function () {
        var dataUrl = map.exportImage();
        var image = document.createElement("img");
        image.setAttribute("src", dataUrl);
        image.style.width = '25vw';
        var div = document.createElement("div");
        div.appendChild(image);
        document.getElementById("controls").appendChild(div);
    };
    
    document.getElementById("imageBtn").addEventListener("click", exportImage);
</script>

<async> getCommonwealths( callback )

Descripción

Obtiene los valores (SITNA.Map~SearchResultItem) de las mancomunidades de residuos disponibles en la capa de IDENA.

Parámetros
Nombre Type Descripción
callback SITNA.Map~SearchDataCallback

Función a la que se llama tras obtener los datos.

Ejemplos
 
<div class="instructions divSelect">
    <div>
        Mancomunidades de residuos
        <select id="commonwealths" onchange="applyFilter()">
            <option value="-1">Seleccione...</option>
        </select>
    </div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
    
    map.loaded(function () {
        // completamos el desplegable
        map.getCommonwealths(function (data) {
            var fragment = document.createDocumentFragment();
            data.forEach(function (value) {
                var option = document.createElement("option");
                option.setAttribute("value", value.id);
                option.textContent = value.label;
                fragment.appendChild(option);
            });
            document.querySelector("#commonwealths").appendChild(fragment);
        });
    });
        
    // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
    function applyFilter() {
        var id = document.querySelector("#commonwealths").querySelector("option:checked").value;
        if (id == -1)
            map.removeSearch();
        else {
            map.searchCommonwealth(id, function (idQuery) {
                if (idQuery == null) {
                    alert("No se han encontrado resultados");
                }
            });
        }
    };
</script>     

<async> getCouncils( callback )

Descripción

Obtiene los valores (SITNA.Map~SearchResultItem) de los concejos disponibles en la capa de IDENA.

Parámetros
Nombre Type Descripción
callback SITNA.Map~SearchDataCallback

Función a la que se llama tras obtener los datos.

Ejemplos
 
<div class="instructions divSelect">
    <div>
        Concejos
        <select id="council" onchange="applyFilter()">
            <option value="-1">Seleccione...</option>
        </select>
    </div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
    
    map.loaded(function () {
        // completamos el desplegable
        map.getCouncils(function (data) {
            var fragment = document.createDocumentFragment();
            data.forEach(function (value) {
                var option = document.createElement("option");
                option.setAttribute("value", value.id);
                option.textContent = value.label;
                fragment.appendChild(option);
            });
            document.querySelector("#council").appendChild(fragment);
        });
    });
    
    // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
    function applyFilter() {
        var id = document.querySelector("#council").querySelector("option:checked").value;
        if (id == -1)
            map.removeSearch();
        else {
            map.searchCouncil(id, function (idQuery) {
                if (idQuery == null) {
                    alert("No se han encontrado resultados");
                }
            });
        }
    };
</script>

<async> getMunicipalities( callback )

Descripción

Obtiene los valores (SITNA.Map~SearchResultItem) de los municipios disponibles en la capa de IDENA.

Parámetros
Nombre Type Descripción
callback SITNA.Map~SearchDataCallback

Función a la que se llama tras obtener los datos.

Ejemplos
 
<div class="instructions divSelect">
    <div>
        Municipios
        <select id="municipality" onchange="applyFilter()">
            <option value="-1">Seleccione...</option>
        </select>
    </div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    map.loaded(function () {
        // completamos el desplegable
        map.getMunicipalities(function (data) {
            var fragment = document.createDocumentFragment();
            data.forEach(function (value) {
                var option = document.createElement("option");
                option.setAttribute("value", value.id);
                option.textContent = value.label;
                fragment.appendChild(option);
            });
            document.querySelector("#municipality").appendChild(fragment);
        });
    });

    // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
    function applyFilter() {
        var id = document.querySelector("#council").querySelector("option:checked").value;
        if (id == -1)
            map.removeSearch();
        else {
            map.searchMunicipality(id, function (idQuery) {
                if (idQuery == null) {
                    alert("No se han encontrado resultados");
                }
            });
        }
    };
</script> 

<async> getUrbanAreas( callback )

Descripción

Obtiene los valores (SITNA.Map~SearchResultItem) de los cascos urbanos disponibles en la capa de IDENA.

Parámetros
Nombre Type Descripción
callback SITNA.Map~SearchDataCallback

Función a la que se llama tras obtener los datos.

Ejemplos
 
<div class="instructions divSelect">
    <div>
        Cascos urbanos
        <select id="urban" onchange="applyFilter()">
            <option value="-1">Seleccione...</option>
        </select>
    </div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
    
    map.loaded(function () {
        // completamos el desplegable
        map.getUrbanAreas(function (data) {
            var fragment = document.createDocumentFragment();
            data.forEach(function (value) {
                var option = document.createElement("option");
                option.setAttribute("value", value.id);
                option.textContent = value.label;
                fragment.appendChild(option);
            });
            document.querySelector("#urban").appendChild(fragment);
        });
    });

    // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
    function applyFilter() {
        var id = document.querySelector("#urban").querySelector("option:checked").value;
        if (id == -1)
            map.removeSearch();
        else {
            map.searchUrbanArea(id, function (idQuery) {
                if (idQuery == null) {
                    alert('No se han encontrado resultados');
                }
            });
        }
    };
</script>

<async> loaded( callback )

Descripción

Añade una función de callback que se ejecutará cuando el mapa, sus controles y todas sus capas se hayan cargado.

Parámetros
Nombre Type Descripción
callback function

Función a la que se llama tras la carga del mapa.

Ejemplos

// Notificar cuando se haya cargado el mapa.
map.loaded(function () { 
    console.log("Código del mapa y de sus controles cargado, datos cargados.");
});

<async> removeSearch( [ callback ] )

Descripción

Elimina del mapa la entidad geográfica encontrada en la última búsqueda.

Parámetros
Nombre Type Atributos Descripción
callback function <optional>

Función a la que se llama tras eliminar la entidad geográfica.

Ejemplos
 
<div class="instructions query">
    <div><label>Capa</label><input type="text" id="capa" placeholder="Nombre capa de IDENA" /> </div>
    <div><label>Campo</label><input type="text" id="campo" placeholder="Nombre campo" /> </div>
    <div><label>Valor</label><input type="text" id="valor" placeholder="Valor a encontrar" /> </div>
    <div><button id="searchBtn">Buscar</button></div>
    <div><button id="removeBtn">Eliminar filtro</button></div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
        
    map.loaded(function () {
        document.getElementById("addFilterBtn").addEventListener("click", addFilter);
        document.getElementById("removeFilterBtn").addEventListener("click", removeFilter);
    });
        
    // Establecer como filtro del mapa el municipio Valle de Egüés
    var addFilter = function () {
        var capa = document.getElementById("capa").value;
        capa = capa.trim();
        
        var campo = document.getElementById("campo").value;
        campo = campo.trim();
        
        var valor = document.getElementById("valor").value;
        valor = valor.trim();
        
        map.searchFeature(capa, campo, valor, function (idQuery) {
            if (idQuery == null) {
                alert("No se han encontrado resultados en la capa: " + capa + " en el campo: " + campo + " el valor: " + valor + ".");
            }
        });
    };
    
    // Limpiar el mapa del filtro
    var remove = function () {
        map.removeSearch();
    };
</script>

<async> searchCommonwealth( id [, callback ] )

Descripción

Busca la mancomunidad de residuos y pinta en el mapa la entidad geográfica encontrada que corresponda al identificador indicado.

Parámetros
Nombre Type Atributos Descripción
id string

Identificador de la entidad geográfica a pintar.

callback SITNA.Map~SearchByIdCallback <optional>

Función a la que se llama tras aplicar el filtro.

Ejemplos
 
<div class="instructions searchCommonwealth">    
    <div><button id="searchPamplonaBtn">Buscar Mancomunidad de la Comarca de Pamplona</button></div>    
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
    map.loaded(function () {
        document.getElementById("searchPamplonaBtn").addEventListener("click", search);
    });
          
    var search = function () {
        map.removeSearch();
        map.searchCommonwealth("8", function (idQuery) {
            if (idQuery == null) {
                alert("No se ha encontrado la mancomunidad con código 8.");
            }
        });
    };
</script>

<async> searchCouncil( id [, callback ] )

Descripción

Busca el concejo que corresponda con el identificador pasado como parámetro y pinta la entidad geográfica encontrada en el mapa.

Parámetros
Nombre Type Atributos Descripción
id string

Identificador de la entidad geográfica a pintar.

callback SITNA.Map~SearchByIdCallback <optional>

Función a la que se llama tras aplicar el filtro.

Ejemplos
 
<div class="instructions search">    
    <div><button id="searchBtn">Buscar concejo Esquíroz (Galar)</button></div>    
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
    map.loaded(function () {
        document.getElementById("searchBtn").addEventListener("click", search);
    });
    
    var search = function () {
        map.removeSearch();
        map.searchCouncil("109#5", function (idQuery) {
            if (idQuery == null) {
                alert("No se ha encontrado el concejo con código 109#5.");
            }
        });
    };    
</script>    

<async> searchFeature( layer, field, id [, callback ] )

Descripción

Busca y pinta en el mapa la entidad geográfica encontrada correspondiente al identificador establecido.

Parámetros
Nombre Type Atributos Descripción
layer string

Nombre de la capa de IDENA en la cual buscar.

field string

Campo de la capa de IDENA en el cual buscar.

id string

Identificador de la entidad geográfica por el cual filtrar.

callback IDENA.Map~SearchByIdCallback <optional>

Función a la que se llama tras aplicar el filtro.

Ejemplos
 
<div class="instructions query">
    <div><label>Capa</label><input type="text" id="capa" placeholder="Nombre capa de IDENA" /> </div>
    <div><label>Campo</label><input type="text" id="campo" placeholder="Nombre campo" /> </div>
    <div><label>Valor</label><input type="text" id="valor" placeholder="Valor a encontrar" /> </div>
    <div><button id="searchBtn">Buscar</button></div>
    <div><button id="removeBtn">Eliminar filtro</button></div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");

    map.loaded(function () {
        document.getElementById("searchBtn").addEventListener("click", search);
        document.getElementById("removeBtn").addEventListener("click", remove);
    });
    
    var search = function () {
        var capa = document.getElementById("capa").value;
        capa = capa.trim();
        
        var campo = document.getElementById("campo").value;
        campo = campo.trim();
        
        var valor = document.getElementById("valor").value;
        valor = valor.trim();
        
        map.searchFeature(capa, campo, valor, function (idQuery) {
            if (idQuery == null) {
                alert("No se han encontrado resultados en la capa: " + capa + " en el campo: " + campo + " el valor: " + valor + ".");
            }
        });
    };
    
    // Limpiar el mapa 
    var remove = function () {
        map.removeSearch();
    };
</script>

<async> searchMunicipality( id [, callback ] )

Descripción

Busca el municipio que corresponda con el identificador pasado como parámetro y pinta la entidad geográfica encontrada en el mapa.

Parámetros
Nombre Type Atributos Descripción
id string

Identificador de la entidad geográfica a pintar.

callback SITNA.Map~SearchByIdCallback <optional>

Función a la que se llama tras aplicar el filtro.

Ejemplos
 
<div class="instructions search">
    <div><button id="searchBtn">Buscar Arbizu</button></div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
    map.loaded(function () {
        document.getElementById("searchBtn").addEventListener("click", search);
    });
         
    var search = function () {
        map.removeSearch();
        map.searchMunicipality("27", function (idQuery) {
            if (idQuery == null) {
                alert("No se ha encontrado el municipio con código 27.");
            }
        });
    };
</script>

<async> searchUrbanArea( id [, callback ] )

Descripción

Busca el casco urbano que corresponda con el identificador pasado como parámetro y pinta la entidad geográfica encontrada en el mapa.

Parámetros
Nombre Type Atributos Descripción
id string

Identificador de la entidad geográfica a pintar.

callback SITNA.Map~SearchByIdCallback <optional>

Función a la que se llama tras aplicar el filtro.

Ejemplos
 
<div class="instructions search">
    <div><button id="searchBtn">Buscar casco urbano de Arbizu</button></div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
    map.loaded(function () {
        document.getElementById("searchBtn").addEventListener("click", search);
    });
    var search = function () {
        map.removeSearch();
        map.searchUrbanArea("27", function (idQuery) {
            if (idQuery == null) {
                alert("No se ha encontrado el casco urbano con código 27.");
            }
        });
    };
</script>

<async> setBaseLayer( layer [, callback ] )

Descripción

Hace visible una capa como mapa de fondo. Esta capa debe existir previamente en la lista de mapas de fondo del mapa.

Parámetros
Nombre Type Atributos Descripción
layer string | LayerOptions

Identificador de capa u objeto de opciones de capa.

callback function <optional>

Función al que se llama tras ser establecida la capa como mapa de fondo.

Ejemplos

<div id="mapa"></div>
<script>
    // Crear mapa con opciones por defecto. Esto incluye la capa del catastro de Navarra entre los mapas de fondo.
    var map = new SITNA.Map("mapa");
    // Cuando esté todo cargado establecer como mapa de fondo visible el catastro de Navarra.
    map.loaded(function () {
        map.setBaseLayer(SITNA.Consts.layer.IDENA_CADASTER);
    });
</script>
 
<div id="mapa"></div>
<script>
    // Crear mapa con opciones por defecto.
    var map = new SITNA.Map("mapa");
    // Cuando el mapa esté cargado, añadir la ortofoto de 1956/1957 como mapa de fondo y establecerla como mapa de fondo visible.
    map.loaded(function () {
        map.addLayer({
            id: "orto_56_57",
            title: "Ortofoto de 1956/1957",
            url: "http://idena.navarra.es/ogc/wms",
            layerNames: "ortofoto_10000_1957",
            isBase: true
        }, function () {
            map.setBaseLayer("orto_56_57");
        });
    });
</script>

zoomToMarkers( [ options ] )

Descripción

Centra y escala el mapa a la extensión que ocupan todos sus marcadores.

Parámetros
Nombre Type Atributos Descripción
options object <optional>

Objeto de opciones de zoom.

Nombre Type Atributos Valor por defecto Descripción
pointBoundsRadius number <optional>
30

Radio en metros del área alrededor del marcador que se respetará al hacer zoom. Por defecto es 30.

extentMargin number <optional>
0.2

Tamaño del margen que se aplicará a la extensión total de todas los marcadores. El valor es la relación de crecimiento en ancho y alto entre la extensión resultante y la original. Por ejemplo, el valor por defecto 0,2 indica un crecimiento del 20% de la extensión, 10% por cada lado.

Ejemplos
  
<div class="controls">
    <div><button id="addMarkerBtn">Añadir marcador aleatorio</button></div>
    <div><input type="number" step="1" id="pbrVal" value="30" /> <label for="pbrVal">pointBoundsRadius</label></div>
    <div><input type="number" step="0.1" id="emVal" value="0.2" /> <label for="emVal">extentMargin</label></div>
    <div><button id="zoomBtn">Hacer zoom a los marcadores</button></div>
</div>
<div id="mapa"></div>
<script>
    // Crear mapa.
    var map = new SITNA.Map("mapa");
      
    // Añadir un marcador en un punto aleatorio
    var addRandomMarker = function () {
        var xmin = SITNA.Cfg.initialExtent[0];
        var ymin = SITNA.Cfg.initialExtent[1];
        var width = SITNA.Cfg.initialExtent[2] - SITNA.Cfg.initialExtent[0];
        var height = SITNA.Cfg.initialExtent[3] - SITNA.Cfg.initialExtent[1];
        map.addMarker([xmin + Math.random() width, ymin + Math.random() height]);
    };

    // Hacer zoom a los marcadores con las opciones elegidas
    var zoomToMarkers = function () {
        map.zoomToMarkers({
            pointBoundsRadius: parseInt(document.getElementById("pbrVal").value),
            extentMargin: parseFloat(document.getElementById("emVal").value)
        });
    };
    
    document.getElementById("addMarkerBtn").addEventListener("click", addRandomMarker);
    document.getElementById("zoomBtn").addEventListener("click", zoomToMarkers);
</script> 

Definiciones de tipos


ClickCallback( coords )

Descripción

Función de callback que gestiona los clic del usuario en la ventana de visualización del mapa.

Parámetros
Nombre Type Descripción
coords Array.<number>

Coordenadas del punto donde se ha realizado clic, en las unidades del sistema de referencia de coordenadas del mapa (Ver propiedad crsde MapOptions). Array de dos números correspondientes a las coordenadas x e y.

Ejemplos
 
<div id="mapa"/>
<script>
    // Creamos un mapa con el control de gestión de clics, con una función de callback personalizada
    var map = new SITNA.Map("mapa", {
        controls: {
            click: {
                active: true,
                callback: function (coord) {
                    alert("Has pulsado en la posición " + coord[0] + ", " + coord[1]);
                }
            }
        }
    });
</script>

SearchByIdCallback( queryId )

Descripción

Función de callback que gestiona las respuestas a búsquedas por identfificador (SITNA.Map#searchMunicipality, etc.).

Parámetros
Nombre Type Descripción
queryId string

Identificador de consulta realizada. Su valor es undefined si no hay resultado.


SearchDataCallback( data )

Descripción

Función de callback que gestiona las respuestas a peticiones de datos de búsqueda (SITNA.Map#getMunicipalities, etc.).

Parámetros
Nombre Type Descripción
data Array.<SITNA.Map~SearchResultItem>

Lista de elementos de búsqueda. Cada elemento tiene un identificador y un texto descriptivo.


SearchResultItem

Descripción

Objeto proporcionado en las respuestas a peticiones de datos de búsqueda (SITNA.Map#getMunicipalities, etc.).

Propiedades
Nombre Type Descripción
id string

Identificador del elemento a buscar.

label string

Texto descriptivo del elemento a buscar que se mostrará en la lista de sugerencias de resultados de búsqueda.