Cómo empezar

Para poder usar los Componentes Web de GeoEuskadi debemos incluir en nuestra página el script correspondiente. Para ello bastará con agregar la siguiente líne a de código a nuestra página:

Copiar

<script type="text/javascript" 
  src="https://www.geo.euskadi.eus/bisorea/web-component/config/geoEuskadi.js">
</script>

Una vez incluido este script podremos hacer uso de las etiquetas especificas de GeoEuskadi para configurar una aplicación a nuestro gusto. Listamos las etiquetas principales con su descripción, para más detalles acceda a través del menú a las páginas de referencia de cada una de las etiquetas:

Etiqueta	Descripción
geoeuskadi-map	Etiqueta básica que genera un mapa, será la etiqueta que contenga al resto de las etiquetas.
geoeuskadi-header	Etiqueta que configura y personaliza la cabecera de la aplicación.
geoeuskadi-widget	Etiqueta que habilita y configura las herramientas (widgets) de las que dispone el visor de GeoEuskadi tales cómo la medición o el dibujado.
geoeuskadi-baselayer	Etiqueta que nos permite cargar y configurar capas base como fondo en nuestro mapa.
geoeuskadi-layer	Etiqueta que nos permite cargar y configurar capas con información visual a nuestro mapa.

Cómo ejemplo mostraremos un código en el que cargamos un mapa, personalizamos su cabecera, mostramos el widget de medición y cargamos una capa:

Copiar

<geoeuskadi-map class="mapa_component" id="Mi-Mapa" lang="ES" width="900px" height="600px" > 
  <geoeuskadi-header
    name="Mi visor"
    name_eu="Nire bisorea"
    logo="http://www.ingurumena.ejgv.euskadi.eus/appcont/udalplan/img/udalplanGE.png"
    logo_url="http://www.ingurumena.ejgv.euskadi.eus/r49-udalplan/es/aa33aWAR/interfacesJSP/index.jsp">
  </geoeuskadi-header>
  <geoeuskadi-widgets mode="only">
    <geoeuskadi-widget id="Measure" toolbar></geoeuskadi-widget>
	<geoeuskadi-widget id="CapasBase"></geoeuskadi-widget>
  </geoeuskadi-widgets>
  <geoeuskadi-baselayers mode="only">
		<geoeuskadi-baselayer id="Ortofoto-cartografia" maxzoom="21" ></geoeuskadi-baselayer>
		<geoeuskadi-baselayer id="MapaGris" maxZoom=21 isbase></geoeuskadi-baselayer>
		<geoeuskadi-baselayer id="MapaNocturno" maxZoom=21 ></geoeuskadi-baselayer>
	</geoeuskadi-baselayers>
  <geoeuskadi-layers mode='only'>
    <geoeuskadi-layer id='KARTOGRAFIA_CAS_5221_1' checked></geoeuskadi-layer>
  </geoeuskadi-layers>
</geoeuskadi-map>

El mapa que se genera ocupa por defecto el total del ancho y el alto de la página aunque se puede configurar para ocupar menos. Además inhabilita las interacciones con la página tales como el scroll.

Por lo tanto para aquellas páginas que consten únicamente de un mapa a pantalla completa bastará con añadir el script y utilizar las etiquetas como se ha mencionado anteriormente.

Sí, en cambio, deseamos utilizar el visor de GeoEuskadi a través de sus componentes web y embeberlo en una página junto con otros contenidos deberemos proceder de otra manera.

Primero deberemos definir un fichero HTML que únicamente contenga el mapa con las etiquetas GeoEuskadi que deseemos. Por ejemplo en nuestro caso hemos definido la página ejemplo_base.html en el que cargaremos el código de ejemplo mostrado más arriba. Puedes ver la página aquí

A continuación en nuestra página, aquella que contendrá el visor embebido, definiremos una etiqueta <iframe> con el tamaño deseado y que apunte al HTML definido en el paso anterior.

Copiar

<iframe width="900px" height="600px" src="ejemplo_base.html"></iframe>

Como resultado obtendremos un visor embebido en nuestra página cómo el siguiente:

Con lo visto hasta ahora tenemos los conocimientos básicos para incluir los componentes web en nuestra página. A partir de aquí visita las páginas de referencia para aprender sobre las posibilidades que ofrecen los componentes web de GeoEuskadi.

Nola hasi

Web-konponenteak erabiltzeko aski da gure web-orrian dagokion script-a gehitzea kode honen bidez:

Kopiatu

<script type="text/javascript" 
  src="https://www.geo.euskadi.eus/bisorea/web-component/config/geoEuskadi.js">
</script>

Behin script-a gehituta geoeuskadi-ren etiketa espezifikoak erabiltzen has gaitezke gure beharrak betetzeko. Eskuragarri dauden etiketak listaratuko ditugu, xehetasun gehiagotarako erabili menua erreferentzia orrietara joateko.

Etiketa	Deskribapena
geoeuskadi-map	Mapa sortzen duen oinarrizko etiketa, beste guztien edukiontzia izango da.
geoeuskadi-header	Aplikazioaren goiburua konfiguratu eta pertsonalizatzen duen web-konponentea
geoeuskadi-widget	GeoEuskadi bisorearen tresnak gaitu eta konfiguratzen dituen web-konponentea, haien artean neurketa eta marrazketa, adibidez
geoeuskadi-baselayer	Bisorearen mapan oinarri geruzak kargatzea ahalbidetzen duen etiketa.
geoeuskadi-layer	Mapan gehitzen diren geruzen karga eta konfigurazioa ahalbidetzen dizkigun etiketa

Adibide gisa geruza bat kargatu, goiburua aldatu eta neurketa tresna kargatzen duen kodea eraiki da:

Copiar

<geoeuskadi-map class="mapa_component" id="Mi-Mapa" lang="ES" width="900px" height="600px" > 
  <geoeuskadi-header
    name="Mi visor"
    name_eu="Nire bisorea"
    logo="http://www.ingurumena.ejgv.euskadi.eus/appcont/udalplan/img/udalplanGE.png"
    logo_url="http://www.ingurumena.ejgv.euskadi.eus/r49-udalplan/es/aa33aWAR/interfacesJSP/index.jsp">
  </geoeuskadi-header>
  <geoeuskadi-widgets mode="only">
    <geoeuskadi-widget id="Measure" toolbar></geoeuskadi-widget>
  </geoeuskadi-widgets>
  <geoeuskadi-baselayers mode="only">
		<geoeuskadi-baselayer id="Ortofoto-cartografia" maxzoom="21" ></geoeuskadi-baselayer>
		<geoeuskadi-baselayer id="MapaGris" maxZoom=21 isbase></geoeuskadi-baselayer>
		<geoeuskadi-baselayer id="MapaNocturno" maxZoom=21 ></geoeuskadi-baselayer>
	</geoeuskadi-baselayers>
  <geoeuskadi-layers mode='only'>
    <geoeuskadi-layer id='KARTOGRAFIA_CAS_5221_1' checked></geoeuskadi-layer>
  </geoeuskadi-layers>
</geoeuskadi-map>

Sortzen den mapa, besterik adierazi ezean, zabalera eta altuera guztia beteko du, halere, gutxiago betetzeko konfigura daiteke. Horretaz gain web-orriaren interakzio batzuk ezgaitzen ditu, adibidez, 'scroll' egitea.

Beraz web-konponenteak txertatzen duten aplikazioetan mapa pantaila osoan erakusten bada egin dugunarekin nahikoa izango da.

Baina web-konponente bisorea, beste elementuak dituen web-orri batetan txertatzen bada elementu bat bezala, beste modu batetan lan egin behar dugu.

Lehenengoz, HTML bat sortu behar dugu, bertan nahi ditugun geoeuskadi etiketak sartuz. Adibidez, gure kasuan, fitxategi bat sortu dugu goiko kodearekin (ejemplo_base.html). Adibidea hemen daukazu eskuragarri.

Gero, gure web-orrian (bisorea txertatuko duena) <iframe> etiketa bat sartu behar dugu, adibide html-a seinalatu eta behar den tamaina emanez.

Kopiatu

<iframe width="900px" height="600px" src="ejemplo_base.html?lang=eu"></iframe>

Iframe-arekin lortuko dugun txertatutako bisorea honelakoa izango da:

Honekin web-konponenteak erabiltzen hasteko ezagutzak dauzkagu, hemendik aurrera GeoEuskadi-ko konponenteen gaitasunak eta posibilitateei buruz jakiteko joan zaitez hain erreferentzia orrietara.