Cómo empezar

La API de GeoEuskadi es un conjunto de scripts que ofrecen diferentes funcionalidades de interacción con un mapa.

Incluir la API de Geoeuskadi en una página es sencillo, aún así, requiere que el usuario tenga unos conocimientos básicos de HTML y Javascript. Para facilitar el proceso incial hemos elaborado una guía paso a paso.

Añadir el script de la API a nuestra página

El primer paso sería incluir la referencia al script de la API ubicado en los servidores de GeoEuskadi. Para ello usaremos la etiqueta script de HTML. Colocaremos dicha etiqueta dentro de la etiqueta body al final de la misma.

Copiar

<script type="text/javascript" src="https://www.geo.euskadi.eus/bisorea/v4/API/ApiGeoEuskadi.js"></script>

Crear contenedor del mapa

El siguiente paso sería crear una capa HTML ( div ) con un identificador. Colocaremos esa capa en la parte de nuestra página que necesitemos, asignándole el tamaño que queramos para visualizar el mismo.

Copiar

<div id="mi_mapa" style="width: 640px;height:500px" ></div>

Cargar funcionalidades de la API

Para empezar a usar las funciones primero debemos, usando javascript, cargar las funcionalidades. Para ello la API dispone de una función: loadAPIGeoEuskadi. Esta función recibe un objeto en el que le pasaremos la configuración inicial. Pasamos a listar los parámetros que podemos configurar de inicio:

Nombre parámetro	Descripción	Tipo
divMapa	El identificador de la capa (div) que se ha creado para contener el mapa	String
showwidgets	Booleano que determina si se van a cargar, o no, todos los widgets del visor de GeoEuskadi por defecto.	Boolean
capaBase	La capa base con la que se iniciará el visor. Los valores aceptados son: 'MapaGris', 'Ortofoto-cartografia', 'Ortofoto-hibrido', 'Ortofoto-orto' y 'Topografico'	String
extensionInicial	Objeto que establece la zona sobre la que se centrará el mapa. Se trata de un objeto que establece un rectángulo de coordenadas.	Object

Mostramos a continuación un ejemplo de llamada a dicha función al que establecemos la id de la capa, sin widgets, 'MapaGris' como base y una extensión inicial

Copiar

loadAPIGeoEuskadi(
  {
    divMapa: 'mi_mapa', 
    showwidgets: false, 
    capaBase: 'MapaGris', 
    extensionInicial: 
    { 
      "xmax": 501594.2450753844, 
      "xmin": 501142.81374451244, 
      "ymax": 4796320.292256179, 
      "ymin": 4795914.069863429, 
      "wkid": 25830
    }
  })

Uso de las funcionalidades

Con la función loadAPIGeoEuskadi hemos cargado y configurado nuestro mapa con unos parámetros básicos. A partir de esa llamada podemos empezar a hacer uso de las funciones. loadAPIGeoEuskadi hace una carga asíncrona de todos los scripts necesarios para el visor y nos devuelve una Promise (Promesa) de javascript. Dentro de la cuál podremos ya hacer uso de la API cómo se muestra en el siguiente código:

Copiar

loadAPIGeoEuskadi({divMapa: 'mi_mapa', showwidgets: false, capaBase: 'MapaGris', }).then(function(geoEuskadiAPI)
{
  //Respuesta de la promesa
  //Hacer uso de los métodos de la API a través del objeto 'geoEuskadiAPI'
  var urlKml = "https://www.geo.euskadi.eus/bisorea/legend/Educacion/Centros%20Educativos/centros-educativos.kml";
  geoEuskadiAPI.api.layers.addKMLLayer("KMLCentros", urlKml})
})

Aquí mostramos un código de un HTML completo que aglutina el código anteriormente mencionado:

Copiar

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejemplo</title>
</head>
<body>
    <div id="mi_mapa" style="width: 640px;height:500px" ></div>
  
  <script type="text/javascript" src="https://www.geo.euskadi.eus/bisorea/v4/API/ApiGeoEuskadi.js"></script>
    <script type="text/javascript">

        // Funcion de arranque de la aplicacion
        function loadApp() {
            loadAPIGeoEuskadi(
            {
              divMapa: 'mi_mapa', 
              showwidgets: false, 
              capaBase: 'MapaGris', 
              extensionInicial: 
              { 
                "xmin": 470491.9115040103, 
                "ymin": 4726457.403240426, 
                "xmax": 613002.3933885915, 
                "ymax": 4816436.186627009, 
                "wkid": 25830
              }
            }).then(function(geoEuskadiAPI)
            {
              //Respuesta de la promesa
              //Hacer uso de los métodos de la API a través del objeto 'geoEuskadiAPI'
              geoEuskadiAPI.api.layers.addKMLLayer(
                "Hoteles", 
                "https://www.geo.euskadi.eus/bisorea/v3/demos/ficheros_datos/hoteles.kml"
              );
            })
        }
        loadApp();
    </script>
</body>

</html>

Como resultado obtendríamos en nuestra página un mapa cómo el siguiente

Ahora que sabemos cómo incluir la API en nuestra página puedes consultar las funcionalidades que te ofrece aquí para añadir contenidos y funcionalidades al mapa.

Nola Hasi

GeoEuskadi API-a maparekin komunikatzeko script multzo bat da

API-a txertatzea oso erraza da baina, hala ere, javascript eta HTML ezagutza minimo bat behar da burutzeko. Lehenengo pausuak errazteko gida hau eratu da.

API-aren scripta gure web-orrian txertatu

Lehenengo pausua Geoeuskadi zerbitzarietan kokatuta dagoen scripta gehitzea da. Scriptaren erreferentzia body etiketaren barneko azken lerroetan kokatu behar da.

Kopiatu

<script type="text/javascript" src="https://www.geo.euskadi.eus/bisorea/v4/API/ApiGeoEuskadi.js"></script>

Maparen edukiontzia sortu

Hurrengo pausua identifikadorea duen HTML geruza bat (div) sortzea izango da. Geruza hau behar dugun lekuan kokatuko dugu gure web-orriaren barruan eta behar dugun tamaina esleituko diogu.

Kopiatu

<div id="mi_mapa" style="width: 640px;height:500px" ></div>

API-aren funtzionalitateak kargatu

Funtzioak erabiltzen hasteko javascript bidez API-aren modulua kargatu behar dugu. Horretarako funtzio bat daukagu eskuragarri: loadAPIGeoEuskadi. Funtzio hau konfigurazio objektu bat jasotzen du parametro gisa. Objektu honen barneko atributuak hurrengoak dira:

Parametro izena	Deskribapena	Mota
divMapa	Mapa edukiko duen geruzaren (div) identifikadorea.	String
showwidgets	Geoeuskadi bisorearen widget guztiak kargatuko diren edo ez zehazten duen balore boolearra.	Boolean
capaBase	Bisorea hasieratzean kargatuko den oinarri-geruza. Balore posibleak: 'MapaGris', 'Ortofoto-cartografia', 'Ortofoto-hibrido', 'Ortofoto-orto' eta 'Topografico'	String
extensionInicial	Mapan hasiera batetan erakutsiko den zonaldea zehazten du. Objektu hau zoom egiteko koordenatuen laukizuzen bat adierazten du.	Object

Orain funtzioaren deitze adibide bat ipiniko da. Bertan mapa kargatzen da, html geruzaren id-a adieraziz, 'MapaGris' oinarri geruzarekin, widget barik eta hasiera estentsio batekin:

Kopiatu

loadAPIGeoEuskadi(
  {
    divMapa: 'mi_mapa', 
    showwidgets: false, 
    capaBase: 'MapaGris', 
    extensionInicial: 
    { 
      "xmax": 501594.2450753844, 
      "xmin": 501142.81374451244, 
      "ymax": 4796320.292256179, 
      "ymin": 4795914.069863429, 
      "wkid": 25830
    }
  })

Funtzionalitateen erabilera

loadAPIGeoEuskadi funtzioarekin mapa kargatu da oinarrizko konfigurazio batekin. Funtzio honen bitartez API-aren metodo guztiak erabiltzen hasi gaitezke. loadAPIGeoEuskadi beste script multzo batzuen karga asinkronoa egin eta javascript promes (Promise) bat bueltatzen du. Promes honen barruan funtzio guztiak eskuragarri daude. Honen adibide kode bat:

Kopiatu

loadAPIGeoEuskadi({divMapa: 'mi_mapa', showwidgets: false, capaBase: 'MapaGris', }).then(function(geoEuskadiAPI)
{
  //Promesaren erantzuna
  //API-aren metodoak erabili 'geoEuskadiAPI' objektuaren bidez
  var urlKml = "https://www.geo.euskadi.eus/bisorea/legend/Educacion/Centros%20Educativos/centros-educativos.kml";
  geoEuskadiAPI.api.layers.addKMLLayer("KMLCentros", urlKml})
})

Azkenik kode guztia bateratzen duen adibide bat eraiki da:

Kopiatu

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Adibidea</title>
</head>
<body>
    <div id="mi_mapa" style="width: 640px;height:500px" ></div>
  
  <script type="text/javascript" src="https://www.geo.euskadi.eus/bisorea/v4/API/ApiGeoEuskadi.js"></script>
    <script type="text/javascript">

        //Aplikazio hasiera funtzioa
        function loadApp() {
            loadAPIGeoEuskadi(
            {
              divMapa: 'mi_mapa', 
              showwidgets: false, 
              capaBase: 'MapaGris', 
              extensionInicial: 
              { 
                "xmin": 470491.9115040103, 
                "ymin": 4726457.403240426, 
                "xmax": 613002.3933885915, 
                "ymax": 4816436.186627009, 
                "wkid": 25830
              }
            }).then(function(geoEuskadiAPI)
            {
              //Promesaren erantzuna
              //API-aren metodoak erabili 'geoEuskadiAPI' objektuaren bidez
              geoEuskadiAPI.api.layers.addKMLLayer(
                "Hoteles", 
                "https://www.geo.euskadi.eus/bisorea/v3/demos/ficheros_datos/hoteles.kml"
              );
            })
        }
        loadApp();
    </script>
</body>

</html>

Kode honen emaitza hurrengo mapa gure web-orrian kargatzea izango da:

Behin API-a gure proiektuan kargatzen ikasita, eskaintzen dituen funtzionalitateak kontsulta dezakezu hemen