Commit e004ba437464d54b69dc9cfe92ae7865e1f46e0d
1 parent
55755fcf
Exists in
master
and in
7 other branches
Inclusão de exemplos de uso em iframes e correção no funcionamento no ie8
Showing
10 changed files
with
130 additions
and
17 deletions
Show diff stats
exemplos/calculo1.htm
| ... | ... | @@ -4,7 +4,7 @@ |
| 4 | 4 | <meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile"> |
| 5 | 5 | <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> |
| 6 | 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 | 8 | <style> |
| 9 | 9 | p{font-size:16px;text-align:left;padding:10px;} |
| 10 | 10 | </style> | ... | ... |
| ... | ... | @@ -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 | 18 | \ No newline at end of file | ... | ... |
| ... | ... | @@ -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 | 16 | \ No newline at end of file | ... | ... |
exemplos/index.html
| ... | ... | @@ -18,12 +18,16 @@ body,td |
| 18 | 18 | <body > |
| 19 | 19 | <img src='../imagens/i3geo1.jpg' /><br> |
| 20 | 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 | 22 | <p><a href="mashup1.htm" target="_blank" >Exemplo 1</a></p> |
| 23 | 23 | <p><a href="mashup2.htm" target="_blank" >Exemplo 2</a></p> |
| 24 | 24 | <p><a href="mashup3.htm" target="_blank" >Exemplo 3</a></p> |
| 25 | 25 | <p><a href="mashup4.htm" target="_blank" >Exemplo 4</a></p> |
| 26 | 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 | 31 | <p>Exemplos de configuração da árvore de camadas</p> |
| 28 | 32 | <p><a href="camadas1.htm" target="_blank" >Árvore expandida</a></p> |
| 29 | 33 | <p><a href="camadas2.htm" target="_blank" >Legenda expandida</a></p> | ... | ... |
exemplos/mashup1.htm
| ... | ... | @@ -14,9 +14,9 @@ |
| 14 | 14 | <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> |
| 15 | 15 | <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br> |
| 16 | 16 | </div> |
| 17 | -<div id="i3geo"> | |
| 17 | +<div id="i3geo" style="left:300px;top:100px;position:absolute"> | |
| 18 | 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 | 20 | <table id='mst' style=display:none width=100% cellspacing='0'> |
| 21 | 21 | <tr style="border:0px"><td colspan=2 style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> |
| 22 | 22 | <tr> |
| ... | ... | @@ -45,7 +45,6 @@ |
| 45 | 45 | <tr> |
| 46 | 46 | <td title="libera guias" class=tdclaro ></td> |
| 47 | 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 | 48 | <div class=verdeescuro style="top:0px;cursor:pointer;"> |
| 50 | 49 | <div id=guia1 class=guia value="Mostra os temas atualmente inseridos no mapa e que podem estar visíveis ou não." > Temas </div> |
| 51 | 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."> Adiciona </div> |
| ... | ... | @@ -61,6 +60,7 @@ |
| 61 | 60 | <td style="vertical-align:top;border-width:0px;"> |
| 62 | 61 | <table width="100%" style="vertical-align:top;border-width:0px"> |
| 63 | 62 | <tr><td class=verdeclaro id=contemImg > |
| 63 | + <!-- define o tamanho do mapa --> | |
| 64 | 64 | <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:320px;height:300px"></div> |
| 65 | 65 | </td></tr> |
| 66 | 66 | </table> | ... | ... |
exemplos/mashup2.htm
| ... | ... | @@ -13,12 +13,11 @@ |
| 13 | 13 | <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> |
| 14 | 14 | <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br> |
| 15 | 15 | </div> |
| 16 | -<div id=i3geo > | |
| 16 | +<div id=i3geo style="left:300px;top:100px;position:absolute" > | |
| 17 | 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 | 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 | 21 | <tr style="border:0px"><td colspan=2 style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> |
| 23 | 22 | <tr> |
| 24 | 23 | <td colspan=2 > |
| ... | ... | @@ -44,7 +43,6 @@ |
| 44 | 43 | <tr> |
| 45 | 44 | <td title="libera guias" class=tdclaro ></td> |
| 46 | 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 | 46 | <div class=verdeescuro style="top:0px;cursor:pointer;"> |
| 49 | 47 | <div id=guia1 class=guia value="Mostra os temas atualmente inseridos no mapa e que podem estar visíveis ou não." > Temas </div> |
| 50 | 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."> Adiciona </div> |
| ... | ... | @@ -59,8 +57,8 @@ |
| 59 | 57 | </td> |
| 60 | 58 | <td style="vertical-align:top;border-width:0px;"> |
| 61 | 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 | 60 | <tr><td class=verdeclaro id=contemImg > |
| 61 | +<!-- define o tamanho do mapa --> | |
| 64 | 62 | <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:320px;height:300px"></div> |
| 65 | 63 | </td></tr> |
| 66 | 64 | </table> | ... | ... |
exemplos/mashup3.htm
| ... | ... | @@ -7,18 +7,21 @@ |
| 7 | 7 | <script type="text/javascript" src="../classesjs/i3geo.js"></script> |
| 8 | 8 | </head> |
| 9 | 9 | <body style="background-color:rgb(200,200,200);z-index:0;" class=yui-skin-sam > |
| 10 | + | |
| 10 | 11 | <div style=position:absolute;left:10px;top:50px;width:200px; > |
| 11 | 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 | 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 | 14 | <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> |
| 14 | 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 | 17 | </div> |
| 16 | -<div id=i3geo > | |
| 18 | + | |
| 19 | +<div id=i3geo style="left:300px;top:100px;position:absolute" > | |
| 20 | + | |
| 17 | 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 | 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 | 25 | <tr style="border:0px"><td style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> |
| 23 | 26 | <tr> |
| 24 | 27 | <td> |
| ... | ... | @@ -42,6 +45,7 @@ |
| 42 | 45 | <td style="vertical-align:top;border-width:0px;"> |
| 43 | 46 | <table width="100%" style="vertical-align:top;border-width:0px"> |
| 44 | 47 | <tr><td class=verdeclaro id=contemImg > |
| 48 | + <!-- define o tamanho do mapa --> | |
| 45 | 49 | <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div> |
| 46 | 50 | </td></tr> |
| 47 | 51 | </table> |
| ... | ... | @@ -61,7 +65,7 @@ |
| 61 | 65 | <a style=text-align:center;color:white href="mailto:edmar.moretti@mma.gov.br">Críticas e sugestões</a> |
| 62 | 66 | </center> |
| 63 | 67 | </div> |
| 64 | -<div id=legendaDoMapa style='background:white;width:300px;'></div> | |
| 68 | + | |
| 65 | 69 | <script type="text/javascript"> |
| 66 | 70 | i3GEO.configura.locaplic = "http://"+window.location.host+"/i3geo"; |
| 67 | 71 | i3GEO.configura.mapaRefDisplay = "none" | ... | ... |
exemplos/mashup4.htm
| ... | ... | @@ -41,6 +41,7 @@ |
| 41 | 41 | <td style="vertical-align:top;border-width:0px;"> |
| 42 | 42 | <table width="100%" style="vertical-align:top;border-width:0px"> |
| 43 | 43 | <tr><td class=verdeclaro id=contemImg > |
| 44 | + <!-- define o tamanho do mapa --> | |
| 44 | 45 | <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div> |
| 45 | 46 | </td></tr> |
| 46 | 47 | </table> | ... | ... |
exemplos/mashup5.htm
| ... | ... | @@ -13,17 +13,18 @@ |
| 13 | 13 | <p style=text-align:left;font-size:12pt >Nem todos os elementos precisam estar no mapa.<br><br> |
| 14 | 14 | <p style=text-align:left;font-size:12pt >Você pode esconder ou mudar as ferramentas de lugar.<br><br> |
| 15 | 15 | </div> |
| 16 | -<div id=i3geo > | |
| 16 | +<div id=i3geo style="left:300px;top:100px;position:absolute" > | |
| 17 | 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 | 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 | 22 | <tr style="border:0px"><td style="background-image:url('../imagens/visual/default/cabeca.png');height:10px"></td></tr> |
| 23 | 23 | <tr> |
| 24 | 24 | <td style="vertical-align:top;border-width:0px;"> |
| 25 | 25 | <table width="100%" style="vertical-align:top;border-width:0px"> |
| 26 | 26 | <tr><td class=verdeclaro id=contemImg > |
| 27 | + <!-- define o tamanho do mapa --> | |
| 27 | 28 | <div id=corpoMapa style="background-image:url('../imagens/i3geo1bw.jpg');width:520px;height:300px"></div> |
| 28 | 29 | </td></tr> |
| 29 | 30 | </table> | ... | ... |
| ... | ... | @@ -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íticas e sugestõ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;'> </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;'> </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;'> </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;'> </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 | 74 | \ No newline at end of file | ... | ... |