capa_geojson


La opción capa_geojson permite definir un array de archivos locales o de servidores externos que contienen las capas geográficas a visualizar.

Los datos geográficos deberán estar expresados en formato GeoJSON.

Si el fichero GeoJSON es conforme con el formato GeoJSON CSS definido por OpenStreetMap, se utilizará por defecto la simbolización que venga definida en el fichero de datos para cada uno de sus elementos. En el caso de que se especifiquen propiedades de estilo y/o icono, estas modificarán a las contenidas en el fichero GeoJSON CSS.


Notas:

(1) Para datos que pudieran mapearse desde una carpeta 'Public' de Dropbox, se informa según lo anunciado por esta compañía, que a partir del 15 de marzo de 2017 la carpeta Public se convertirá automáticamente en una carpeta estándar.


Propiedades


En esta opción además de las propiedades nombre y url, es posible configurar la representación de los elementos geográficos mediante un conjunto de parámetros de estilo.

Propiedad Parámetro Tipo V.defecto Descripción
nombre texto (nulo) Nombre de la capa geográfica.
url texto (nulo) (Obligatorio) URL absoluta o relativa en la que se ubica el fichero GeoJSON.
estilo Representación gráfica de polilíneas y polígonos
stroke booleano 'true' Expresa si se quiere dibujar el trazado exterior (contorno) de un elemento gráfico.
Configurar como 'false' si se quiere prescindir de los bordes en la representación de polígonos o círculos.
color texto '#ff7800' Color del trazo expresado en formato hexadecimal RGB #rrggbb.
Se puede expresar también mediante su nombre (lista de colores).
weight entero 2 Anchura del trazo expresada en píxeles.
opacity número 0.5 Opacidad del trazo.
Rango de valores: de 0.0 (totalmente transparente) hasta 1.0 (totalmente opaco).
lineCap texto 'round' Texto que define la forma que se utilizará para rematar el trazo.
Valores posibles: 'butt', 'round', 'square'.
lineJoin texto 'round' Texto que define la forma que se utilizará para rematar la esquina de un trazo.
Valores posibles: 'miter', 'round', 'bevel'.
dashArray texto (nulo) Cadena de texto que define el patrón de dibujo del trazo.
Se expresa mediante una lista de valores separada por comas o espacios en blanco, indicando estos la longitud o porcentajes de los trazados alternativos de líneas y huecos. Si se usa un porcentaje, este representa una distancia como un porcentaje con respecto a la ventana de visualización actual.
Los valores negativos son erróneos. Si la suma de los valores es cero, el trazo se renderizará como si se hubiera especificado el valor nulo.
Si se indica un número impar de valores, se repite la lista hasta alcanzar un número par de valores. Por ejemplo '1,3,2' es equivalente a '1,3,2,1,3,2'.
dashOffset texto (nulo) Texto que expresa la distancia en longitud o porcentaje entre el comienzo del trazo y la representación del trazado. Si se usa un porcentaje, este representa una distancia como un porcentaje con respecto a la ventana de visualización actual.
fill booleano 'true' Esta variable define si se procede a colorear el interior de las formas gráficas.
El área a colorear es cualquier conjunto de áreas dentro del contorno de la forma, considerando el contorno como la línea perimetral de ancho cero.
Para determinar el interior del elemento se tendrán en cuenta todas las subformas conforme a las reglas establecidas en la variable fillRule.
El valor 'true' activa el coloreado de las formas gráficas, en tanto que el valor 'false' deshabilita su coloreado.
fillColor texto (color) Color de relleno expresado en formato hexadecimal RGB #rrggbb.
Se puede expresar también mediante su nombre (lista de colores).
El valor por defecto es el correspondiente al parámetro color.
fillOpacity número 0.2 Opacidad del relleno.
Rango de valores: de 0.0 (totalmente transparente) hasta 1.0 (totalmente opaco).
fillRule texto 'evenodd' Texto que define de qué manera se determina el interior de una forma gráfica.
Valores posibles: 'nonzero', 'evenodd'
icono Representación gráfica de marcas e iconos
iconUrl texto Símbolo por defecto URL absoluta o relativa en la que se ubica la imagen del icono.
iconRetinaUrl texto Símbolo por defecto URL absoluta o relativa en la que se ubica la imagen del icono, configurada para su uso en dispositivos que soportan el estándar "retina".
iconSize [x, y] [25,41] Tamaño de la imagen del icono (expresado en píxeles).
iconAnchor [x, y] [12,41] Coordenadas del "anclaje" del icono (relativas a su esquina superior-izquierda).
El icono se alineará con objeto de que este punto sea la ubicación geográfica del marcador.
Si se ha especificado el tamaño (iconSize), el valor utilizado por defecto es centrado.
popupAnchor [x, y] [1,-34] Coordenadas del punto en las que se abrirá la ventana emergente, respecto al punto de anclaje del icono.
shadowUrl texto Símbolo por defecto URL del icono de sombreado.
Si no se especifica, no se utilizará sombreado.
shadowRetinaUrl texto (nulo) URL de la imagen "retina" utilizada para el sombreado del icono. Si no se especifica, no se utilizará sombreado.
shadowSize [x, y] (nulo) Tamaño de la imagen de sombreado (expresado en píxeles).
shadowAnchor [x, y] (nulo) Coordenadas del "anclaje" del sombreado (relativas a su esquina superior-izquierda).
Si no se especifica se utilizará el valor iconAnchor.


Código de ejemplo 1


El siguiente ejemplo muestra la configuración para una capa GeoJSON que contiene los datos geográficos de los Departamentos de Francia, que se encuentra almacenada en un repositorio GitHub.

<!DOCTYPE html>
<html>
  <head lang="es">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Ejemplo de configuración capa_geojson</title>
    <style>
      body, html{
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
      }
      #map{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script>
    var iderioja_config = {
      "capa_geojson": [
        {"nombre": "Departamentos de Francia",
         "url": "https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements.geojson",
          "estilo": {
            "color": "#ff0000",
            "weight": 1,
            "opacity": 0.3
          }
        }
      ]
    }
  </script>
  <script src="https://apigeo.larioja.org/v1/iderioja.js"></script>
</html>


Salida gráfica


En este caso, la visualización de los polígonos de los departamentos de Francia se ha personalizado definiendo su color, grosor de línea y transparencia. (visualizar ejemplo)

Ejemplo opción capa_geojson


Código de ejemplo 2


El siguiente ejemplo muestra la configuración para la representación de dos capas GeoJSON CSS: Medios contra incendios forestales y Parque Natural Sierra de Cebollera (La Rioja).

<!DOCTYPE html>
<html>
  <head lang="es">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Ejemplo de configuración capa_geojson_css</title>
    <style>
      body, html{
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
      }
      #map{
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script>
    var iderioja_config = {
      "capa_geojson": [
        {"nombre": "Medios contra incendios forestales",
         "url": "https://raw.githubusercontent.com/iderioja/doc_api_iderioja/master/datos_ejemplo/medios_lucha_contra_incendios_forestales.geojson"
         // GeoJSON CSS incluye simbología
        },
        {"nombre": "Parque Natural Sierra de Cebollera",
         "url": "https://raw.githubusercontent.com/iderioja/doc_api_iderioja/master/datos_ejemplo/parque_natural_sierra_de_Cebollera.json"
         // GeoJSON CSS incluye simbología
        }
      ]
    }
  </script>
  <script src="https://apigeo.larioja.org/v1/iderioja.js"></script>
</html>


Salida gráfica


Por tratarse ambas capas de ficheros GeoJSON CSS, estas se representan según la simbología que se encuentra definida en los propios ficheros de datos. (visualizar ejemplo)

Ejemplo opción capa_geojson