Commit e004ba437464d54b69dc9cfe92ae7865e1f46e0d

Authored by Edmar Moretti
1 parent 55755fcf

Inclusão de exemplos de uso em iframes e correção no funcionamento no ie8

exemplos/calculo1.htm
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile"> 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"> 5 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
6 <title>i3Geo - Mapa interativo</title> 6 <title>i3Geo - Mapa interativo</title>
7 -<script type="text/javascript" src="../classesjs/i3geoo.js"></script> 7 +<script type="text/javascript" src="../classesjs/i3geo.js"></script>
8 <style> 8 <style>
9 p{font-size:16px;text-align:left;padding:10px;} 9 p{font-size:16px;text-align:left;padding:10px;}
10 </style> 10 </style>
exemplos/iframe1.htm 0 → 100644
@@ -0,0 +1,17 @@ @@ -0,0 +1,17 @@
  1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 +<html>
  3 +<head>
  4 +<script type="text/javascript" src="../classesjs/i3geo.js"></script>
  5 + <style>
  6 +p{font-size:16px;text-align:left;padding:10px;}
  7 + </style>
  8 +</head>
  9 +<body style="background:white;text-align:left; width:500px">
  10 +<p>Este é um exemplo de uso do i3Geo em um elemento IFRAME.
  11 +<p>Neste caso, o iframe chama diretamente o ms_criamapa.php
  12 +para inicializar o i3geo, o que não permite controlar o
  13 +tamanho do mapa.
  14 +<br>
  15 +<iframe style="width:500px;height:500px" src="../ms_criamapa.php" />
  16 +</body>
  17 +</html>
0 \ No newline at end of file 18 \ No newline at end of file
exemplos/iframe2.htm 0 → 100644
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 +<html>
  3 +<head>
  4 +<script type="text/javascript" src="../classesjs/i3geo.js"></script>
  5 + <style>
  6 +p{font-size:16px;text-align:left;padding:10px;}
  7 + </style>
  8 +</head>
  9 +<body style="background:white;text-align:left; width:500px">
  10 +<p>Este é um exemplo de uso do i3Geo em um elemento IFRAME.
  11 +<p>Neste caso, o iframe chama uma interface que permite controlar o tamanho do mapa.
  12 +<br>
  13 +<iframe style="width:525px;height:380px;overflow:hidden" src="mashup6.htm" />
  14 +</body>
  15 +</html>
0 \ No newline at end of file 16 \ No newline at end of file
exemplos/index.html
@@ -18,12 +18,16 @@ body,td @@ -18,12 +18,16 @@ body,td
18 <body > 18 <body >
19 <img src='../imagens/i3geo1.jpg' /><br> 19 <img src='../imagens/i3geo1.jpg' /><br>
20 <h1>Exemplos de configuração da interface do i3geo</h1> 20 <h1>Exemplos de configuração da interface do i3geo</h1>
21 -<p>Exemplos de inclusão de um mapa dentro de uma página</p> 21 +<p>Exemplos de inclusão de um mapa dentro de uma página em um DIV</p>
22 <p><a href="mashup1.htm" target="_blank" >Exemplo 1</a></p> 22 <p><a href="mashup1.htm" target="_blank" >Exemplo 1</a></p>
23 <p><a href="mashup2.htm" target="_blank" >Exemplo 2</a></p> 23 <p><a href="mashup2.htm" target="_blank" >Exemplo 2</a></p>
24 <p><a href="mashup3.htm" target="_blank" >Exemplo 3</a></p> 24 <p><a href="mashup3.htm" target="_blank" >Exemplo 3</a></p>
25 <p><a href="mashup4.htm" target="_blank" >Exemplo 4</a></p> 25 <p><a href="mashup4.htm" target="_blank" >Exemplo 4</a></p>
26 <p><a href="mashup5.htm" target="_blank" >Exemplo 5</a></p> 26 <p><a href="mashup5.htm" target="_blank" >Exemplo 5</a></p>
  27 +<p><a href="mashup6.htm" target="_blank" >Exemplo 6</a></p>
  28 +<p>Exemplos de inclusão de um mapa dentro de uma página em um IFRAME</p>
  29 +<p><a href="iframe1.htm" target="_blank" >Exemplo 1</a></p>
  30 +<p><a href="iframe2.htm" target="_blank" >Exemplo 2</a></p>
27 <p>Exemplos de configuração da árvore de camadas</p> 31 <p>Exemplos de configuração da árvore de camadas</p>
28 <p><a href="camadas1.htm" target="_blank" >Árvore expandida</a></p> 32 <p><a href="camadas1.htm" target="_blank" >Árvore expandida</a></p>
29 <p><a href="camadas2.htm" target="_blank" >Legenda expandida</a></p> 33 <p><a href="camadas2.htm" target="_blank" >Legenda expandida</a></p>
exemplos/mashup1.htm
@@ -14,9 +14,9 @@ @@ -14,9 +14,9 @@
14 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> 14 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br>
15 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br> 15 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br>
16 </div> 16 </div>
17 -<div id="i3geo"> 17 +<div id="i3geo" style="left:300px;top:100px;position:absolute">
18 <p style=text-align:center;font-size:12pt; >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br> 18 <p style=text-align:center;font-size:12pt; >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br>
19 -<center> 19 +
20 <table id='mst' style=display:none width=100% cellspacing='0'> 20 <table id='mst' style=display:none width=100% cellspacing='0'>
21 <tr style="border:0px"><td colspan=2 style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> 21 <tr style="border:0px"><td colspan=2 style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr>
22 <tr> 22 <tr>
@@ -45,7 +45,6 @@ @@ -45,7 +45,6 @@
45 <tr> 45 <tr>
46 <td title="libera guias" class=tdclaro ></td> 46 <td title="libera guias" class=tdclaro ></td>
47 <td style="border-bottom:3px solid rgb(200,200,200)"> 47 <td style="border-bottom:3px solid rgb(200,200,200)">
48 - <!-- Guias principais, não mude o ID, apenas o nome se for desejado -->  
49 <div class=verdeescuro style="top:0px;cursor:pointer;"> 48 <div class=verdeescuro style="top:0px;cursor:pointer;">
50 <div id=guia1 class=guia value="Mostra os temas atualmente inseridos no mapa e que podem estar visíveis ou não." >&nbsp;Temas&nbsp;</div> 49 <div id=guia1 class=guia value="Mostra os temas atualmente inseridos no mapa e que podem estar visíveis ou não." >&nbsp;Temas&nbsp;</div>
51 <div id=guia2 class=guia value="Mostra a lista de temas disponíveis no servidor de dados, possibilitando que novos temas sejam adicionados ao mapa.">&nbsp;Adiciona&nbsp;</div> 50 <div id=guia2 class=guia value="Mostra a lista de temas disponíveis no servidor de dados, possibilitando que novos temas sejam adicionados ao mapa.">&nbsp;Adiciona&nbsp;</div>
@@ -61,6 +60,7 @@ @@ -61,6 +60,7 @@
61 <td style="vertical-align:top;border-width:0px;"> 60 <td style="vertical-align:top;border-width:0px;">
62 <table width="100%" style="vertical-align:top;border-width:0px"> 61 <table width="100%" style="vertical-align:top;border-width:0px">
63 <tr><td class=verdeclaro id=contemImg > 62 <tr><td class=verdeclaro id=contemImg >
  63 + <!-- define o tamanho do mapa -->
64 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:320px;height:300px"></div> 64 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:320px;height:300px"></div>
65 </td></tr> 65 </td></tr>
66 </table> 66 </table>
exemplos/mashup2.htm
@@ -13,12 +13,11 @@ @@ -13,12 +13,11 @@
13 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> 13 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br>
14 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br> 14 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br>
15 </div> 15 </div>
16 -<div id=i3geo > 16 +<div id=i3geo style="left:300px;top:100px;position:absolute" >
17 <p style=text-align:center;font-size:12pt >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br> 17 <p style=text-align:center;font-size:12pt >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br>
18 18
19 -<center> 19 +
20 <table id='mst' style=display:none width=100% cellspacing='0'> 20 <table id='mst' style=display:none width=100% cellspacing='0'>
21 -<!-- Inclui o menu suspenso. Se vc não quiser o menu, é só comentar -->  
22 <tr style="border:0px"><td colspan=2 style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> 21 <tr style="border:0px"><td colspan=2 style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr>
23 <tr> 22 <tr>
24 <td colspan=2 > 23 <td colspan=2 >
@@ -44,7 +43,6 @@ @@ -44,7 +43,6 @@
44 <tr> 43 <tr>
45 <td title="libera guias" class=tdclaro ></td> 44 <td title="libera guias" class=tdclaro ></td>
46 <td style="border-bottom:3px solid rgb(200,200,200)"> 45 <td style="border-bottom:3px solid rgb(200,200,200)">
47 - <!-- Guias principais, não mude o ID, apenas o nome se for desejado -->  
48 <div class=verdeescuro style="top:0px;cursor:pointer;"> 46 <div class=verdeescuro style="top:0px;cursor:pointer;">
49 <div id=guia1 class=guia value="Mostra os temas atualmente inseridos no mapa e que podem estar visíveis ou não." >&nbsp;Temas&nbsp;</div> 47 <div id=guia1 class=guia value="Mostra os temas atualmente inseridos no mapa e que podem estar visíveis ou não." >&nbsp;Temas&nbsp;</div>
50 <div id=guia2 class=guia value="Mostra a lista de temas disponíveis no servidor de dados, possibilitando que novos temas sejam adicionados ao mapa.">&nbsp;Adiciona&nbsp;</div> 48 <div id=guia2 class=guia value="Mostra a lista de temas disponíveis no servidor de dados, possibilitando que novos temas sejam adicionados ao mapa.">&nbsp;Adiciona&nbsp;</div>
@@ -59,8 +57,8 @@ @@ -59,8 +57,8 @@
59 </td> 57 </td>
60 <td style="vertical-align:top;border-width:0px;"> 58 <td style="vertical-align:top;border-width:0px;">
61 <table width="100%" style="vertical-align:top;border-width:0px"> 59 <table width="100%" style="vertical-align:top;border-width:0px">
62 - <!-- Corpo do mapa. Pode ser reposicionado, mas não mude os IDs. Se vc quiser que o mapa tenha um tamanho específico, inclua o estilo, exemplo, style=width:315px;height:300px -->  
63 <tr><td class=verdeclaro id=contemImg > 60 <tr><td class=verdeclaro id=contemImg >
  61 +<!-- define o tamanho do mapa -->
64 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:320px;height:300px"></div> 62 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:320px;height:300px"></div>
65 </td></tr> 63 </td></tr>
66 </table> 64 </table>
exemplos/mashup3.htm
@@ -7,18 +7,21 @@ @@ -7,18 +7,21 @@
7 <script type="text/javascript" src="../classesjs/i3geo.js"></script> 7 <script type="text/javascript" src="../classesjs/i3geo.js"></script>
8 </head> 8 </head>
9 <body style="background-color:rgb(200,200,200);z-index:0;" class=yui-skin-sam > 9 <body style="background-color:rgb(200,200,200);z-index:0;" class=yui-skin-sam >
  10 +
10 <div style=position:absolute;left:10px;top:50px;width:200px; > 11 <div style=position:absolute;left:10px;top:50px;width:200px; >
11 <p style=text-align:left;font-size:12pt >Você pode chamar o I3Geo de dentro de uma outra página criando o DIV com id=i3geo<br><br> 12 <p style=text-align:left;font-size:12pt >Você pode chamar o I3Geo de dentro de uma outra página criando o DIV com id=i3geo<br><br>
12 <p style=text-align:left;font-size:12pt >Para chamar a página não é necessário rodar o i3geo/ms_criamapa.php.<br><br> 13 <p style=text-align:left;font-size:12pt >Para chamar a página não é necessário rodar o i3geo/ms_criamapa.php.<br><br>
13 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> 14 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br>
14 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br> 15 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br>
  16 +<div id=legendaDoMapa style='background:white;width:300px;'></div>
15 </div> 17 </div>
16 -<div id=i3geo > 18 +
  19 +<div id=i3geo style="left:300px;top:100px;position:absolute" >
  20 +
17 <p style=text-align:center;font-size:12pt >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br> 21 <p style=text-align:center;font-size:12pt >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br>
18 22
19 -<center> 23 +
20 <table id='mst' style=display:none width=100% cellspacing='0'> 24 <table id='mst' style=display:none width=100% cellspacing='0'>
21 -<!-- Inclui o menu suspenso. Se vc não quiser o menu, é só comentar -->  
22 <tr style="border:0px"><td style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> 25 <tr style="border:0px"><td style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr>
23 <tr> 26 <tr>
24 <td> 27 <td>
@@ -42,6 +45,7 @@ @@ -42,6 +45,7 @@
42 <td style="vertical-align:top;border-width:0px;"> 45 <td style="vertical-align:top;border-width:0px;">
43 <table width="100%" style="vertical-align:top;border-width:0px"> 46 <table width="100%" style="vertical-align:top;border-width:0px">
44 <tr><td class=verdeclaro id=contemImg > 47 <tr><td class=verdeclaro id=contemImg >
  48 + <!-- define o tamanho do mapa -->
45 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div> 49 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div>
46 </td></tr> 50 </td></tr>
47 </table> 51 </table>
@@ -61,7 +65,7 @@ @@ -61,7 +65,7 @@
61 <a style=text-align:center;color:white href="mailto:edmar.moretti@mma.gov.br">Cr&iacute;ticas e sugest&otilde;es</a> 65 <a style=text-align:center;color:white href="mailto:edmar.moretti@mma.gov.br">Cr&iacute;ticas e sugest&otilde;es</a>
62 </center> 66 </center>
63 </div> 67 </div>
64 -<div id=legendaDoMapa style='background:white;width:300px;'></div> 68 +
65 <script type="text/javascript"> 69 <script type="text/javascript">
66 i3GEO.configura.locaplic = "http://"+window.location.host+"/i3geo"; 70 i3GEO.configura.locaplic = "http://"+window.location.host+"/i3geo";
67 i3GEO.configura.mapaRefDisplay = "none" 71 i3GEO.configura.mapaRefDisplay = "none"
exemplos/mashup4.htm
@@ -41,6 +41,7 @@ @@ -41,6 +41,7 @@
41 <td style="vertical-align:top;border-width:0px;"> 41 <td style="vertical-align:top;border-width:0px;">
42 <table width="100%" style="vertical-align:top;border-width:0px"> 42 <table width="100%" style="vertical-align:top;border-width:0px">
43 <tr><td class=verdeclaro id=contemImg > 43 <tr><td class=verdeclaro id=contemImg >
  44 + <!-- define o tamanho do mapa -->
44 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div> 45 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div>
45 </td></tr> 46 </td></tr>
46 </table> 47 </table>
exemplos/mashup5.htm
@@ -13,17 +13,18 @@ @@ -13,17 +13,18 @@
13 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> 13 <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br>
14 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br> 14 <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br>
15 </div> 15 </div>
16 -<div id=i3geo > 16 +<div id=i3geo style="left:300px;top:100px;position:absolute" >
17 <p style=text-align:center;font-size:12pt >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br> 17 <p style=text-align:center;font-size:12pt >Este é um exemplo de inclusão do I3Geo dentro de uma página qualquer.<br><br>
18 18
19 -<center> 19 +
20 <table id='mst' style=display:none width=100% cellspacing='0'> 20 <table id='mst' style=display:none width=100% cellspacing='0'>
21 -<!-- Inclui o menu suspenso. Se vc não quiser o menu, é só comentar --> 21 +
22 <tr style="border:0px"><td style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> 22 <tr style="border:0px"><td style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr>
23 <tr> 23 <tr>
24 <td style="vertical-align:top;border-width:0px;"> 24 <td style="vertical-align:top;border-width:0px;">
25 <table width="100%" style="vertical-align:top;border-width:0px"> 25 <table width="100%" style="vertical-align:top;border-width:0px">
26 <tr><td class=verdeclaro id=contemImg > 26 <tr><td class=verdeclaro id=contemImg >
  27 + <!-- define o tamanho do mapa -->
27 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div> 28 <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div>
28 </td></tr> 29 </td></tr>
29 </table> 30 </table>
exemplos/mashup6.htm 0 → 100644
@@ -0,0 +1,73 @@ @@ -0,0 +1,73 @@
  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">
  5 +<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  6 +<title>MMA - Mapa interativo</title>
  7 +<script type="text/javascript" src="../classesjs/i3geonaocompacto.js"></script>
  8 +</head>
  9 +<body style="background-color:rgb(200,200,200);z-index:0;" class=yui-skin-sam >
  10 +
  11 +<div id=i3geo style="left:0px;top:0px;position:absolute" >
  12 +<table id='mst' style=display:none width=100% cellspacing='0'>
  13 +<tr style="border:0px">
  14 +<td style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td>
  15 +</tr>
  16 +<tr>
  17 + <td style="vertical-align:top;border-width:0px;">
  18 + <table width="100%" style="vertical-align:top;border-width:0px">
  19 + <tr><td class=verdeclaro id=contemImg >
  20 + <!-- define o tamanho do mapa -->
  21 + <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div>
  22 + </td></tr>
  23 + </table>
  24 + </td>
  25 + </tr>
  26 +<tr>
  27 + <td class=tdbranca >
  28 + <table width=100% ><tr>
  29 + <td class=tdbranca ><div id=escala ></div></td>
  30 + <td class=tdbranca ><div id=localizarxy >Aguarde...</div></td>
  31 + <td class=tdbranca ></td>
  32 + </tr></table>
  33 + </td>
  34 +</tr>
  35 +<tr style="border:0px"><td style="background-image:url('../imagens/visual/default/rodape.png');height:10px"></td></tr>
  36 +</table>
  37 +<a style=text-align:left;color:white href="mailto:edmar.moretti@mma.gov.br">Cr&iacute;ticas e sugest&otilde;es</a>
  38 +
  39 +</div>
  40 +<div id=barraDeBotoes1 style='display:none'>
  41 + <div style='display:inline;background-color:rgb(250,250,250);'>
  42 + <p style='font-size:6px;'>&nbsp;</p>
  43 + <img title="desloca" alt="" src="../imagens/branco.gif" ID='pan'/>
  44 + </div>
  45 + <div style='display:inline;background-color:rgb(250,250,250);'>
  46 + <p style='font-size:6px;'>&nbsp;</p>
  47 + <img title="zoom" alt="" src="../imagens/branco.gif" id='zoomli'/>
  48 + </div>
  49 + <div style='display:inline;background-color:rgb(250,250,250);'>
  50 + <p style='font-size:6px;'>&nbsp;</p>
  51 + <img title="google" alt="" src="../imagens/branco.gif" id='google'/>
  52 + </div>
  53 + <div style='display:inline;background-color:rgb(250,250,250);'>
  54 + <p style='font-size:6px;'>&nbsp;</p>
  55 + <img title="info" alt="" src="../imagens/branco.gif" id='identifica'/>
  56 + </div>
  57 +</div>
  58 +
  59 +<script type="text/javascript">
  60 +i3GEO.configura.locaplic = "http://"+window.location.host+"/i3geo";
  61 +i3GEO.configura.mapaRefDisplay = "none"
  62 +i3GEO.configura.iniciaJanelaMensagens = false
  63 +i3GEO.idioma.MOSTRASELETOR = false
  64 +i3GEO.configura.mashuppar = "&mapext=-53 -26 -42 -18";
  65 +i3GEO.configura.iniciaJanelaMensagens = false;
  66 +i3GEO.barraDeBotoes.PERMITEFECHAR = false;
  67 +i3GEO.cria()
  68 +i3GEO.inicia();
  69 +
  70 +</script>
  71 +
  72 +</body>
  73 +</html>
0 \ No newline at end of file 74 \ No newline at end of file