1. Inicio
  2. Clases
  3. SITNA.Map

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 SITNA.MapOptions <optional>

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

Ver en vivo


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

Ver en vivo


<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>

Ver en vivo


<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>
Detalles

Métodos

<async> addLayer( layer [, callback ] ) → {Promise.<SITNA.layer.Layer>}

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 | SITNA.layer.LayerOptions | SITNA.layer.Layer

Identificador de capa, objeto de opciones de capa o instancia de la clase SITNA.layer.Layer.
callback function <optional>

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

Objeto de capa añadido.

La clase del objeto dependerá del valor de la propiedad type del parámetro layer. Si es SITNA.Consts.layerType.VECTOR, SITNA.Consts.layerType.WFS o SITNA.Consts.layerType.KML, el objeto será de la clase SITNA.layer.Vector. En cualquier otro caso será de la clase SITNA.layer.Raster.

Ejemplos

Ver en vivo


<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>

Ver en vivo


<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>

<async> addMarker( coordinatesOrMarker [, options [, callback ] ] ) → {Promise.<SITNA.feature.Marker>}

Descripción

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

Parámetros
Nombre Type Atributos Descripción
coordinatesOrMarker Array.<number> | SITNA.feature.Marker

Coordenadas x e y del punto en las unidades del sistema de referencia del mapa, u objeto de marcador.
options MarkerOptions | SITNA.Map~AddMarkerCallback <optional>

Objeto de opciones de marcador o función a la que se llama tras añadir el marcador.
callback SITNA.Map~AddMarkerCallback <optional>

Función a la que se llama tras añadir el marcador.
Retorna

Marcador añadido.

Ejemplos

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.
        map.addMarker([610749, 4741648]);
        // Centrar el mapa en el marcador.
        map.zoomToMarkers();
    });
</script>

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 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>

Ver en vivo


<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>

Ver en vivo

  
<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.

Retorna

Imagen en un data URI.

Ejemplos

Ver en vivo

 
<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>
Detalles

Atributos de configuración CORS

<async> getCommonwealths( callback ) → {Promise.<Array.<SITNA.SearchResultItem>>}

Descripción

Obtiene los valores (SITNA.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.
Retorna

Lista de mancomunidades.

Ejemplos

Ver en vivo


<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 ) → {Promise.<Array.<SITNA.SearchResultItem>>}

Descripción

Obtiene los valores (SITNA.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.
Retorna

Lista de concejos.

Ejemplos

Ver en vivo


<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>

getCrs() → {string}

Descripción

Devuelve el código EPSG del sistema de referencia de coordenadas del mapa.

Retorna

Código EPSG del sistema de referencias del mapa.

Ejemplos

Ver en vivo


<div class="instructions div-select">
     <p>CRS actual: <span id="crs-display"></span></p>
     <p>
         <select id="crs-selector" onchange="applyCrs()">
             <option value="">Seleccione CRS...</option>
             <option value="EPSG:3857">EPSG:3857</option>
             <option value="EPSG:4326">EPSG:4326</option>
             <option value="EPSG:25829">EPSG:25829</option>
             <option value="EPSG:25830">EPSG:25830</option>
             <option value="EPSG:25831">EPSG:25831</option>
         </select>
     </p>
 </div>
 <div id="mapa"></div>
 <script>
     // Crear mapa.
     var map = new SITNA.Map("mapa");

     map.loaded(function () {
         displayCrs();
     });

     // Obtiene el CRS del mapa, lo muestra y restablece el selector
     function displayCrs() {
         document.getElementById("crs-display").innerHTML = map.getCrs();
         document.getElementById("crs-selector").value = "";
     };

     // Establece CRS del mapa
     function applyCrs() {
         const crs = document.getElementById("crs-selector").value;
         map.setCrs(crs, displayCrs);
     };
 </script>

getExtent() → {Array.<number>}

Descripción

Devuelve la extensión actual del mapa.

Retorna

Array con los valores de coordenadas [xmin, ymin, xmax, ymax] en el CRS del mapa.

Ejemplos

Ver en vivo


<div class="instructions div-select">
     <p class="y-axis"><label>Y max</label> <input type="number" id="ymax" /></p>
     <p class="x-axis">
         <label>X min</label> <input type="number" id="xmin" />
         <button onclick="applyExtent()">Aplicar</button>
         <label>X max</label> <input type="number" id="xmax" />
     </p>
     <p class="y-axis"><label>Y min</label> <input type="number" id="ymin" /></p>
 </div>
 <div id="mapa"></div>
 <script>
     // Crear mapa.
     var map = new SITNA.Map("mapa");

     map.loaded(function () {
         const extent = map.getExtent();
         displayExtent(extent);
     });

     // Actualiza los valores de la extensión del mapa
     function displayExtent(extent) {
         document.getElementById("xmin").value = extent[0];
         document.getElementById("ymin").value = extent[1];
         document.getElementById("xmax").value = extent[2];
         document.getElementById("ymax").value = extent[3];
     };

     // Establece la extensión del mapa y actualiza los valores
     function applyExtent() {
         const xmin = parseFloat(document.getElementById("xmin").value);
         const ymin = parseFloat(document.getElementById("ymin").value);
         const xmax = parseFloat(document.getElementById("xmax").value);
         const ymax = parseFloat(document.getElementById("ymax").value);
         map.setExtent([xmin, ymin, xmax, ymax], { animate: false }, displayExtent);
     };
 </script>

getLayer( layer ) → {SITNA.layer.Layer|null}

Descripción

Obtiene una capa del mapa.

Parámetros
Nombre Type Descripción
layer string | SITNA.layer.Layer

Identificador de capa u objeto de capa.
Retorna

Objeto de capa si esta existe y está en el mapa, o null si el mapa no tiene ninguna capa que cumpla el requisito del parámetro.

getMaxExtent() → {Array.<number>|null}

Descripción

Devuelve la extensión máxima del mapa.

Retorna

Array con los valores de coordenadas [xmin, ymin, xmax, ymax] en el CRS actual del mapa, o null si el mapa no tiene establecida extensión máxima.

Ejemplos

const maxExtent = map.getMapExtent();
if (maxExtent === null) {
    alert("El mapa no tiene extensión máxima definida");
}
else {
    alert(`El mapa se extiende de ${maxExtent[0]} a ${maxExtent[2]} en el eje x, de ${maxExtent[1]} a ${maxExtent[3]} en el eje y`);
}

<async> getMunicipalities( callback ) → {Promise.<Array.<SITNA.SearchResultItem>>}

Descripción

Obtiene los valores (SITNA.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.
Retorna

Lista de municipios.

Ejemplos

Ver en vivo

 
<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 ) → {Promise.<Array.<SITNA.SearchResultItem>>}

Descripción

Obtiene los valores (SITNA.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.
Retorna

Lista de cascos urbanos.

Ejemplos

Ver en vivo


<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 ) → {Promise}

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.
Retorna

Promesa que se resuelve cuando el mapa se carga.

Ejemplos

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

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

removeFeatures( features )

Descripción

Elimina una colección de entidades geográficas del mapa.

Parámetros
Nombre Type Descripción
features Array.<SITNA.feature.Feature>

Lista de entidades geográficas a eliminar.
Ejemplos

Ver en vivo


  <div class="instructions div-select">
     <button id="add-btn">Añadir marcador</button>
     <button id="rem-btn">Eliminar marcadores</button>
 </div>
 <div id="mapa"></div>
 <script>
     // Crear mapa.
     var map = new SITNA.Map("mapa");

     var getRandomPointInExtent = function (extent) {
         const dx = extent[2] - extent[0];
         const dy = extent[3] - extent[1];
         const x = extent[0] + Math.random() * dx;
         const y = extent[1] + Math.random() * dy;
         return [x, y];
     };

     // Cuando esté todo cargado proceder a trabajar con el mapa.
     map.loaded(function () {
         // Colección de marcadores añadidos
         const markers = [];
         // Añadir un marcador en un punto al azar
         document.getElementById("add-btn").addEventListener("click", function (e) {
             map.addMarker(getRandomPointInExtent(map.getExtent())).then(m => markers.push(m));
         });

         // Eliminar todos los marcadores añadidos
         document.getElementById("rem-btn").addEventListener("click", function (e) {
             map.removeFeatures(markers);
             markers.length = 0;
         });
     });
 </script>

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

Ver en vivo

 
<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 ] ) → {Promise.<string>}

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.
Retorna

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

Ejemplos

Ver en vivo


<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 ] ) → {Promise.<string>}

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.
Retorna

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

Ejemplos

Ver en vivo

 
<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 ] ) → {Promise.<string>}

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 SITNA.Map~SearchByIdCallback <optional>

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

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

Ejemplos

Ver en vivo


<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 ] ) → {Promise.<string>}

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.
Retorna

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

Ejemplos

Ver en vivo


<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 ] ) → {Promise.<string>}

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.
Retorna

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

Ejemplos

Ver en vivo


<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>

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

Ver en vivo


<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>

Ver en vivo

 
<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>

<async> setCrs( crs [, callback ] ) → {Promise.<string>}

Descripción

Establece un sistema de referencia de coordenadas al mapa especificando su código EPSG.

Parámetros
Nombre Type Atributos Descripción
crs string

Código EPSG del sistema de referencia de coordenadas.
callback SITNA.Map~SetCrsCallback <optional>

Función a la que se llama tras la resolución del cambio de CRS.
Retorna

Código EPSG del nuevo sistema de referencia de coordenadas.

Ejemplos

Ver en vivo


<div class="instructions div-select">
     <p>CRS actual: <span id="crs-display"></span></p>
     <p>
         <select id="crs-selector" onchange="applyCrs()">
             <option value="">Seleccione CRS...</option>
             <option value="EPSG:3857">EPSG:3857</option>
             <option value="EPSG:4326">EPSG:4326</option>
             <option value="EPSG:25829">EPSG:25829</option>
             <option value="EPSG:25830">EPSG:25830</option>
             <option value="EPSG:25831">EPSG:25831</option>
         </select>
     </p>
 </div>
 <div id="mapa"></div>
 <script>
     // Crear mapa.
     var map = new SITNA.Map("mapa");

     map.loaded(function () {
         displayCrs();
     });

     // Obtiene el CRS del mapa, lo muestra y restablece el selector
     function displayCrs() {
         document.getElementById("crs-display").innerHTML = map.getCrs();
         document.getElementById("crs-selector").value = "";
     };

     // Establece CRS del mapa
     function applyCrs() {
         const crs = document.getElementById("crs-selector").value;
         map.setCrs(crs, displayCrs);
     };
 </script>

<async> setExtent( extent [, options [, callback ] ] ) → {Promise.<Array.<number>>}

Descripción

Establece una extensión al mapa. Hay que tener en cuenta que puede haber factores que impidan que el ajuste sea exacto, como los niveles de zoom discretos de la capa base o que la relación de aspecto del visor no coincida con la de la extensión especificada. En cualquier caso, se garantiza que todos los puntos dentro de la extensión especificada se mostrarán en la nueva extensión.

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

Array de valores de coordenadas [xmin, ymin, xmax, ymax] especificadas en el CRS del mapa.
options object <optional>

Opciones del método.

Nombre Type Atributos Valor por defecto Descripción
animate boolean <optional>
 true

Si tiene un valor verdadero, la nueva extensión no se establecerá instantáneamente, sino que se alcanzará dicha extensión tras una animación de desplazamiento y zoom.
callback SITNA.Map~SetExtentCallback <optional>

Función a la que se llama tras el establecimiento de la nueva extensión. Se le pasa como parámetro la extensión real que ha alcanzado el mapa.
Retorna

Nueva extensión del mapa.

Ejemplos

Ver en vivo


<div class="instructions div-select">
     <p class="y-axis"><label>Y max</label> <input type="number" id="ymax" /></p>
     <p class="x-axis">
         <label>X min</label> <input type="number" id="xmin" />
         <button onclick="applyExtent()">Aplicar</button>
         <label>X max</label> <input type="number" id="xmax" />
     </p>
     <p class="y-axis"><label>Y min</label> <input type="number" id="ymin" /></p>
 </div>
 <div id="mapa"></div>
 <script>
     // Crear mapa.
     var map = new SITNA.Map("mapa");

     map.loaded(function () {
         const extent = map.getExtent();
         displayExtent(extent);
     });

     // Actualiza los valores de la extensión del mapa
     function displayExtent(extent) {
         document.getElementById("xmin").value = extent[0];
         document.getElementById("ymin").value = extent[1];
         document.getElementById("xmax").value = extent[2];
         document.getElementById("ymax").value = extent[3];
     };

     // Establece la extensión del mapa y actualiza los valores
     function applyExtent() {
         const xmin = parseFloat(document.getElementById("xmin").value);
         const ymin = parseFloat(document.getElementById("ymin").value);
         const xmax = parseFloat(document.getElementById("xmax").value);
         const ymax = parseFloat(document.getElementById("ymax").value);
         map.setExtent([xmin, ymin, xmax, ymax], { animate: false }, displayExtent);
     };
 </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

Ver en vivo

  
<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

AddMarkerCallback( marker )

Descripción

Función de callback que se lanza tras llamar al método SITNA.Map#addMarker.

Parámetros
Nombre Type Descripción
marker SITNA.feature.Marker

Marcador añadido.
Detalles
function

SITNA.Map#addMarker

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 SITNA.MapOptions). Array de dos números correspondientes a las coordenadas x e y.
Ejemplos

Ver en vivo

 
<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 Atributos Descripción
queryId string <nullable>

Identificador de consulta realizada. Su valor es null 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.SearchResultItem>

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

SetCrsCallback( newCrs )

Descripción

Función de callback que se ejecuta tras completarse la ejecución del método SITNA.Map#setCrs.

Parámetros
Nombre Type Descripción
newCrs string

Código EPSG del nuevo CRS del mapa.
Detalles
function

SITNA.Map#setCrs

SetExtentCallback( newExtent )

Descripción

Función de callback que se ejecuta tras completarse la ejecución del método SITNA.Map#setExtent.

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

Nueva extensión del mapa. Hay que tener en cuenta que no tiene por qué ser la misma que la que se pasó al método SITNA.Map#setExtent, bien por limitaciones en los niveles de zoom del mapa, bien por tener este una relación de aspecto distinta a la extensión especificada.
Detalles
function

SITNA.Map#setExtent