idera.jquery

Cómo listar los servicios de IDERA en tu sitio

Vamos con el paso a paso para incluir una tabla con el listado de capas de uno de los servicios WMS de IDERA en tu web.

Importante: Si en tu sitio ya usás jQuery (versión mayor a 1.7.2) y Google Maps API (v3), podés empezar desde el paso 2.

Objetivo

Mostrar una tabla con las capas publicadas por uno de los servicios WMS. En este ejemplo vamos a usar el servicio WMS de la IDE de Santa Fe.

1. Incluí jQuery en tu página

Primero, tenés que incluir el script de jQuery en la sección <head> de tu página. 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

2. Incluí idera.jquery

idera.jquery es una librería para usar online. No hace falta descargarla para que tu mapa ande mejor. De hecho, estamos en constante actualización de versiones y usándola online evitás perder las actualizaciones que hagamos .

<script type="text/javascript" src="http://oskosk.github.io/idera.jquery/idera.jquery.js"></script>

3. Creá un div en tu página en donde quieras incluir la tabla.

idera.jquery necesita un alto definido para el <div>. Así que no te olvides de definir el "height" del div. Podés hacerlo por CSS o por style. 

<div id="tabladecapas" style="height:315px;"></div>

4. Convertí el div en un widget de IDERA

Recordá esperar hasta que cargue el documento

Al igual que con cualquier plugin de jQuery, tenés que esperar que el div que vas a usar como widget ya esté creado antes de usar idera.jquery.

Incluyendo estas líneas entre tu HTML, convertís el div con id="tabladecapas" en un tabla con las capas del servicios WMS de la IDE de Santa Fe.

<script type="text/javascript" >
$(document).ready(function(){
	$("#tabladecapas").idera('idesantafe').tablaDeCapasWMS();
});

</script>

Si querés ver otros widgets de este plugin consultá la API de idera.jquery

Todo junto se ve así

<head>                              
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://oskosk.github.io/idera.jquery/idera.jquery.js"></script>


<script type="text/javascript">
$(document).ready(function(){
$("#tabladecapas").idera('idesantafe').tablaDeCapasWMS();
});
</script>
</head>
<body>                              
<div id="tabladecapas" style="height:315px;"></div>                             
</body>