estilo_hover


Se denomina hover (en inglés 'planear') a la función que permite resaltar un elemento geográfico cuando pasa el puntero sobre él.

La opción estilo_hover permite definir los parámetros de simbolización necesarios para realzar la visualización del elemento.

Se define solamente una sola vez, aplicándose a todas las capas geográficas del mapa.


Notas:

En caso de no definir alguno de los parámetrós posibles, se utilizan por defecto los valores que se indican.


Propiedades


Propiedad Parámetro Tipo V.defecto Descripción
estilo_hover Representación gráfica de la función hover
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).
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).


Código de ejemplo


El siguiente ejemplo muestra la configuración de la función hover actuando sobre una capa GeoJSON.

<!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 estilo_hover</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 = {
      "estilo_hover": {
           "color": "red",
           "weight": 2,
      },
      "capa_geojson": [
        {"nombre": "Departamentos de Francia",
         "url": "https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements.geojson",
         "estilo": {
           "color": "darkorange",
           "weight": 1,
           "opacity": 0.3
          }
        }
      ]
    }
  </script>
  <script src="https://apigeo.larioja.org/v1/iderioja.js"></script>
</html>


Salida gráfica


La función hover del ejemplo resalta los elementos que se encuentran por debajo del puntero mediante un borde regruesado de color rojo. (visualizar ejemplo)

Ejemplo opción estilo_hover