API SITNA

1.5.1

API de mapas del Gobierno de Navarra



Clase SITNA.Map

Sección relacionada: 2.1. Parámetros del constructor
Sección principal: 2. Configuración

Objeto principal de la API, instancia un mapa dentro de un elemento del DOM. Nótese que el constructor es asíncrono, 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 el layout 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.

Puede consultar también online el ejemplo 1, el ejemplo 2 y el ejemplo 3.

Ejemplo 1:

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

Ejemplo 2:

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

Ejemplo 3:

  <div id="mapa"></div>
  <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:toponimia,IDENA:mallas"
        }
      ]
    });
  </script>

Constructor



SITNA.Map
(
  • div
  • [options]
)
async

Se define en sitna.js:2858

Parámetros:

  • div HTMLElement | String

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

  • [options] Object optional

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

    • [crs="EPSG:25830"] String optional

      Código EPSG del sistema de referencia espacial del mapa. Por defecto es "EPSG:25830".

    • [initialExtent] Array optional

      Extensión inicial del mapa definida por x mínima, y mínima, x máxima, y máxima. Esta opción es obligatoria si el sistema de referencia espacial del mapa es distinto del sistema por defecto (ver SITNA.Cfg.crs).

      Para más información consultar SITNA.Cfg.initialExtent.

    • [maxExtent] Array optional

      Extensión máxima del mapa definida por x mínima, y mínima, x máxima, y máxima. Para más información consultar SITNA.Cfg.maxExtent.

    • [layout] String optional

      URL de una carpeta de maquetación. Consultar la sección 2.2. Maquetación para ver instrucciones de uso de maquetaciones.

    • [baseLayers] Array optional

      Lista de identificadores de capa o instancias de la clase SITNA.cfg.LayerOptions para incluir dichas capas como mapas de fondo.

    • [workLayers] Array optional

      Lista de identificadores de capa o instancias de la clase SITNA.cfg.LayerOptions para incluir dichas capas como contenido del mapa.

    • [defaultBaseLayer] String | Number optional

      Identificador o índice en baseLayers de la capa base por defecto.

    • [controls] SITNA.cfg.MapControlOptions optional

      Opciones de controles de mapa.

    • [styles] SITNA.cfg.StyleOptions optional

      Opciones de estilo de entidades geográficas.

    • [locale="es-ES"] String optional

      Código de idioma de la interfaz de usuario. Este código debe obedecer la sintaxis definida por la IETF. Los valores posibles son "es-ES", "eu-ES" y "en-US". Por defecto es "es-ES".

    • [crossOrigin] String optional

      Valor del atributo crossorigin de las imágenes del mapa para habilitar CORS Es necesario establecer esta opción para poder utilizar el método SITNA.Map.exportImage.

      Los valores soportados son "anonymous" y "use-credentials".

    • [mouseWheelZoom] Boolean optional

      Si se establece a true, la rueda del ratón se puede utilizar para hacer zoom en el mapa.

    • [proxy] String optional

      URL del proxy utilizado para peticiones a dominios remotos (ver SITNA.Cfg.proxy).

Métodos



addLayer
(
  • layer
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3012

Añade una capa al mapa. Si se le pasa una instancia de la clase SITNA.cfg.LayerOptions como parámetro layer y tiene definida la propiedad SITNA.cfg.LayerOptions.url, establece por defecto el tipo de capa a KML si la URL acaba en ".kml".

El tipo de la capa no puede ser WFS.

Puede consultar también online el ejemplo 1 y el ejemplo 2.

Ejemplo 1:

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

Ejemplo 2:

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

Parámetros:



addMarker
(
  • coords
  • [options]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3109

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

Puede consultar también online el ejemplo 1, el ejemplo 2, el ejemplo 3 y el ejemplo 4.

Ejemplo 1:

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

Ejemplo 2:

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

Ejemplo 3:

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

Ejemplo 4:

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

Parámetros:

  • coords Array

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

  • [options] Object optional

    Objeto de opciones de marcador.

    • [group] String optional

      Nombre de grupo en el que incluir el marcador. Estos grupos se muestran en la tabla de contenidos y en la leyenda.

      Todos los marcadores pertenecientes al mismo grupo tienen el mismo icono. Los iconos se asignan automáticamente, rotando por la lista disponible en SITNA.cfg.MarkerStyleOptions.classes.

    • [cssClass] String optional

      Nombre de clase CSS. El marcador adoptará como icono el valor del atributo background-image de dicha clase.

    • [url] String optional

      URL de archivo de imagen que será el icono del marcador.

    • [width] Number optional

      Anchura en píxeles del icono del marcador.

    • [height] Number optional

      Altura en píxeles del icono del marcador.

    • [anchor] Array optional

      Coordenadas proporcionales (entre 0 y 1) del punto de anclaje del icono al punto del mapa. La coordenada (0, 0) es la esquina superior izquierda del icono.

    • [data] Object optional

      Objeto de datos en pares clave/valor para mostrar cuando se pulsa sobre el marcador. Si un valor es una URL, se mostrará como un enlace.

    • [showPopup] Boolean optional

      Si se establece a true, al añadirse el marcador al mapa se muestra con el bocadillo de información asociada visible por defecto.

    • [layer] String optional

      Identificador de capa de tipo SITNA.consts.LayerType.VECTOR en la que se añadirá el marcador. Si no se especifica se creará una capa específica para marcadores.



exportImage () String

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:4119

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

Puede consultar también el ejemplo online.

Ejemplo:

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

Returns:

String:

Imagen en un data URI.



getCommonwealths
(
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3556

Obtiene los valores (id y label) de las mancomunidades de residuos disponibles en la capa de IDENA.

Puede consultar también online el ejemplo 1.

Ejemplo:

 <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) {
       $.each(data, function (key, value) {
         $('#commonwealths').append($("<option></option>")
           .attr("value", value.id)
           .text(value.label));
         });
       });
     });
   // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
   function applyFilter() {
     var id = $('#commonwealths').find('option:selected').val();
     if (id == -1)
       map.removeSearch();
     else {
       map.searchCommonwealth(id, function (idQuery) {
         if (idQuery == null)
           alert('No se han encontrado resultados');
       });
     }
   };
</script>

Parámetros:

  • [callback] Function optional

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



getCouncils
(
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3607

Obtiene los valores (id y label) de los concejos disponibles en la capa de IDENA.

Puede consultar también online el ejemplo 1.

Ejemplo:

 <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) {
       $.each(data, function (key, value) {
         $('#council').append($("<option></option>")
           .attr("value", value.id)
           .text(value.label));
         });
       });
     });
   // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
   function applyFilter() {
     var id = $('#council').find('option:selected').val();
     if (id == -1)
       map.removeSearch();
     else {
       map.searchCouncil(id, function (idQuery) {
         if (idQuery == null)
           alert('No se han encontrado resultados');
       });
     }
   };
</script>

Parámetros:

  • [callback] Function optional

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



getMunicipalities
(
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3454

Obtiene los valores (id y label) de los municipios disponibles en la capa de IDENA.

Puede consultar también online el ejemplo 1.

Ejemplo:

  <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) {
        $.each(data, function (key, value) {
          $('#municipality').append($("<option></option>")
            .attr("value", value.id)
            .text(value.label));
          });
        });
      });
    // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
    function applyFilter() {
      var id = $('#municipality').find('option:selected').val();
      if (id == -1)
        map.removeSearch();
      else {
        map.searchMunicipality(id, function (idQuery) {
          if (idQuery == null)
            alert('No se han encontrado resultados');
        });
      }
    };
 </script>

Parámetros:

  • [callback] Function optional

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



getUrbanAreas
(
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3505

Obtiene los valores (id y label) de los cascos urbanos disponibles en la capa de IDENA.

Puede consultar también online el ejemplo 1.

Ejemplo:

  <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) {
       $.each(data, function (key, value) {
         $('#urban').append($("<option></option>")
            .attr("value", value.id)
            .text(value.label));
         });
       });
     });
   // Establecer como filtro del mapa el valor seleccionado del desplegable que lance el evento change
   function applyFilter() {
     var id = $('#urban').find('option:selected').val();
     if (id == -1)
       map.removeSearch();
     else {
       map.searchUrbanArea(id, function (idQuery) {
         if (idQuery == null)
           alert('No se han encontrado resultados');
       });
     }
   };
  </script>

Parámetros:

  • [callback] Function optional

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



loaded
(
  • callback
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3285

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

Ejemplo:

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

Parámetros:

  • callback Function

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



removeSearch
(
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:4048

Elimina del mapa la entidad geográfica encontrada.

Puede consultar también online el ejemplo 1.

Ejemplo:

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

Parámetros:

  • [callback] Function optional

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



searchCommonwealth
(
  • id
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3658

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

Puede consultar también online el ejemplo 1.

Ejemplo:

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

Parámetros:

  • id String

    Identificador de la entidad geográfica a pintar.

  • [callback] Function optional

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



searchCouncil
(
  • id
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3696

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

Puede consultar también online el ejemplo 1.

Ejemplo:

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

Parámetros:

  • id String

    Identificador de la entidad geográfica a pintar.

  • [callback] Function optional

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



searchFeature
(
  • layer
  • field
  • id
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3896

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

Puede consultar también online el ejemplo 1.

Ejemplo:

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

Parámetros:

  • layer String

    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] Function optional

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



searchMunicipality
(
  • id
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3769

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

Puede consultar también online el ejemplo 1.

Ejemplo:

     <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.searchCouncil("27", function (idQuery) {
          if (idQuery == null) {
            alert("No se ha encontrado el municipio con código 27.");
          }
         });
      };
     </script>

Parámetros:

  • id String

    Identificador de la entidad geográfica a pintar.

  • [callback] Function optional

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



searchUrbanArea
(
  • id
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3733

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

Puede consultar también online el ejemplo 1.

Ejemplo:

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

Parámetros:

  • id String

    Identificador de la entidad geográfica a pintar.

  • [callback] Function optional

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



setBaseLayer
(
  • layer
  • [callback]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3062

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

Puede consultar también online el ejemplo 1 y el ejemplo 2.

Ejemplo 1:

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

Ejemplo 2:

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

Parámetros:

  • layer String | SITNA.cfg.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.



zoomToMarkers
(
  • [options]
)
async

Proporcionado por el módulo 2.3. Objeto de configuración global.

Se define en sitna.js:3234

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

Puede consultar también el ejemplo online.

Ejemplo:

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

Parámetros:

  • [options] Object optional

    Objeto de opciones de zoom.

    • [pointBoundsRadius=30] Number optional

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

    • [extentMargin=0.2] Number optional

      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.

No hay métodos que cumplan la configuración actual de filtro. Puede cambiar la configuración de filtro en la sección "Índice" de esta página. índice