Commit 7330370ba67bf780971541dd102a5eb7143e00e8

Authored by Edmar Moretti
1 parent 9c4f59c4

Exemplo de guia de camadas com grupos

Showing 2 changed files with 180 additions and 0 deletions   Show diff stats
exemplos/index.html
... ... @@ -34,6 +34,7 @@ body,td
34 34 <p><a href="camadas2.htm" target="_blank" >Legenda expandida</a></p>
35 35 <p><a href="camadas3.htm" target="_blank" >Árvore simplificada</a></p>
36 36 <p><a href="camadas4.htm" target="_blank" >Opção "mais temas" na guia de camadas</a></p>
  37 +<p><a href="legenda2.htm" target="_blank" >Árvore com grupos</a></p>
37 38 <p>Visuais deiferentes</p>
38 39 <p><a href="visual1.htm" target="_blank" >Junho</a></p>
39 40 <p><a href="visual2.htm" target="_blank" >Laranja</a></p>
... ...
exemplos/legenda2.htm 0 → 100644
... ... @@ -0,0 +1,179 @@
  1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 +<html>
  3 +<head>
  4 +<meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile">
  5 +<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  6 +<title>i3Geo - Mapa interativo</title>
  7 +<script type="text/javascript" src="../classesjs/i3geo.js"></script>
  8 + <style>
  9 + .yui-log .i3geo {background-color:yellow;} /* customize a color */
  10 + .yui-log .redesenho {background-color:yellow;} /* customize a color */
  11 + .yui-log .janela {background-color:yellow;} /* customize a color */
  12 + .yui-log-bd {text-align:left;}
  13 + .yui-log-entry yui-log-verbose, p{text-align:left;}
  14 + .info {text-align:left;}
  15 + </style>
  16 +</head>
  17 +<body id="i3geo">
  18 +
  19 +<table id='mst' summary="" style='display:none;' width=100% cellspacing='0'>
  20 +<tr style="border:0px">
  21 + <td colspan=2 id="barraSuperior" style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td>
  22 +</tr>
  23 +<tr>
  24 +<td>
  25 + <table width=100% cellspacing=0 cellpadding=0 >
  26 + <tr>
  27 + <td title="libera guias" class=tdclaro id=encolheFerramentas style="vertical-align:top;width:5px;text-align:left;"></td>
  28 + <td>
  29 + <div class=verdeescuro style="top:0px;cursor:pointer;">
  30 + <div id=guia1 class=guia >Temas</div>
  31 + <div id=guia2 class=guia >Adiciona</div>
  32 + <div id=guia4 class=guia >Legenda</div>
  33 + <div id=guia5 class=guia >Links</div>
  34 + </div>
  35 + </td>
  36 + </tr>
  37 + </table>
  38 +</td>
  39 +<td id="contemMenu" style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
  40 + <div id="menus" ></div>
  41 +</td>
  42 +</tr>
  43 +<tr>
  44 + <td class=tdbranca id=contemFerramentas style="vertical-align:top;width:268px;text-align:left;">
  45 + <div id='guia1obj' >
  46 + <div style='left:5px;top:10px;' id=buscaRapida ></div>
  47 + <div id=listaPropriedades style='top:15px;' ></div>
  48 + <div id=listaTemas style='top:15px;'></div>
  49 + </div>
  50 + <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
  51 + <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
  52 + <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
  53 + </td>
  54 + <td style="vertical-align:top;border-width:0px;">
  55 + <table width="100%" style="vertical-align:top;border-width:0px">
  56 + <tr><td class=verdeclaro id=contemImg >
  57 + <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');"></div>
  58 + </td></tr>
  59 + </table>
  60 + </td>
  61 + </tr>
  62 +<tr>
  63 + <td class=tdbranca >
  64 + <div id=visual ></div>
  65 + <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
  66 + </td>
  67 + <td class=tdbranca >
  68 + <table width=100% ><tr>
  69 + <td class=tdbranca ><div id=lugarquadros ></div></td>
  70 + <td class=tdbranca style=text-align:center >
  71 + <div id=localizarxy >
  72 + Aguarde...
  73 + </div>
  74 + </td>
  75 + <td class=tdbranca ><div id=escala ></div></td>
  76 + <td class=tdbranca ><div id=ondeestou ></div></td>
  77 + </tr>
  78 + <tr><td></td><td class="tdbranca"><div style="text-align:left;font-size:10px;background-color:white;display:none;" id=mostraUTM ></div></td><td></td></tr>
  79 + </table>
  80 + </td>
  81 +</tr>
  82 +<tr style="border:0px"><td colspan=3 id="barraInferior" style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td></tr>
  83 +<tr style="border:0px"><td colspan=3 style=background-color:black ><input style="border:0px none; background-color:black;color:white;font-size:12pt;" type="text" size="1" id="i3geo_letreiro" ></td></tr>
  84 +<tr style="border:0px"><td colspan=3 style=background-color:black;color:white >geoprocessamento@mma.gov.br</td></tr>
  85 +
  86 +</table>
  87 +</center>
  88 +<div id=barraDeBotoes1 style='display:none'>
  89 + <table style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><div ID='historicozoom' ></div></td></tr><tr><td style=height:5px ></td></tr></table>
  90 + <table title="zoom" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="zoom" alt="" src="../imagens/branco.gif" id='zoomli'/></td></tr></table>
  91 + <table title="desloca" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="desloca" alt="" src="../imagens/branco.gif" ID='pan'/></td></tr></table>
  92 + <table title="info" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="info" alt="" src="../imagens/branco.gif" id='identifica'/></td></tr></table>
  93 + <table title="geral" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="geral" alt="" src="../imagens/branco.gif" ID='zoomtot'/></td></tr></table>
  94 + <table title="mede" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="mede" alt="" src="../imagens/branco.gif" id='mede'/></td></tr></table>
  95 + <table title="area" style="width:100%"><caption style="text-align:center">&nbsp;</caption><tr><td style='background-color:rgb(250,250,250);'><img title="area" alt="" src="../imagens/branco.gif" id='area'/></td></tr></table>
  96 +</div>
  97 +<div id=barraDeBotoes2 style='display:none'>
  98 + <table style="width:100%"><caption style="text-align:center">&nbsp;</caption>
  99 + <tr><td style='background-color:rgb(250,250,250);'><img title="" alt="" src="../imagens/branco.gif" id='sobeferramentas'/></td></tr>
  100 + </table>
  101 + <div style='display:inline;background-color:rgb(250,250,250);'>
  102 + <p style='font-size:6px;'>&nbsp;</p>
  103 + <img title="imprimir" alt="" src="../imagens/branco.gif" id='imprimir'/>
  104 + </div>
  105 +
  106 + <div style='display:inline;background-color:rgb(250,250,250);'>
  107 + <p style='font-size:6px;'>&nbsp;</p>
  108 + <img title="reinicia" alt="" src="../imagens/branco.gif" id='reinicia'/>
  109 + </div>
  110 +
  111 + <div style='display:inline;background-color:rgb(250,250,250);'>
  112 + <p style='font-size:6px;'>&nbsp;</p>
  113 + <img title="extensao" alt="" src="../imagens/branco.gif" id='exten'/>
  114 + </div>
  115 +
  116 + <div style='display:inline;background-color:rgb(250,250,250);'>
  117 + <p style='font-size:6px;'>&nbsp;</p>
  118 + <img title="referencia" alt="" src="../imagens/branco.gif" id='referencia'/>
  119 + </div>
  120 + <div style='display:inline;background-color:rgb(250,250,250);'>
  121 + <p style='font-size:6px;'>&nbsp;</p>
  122 + <img title="insere xy" alt="" src="../imagens/branco.gif" id='inserexy'/>
  123 + </div>
  124 + <div style='display:inline;background-color:rgb(250,250,250);'>
  125 + <p style='font-size:6px;'>&nbsp;</p>
  126 + <img title="texto" alt="" src="../imagens/branco.gif" id='textofid'/>
  127 + </div>
  128 + <div style='display:inline;background-color:rgb(250,250,250);'>
  129 + <p style='font-size:6px;'>&nbsp;</p>
  130 + <img title="selecao" alt="" src="../imagens/branco.gif" id='selecao'/>
  131 + </div>
  132 + <div style='display:inline;background-color:rgb(250,250,250);'>
  133 + <p style='font-size:6px;'>&nbsp;</p>
  134 + <img title="google" alt="" src="../imagens/branco.gif" id='google'/>
  135 + </div>
  136 + <div style='display:inline;background-color:rgb(250,250,250);'>
  137 + <p style='font-size:6px;'>&nbsp;</p>
  138 + <img title="insere grafico" alt="" src="../imagens/branco.gif" id='inseregrafico'/>
  139 + </div>
  140 + <div style='display:none;background-color:rgb(250,250,250);'>
  141 + <p style='font-size:6px;'>&nbsp;</p>
  142 + <img title="lente" alt="" src="../imagens/branco.gif" id='lentei'/>
  143 + </div>
  144 + <div style='display:none;background-color:rgb(250,250,250);'>
  145 + <p style='font-size:6px;'>&nbsp;</p>
  146 + <img title="scielo" alt="" src="../imagens/branco.gif" id='scielo'/>
  147 + </div>
  148 + <div style='display:none;background-color:rgb(250,250,250);'>
  149 + <p style='font-size:6px;'>&nbsp;</p>
  150 + <img title="confluencias" alt="" src="../imagens/branco.gif" id='confluence'/>
  151 + </div>
  152 + <div style='display:none;background-color:rgb(250,250,250);'>
  153 + <p style='font-size:6px;'>&nbsp;</p>
  154 + <img title="busca na wikipedia" alt="" src="../imagens/branco.gif" id='wiki'/>
  155 + </div>
  156 + <div style='display:none;background-color:rgb(250,250,250);'>
  157 + <p style='font-size:6px;'>&nbsp;</p>
  158 + <img title="3d" alt="" src="../imagens/branco.gif" id='v3d'/>
  159 + </div>
  160 + <div style='display:none;background-color:rgb(250,250,250);'>
  161 + <p style='font-size:6px;'>&nbsp;</p>
  162 + <img title="fotos" alt="" src="../imagens/branco.gif" id='buscafotos'/>
  163 + </div>
  164 + <table style="width:100%;"><tr><td style='background-color:rgb(250,250,250);'><p style='font-size:6px;'>&nbsp;</p><img title="" alt="" src="../imagens/branco.gif" id='desceferramentas'/></td></tr></table>
  165 +</div>
  166 +<script type="text/javascript">
  167 +i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
  168 +i3GEO.configura.templateLegenda = "legendagrupos.htm";
  169 +i3GEO.configura.grupoLayers = [
  170 + {nome:"Grupo 1",layers:["zee","estadosl"]},
  171 + {nome:"Grupo 2",layers:["mundo"]}
  172 + ]
  173 +i3GEO.cria();
  174 +i3GEO.inicia();
  175 +
  176 +
  177 +</script>
  178 +</body>
  179 +</html>
0 180 \ No newline at end of file
... ...