Download as
Browse Code »

Commit fc92e6f764a7f18dc944a82fa7caacc793e11344

Authored by Edmar Moretti
1 parent 760e5796
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

#227 

Inclusão de um exemplo de como mostrar as fotos em uma guia
Showing 4 changed files with 297 additions and 1 deletions   Show diff stats
aplicmap/geral.htm
  Diff comments   View file @fc92e6f
... ... @@ -274,7 +274,6 @@ vc pode optar por colocar mensagens de ajuda em algum lugar
274 274 </div>
275 275 <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>
276 276 </div>
277   -
278 277 <!-- Variáveis globais e inicialização do mapa-->
279 278 <script type="text/javascript">
280 279 /*
... ... @@ -334,6 +333,8 @@ i3GEO.idioma.IDSELETOR = &quot;seletorIdiomas&quot;
334 333 i3GEO.interface.ATIVAMENUCONTEXTO = true;
335 334  
336 335 i3GEO.inicia();
  336 +//
  337 +//inclui um tema via javascript
337 338 /*
338 339 var temp = function(){alert("oi");i3GEO.atualiza();}
339 340 i3GEO.php.ligatemas(temp,"","biomashp","sim");
... ...
exemplos/fotos.htm 0 → 100644
  Diff comments   View file @fc92e6f
... ... @@ -0,0 +1,288 @@
  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 +<!--
  8 + Leitura dos programas javaScript e estilos.
  9 + Os códigos do i3geo são compactados para tornar o carregamento mais rápido.
  10 + Se vc alterar os códigos originais, não se esqueça de compactá-los com classesjs/compactajs.php.
  11 + Para depurar o código sem ter de compactá-los, substitua na linha abaixo
  12 + o arquivo i3geo.js por i3geonaocompacto.js
  13 + No modo não compactado o código está adaptado para uso com o Firebug do Firefox.
  14 +-->
  15 +<script type="text/javascript" src="../classesjs/i3geo.js"></script>
  16 + <style>
  17 + .yui-log .i3geo {background-color:yellow;} /* customize a color */
  18 + .yui-log .redesenho {background-color:yellow;} /* customize a color */
  19 + .yui-log .janela {background-color:yellow;} /* customize a color */
  20 + .yui-log-bd {text-align:left;}
  21 + .yui-log-entry yui-log-verbose, p{text-align:left;}
  22 + .info {text-align:left;}
  23 + </style>
  24 +</head>
  25 +<body id="i3geo">
  26 +
  27 +<table id='mst' summary="" style='display:none;' width=100% cellspacing='0' >
  28 +
  29 +<!--
  30 + Inclui a barra superior. Se vc não quiser o menu, é só comentar o TR
  31 +-->
  32 +<tr style="border:0px">
  33 + <td colspan=2 id="barraSuperior" style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td>
  34 +</tr>
  35 +<tr>
  36 +<td>
  37 + <table width=100% cellspacing=0 cellpadding=0 >
  38 + <tr>
  39 + <td title="libera guias" class=tdclaro id=encolheFerramentas style="vertical-align:top;width:5px;text-align:left;"></td>
  40 + <td>
  41 + <!--
  42 + Guias principais, não mude o ID, apenas o nome se for desejado
  43 + -->
  44 +
  45 + <div class=verdeescuro style="top:0px;cursor:pointer;">
  46 + <div id=guia1 class=guia >Temas</div>
  47 + <div id=guia2 class=guia >Adiciona</div>
  48 + <div id=guia4 class=guia >Legenda</div>
  49 + <div id=guia6 class=guia >Fotos</div>
  50 + </div>
  51 + </td>
  52 +
  53 + </tr>
  54 + </table>
  55 +</td>
  56 +<td id="contemMenu" style="text-align:right;height:0px;border-width:0pt 0pt 1px;border-color:rgb(240,240,240)">
  57 + <!--
  58 + menu suspenso
  59 + -->
  60 + <div id="menus" ></div>
  61 +</td>
  62 +</tr>
  63 +<tr>
  64 + <td class=tdbranca id=contemFerramentas style="vertical-align:top;width:268px;text-align:left;">
  65 + <!--
  66 + Esta div acrescenta a lista de propriedades do mapa, caso vc queira colocá-la em um lugar específico
  67 + -->
  68 +
  69 + <!--<div id=listaPropriedades ></div>-->
  70 + <!--
  71 + Esta div acrescenta a opção de busca rápida, caso vc queira colocá-la em um lugar específico
  72 + -->
  73 + <!-- <div id=buscaRapida ></div> -->
  74 + <!--
  75 + As divs guiaNobj guardam o conteúdo que é mostrado quando a guia é clicada
  76 + Para cada botão na guia deve haver um div com o conteúdo, pe.
  77 + o div com id=guia1 deve ter um div com id=guia1obj
  78 + -->
  79 + <div id='guia1obj' >
  80 + <div style='left:5px;top:10px;' id=buscaRapida ></div>
  81 + <div id=listaPropriedades style='top:15px;' ></div>
  82 + <div id=listaTemas style='top:15px;'></div>
  83 + </div>
  84 +
  85 + <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
  86 + <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
  87 + <div id='guia6obj' style='display:none;text-align:left'>
  88 + <div id='listaDeFotos' style='overflow:auto;text-align:left'></div>
  89 + </div>
  90 + </td>
  91 + <td style="vertical-align:top;border-width:0px;">
  92 + <table width="100%" style="vertical-align:top;border-width:0px">
  93 + <tr><td class=verdeclaro id=contemImg >
  94 + <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');"></div>
  95 + </td></tr>
  96 + </table>
  97 + </td>
  98 + </tr>
  99 +<tr>
  100 +
  101 + <td class=tdbranca >
  102 + <!--
  103 + Nesse div são incluídos os ícones que permitem ao usuário modificar o visual de cores dos ícones
  104 + <div id=visual ></div>
  105 + -->
  106 + <!-- aqui serão incluídas as bandeiras que permitem a troca de idioma -->
  107 + <div id="seletorIdiomas" ></div>
  108 + <!-- aqui será incluído o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
  109 + <div id=tempoRedesenho style=color:green;background-color:black;width:50px;display:none ></div>
  110 + </td>
  111 + <td class=tdbranca >
  112 + <table width=100% ><tr>
  113 + <td class=tdbranca ><div id=lugarquadros ></div></td>
  114 + <td class=tdbranca style=text-align:center >
  115 + <!-- aqui será incluído o gadget que mostra a coordenada geográfica da posição do mouse -->
  116 + <div id=localizarxy style="text-align:left;font-size:10px;">Aguarde...</div>
  117 + </td>
  118 + <td class=tdbranca >
  119 + <!-- aqui será incluída a escala numérica -->
  120 + <div id=escala ></div>
  121 + </td>
  122 + <!--
  123 + A opção de localização 'onde estou?' baseia-se na identificação do IP do usuário. Para
  124 + que esta opção funcione corretamente, deve estar instalado no I3Geo o pacote geoIP. Veja no
  125 + SVN do portal do software público o diretório arquivos_versões/pacotes para maiores informações
  126 + -->
  127 + <td class=tdbranca ><div id=ondeestou ></div></td>
  128 + </tr>
  129 + <!-- esta div recebe o cálculo do posicionamento do mouse em coordenadas UTM
  130 + As coordenadas UTM apenas serão mostradas nessa div se o parâmetro
  131 + i3GEO.gadgets.mostraCoordenadasUTM.idhtml for diferente de i3GEO.gadgets.mostraCoordenadasGEO.idhtml
  132 + se os IDs forem iguais, o tipo de coordenada mostrada será intercalada, ora UTM ora GEO.
  133 + <tr><td></td><td class="tdbranca"><div style="text-align:left;font-size:8px;background-color:white;display:none;" id=mostraUTM ></div></td><td></td></tr>
  134 + -->
  135 + </table>
  136 + </td>
  137 +</tr>
  138 +<tr style="border:0px"><td colspan=3 id="barraInferior" style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td></tr>
  139 +<!-- aqui são mostradas imagens obtidas do metadata mensagem que pode existir em cada layer -->
  140 +<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>
  141 +<tr style="border:0px"><td colspan=3 style=background-color:black;color:white >geoprocessamento@mma.gov.br</td></tr>
  142 +</table>
  143 +
  144 +<center>
  145 +<br><br>
  146 +<table>
  147 +<tr>
  148 + <td colspan=3 ><center><img src='../imagens/i3geo1.jpg'></td>
  149 +</tr>
  150 +<tr><td style="padding:10px;"><center><img src='../imagens/pspb.png'></td>
  151 + <td style="padding:10px;"><center><img src='../imagens/mapserv.png'></td>
  152 + <td style="padding:10px;"><center><a href='http://mapas.mma.gov.br/download' target=blank ><img src='../imagens/somerights20_pt.gif' ></a></td>
  153 +</tr>
  154 +<tr>
  155 + <td colspan=3 ><center>
  156 + <script type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script>
  157 + </td>
  158 +</tr>
  159 +</table>
  160 +
  161 +
  162 +<!--
  163 + Barra de botoes que serão incluídos na janela móvel de navegação
  164 + Para excluir um botão é só apagar a linha.
  165 + Para adicionar um botão, é só criar uma linha e especificar a função que será executada quando o usuário clicar no botão
  166 +-->
  167 +<div id=barraDeBotoes1 style='display:none'>
  168 + <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>
  169 + <div style='display:inline;background-color:rgb(250,250,250);'>
  170 + <p style='font-size:4px;'>&nbsp;</p>
  171 + <img title="zoom" alt="" src="../imagens/branco.gif" id='zoomli'/>
  172 + </div>
  173 + <div style='display:inline;background-color:rgb(250,250,250);'>
  174 + <p style='font-size:4px;'>&nbsp;</p>
  175 + <img title="desloca" alt="" src="../imagens/branco.gif" id='pan'/>
  176 + </div>
  177 + <div style='display:inline;background-color:rgb(250,250,250);'>
  178 + <p style='font-size:4px;'>&nbsp;</p>
  179 + <img title="info" alt="" src="../imagens/branco.gif" id='identifica'/>
  180 + </div>
  181 + <div style='display:inline;background-color:rgb(250,250,250);'>
  182 + <p style='font-size:4px;'>&nbsp;</p>
  183 + <img title="geral" alt="" src="../imagens/branco.gif" id='zoomtot'/>
  184 + </div>
  185 +</div>
  186 +<div id=barraDeBotoes2 style='display:none'>
  187 + <table style="width:100%"><caption style="text-align:center">&nbsp;</caption>
  188 + <tr><td style='background-color:rgb(250,250,250);'><img title="" alt="" src="../imagens/branco.gif" id='sobeferramentas'/></td></tr>
  189 + </table>
  190 + <div style='display:inline;background-color:rgb(250,250,250);'>
  191 + <p style='font-size:4px;'>&nbsp;</p>
  192 + <img title="mede" alt="" src="../imagens/branco.gif" id='mede'/>
  193 + </div>
  194 + <div style='display:inline;background-color:rgb(250,250,250);'>
  195 + <p style='font-size:4px;'>&nbsp;</p>
  196 + <img title="area" alt="" src="../imagens/branco.gif" id='area'/>
  197 + </div>
  198 + <div style='display:inline;background-color:rgb(250,250,250);'>
  199 + <p style='font-size:4px;'>&nbsp;</p>
  200 + <img title="imprimir" alt="" src="../imagens/branco.gif" id='imprimir'/>
  201 + </div>
  202 + <div style='display:inline;background-color:rgb(250,250,250);'>
  203 + <p style='font-size:4px;'>&nbsp;</p>
  204 + <img title="reinicia" alt="" src="../imagens/branco.gif" id='reinicia'/>
  205 + </div>
  206 + <div style='display:inline;background-color:rgb(250,250,250);'>
  207 + <p style='font-size:4px;'>&nbsp;</p>
  208 + <img title="extensao" alt="" src="../imagens/branco.gif" id='exten'/>
  209 + </div>
  210 + <div style='display:inline;background-color:rgb(250,250,250);'>
  211 + <p style='font-size:4px;'>&nbsp;</p>
  212 + <img title="referencia" alt="" src="../imagens/branco.gif" id='referencia'/>
  213 + </div>
  214 + <div style='display:inline;background-color:rgb(250,250,250);'>
  215 + <p style='font-size:4px;'>&nbsp;</p>
  216 + <img title="insere xy" alt="" src="../imagens/branco.gif" id='inserexy'/>
  217 + </div>
  218 + <div style='display:inline;background-color:rgb(250,250,250);'>
  219 + <p style='font-size:4px;'>&nbsp;</p>
  220 + <img title="texto" alt="" src="../imagens/branco.gif" id='textofid'/>
  221 + </div>
  222 + <div style='display:inline;background-color:rgb(250,250,250);'>
  223 + <p style='font-size:4px;'>&nbsp;</p>
  224 + <img title="selecao" alt="" src="../imagens/branco.gif" id='selecao'/>
  225 + </div>
  226 + <div style='display:inline;background-color:rgb(250,250,250);'>
  227 + <p style='font-size:4px;'>&nbsp;</p>
  228 + <img title="google" alt="" src="../imagens/branco.gif" id='google'/>
  229 + </div>
  230 + <div style='display:none;background-color:rgb(250,250,250);'>
  231 + <p style='font-size:4px;'>&nbsp;</p>
  232 + <img title="fotos" alt="" src="../imagens/branco.gif" id='buscafotos'/>
  233 + </div>
  234 + <div style='display:none;background-color:rgb(250,250,250);'>
  235 + <p style='font-size:4px;'>&nbsp;</p>
  236 + <img title="busca na wikipedia" alt="" src="../imagens/branco.gif" id='wiki'/>
  237 + </div>
  238 + <div style='display:none;background-color:rgb(250,250,250);'>
  239 + <p style='font-size:4px;'>&nbsp;</p>
  240 + <img title="lente" alt="" src="../imagens/branco.gif" id='lentei'/>
  241 + </div>
  242 + <div style='display:none;background-color:rgb(250,250,250);'>
  243 + <p style='font-size:4px;'>&nbsp;</p>
  244 + <img title="confluencias" alt="" src="../imagens/branco.gif" id='confluence'/>
  245 + </div>
  246 + <div style='display:none;background-color:rgb(250,250,250);'>
  247 + <p style='font-size:4px;'>&nbsp;</p>
  248 + <img title="Insere gráficos" alt="" src="../imagens/branco.gif" id='inseregrafico'/>
  249 + </div>
  250 + <div style='display:none;background-color:rgb(250,250,250);'>
  251 + <p style='font-size:4px;'>&nbsp;</p>
  252 + <img title="3d" alt="" src="../imagens/branco.gif" id='v3d'/>
  253 + </div>
  254 + <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>
  255 +</div>
  256 +<div id=teste ></div>
  257 +<!-- Variáveis globais e inicialização do mapa-->
  258 +<script type="text/javascript">
  259 +
  260 +i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
  261 +var g_localimg = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo/imagens";
  262 +var g_3dmap = "3dmap.map";
  263 +
  264 +i3GEO.cria()
  265 +
  266 +i3GEO.barraDeBotoes.AUTOALTURA = false
  267 +i3GEO.barraDeBotoes.ATIVAMENUCONTEXTO = true
  268 +i3GEO.barraDeBotoes.PERMITEFECHAR = true
  269 +i3GEO.barraDeBotoes.PERMITEDESLOCAR = true
  270 +i3GEO.barraDeBotoes.COMPORTAMENTO = "laranja"
  271 +i3GEO.idioma.IDSELETOR = "seletorIdiomas"
  272 +i3GEO.interface.ATIVAMENUCONTEXTO = true;
  273 +i3GEO.guias.CONFIGURA.guiaDeFotos = {
  274 + titulo:"Fotos",
  275 + id:"guia6",
  276 + idconteudo:"guia6obj",
  277 + click:""
  278 + };
  279 +i3GEO.guias.ATUAL = "guiaDeFotos";
  280 +
  281 +i3GEO.inicia();
  282 +
  283 +var js = i3GEO.configura.locaplic+"/ferramentas/buscafotos/index.js.php";
  284 +i3GEO.util.scriptTag(js,"i3GEOF.buscaFotos.inicia('listaDeFotos')","i3GEOF.buscaFotos_script");
  285 +</script>
  286 +
  287 +</body>
  288 +</html>
0 289 \ No newline at end of file
... ...
exemplos/index.html
  Diff comments   View file @fc92e6f
... ... @@ -49,6 +49,8 @@ body,td
49 49 <p><a href="botoes1.htm" target="_blank" >Barra apenas com os ícones</a></p>
50 50 <p>Legenda</p>
51 51 <p><a href="legenda1.htm" target="_blank" >Legenda com grupos</a></p>
  52 +<p>Customização de ferramentas existentes</p>
  53 +<p><a href="fotos.htm" target="_blank" >Lista de fotos em uma guia</a></p>
52 54  
53 55 </body>
54 56 <script>
... ...
ferramentas/buscafotos/index.js.php
  Diff comments   View file @fc92e6f
... ... @@ -73,6 +73,11 @@ i3GEOF.buscaFotos = {
73 73 }}});
74 74 i3GEOF.buscaFotos.ativaFoco();
75 75 i3GEO.eventos.NAVEGAMAPA.push("i3GEOF.buscaFotos.busca('1')");
  76 + if(i3GEO.parametros.mapscale === ""){
  77 + i3GEOF.buscaFotos.mostraMenu();
  78 + $i("i3GEObuscafotosbuscapanoramio").checked = true;
  79 + i3GEOF.buscaFotos.busca("1");
  80 + }
76 81 }
77 82 catch(erro){alert(erro);}
78 83 },
... ...