Inclusão de novos exemplos sobre a guia móvel

Edmar Moretti
1 parent d0c62ddf
Showing 5 changed files with 409 additions and 140 deletions Show diff stats
admin/html/admin.css
exemplos/guiamovel1.htm
exemplos/guiamovel2.htm
exemplos/index.html
guia_de_migracao.txt
@@ -233,7 +233,7 @@ fieldset {
 	height: 25px;
 	width: 100%;
 	text-align: left;
-	background-color: #00500F;
+	background-color: #990000;
 }
  
 .fundoPonto {
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Category" content="i3Geo Mapa interativo MMA geoprocessamento sig mobile">
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
+<title>i3GEO - OpenLayers+OSM</title>
+</head>
+<body id="i3geo" style='margin-left: 7px; background: white;'>
+	<!-- inclui o nome do usuario logado -->
+	<div id="i3GEONomeLogin" style="position: absolute; left: 10px; top: 12px; font-size: 11px; z-index: 50000"></div>
+	<table id='mst' summary="" style='display: none;' width=100% cellspacing='0'>
+		<tr>
+			<td id="contemMenu" style="background: black; height: 30px; text-align: right; border-width: 0pt 0pt 1px; border-color: rgb(240, 240, 240)">
+				<!--menu suspenso-->
+				<div id="menus" style="height: 0px;"></div>
+			</td>
+		</tr>
+		<tr>
+			<td style="vertical-align: top; border-width: 0px;">
+				<table width="100%" style="vertical-align: top; border-width: 0px">
+					<tr>
+						<td class=verdeclaro id=contemImg>
+							<div id=corpoMapa style="position: relative; background-image: url('../imagens/i3geo1bw.jpg');"></div>
+						</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<table style="width: 100%; height: 28px">
+					<tr>
+						<td class=fundoRodape style="width: 25%">
+							<!-- aqui ser&aacute; inclu&iacute;da a escala num&eacute;rica -->
+							<div id=escala style="margin: auto; text-align: right; left: 15px;"></div>
+						</td>
+						<td class=fundoRodape style="width: 5%"></td>
+						<td class=fundoRodape style="width: 40%">
+							<!-- aqui ser&aacute; inclu&iacute;do o gadget que mostra a coordenada geogr&aacute;fica da posi&ccedil;&atilde;o do mouse -->
+							<div id=localizarxy style="margin: auto; text-align: left; font-size: 10px; display: inline-table"></div>
+						</td>
+						<td class=fundoRodape style="width: 20%">
+							<!-- bot&atilde;o de compartilhamento em redes sociais-->
+							<div id=i3GEOcompartilhar style="width: 170px; margin: auto; text-align: left; padding-top: 1px"></div> <!-- aqui ser&aacute; inclu&iacute;do o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
+							<div id=tempoRedesenho style="z-index: 100; position: absolute; top: 0px; color: green; background-color: black; width: 50px; display: none"></div>
+						</td>
+						<!-- aqui ser&atilde;o inclu&iacute;das as bandeiras que permitem a troca de idioma -->
+						<td class=fundoRodape style="width: 10%;">
+							<div id=seletorIdiomas style="right: 15px;"></div>
+						</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+	</table>
+	<table id="i3GEOlogoMarca" style='margin: 0px auto; box-shadow: 0 1px 13px gray; border-radius: 5px;'>
+		<tr>
+			<td><div id=versaoi3geo></div>
+				<h2 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para cria&ccedil;&atilde;o de mapas interativos e geoprocessamento</h2>
+				<h3 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, &eacute; licenciado sob GPL e integra o Portal do Software P&uacute;blico Brasileiro</h3></td>
+		</tr>
+		<tr>
+			<td style="padding: 10px;"><img style="width: 560px; height: 81px" alt="" src='../imagens/logo_inicio.png'></td>
+		</tr>
+		<tr>
+			<td>
+				<!--
+			<script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script>
+			-->
+			</td>
+		</tr>
+	</table>
+
+<!-- guias laterais -->
+<div id="i3GEOguiaMovel" style="visibility:hidden;position:absolute;display:block;border:0px solid white;text-align:left;z-index:2000;background-color:none">
+	<div style="cursor:pointer;position:absolute;top:50%;margin-top: -65px;width:30px;z-index:5000; left:18px;">
+		<img src='../imagens/openbars1.png' style="width: 48px; position: absolute; left: -16px; height: 412px; top: -160px;">
+		<div id="iconeGuia_temas" ></div>
+		<div id="iconeGuia_adiciona" style="margin-top:3px;" ></div>
+		<div id="iconeGuia_legenda" style="margin-top:3px;"></div>
+	</div>
+	<div id="i3GEOguiaMovelMolde" style="top:0px;box-shadow:0 2px 10px 0 #888888;border-radius:5px 0px 0px 5px;position:absolute;display:none;border:0px solid white;text-align:left;z-index:1000;background-color:gray">
+		<div id="i3GEOguiaMovelConteudo" style='top:10px;overflow:auto;display:none;position:absolute;border-color:gray;border-width:0px 0 0px 0px;left:0px;height:0px;background-color:white'>
+			<div id='guia1obj' style='display:none;' >
+				<!-- Esta div acrescenta a op&ccedil;&atilde;o de busca r&aacute;pida, caso vc queira coloc&aacute;-la em um lugar espec&iacute;fico -->
+				<div style='left:5px;top:10px;' id=buscaRapida ></div>
+				<!--	Esta div acrescenta a lista de propriedades do mapa -->
+				<div id=listaPropriedades style='top:15px;' ></div>
+				<!--	Esta div acrescenta a lista de de camadas do tipo 'baselayers' espec&iacute;ficas da interface Openlayers. Veja tamb&eacute;m a op&ccedil;&atilde;o i3GEO.Interface.openlayers.GADGETS.LayerSwitcher -->
+				<div id=listaLayersBase style='top:15px;'></div>
+				<!--	Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
+				<div id=listaTemas style='top:15px;'></div>
+			</div>
+			<div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
+			<div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
+		</div>
+	</div>
+</div>
+
+	<script src="../classesjs/i3geo.js"></script>
+	<script src="../pacotes/openlayers/OpenLayers2131.js.php"></script>
+	<link rel="stylesheet" type="text/css" href="../css/black.css">
+
+	<script>
+		i3GEO.configura.locaplic = i3GEO.util.protocolo() + "://"
+				+ window.location.host + "/i3geo";
+		i3GEO.configura.autotamanho = false;
+		i3GEO.Interface.ATUAL = "openlayers";
+		i3GEO.Interface.IDCORPO = "contemImg";
+		i3GEO.Interface.openlayers.TILES = true;
+		i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}';
+		i3GEO.configura.oMenuData.submenus["interface"] = [
+			{ id:"omenudataInterface0a",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("d27")+'</b></span>',url: "#"},
+			{ id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_ol.htm?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface2a",text: "OpenLayers OSM", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_osm.htm?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_gm.phtml?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface0b",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("u27")+'</b></span>',url: "#"},
+			{ id:"omenudataInterface6",text: $trad("u21"), url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" },
+			{ id:"omenudataInterface7",text: "Servi&ccedil;os WMS", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" },
+			{ id:"omenudataInterface9",text: "Download de dados", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/datadownload.htm')" },
+			{ id:"omenudataInterface11",text: $trad("p20"), url: "javascript:i3GEO.mapa.dialogo.telaRemota()" }
+		];
+
+		i3GEO.cria();
+		i3GEO.configura.mapaRefDisplay = "none";
+		i3GEO.barraDeBotoes.TIPO = "olhodepeixe";
+		//ajusta o deslocamento da barra de botoes
+		i3GEO.barraDeBotoes.OFFSET = 11;
+		//ajusta a posicao da barra de botoes no IE
+		if(navm){
+			i3GEO.barraDeBotoes.OFFSET = 5;
+		}
+		i3GEO.configura.oMenuData["submenus"]["janelas"] = [];
+		i3GEO.ajuda.ATIVAJANELA = false;
+		i3GEO.idioma.IDSELETOR = "seletorIdiomas";
+		i3GEO.Interface.ATIVAMENUCONTEXTO = false;
+		//i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";
+		i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
+		i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
+		i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
+		i3GEO.mapa.AUTORESIZE = true;
+		i3GEO.guias.TIPO = "movel";
+		i3GEO.guias.guiaMovel.config.topGuiaMovel = 36;
+		i3GEO.janela.ativaAlerta();
+		i3GEO.finaliza = function() {
+			if ($i("i3GEOlogoMarca")) {
+				$i("i3GEOlogoMarca").style.display = "none";
+			}
+			i3GEO.mapa.insereDobraPagina("googlemaps",
+					"../imagens/dobragooglemaps.png");
+		};
+		i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true;
+		i3GEO.janela.TRANSICAOSUAVE = true;
+		OpenLayers.ImgPath = "../pacotes/openlayers/img/";
+		(function() {
+			//http://maps.stamen.com/#watercolor/12/37.7706/-122.3782
+			var aquarela = new OpenLayers.Layer.OSM("Aquarela",
+					"http://tile.stamen.com/watercolor/${z}/${x}/${y}.jpg", {
+						isBaseLayer : true,
+						visibility : true
+					});
+			var osm = new OpenLayers.Layer.OSM("OSM",
+					"http://tile.openstreetmap.org/${z}/${x}/${y}.png", {
+						isBaseLayer : true,
+						visibility : false
+					});
+			i3GEO.Interface.openlayers.LAYERSADICIONAIS = [ osm, aquarela ];
+		})();
+		i3GEO.Interface.openlayers.googleLike = true;
+		i3GEO.inicia();
+	</script>
+</body>
+</html>
@@ -0,0 +1,170 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Category" content="i3Geo Mapa interativo MMA geoprocessamento sig mobile">
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
+<title>i3GEO - OpenLayers+OSM</title>
+</head>
+<body id="i3geo" style='margin-left: 7px; background: white;'>
+	<!-- inclui o nome do usuario logado -->
+	<div id="i3GEONomeLogin" style="position: absolute; left: 10px; top: 12px; font-size: 11px; z-index: 50000"></div>
+	<table id='mst' summary="" style='display: none;' width=100% cellspacing='0'>
+		<tr>
+			<td id="contemMenu" style="background: black; height: 30px; text-align: right; border-width: 0pt 0pt 1px; border-color: rgb(240, 240, 240)">
+				<!--menu suspenso-->
+				<div id="menus" style="height: 0px;"></div>
+			</td>
+		</tr>
+		<tr>
+			<td style="vertical-align: top; border-width: 0px;">
+				<table width="100%" style="vertical-align: top; border-width: 0px">
+					<tr>
+						<td class=verdeclaro id=contemImg>
+							<div id=corpoMapa style="position: relative; background-image: url('../imagens/i3geo1bw.jpg');"></div>
+						</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<table style="width: 100%; height: 28px">
+					<tr>
+						<td class=fundoRodape style="width: 25%">
+							<!-- aqui ser&aacute; inclu&iacute;da a escala num&eacute;rica -->
+							<div id=escala style="margin: auto; text-align: right; left: 15px;"></div>
+						</td>
+						<td class=fundoRodape style="width: 5%"></td>
+						<td class=fundoRodape style="width: 40%">
+							<!-- aqui ser&aacute; inclu&iacute;do o gadget que mostra a coordenada geogr&aacute;fica da posi&ccedil;&atilde;o do mouse -->
+							<div id=localizarxy style="margin: auto; text-align: left; font-size: 10px; display: inline-table"></div>
+						</td>
+						<td class=fundoRodape style="width: 20%">
+							<!-- bot&atilde;o de compartilhamento em redes sociais-->
+							<div id=i3GEOcompartilhar style="width: 170px; margin: auto; text-align: left; padding-top: 1px"></div> <!-- aqui ser&aacute; inclu&iacute;do o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
+							<div id=tempoRedesenho style="z-index: 100; position: absolute; top: 0px; color: green; background-color: black; width: 50px; display: none"></div>
+						</td>
+						<!-- aqui ser&atilde;o inclu&iacute;das as bandeiras que permitem a troca de idioma -->
+						<td class=fundoRodape style="width: 10%;">
+							<div id=seletorIdiomas style="right: 15px;"></div>
+						</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+	</table>
+	<table id="i3GEOlogoMarca" style='margin: 0px auto; box-shadow: 0 1px 13px gray; border-radius: 5px;'>
+		<tr>
+			<td><div id=versaoi3geo></div>
+				<h2 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para cria&ccedil;&atilde;o de mapas interativos e geoprocessamento</h2>
+				<h3 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, &eacute; licenciado sob GPL e integra o Portal do Software P&uacute;blico Brasileiro</h3></td>
+		</tr>
+		<tr>
+			<td style="padding: 10px;"><img style="width: 560px; height: 81px" alt="" src='../imagens/logo_inicio.png'></td>
+		</tr>
+		<tr>
+			<td>
+				<!--
+			<script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script>
+			-->
+			</td>
+		</tr>
+	</table>
+<!-- guias laterais -->
+<div id="i3GEOguiaMovel" style="visibility:hidden;position:absolute;display:block;border:0px solid white;text-align:left;z-index:2000;background-color:none">
+	<img id="i3GEOguiaMovelPuxador" onclick='i3GEO.guias.guiaMovel.abreFecha()' style='z-index:2;border:solid 0px white;left:0px;position:absolute;top:0px' width='0px' src='../imagens/openbars.png' >
+	<div id="i3GEOguiaMovelMolde" style="top:0px;box-shadow:0 2px 10px 0 #888888;border-radius:5px 0px 0px 5px;position:absolute;display:none;border:0px solid white;text-align:left;z-index:1000;background-color:gray">
+		<div id="i3GEOguiaMovelIcones" style='overflow:none;left:0px;display:none;position:absolute;top:0px;text-align:center;height:0px;width:0px;border:solid 0px white;background-color:white' ></div>
+		<div id="i3GEOguiaMovelConteudo" style='top:40px;overflow:auto;display:none;position:absolute;border-color:gray;border-width:0px 0 0px 0px;left:0px;height:0px;background-color:white'>
+			<div id='guia1obj' style='display:none;' >
+				<!-- Esta div acrescenta a op&ccedil;&atilde;o de busca r&aacute;pida, caso vc queira coloc&aacute;-la em um lugar espec&iacute;fico -->
+				<div style='left:5px;top:10px;' id=buscaRapida ></div>
+				<!--	Esta div acrescenta a lista de propriedades do mapa -->
+				<div id=listaPropriedades style='top:15px;' ></div>
+				<!--	Esta div acrescenta a lista de de camadas do tipo 'baselayers' espec&iacute;ficas da interface Openlayers. Veja tamb&eacute;m a op&ccedil;&atilde;o i3GEO.Interface.openlayers.GADGETS.LayerSwitcher -->
+				<div id=listaLayersBase style='top:15px;'></div>
+				<!--	Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
+				<div id=listaTemas style='top:15px;'></div>
+			</div>
+			<div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
+			<div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
+			<div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
+		</div>
+	</div>
+</div>
+
+	<script src="../classesjs/i3geo.js"></script>
+	<script src="../pacotes/openlayers/OpenLayers2131.js.php"></script>
+	<link rel="stylesheet" type="text/css" href="../css/black.css">
+
+	<script>
+		i3GEO.configura.locaplic = i3GEO.util.protocolo() + "://"
+				+ window.location.host + "/i3geo";
+		i3GEO.configura.autotamanho = false;
+		i3GEO.Interface.ATUAL = "openlayers";
+		i3GEO.Interface.IDCORPO = "contemImg";
+		i3GEO.Interface.openlayers.TILES = true;
+		i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}';
+		i3GEO.configura.oMenuData.submenus["interface"] = [
+			{ id:"omenudataInterface0a",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("d27")+'</b></span>',url: "#"},
+			{ id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_ol.htm?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface2a",text: "OpenLayers OSM", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_osm.htm?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_gm.phtml?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface0b",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("u27")+'</b></span>',url: "#"},
+			{ id:"omenudataInterface6",text: $trad("u21"), url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" },
+			{ id:"omenudataInterface7",text: "Servi&ccedil;os WMS", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" },
+			{ id:"omenudataInterface9",text: "Download de dados", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/datadownload.htm')" },
+			{ id:"omenudataInterface11",text: $trad("p20"), url: "javascript:i3GEO.mapa.dialogo.telaRemota()" }
+		];
+
+		i3GEO.cria();
+		i3GEO.configura.mapaRefDisplay = "none";
+		i3GEO.barraDeBotoes.TIPO = "olhodepeixe";
+		//ajusta o deslocamento da barra de botoes
+		i3GEO.barraDeBotoes.OFFSET = 11;
+		//ajusta a posicao da barra de botoes no IE
+		if(navm){
+			i3GEO.barraDeBotoes.OFFSET = 5;
+		}
+		i3GEO.configura.oMenuData["submenus"]["janelas"] = [];
+		i3GEO.ajuda.ATIVAJANELA = false;
+		i3GEO.idioma.IDSELETOR = "seletorIdiomas";
+		i3GEO.Interface.ATIVAMENUCONTEXTO = false;
+		//i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";
+		i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
+		i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
+		i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
+		i3GEO.mapa.AUTORESIZE = true;
+		i3GEO.guias.TIPO = "movel";
+		i3GEO.guias.guiaMovel.config.topGuiaMovel = 36;
+		i3GEO.janela.ativaAlerta();
+		i3GEO.finaliza = function() {
+			if ($i("i3GEOlogoMarca")) {
+				$i("i3GEOlogoMarca").style.display = "none";
+			}
+			i3GEO.mapa.insereDobraPagina("googlemaps",
+					"../imagens/dobragooglemaps.png");
+		};
+		i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true;
+		i3GEO.janela.TRANSICAOSUAVE = true;
+		OpenLayers.ImgPath = "../pacotes/openlayers/img/";
+		(function() {
+			//http://maps.stamen.com/#watercolor/12/37.7706/-122.3782
+			var aquarela = new OpenLayers.Layer.OSM("Aquarela",
+					"http://tile.stamen.com/watercolor/${z}/${x}/${y}.jpg", {
+						isBaseLayer : true,
+						visibility : true
+					});
+			var osm = new OpenLayers.Layer.OSM("OSM",
+					"http://tile.openstreetmap.org/${z}/${x}/${y}.png", {
+						isBaseLayer : true,
+						visibility : false
+					});
+			i3GEO.Interface.openlayers.LAYERSADICIONAIS = [ osm, aquarela ];
+		})();
+		i3GEO.Interface.openlayers.googleLike = true;
+		i3GEO.inicia();
+	</script>
+</body>
+</html>
@@ -15,22 +15,29 @@ body,td {
 }
 </style>
 <script>
-/*
-@TODO sempre verificar os exemplos
-*/
+	/*
+	 @TODO sempre verificar os exemplos
+	 */
 </script>
 </head>
 <body class="yui-skin-sam fundoPonto">
 	<center>
 		<div class="bordaSuperior">&nbsp;</div>
-		<div class="mascaraPrincipal" id="divGeral" >
-			<img src="../imagens/i3geo1.jpg"><br>
+		<div class="mascaraPrincipal" id="divGeral">
+			<img src="../imagens/i3geo1.jpg">
+			<br>
 			<h1>Exemplos de configura&ccedil;&atilde;o da interface do i3geo</h1>
 			<h2>Diversos</h2>
 			<fieldset>
 				<p>
 					<a href="vinde.htm" target="_blank">Navegador de WMS cadastrados na INDE Brasileira</a>
 				</p>
+				<p>
+					<a href="guiamovel1.htm" target="_blank">&Iacute;cones inseridas no puxador lateral da guia m&oacute;vel</a>
+				</p>
+				<p>
+					<a href="guiamovel2.htm" target="_blank">Puxador lateral da guia m&oacute;vel sem &iacute;cones</a>
+				</p>
 			</fieldset>
 			<h2>Mashups</h2>
 			<fieldset>
@@ -44,47 +51,28 @@ body,td {
 			<h2>Interface OpenLayers</h2>
 			<fieldset>
 				<p>
-					A interface OpenLayers passou a ser o padr&atilde;o do i3Geo com a
-					vers&atilde;o 4.4. O Modo TILE permite que o mapa seja
-					constru&iacute;do em pequenas partes (TILES) apresentando uma
-					navegabilidade cont&iacute;nua quando se desloca o mapa (pan). No
-					modo normal, &eacute; desenhada apenas uma imagem para cada camada
-					do mapa. Esse &uacute;ltimo modo pode apresentar uma performance
-					melhor em sistemas baseados no Windows (MS4W). O uso de "TILES" ou
-					n&atilde;o &eacute; controlado pela vari&aacute;vel <i>i3GEO.Interface.openlayers.TILES
-						= false|true</i>
+					A interface OpenLayers passou a ser o padr&atilde;o do i3Geo com a vers&atilde;o 4.4. O Modo TILE permite que o mapa seja constru&iacute;do em pequenas partes (TILES) apresentando uma navegabilidade cont&iacute;nua quando se desloca o mapa (pan). No modo normal, &eacute; desenhada apenas uma imagem para cada camada do mapa. Esse &uacute;ltimo modo pode apresentar uma performance melhor em sistemas baseados no Windows (MS4W). O uso de "TILES" ou n&atilde;o &eacute; controlado pela
+					vari&aacute;vel <i>i3GEO.Interface.openlayers.TILES = false|true</i>
 				</p>
 				<p>
-					<a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES
-						= false</a>
+					<a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES = false</a>
 				</p>
 				<p>
-					<a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES
-						= true</a>
+					<a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES = true</a>
 				</p>
 			</fieldset>
 			<fieldset>
 				<p>
-					A interface OpenLayers cria um objeto chamado <i>i3geoOL</i> com
-					base na API do OpenLayers. Esse objeto pode receber os
-					m&eacute;todos dessa API, permitindo modificar o mapa. Alguns
-					par&acirc;metros s&atilde;o controlados por vari&aacute;veis
-					espec&iacute;ficas do i3Geo.
+					A interface OpenLayers cria um objeto chamado <i>i3geoOL</i> com base na API do OpenLayers. Esse objeto pode receber os m&eacute;todos dessa API, permitindo modificar o mapa. Alguns par&acirc;metros s&atilde;o controlados por vari&aacute;veis espec&iacute;ficas do i3Geo.
 				</p>
 				<p>
-					<a href="openlayers3.htm" target="_blank">Modo TILE com uma
-						&aacute;rea de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER
-						= 1;</i>
+					<a href="openlayers3.htm" target="_blank">Modo TILE com uma &aacute;rea de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER = 1;</i>
 				</p>
 				<p>
-					<a href="openlayers4.htm" target="_blank">Ativa&ccedil;&atilde;o
-						de um layer de fundo</a>
+					<a href="openlayers4.htm" target="_blank">Ativa&ccedil;&atilde;o de um layer de fundo</a>
 				</p>
 				<p>
-					<a href="openlayers5.htm" target="_blank">Modifica a
-						extens&atilde;o geogr&aacute;fica m&aacute;xima de
-						apresenta&ccedil;&atilde;o</a> <i>i3GEO.Interface.openlayers.MAXEXTENT
-						= [-63.712484, -20.765721, -42.385294, -9.136698];</i>
+					<a href="openlayers5.htm" target="_blank">Modifica a extens&atilde;o geogr&aacute;fica m&aacute;xima de apresenta&ccedil;&atilde;o</a> <i>i3GEO.Interface.openlayers.MAXEXTENT = [-63.712484, -20.765721, -42.385294, -9.136698];</i>
 				</p>
 			</fieldset>
 			<fieldset>
@@ -103,71 +91,53 @@ body,td {
 					<b>Guias e janelas </b>
 				</legend>
 				<p>
-					<span style="font-weight: bold;"></span><a href="guias3.htm"
-						target="_blank">Modifica&ccedil;&atilde;o na guia que mostra o
-						cat&aacute;logo de dados. Uso de combo ao inv&eacute;s de
-						&aacute;rvore</a>
+					<span style="font-weight: bold;"></span><a href="guias3.htm" target="_blank">Modifica&ccedil;&atilde;o na guia que mostra o cat&aacute;logo de dados. Uso de combo ao inv&eacute;s de &aacute;rvore</a>
 				</p>
 				<p>
 					<a href="guias2.htm" target="_blank">Guias do tipo sanfona</a>
 				</p>
 				<p>
-					<span style="font-weight: bold;"></span><a href="guias4.htm"
-						target="_blank">Inicia com uma guia espec&iacute;fica</a>
+					<span style="font-weight: bold;"></span><a href="guias4.htm" target="_blank">Inicia com uma guia espec&iacute;fica</a>
 				</p>
 				<p>
-					<a href="fotos1.htm" target="_blank">Guias do tipo sanfona com
-						fotos</a>
+					<a href="fotos1.htm" target="_blank">Guias do tipo sanfona com fotos</a>
 				</p>
 				<p>
-					<a href="guias1.htm" target="_blank">Retorna &agrave; guia
-						padr&atilde;o ap&oacute;s adicionar um tema</a>
+					<a href="guias1.htm" target="_blank">Retorna &agrave; guia padr&atilde;o ap&oacute;s adicionar um tema</a>
 				</p>
 			</fieldset>
 			<fieldset>
 				<legend>
-				<b>Barras de bot&otilde;es</b>
+					<b>Barras de bot&otilde;es</b>
 				</legend>
 				<p>
 					<a href="botoestop.htm" target="_blank">Barra do tipo "olho de peixe" posicionada na parte superior do mapa</a>
 				</p>
 				<p>
-					<a href="botoes6.htm" target="_blank">Apenas alguns
-						&iacute;cones s&atilde;o mostrados e com uma fun&ccedil;&atilde;o
-						alterada (bin&oacute;culo)</a>
+					<a href="botoes6.htm" target="_blank">Apenas alguns &iacute;cones s&atilde;o mostrados e com uma fun&ccedil;&atilde;o alterada (bin&oacute;culo)</a>
 				</p>
 				<p>
-					<a href="botoes1.htm" target="_blank">Barra apenas com os
-						&iacute;cones</a>
+					<a href="botoes1.htm" target="_blank">Barra apenas com os &iacute;cones</a>
 				</p>
 				<p>
-					<a href="botoeshtm.htm" target="_blank">Barra com bot&otilde;es
-						criados via HTML</a>
+					<a href="botoeshtm.htm" target="_blank">Barra com bot&otilde;es criados via HTML</a>
 				</p>
 				<p>
-					<a href="botoes5.htm" target="_blank">Como inserir bot&otilde;es
-						na barra de bot&otilde;es</a>
+					<a href="botoes5.htm" target="_blank">Como inserir bot&otilde;es na barra de bot&otilde;es</a>
 				</p>
 				<p>
-					<a href="botoes2.htm" target="_blank">Constru&ccedil;&atilde;o
-						das barras de bot&otilde;es via javascript, sem necessidade de
-						definir elementos no HTML</a>
+					<a href="botoes2.htm" target="_blank">Constru&ccedil;&atilde;o das barras de bot&otilde;es via javascript, sem necessidade de definir elementos no HTML</a>
 				</p>
 				<p>
-					<a href="botoes3.htm" target="_blank">Constru&ccedil;&atilde;o
-						das barras de bot&otilde;es via javascript, com escolha dos
-						bot&otilde;es que ir&atilde;o ser inclu&iacute;dos</a>
+					<a href="botoes3.htm" target="_blank">Constru&ccedil;&atilde;o das barras de bot&otilde;es via javascript, com escolha dos bot&otilde;es que ir&atilde;o ser inclu&iacute;dos</a>
 				</p>
 				<p>
-					<a href="botoes4.htm" target="_blank">Constru&ccedil;&atilde;o
-						das barras de bot&otilde;es via javascript, com escolha dos
-						bot&otilde;es que ir&atilde;o ser inclu&iacute;dos e estilo
-						diferente</a>
+					<a href="botoes4.htm" target="_blank">Constru&ccedil;&atilde;o das barras de bot&otilde;es via javascript, com escolha dos bot&otilde;es que ir&atilde;o ser inclu&iacute;dos e estilo diferente</a>
 				</p>
 			</fieldset>
 			<fieldset>
 				<legend>
-				<b>Legenda</b>
+					<b>Legenda</b>
 				</legend>
 				<p>
 					<a href="legenda1.htm" target="_blank">Legenda com grupos</a>
@@ -175,11 +145,10 @@ body,td {
 			</fieldset>
 			<fieldset>
 				<legend>
-				<b>Customiza&ccedil;&atilde;o de ferramentas existentes</b>
+					<b>Customiza&ccedil;&atilde;o de ferramentas existentes</b>
 				</legend>
 				<p>
-					<a href="fotos.htm" target="_blank">Mapa com a ferramenta
-						"carousel" posicionada in&iacute;cio do mapa</a>
+					<a href="fotos.htm" target="_blank">Mapa com a ferramenta "carousel" posicionada in&iacute;cio do mapa</a>
 				</p>
 				<p>
 					<a href="fotos.htm" target="_blank">Lista de fotos em uma guia</a>
@@ -188,12 +157,10 @@ body,td {
 					<a href="aplic1.htm" target="_blank">Busca r&aacute;pida</a>
 				</p>
 				<p>
-					<a href="aplic2.htm" target="_blank">Adiciona uma camada extra
-						via javascript</a>
+					<a href="aplic2.htm" target="_blank">Adiciona uma camada extra via javascript</a>
 				</p>
 				<p>
-					<a href="camadas5.htm" target="_blank">Vincula temas na
-						&aacute;rvore de camadas para ligar/desligar em bloco</a>
+					<a href="camadas5.htm" target="_blank">Vincula temas na &aacute;rvore de camadas para ligar/desligar em bloco</a>
 				</p>
 			</fieldset>
 			<fieldset>
@@ -201,86 +168,63 @@ body,td {
 					<b>Inclus&atilde;o de um mapa dentro de uma p&aacute;gina usando DIV</b>
 				</legend>
 				<p>
-					<a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Bot&otilde;es
-					com destaque laranja, em dois grupos na parte superior e mapa com
-					zoom
+					<a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Bot&otilde;es com destaque laranja, em dois grupos na parte superior e mapa com zoom
 				</p>
 				<p>
-					<a href="mashup2.htm" target="_blank">Exemplo 2 </a>- Bot&otilde;es
-					com destaque laranja, em um &uacute;nico grupo na parte superior e
-					mapa sem zoom
+					<a href="mashup2.htm" target="_blank">Exemplo 2 </a>- Bot&otilde;es com destaque laranja, em um &uacute;nico grupo na parte superior e mapa sem zoom
 				</p>
 				<p>
-					<a href="mashup3.htm" target="_blank">Exemplo 3 </a>- Sem as guias,
-					com os bot&otilde;es na parte superior e a legenda em um outro local
-					da p&aacute;gina
+					<a href="mashup3.htm" target="_blank">Exemplo 3 </a>- Sem as guias, com os bot&otilde;es na parte superior e a legenda em um outro local da p&aacute;gina
 				</p>
 				<p>
 					<a href="mashup9.htm" target="_blank">Exemplo 3a </a>- O mesmo que o 3 mas usando o Open Street Map
 				</p>
 				<p>
-					<a href="mashup4.htm" target="_blank">Exemplo 4 </a>- Sem as guias,
-					com os bot&otilde;es na parte superior e a legenda em uma janela
-					flutuante
+					<a href="mashup4.htm" target="_blank">Exemplo 4 </a>- Sem as guias, com os bot&otilde;es na parte superior e a legenda em uma janela flutuante
 				</p>
 				<p>
-					<a href="mashup5.htm" target="_blank">Exemplo 5 </a>- Sem as guias e
-					apenas com os bot&otilde;es de nave&ccedil;&atilde;o em uma janela
-					flutuante
+					<a href="mashup5.htm" target="_blank">Exemplo 5 </a>- Sem as guias e apenas com os bot&otilde;es de nave&ccedil;&atilde;o em uma janela flutuante
 				</p>
 				<p>
-					<a href="mashup6.htm" target="_blank">Exemplo 6 </a>- Mapa
-					posicionado no canto superior esquerdo, sem as guias e apenas com os
-					bot&otilde;es de nave&ccedil;&atilde;o em uma janela flutuante
+					<a href="mashup6.htm" target="_blank">Exemplo 6 </a>- Mapa posicionado no canto superior esquerdo, sem as guias e apenas com os bot&otilde;es de nave&ccedil;&atilde;o em uma janela flutuante
 				</p>
 			</fieldset>
 			<fieldset>
 				<legend>
-				<b>Inclus&atilde;o de um mapa dentro de uma p&aacute;gina em um
-					IFRAME</b>
+					<b>Inclus&atilde;o de um mapa dentro de uma p&aacute;gina em um IFRAME</b>
 				</legend>
 				<p>
-					<a href="iframe1.htm" target="_blank">Exemplo 1</a> - Sem controle
-					de tamanho
+					<a href="iframe1.htm" target="_blank">Exemplo 1</a> - Sem controle de tamanho
 				</p>
 				<p>
-					<a href="iframe2.htm" target="_blank">Exemplo 2</a> - Com tamanho
-					controlado<br>
+					<a href="iframe2.htm" target="_blank">Exemplo 2</a> - Com tamanho controlado<br>
 				</p>
 			</fieldset>
 			<h2>Interface Google Maps</h2>
 			<fieldset>
 				<p>
-					<a href="googlemapssanfona.phtml" target="_blank">Guias do tipo
-						sanfona</a>
+					<a href="googlemapssanfona.phtml" target="_blank">Guias do tipo sanfona</a>
 				</p>
 				<p>
 					<a href="googlemapscomogc.php" target="_blank">Como adicionar uma camada WMS do i3Geo em um mapa normal do Google Maps</a>
 				</p>
 			</fieldset>
-			<h2>Configura&ccedil;&atilde;o de janelas, &aacute;rvores de
-				camadas e adi&ccedil;&atilde;o de temas</h2>
+			<h2>Configura&ccedil;&atilde;o de janelas, &aacute;rvores de camadas e adi&ccedil;&atilde;o de temas</h2>
 			<fieldset>
 				<p>
 					<a href="adicionatema.htm" target="_blank">Como definir as camadas que ser&atilde;o inclu&iacute;das no mapa na inicializa&ccedil;&atilde;o por meio da configura&ccedil;&atilde;o de propriedades via Javascript</a>
 				</p>
 				<p>
-					<a href="janelas.htm" target="_blank">Op&ccedil;&otilde;es de
-						cria&ccedil;&atilde;o de janelas flutuantes</a>
+					<a href="janelas.htm" target="_blank">Op&ccedil;&otilde;es de cria&ccedil;&atilde;o de janelas flutuantes</a>
 				</p>
 				<p>
-					<a href="arvoredetemas.htm" target="_blank">Construtor de
-						op&ccedil;&otilde;es da &aacute;rvore de adi&ccedil;&atilde;o de
-						temas</a>
+					<a href="arvoredetemas.htm" target="_blank">Construtor de op&ccedil;&otilde;es da &aacute;rvore de adi&ccedil;&atilde;o de temas</a>
 				</p>
 				<p>
-					<a href="arvoredecamadas.htm" target="_blank">Construtor de
-						op&ccedil;&otilde;es da &aacute;rvore de camadas</a>
+					<a href="arvoredecamadas.htm" target="_blank">Construtor de op&ccedil;&otilde;es da &aacute;rvore de camadas</a>
 				</p>
 				<p>
-					<a href="combos.htm" target="_blank">Cria&ccedil;&atilde;o de
-						combos baseados na &aacute;rvore de camadas e lista de colunas de
-						um tema</a>
+					<a href="combos.htm" target="_blank">Cria&ccedil;&atilde;o de combos baseados na &aacute;rvore de camadas e lista de colunas de um tema</a>
 				</p>
 				<p>
 					<a href="camadas1.htm" target="_blank">&Aacute;rvore expandida</a>
@@ -289,12 +233,10 @@ body,td {
 					<a href="camadas2.htm" target="_blank">Legenda expandida</a>
 				</p>
 				<p>
-					<a href="camadas3.htm" target="_blank">&Aacute;rvore
-						simplificada</a>
+					<a href="camadas3.htm" target="_blank">&Aacute;rvore simplificada</a>
 				</p>
 				<p>
-					<a href="camadas4.htm" target="_blank">Op&ccedil;&atilde;o "mais
-						temas" na guia de camadas</a>
+					<a href="camadas4.htm" target="_blank">Op&ccedil;&atilde;o "mais temas" na guia de camadas</a>
 				</p>
 				<p>
 					<a href="legenda2.htm" target="_blank">&Aacute;rvore com grupos</a>
@@ -309,39 +251,19 @@ body,td {
 			<h2>Login</h2>
 			<fieldset>
 				<p>
-					<a href="login.htm" target="_blank">Login simples</a> Abre uma
-					janela de di&aacute;logo para que o usu&aacute;rio fa&ccedil;a
-					login. Nesse exemplo n&atilde;o &eacute; considerado se o login
-					j&aacute; foi feito antes ou n&atilde;o. Essa t&eacute;cnica
-					n&atilde;o oferece muita seguran&ccedil;a pois o c&oacute;digo
-					javascript fica exposto e um usu&aacute;rio mais experiente pode
-					burlar o login.
+					<a href="login.htm" target="_blank">Login simples</a> Abre uma janela de di&aacute;logo para que o usu&aacute;rio fa&ccedil;a login. Nesse exemplo n&atilde;o &eacute; considerado se o login j&aacute; foi feito antes ou n&atilde;o. Essa t&eacute;cnica n&atilde;o oferece muita seguran&ccedil;a pois o c&oacute;digo javascript fica exposto e um usu&aacute;rio mais experiente pode burlar o login.
 				</p>
 				<p>
-					<a href="login1.htm" target="_blank">Login simples com
-						verifica&ccedil;&atilde;o</a> Abre uma janela de di&aacute;logo para
-					que o usu&aacute;rio fa&ccedil;a login. Ao contr&aacute;rio do
-					anterior nesse exemplo &eacute; considerado se o login j&aacute; foi
-					feito antes ou n&atilde;o. Essa t&eacute;cnica n&atilde;o oferece
-					muita seguran&ccedil;a pois o c&oacute;digo javascript fica exposto
-					e um usu&aacute;rio mais experiente pode burlar o login.
+					<a href="login1.htm" target="_blank">Login simples com verifica&ccedil;&atilde;o</a> Abre uma janela de di&aacute;logo para que o usu&aacute;rio fa&ccedil;a login. Ao contr&aacute;rio do anterior nesse exemplo &eacute; considerado se o login j&aacute; foi feito antes ou n&atilde;o. Essa t&eacute;cnica n&atilde;o oferece muita seguran&ccedil;a pois o c&oacute;digo javascript fica exposto e um usu&aacute;rio mais experiente pode burlar o login.
 				</p>
 				<p>
-					<a href="login2.htm" target="_blank">Login com p&aacute;gina de
-						verifica&ccedil;&atilde;o anterior</a> Abre uma janela de
-					di&aacute;logo para que o usu&aacute;rio fa&ccedil;a login. O
-					c&oacute;digo javascript s&oacute; fica exposto ap&oacute;s o login.
+					<a href="login2.htm" target="_blank">Login com p&aacute;gina de verifica&ccedil;&atilde;o anterior</a> Abre uma janela de di&aacute;logo para que o usu&aacute;rio fa&ccedil;a login. O c&oacute;digo javascript s&oacute; fica exposto ap&oacute;s o login.
 				</p>
 				<p>
-					<a href="login3.php" target="_blank">Exig&ecirc;ncia de login </a>A
-					p&aacute;gina s&oacute; &eacute; aberta se o usu&aacute;rio estiver
-					logado.
+					<a href="login3.php" target="_blank">Exig&ecirc;ncia de login </a>A p&aacute;gina s&oacute; &eacute; aberta se o usu&aacute;rio estiver logado.
 				</p>
 				<p>
-					<a href="login4.htm" target="_blank">Exige login e verifica
-						acesso &agrave; p&aacute;gina </a>O mapa s&oacute; &eacute; aberto se o
-					usu&aacute;rio estiver cadastrado em um dos pap&eacute;is que pode
-					acessar essa opera&ccedil;&atilde;o.
+					<a href="login4.htm" target="_blank">Exige login e verifica acesso &agrave; p&aacute;gina </a>O mapa s&oacute; &eacute; aberto se o usu&aacute;rio estiver cadastrado em um dos pap&eacute;is que pode acessar essa opera&ccedil;&atilde;o.
 				</p>
 			</fieldset>
 		</div>
@@ -19,18 +19,21 @@ Para a versão 6.0
  
 - a ordem dos botões na barra de botões foi alterada para mostrar primeiro o botão da barra de edição
  
-- as funções de desenho de elementos gráficos utilizados pela interface GoogleEarth foram movidos de classesjs/classe_interface.js 
+- as funções de desenho de elementos gráficos utilizados pela interface GoogleEarth foram movidos de classesjs/classe_interface.js
 para classe_desenho.js
  
 - por default a árvore de temas agora é mostrada com checkbox ao invés de botão do tipo radio
  
 - a árvore de temas agora pode ser utilizada para ligar/desligar camadas já existentes no mapa
  
-- alteração na estrutura do objeto que contém as informações sobre as camadas existentes no mapa. Esse objeto foi reduzido em 
+- alteração na estrutura do objeto que contém as informações sobre as camadas existentes no mapa. Esse objeto foi reduzido em
 tamanho passando a usar uma lista de chaves e um array com os valores. Esse objeto é estruturado no servidor por classe_temas.php
  
 - remoção do arquivo css/botoes.css em favor de css/botoes2.css
  
+- as opções da guia móvel foram alteradas. Podem ser necessários ajustes nos estilos inline das interfaces em uso
+para posicionar corretamente os elementos dentro das guias
+
 -------------------------------------------------------------------------------------------------
 Para a versão 5.0
...	...	@@ -233,7 +233,7 @@ fieldset {
233	233	height: 25px;
234	234	width: 100%;
235	235	text-align: left;
236		- background-color: #00500F;
	236	+ background-color: #990000;
237	237	}
238	238
239	239	.fundoPonto {
...	...
...	...	@@ -0,0 +1,174 @@
	1	+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
	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 - OpenLayers+OSM</title>
	7	+</head>
	8	+<body id="i3geo" style='margin-left: 7px; background: white;'>
	9	+ <!-- inclui o nome do usuario logado -->
	10	+ <div id="i3GEONomeLogin" style="position: absolute; left: 10px; top: 12px; font-size: 11px; z-index: 50000"></div>
	11	+ <table id='mst' summary="" style='display: none;' width=100% cellspacing='0'>
	12	+ <tr>
	13	+ <td id="contemMenu" style="background: black; height: 30px; text-align: right; border-width: 0pt 0pt 1px; border-color: rgb(240, 240, 240)">
	14	+ <!--menu suspenso-->
	15	+ <div id="menus" style="height: 0px;"></div>
	16	+ </td>
	17	+ </tr>
	18	+ <tr>
	19	+ <td style="vertical-align: top; border-width: 0px;">
	20	+ <table width="100%" style="vertical-align: top; border-width: 0px">
	21	+ <tr>
	22	+ <td class=verdeclaro id=contemImg>
	23	+ <div id=corpoMapa style="position: relative; background-image: url('../imagens/i3geo1bw.jpg');"></div>
	24	+ </td>
	25	+ </tr>
	26	+ </table>
	27	+ </td>
	28	+ </tr>
	29	+ <tr>
	30	+ <td>
	31	+ <table style="width: 100%; height: 28px">
	32	+ <tr>
	33	+ <td class=fundoRodape style="width: 25%">
	34	+ <!-- aqui será incluída a escala numérica -->
	35	+ <div id=escala style="margin: auto; text-align: right; left: 15px;"></div>
	36	+ </td>
	37	+ <td class=fundoRodape style="width: 5%"></td>
	38	+ <td class=fundoRodape style="width: 40%">
	39	+ <!-- aqui será incluído o gadget que mostra a coordenada geográfica da posição do mouse -->
	40	+ <div id=localizarxy style="margin: auto; text-align: left; font-size: 10px; display: inline-table"></div>
	41	+ </td>
	42	+ <td class=fundoRodape style="width: 20%">
	43	+ <!-- botão de compartilhamento em redes sociais-->
	44	+ <div id=i3GEOcompartilhar style="width: 170px; margin: auto; text-align: left; padding-top: 1px"></div> <!-- aqui será incluído o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
	45	+ <div id=tempoRedesenho style="z-index: 100; position: absolute; top: 0px; color: green; background-color: black; width: 50px; display: none"></div>
	46	+ </td>
	47	+ <!-- aqui serão incluídas as bandeiras que permitem a troca de idioma -->
	48	+ <td class=fundoRodape style="width: 10%;">
	49	+ <div id=seletorIdiomas style="right: 15px;"></div>
	50	+ </td>
	51	+ </tr>
	52	+ </table>
	53	+ </td>
	54	+ </tr>
	55	+ </table>
	56	+ <table id="i3GEOlogoMarca" style='margin: 0px auto; box-shadow: 0 1px 13px gray; border-radius: 5px;'>
	57	+ <tr>
	58	+ <td><div id=versaoi3geo></div>
	59	+ <h2 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para criação de mapas interativos e geoprocessamento</h2>
	60	+ <h3 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, é licenciado sob GPL e integra o Portal do Software Público Brasileiro</h3></td>
	61	+ </tr>
	62	+ <tr>
	63	+ <td style="padding: 10px;"><img style="width: 560px; height: 81px" alt="" src='../imagens/logo_inicio.png'></td>
	64	+ </tr>
	65	+ <tr>
	66	+ <td>
	67	+ <!--
	68	+ <script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script>
	69	+ -->
	70	+ </td>
	71	+ </tr>
	72	+ </table>
	73	+
	74	+<!-- guias laterais -->
	75	+<div id="i3GEOguiaMovel" style="visibility:hidden;position:absolute;display:block;border:0px solid white;text-align:left;z-index:2000;background-color:none">
	76	+ <div style="cursor:pointer;position:absolute;top:50%;margin-top: -65px;width:30px;z-index:5000; left:18px;">
	77	+ <img src='../imagens/openbars1.png' style="width: 48px; position: absolute; left: -16px; height: 412px; top: -160px;">
	78	+ <div id="iconeGuia_temas" ></div>
	79	+ <div id="iconeGuia_adiciona" style="margin-top:3px;" ></div>
	80	+ <div id="iconeGuia_legenda" style="margin-top:3px;"></div>
	81	+ </div>
	82	+ <div id="i3GEOguiaMovelMolde" style="top:0px;box-shadow:0 2px 10px 0 #888888;border-radius:5px 0px 0px 5px;position:absolute;display:none;border:0px solid white;text-align:left;z-index:1000;background-color:gray">
	83	+ <div id="i3GEOguiaMovelConteudo" style='top:10px;overflow:auto;display:none;position:absolute;border-color:gray;border-width:0px 0 0px 0px;left:0px;height:0px;background-color:white'>
	84	+ <div id='guia1obj' style='display:none;' >
	85	+ <!-- Esta div acrescenta a opção de busca rápida, caso vc queira colocá-la em um lugar específico -->
	86	+ <div style='left:5px;top:10px;' id=buscaRapida ></div>
	87	+ <!-- Esta div acrescenta a lista de propriedades do mapa -->
	88	+ <div id=listaPropriedades style='top:15px;' ></div>
	89	+ <!-- Esta div acrescenta a lista de de camadas do tipo 'baselayers' específicas da interface Openlayers. Veja também a opção i3GEO.Interface.openlayers.GADGETS.LayerSwitcher -->
	90	+ <div id=listaLayersBase style='top:15px;'></div>
	91	+ <!-- Esta div acrescenta a lista de de camadas disponíveis no mapa atual -->
	92	+ <div id=listaTemas style='top:15px;'></div>
	93	+ </div>
	94	+ <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
	95	+ <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
	96	+ </div>
	97	+ </div>
	98	+</div>
	99	+
	100	+ <script src="../classesjs/i3geo.js"></script>
	101	+ <script src="../pacotes/openlayers/OpenLayers2131.js.php"></script>
	102	+ <link rel="stylesheet" type="text/css" href="../css/black.css">
	103	+
	104	+ <script>
	105	+ i3GEO.configura.locaplic = i3GEO.util.protocolo() + "://"
	106	+ + window.location.host + "/i3geo";
	107	+ i3GEO.configura.autotamanho = false;
	108	+ i3GEO.Interface.ATUAL = "openlayers";
	109	+ i3GEO.Interface.IDCORPO = "contemImg";
	110	+ i3GEO.Interface.openlayers.TILES = true;
	111	+ i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}';
	112	+ i3GEO.configura.oMenuData.submenus["interface"] = [
	113	+ { id:"omenudataInterface0a",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("d27")+'</b></span>',url: "#"},
	114	+ { id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_ol.htm?'+i3GEO.configura.sid" },
	115	+ { id:"omenudataInterface2a",text: "OpenLayers OSM", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_osm.htm?'+i3GEO.configura.sid" },
	116	+ { id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_gm.phtml?'+i3GEO.configura.sid" },
	117	+ { id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" },
	118	+ { id:"omenudataInterface0b",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("u27")+'</b></span>',url: "#"},
	119	+ { id:"omenudataInterface6",text: $trad("u21"), url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" },
	120	+ { id:"omenudataInterface7",text: "Serviços WMS", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" },
	121	+ { id:"omenudataInterface9",text: "Download de dados", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/datadownload.htm')" },
	122	+ { id:"omenudataInterface11",text: $trad("p20"), url: "javascript:i3GEO.mapa.dialogo.telaRemota()" }
	123	+ ];
	124	+
	125	+ i3GEO.cria();
	126	+ i3GEO.configura.mapaRefDisplay = "none";
	127	+ i3GEO.barraDeBotoes.TIPO = "olhodepeixe";
	128	+ //ajusta o deslocamento da barra de botoes
	129	+ i3GEO.barraDeBotoes.OFFSET = 11;
	130	+ //ajusta a posicao da barra de botoes no IE
	131	+ if(navm){
	132	+ i3GEO.barraDeBotoes.OFFSET = 5;
	133	+ }
	134	+ i3GEO.configura.oMenuData["submenus"]["janelas"] = [];
	135	+ i3GEO.ajuda.ATIVAJANELA = false;
	136	+ i3GEO.idioma.IDSELETOR = "seletorIdiomas";
	137	+ i3GEO.Interface.ATIVAMENUCONTEXTO = false;
	138	+ //i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";
	139	+ i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
	140	+ i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
	141	+ i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
	142	+ i3GEO.mapa.AUTORESIZE = true;
	143	+ i3GEO.guias.TIPO = "movel";
	144	+ i3GEO.guias.guiaMovel.config.topGuiaMovel = 36;
	145	+ i3GEO.janela.ativaAlerta();
	146	+ i3GEO.finaliza = function() {
	147	+ if ($i("i3GEOlogoMarca")) {
	148	+ $i("i3GEOlogoMarca").style.display = "none";
	149	+ }
	150	+ i3GEO.mapa.insereDobraPagina("googlemaps",
	151	+ "../imagens/dobragooglemaps.png");
	152	+ };
	153	+ i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true;
	154	+ i3GEO.janela.TRANSICAOSUAVE = true;
	155	+ OpenLayers.ImgPath = "../pacotes/openlayers/img/";
	156	+ (function() {
	157	+ //http://maps.stamen.com/#watercolor/12/37.7706/-122.3782
	158	+ var aquarela = new OpenLayers.Layer.OSM("Aquarela",
	159	+ "http://tile.stamen.com/watercolor/${z}/${x}/${y}.jpg", {
	160	+ isBaseLayer : true,
	161	+ visibility : true
	162	+ });
	163	+ var osm = new OpenLayers.Layer.OSM("OSM",
	164	+ "http://tile.openstreetmap.org/${z}/${x}/${y}.png", {
	165	+ isBaseLayer : true,
	166	+ visibility : false
	167	+ });
	168	+ i3GEO.Interface.openlayers.LAYERSADICIONAIS = [ osm, aquarela ];
	169	+ })();
	170	+ i3GEO.Interface.openlayers.googleLike = true;
	171	+ i3GEO.inicia();
	172	+ </script>
	173	+</body>
	174	+</html>
...	...
...	...	@@ -0,0 +1,170 @@
	1	+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
	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 - OpenLayers+OSM</title>
	7	+</head>
	8	+<body id="i3geo" style='margin-left: 7px; background: white;'>
	9	+ <!-- inclui o nome do usuario logado -->
	10	+ <div id="i3GEONomeLogin" style="position: absolute; left: 10px; top: 12px; font-size: 11px; z-index: 50000"></div>
	11	+ <table id='mst' summary="" style='display: none;' width=100% cellspacing='0'>
	12	+ <tr>
	13	+ <td id="contemMenu" style="background: black; height: 30px; text-align: right; border-width: 0pt 0pt 1px; border-color: rgb(240, 240, 240)">
	14	+ <!--menu suspenso-->
	15	+ <div id="menus" style="height: 0px;"></div>
	16	+ </td>
	17	+ </tr>
	18	+ <tr>
	19	+ <td style="vertical-align: top; border-width: 0px;">
	20	+ <table width="100%" style="vertical-align: top; border-width: 0px">
	21	+ <tr>
	22	+ <td class=verdeclaro id=contemImg>
	23	+ <div id=corpoMapa style="position: relative; background-image: url('../imagens/i3geo1bw.jpg');"></div>
	24	+ </td>
	25	+ </tr>
	26	+ </table>
	27	+ </td>
	28	+ </tr>
	29	+ <tr>
	30	+ <td>
	31	+ <table style="width: 100%; height: 28px">
	32	+ <tr>
	33	+ <td class=fundoRodape style="width: 25%">
	34	+ <!-- aqui será incluída a escala numérica -->
	35	+ <div id=escala style="margin: auto; text-align: right; left: 15px;"></div>
	36	+ </td>
	37	+ <td class=fundoRodape style="width: 5%"></td>
	38	+ <td class=fundoRodape style="width: 40%">
	39	+ <!-- aqui será incluído o gadget que mostra a coordenada geográfica da posição do mouse -->
	40	+ <div id=localizarxy style="margin: auto; text-align: left; font-size: 10px; display: inline-table"></div>
	41	+ </td>
	42	+ <td class=fundoRodape style="width: 20%">
	43	+ <!-- botão de compartilhamento em redes sociais-->
	44	+ <div id=i3GEOcompartilhar style="width: 170px; margin: auto; text-align: left; padding-top: 1px"></div> <!-- aqui será incluído o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
	45	+ <div id=tempoRedesenho style="z-index: 100; position: absolute; top: 0px; color: green; background-color: black; width: 50px; display: none"></div>
	46	+ </td>
	47	+ <!-- aqui serão incluídas as bandeiras que permitem a troca de idioma -->
	48	+ <td class=fundoRodape style="width: 10%;">
	49	+ <div id=seletorIdiomas style="right: 15px;"></div>
	50	+ </td>
	51	+ </tr>
	52	+ </table>
	53	+ </td>
	54	+ </tr>
	55	+ </table>
	56	+ <table id="i3GEOlogoMarca" style='margin: 0px auto; box-shadow: 0 1px 13px gray; border-radius: 5px;'>
	57	+ <tr>
	58	+ <td><div id=versaoi3geo></div>
	59	+ <h2 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para criação de mapas interativos e geoprocessamento</h2>
	60	+ <h3 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, é licenciado sob GPL e integra o Portal do Software Público Brasileiro</h3></td>
	61	+ </tr>
	62	+ <tr>
	63	+ <td style="padding: 10px;"><img style="width: 560px; height: 81px" alt="" src='../imagens/logo_inicio.png'></td>
	64	+ </tr>
	65	+ <tr>
	66	+ <td>
	67	+ <!--
	68	+ <script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script>
	69	+ -->
	70	+ </td>
	71	+ </tr>
	72	+ </table>
	73	+<!-- guias laterais -->
	74	+<div id="i3GEOguiaMovel" style="visibility:hidden;position:absolute;display:block;border:0px solid white;text-align:left;z-index:2000;background-color:none">
	75	+ <img id="i3GEOguiaMovelPuxador" onclick='i3GEO.guias.guiaMovel.abreFecha()' style='z-index:2;border:solid 0px white;left:0px;position:absolute;top:0px' width='0px' src='../imagens/openbars.png' >
	76	+ <div id="i3GEOguiaMovelMolde" style="top:0px;box-shadow:0 2px 10px 0 #888888;border-radius:5px 0px 0px 5px;position:absolute;display:none;border:0px solid white;text-align:left;z-index:1000;background-color:gray">
	77	+ <div id="i3GEOguiaMovelIcones" style='overflow:none;left:0px;display:none;position:absolute;top:0px;text-align:center;height:0px;width:0px;border:solid 0px white;background-color:white' ></div>
	78	+ <div id="i3GEOguiaMovelConteudo" style='top:40px;overflow:auto;display:none;position:absolute;border-color:gray;border-width:0px 0 0px 0px;left:0px;height:0px;background-color:white'>
	79	+ <div id='guia1obj' style='display:none;' >
	80	+ <!-- Esta div acrescenta a opção de busca rápida, caso vc queira colocá-la em um lugar específico -->
	81	+ <div style='left:5px;top:10px;' id=buscaRapida ></div>
	82	+ <!-- Esta div acrescenta a lista de propriedades do mapa -->
	83	+ <div id=listaPropriedades style='top:15px;' ></div>
	84	+ <!-- Esta div acrescenta a lista de de camadas do tipo 'baselayers' específicas da interface Openlayers. Veja também a opção i3GEO.Interface.openlayers.GADGETS.LayerSwitcher -->
	85	+ <div id=listaLayersBase style='top:15px;'></div>
	86	+ <!-- Esta div acrescenta a lista de de camadas disponíveis no mapa atual -->
	87	+ <div id=listaTemas style='top:15px;'></div>
	88	+ </div>
	89	+ <div id='guia2obj' style='display:none;'>Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /></div>
	90	+ <div id='guia4obj' style='display:none;text-align:left'><div id='legenda' style='text-align:left'></div></div>
	91	+ <div id='guia5obj' style='display:none;text-align:left'><div id='banners' style='overflow:auto;text-align:left'>Aguarde...</div></div>
	92	+ </div>
	93	+ </div>
	94	+</div>
	95	+
	96	+ <script src="../classesjs/i3geo.js"></script>
	97	+ <script src="../pacotes/openlayers/OpenLayers2131.js.php"></script>
	98	+ <link rel="stylesheet" type="text/css" href="../css/black.css">
	99	+
	100	+ <script>
	101	+ i3GEO.configura.locaplic = i3GEO.util.protocolo() + "://"
	102	+ + window.location.host + "/i3geo";
	103	+ i3GEO.configura.autotamanho = false;
	104	+ i3GEO.Interface.ATUAL = "openlayers";
	105	+ i3GEO.Interface.IDCORPO = "contemImg";
	106	+ i3GEO.Interface.openlayers.TILES = true;
	107	+ i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}';
	108	+ i3GEO.configura.oMenuData.submenus["interface"] = [
	109	+ { id:"omenudataInterface0a",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("d27")+'</b></span>',url: "#"},
	110	+ { id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_ol.htm?'+i3GEO.configura.sid" },
	111	+ { id:"omenudataInterface2a",text: "OpenLayers OSM", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_osm.htm?'+i3GEO.configura.sid" },
	112	+ { id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_gm.phtml?'+i3GEO.configura.sid" },
	113	+ { id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" },
	114	+ { id:"omenudataInterface0b",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("u27")+'</b></span>',url: "#"},
	115	+ { id:"omenudataInterface6",text: $trad("u21"), url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" },
	116	+ { id:"omenudataInterface7",text: "Serviços WMS", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" },
	117	+ { id:"omenudataInterface9",text: "Download de dados", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/datadownload.htm')" },
	118	+ { id:"omenudataInterface11",text: $trad("p20"), url: "javascript:i3GEO.mapa.dialogo.telaRemota()" }
	119	+ ];
	120	+
	121	+ i3GEO.cria();
	122	+ i3GEO.configura.mapaRefDisplay = "none";
	123	+ i3GEO.barraDeBotoes.TIPO = "olhodepeixe";
	124	+ //ajusta o deslocamento da barra de botoes
	125	+ i3GEO.barraDeBotoes.OFFSET = 11;
	126	+ //ajusta a posicao da barra de botoes no IE
	127	+ if(navm){
	128	+ i3GEO.barraDeBotoes.OFFSET = 5;
	129	+ }
	130	+ i3GEO.configura.oMenuData["submenus"]["janelas"] = [];
	131	+ i3GEO.ajuda.ATIVAJANELA = false;
	132	+ i3GEO.idioma.IDSELETOR = "seletorIdiomas";
	133	+ i3GEO.Interface.ATIVAMENUCONTEXTO = false;
	134	+ //i3GEO.arvoreDeTemas.TIPOBOTAO = "radio";
	135	+ i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true;
	136	+ i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = true;
	137	+ i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false;
	138	+ i3GEO.mapa.AUTORESIZE = true;
	139	+ i3GEO.guias.TIPO = "movel";
	140	+ i3GEO.guias.guiaMovel.config.topGuiaMovel = 36;
	141	+ i3GEO.janela.ativaAlerta();
	142	+ i3GEO.finaliza = function() {
	143	+ if ($i("i3GEOlogoMarca")) {
	144	+ $i("i3GEOlogoMarca").style.display = "none";
	145	+ }
	146	+ i3GEO.mapa.insereDobraPagina("googlemaps",
	147	+ "../imagens/dobragooglemaps.png");
	148	+ };
	149	+ i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true;
	150	+ i3GEO.janela.TRANSICAOSUAVE = true;
	151	+ OpenLayers.ImgPath = "../pacotes/openlayers/img/";
	152	+ (function() {
	153	+ //http://maps.stamen.com/#watercolor/12/37.7706/-122.3782
	154	+ var aquarela = new OpenLayers.Layer.OSM("Aquarela",
	155	+ "http://tile.stamen.com/watercolor/${z}/${x}/${y}.jpg", {
	156	+ isBaseLayer : true,
	157	+ visibility : true
	158	+ });
	159	+ var osm = new OpenLayers.Layer.OSM("OSM",
	160	+ "http://tile.openstreetmap.org/${z}/${x}/${y}.png", {
	161	+ isBaseLayer : true,
	162	+ visibility : false
	163	+ });
	164	+ i3GEO.Interface.openlayers.LAYERSADICIONAIS = [ osm, aquarela ];
	165	+ })();
	166	+ i3GEO.Interface.openlayers.googleLike = true;
	167	+ i3GEO.inicia();
	168	+ </script>
	169	+</body>
	170	+</html>
...	...
...	...	@@ -15,22 +15,29 @@ body,td {
15	15	}
16	16	</style>
17	17	<script>
18		-/*
19		-@TODO sempre verificar os exemplos
20		-*/
	18	+ /*
	19	+ @TODO sempre verificar os exemplos
	20	+ */
21	21	</script>
22	22	</head>
23	23	<body class="yui-skin-sam fundoPonto">
24	24	<center>
25	25	<div class="bordaSuperior"> </div>
26		- <div class="mascaraPrincipal" id="divGeral" >
27		- <img src="../imagens/i3geo1.jpg"><br>
	26	+ <div class="mascaraPrincipal" id="divGeral">
	27	+ <img src="../imagens/i3geo1.jpg">
	28	+ <br>
28	29	<h1>Exemplos de configuração da interface do i3geo</h1>
29	30	<h2>Diversos</h2>
30	31	<fieldset>
31	32	<p>
32	33	<a href="vinde.htm" target="_blank">Navegador de WMS cadastrados na INDE Brasileira</a>
33	34	</p>
	35	+ <p>
	36	+ <a href="guiamovel1.htm" target="_blank">Ícones inseridas no puxador lateral da guia móvel</a>
	37	+ </p>
	38	+ <p>
	39	+ <a href="guiamovel2.htm" target="_blank">Puxador lateral da guia móvel sem ícones</a>
	40	+ </p>
34	41	</fieldset>
35	42	<h2>Mashups</h2>
36	43	<fieldset>
...	...	@@ -44,47 +51,28 @@ body,td {
44	51	<h2>Interface OpenLayers</h2>
45	52	<fieldset>
46	53	<p>
47		- A interface OpenLayers passou a ser o padrão do i3Geo com a
48		- versão 4.4. O Modo TILE permite que o mapa seja
49		- construído em pequenas partes (TILES) apresentando uma
50		- navegabilidade contínua quando se desloca o mapa (pan). No
51		- modo normal, é desenhada apenas uma imagem para cada camada
52		- do mapa. Esse último modo pode apresentar uma performance
53		- melhor em sistemas baseados no Windows (MS4W). O uso de "TILES" ou
54		- não é controlado pela variável <i>i3GEO.Interface.openlayers.TILES
55		- = false\|true</i>
	54	+ A interface OpenLayers passou a ser o padrão do i3Geo com a versão 4.4. O Modo TILE permite que o mapa seja construído em pequenas partes (TILES) apresentando uma navegabilidade contínua quando se desloca o mapa (pan). No modo normal, é desenhada apenas uma imagem para cada camada do mapa. Esse último modo pode apresentar uma performance melhor em sistemas baseados no Windows (MS4W). O uso de "TILES" ou não é controlado pela
	55	+ variável <i>i3GEO.Interface.openlayers.TILES = false\|true</i>
56	56	</p>
57	57	<p>
58		- <a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES
59		- = false</a>
	58	+ <a href="openlayers1.htm" target="_blank">i3GEO.Interface.openlayers.TILES = false</a>
60	59	</p>
61	60	<p>
62		- <a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES
63		- = true</a>
	61	+ <a href="openlayers2.htm" target="_blank">i3GEO.Interface.openlayers.TILES = true</a>
64	62	</p>
65	63	</fieldset>
66	64	<fieldset>
67	65	<p>
68		- A interface OpenLayers cria um objeto chamado <i>i3geoOL</i> com
69		- base na API do OpenLayers. Esse objeto pode receber os
70		- métodos dessa API, permitindo modificar o mapa. Alguns
71		- parâmetros são controlados por variáveis
72		- específicas do i3Geo.
	66	+ A interface OpenLayers cria um objeto chamado <i>i3geoOL</i> com base na API do OpenLayers. Esse objeto pode receber os métodos dessa API, permitindo modificar o mapa. Alguns parâmetros são controlados por variáveis específicas do i3Geo.
73	67	</p>
74	68	<p>
75		- <a href="openlayers3.htm" target="_blank">Modo TILE com uma
76		- área de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER
77		- = 1;</i>
	69	+ <a href="openlayers3.htm" target="_blank">Modo TILE com uma área de entorno maior</a> <i>i3GEO.Interface.openlayers.BUFFER = 1;</i>
78	70	</p>
79	71	<p>
80		- <a href="openlayers4.htm" target="_blank">Ativação
81		- de um layer de fundo</a>
	72	+ <a href="openlayers4.htm" target="_blank">Ativação de um layer de fundo</a>
82	73	</p>
83	74	<p>
84		- <a href="openlayers5.htm" target="_blank">Modifica a
85		- extensão geográfica máxima de
86		- apresentação</a> <i>i3GEO.Interface.openlayers.MAXEXTENT
87		- = [-63.712484, -20.765721, -42.385294, -9.136698];</i>
	75	+ <a href="openlayers5.htm" target="_blank">Modifica a extensão geográfica máxima de apresentação</a> <i>i3GEO.Interface.openlayers.MAXEXTENT = [-63.712484, -20.765721, -42.385294, -9.136698];</i>
88	76	</p>
89	77	</fieldset>
90	78	<fieldset>
...	...	@@ -103,71 +91,53 @@ body,td {
103	91	<b>Guias e janelas </b>
104	92	</legend>
105	93	<p>
106		- <span style="font-weight: bold;"></span><a href="guias3.htm"
107		- target="_blank">Modificação na guia que mostra o
108		- catálogo de dados. Uso de combo ao invés de
109		- árvore</a>
	94	+ <span style="font-weight: bold;"></span><a href="guias3.htm" target="_blank">Modificação na guia que mostra o catálogo de dados. Uso de combo ao invés de árvore</a>
110	95	</p>
111	96	<p>
112	97	<a href="guias2.htm" target="_blank">Guias do tipo sanfona</a>
113	98	</p>
114	99	<p>
115		- <span style="font-weight: bold;"></span><a href="guias4.htm"
116		- target="_blank">Inicia com uma guia específica</a>
	100	+ <span style="font-weight: bold;"></span><a href="guias4.htm" target="_blank">Inicia com uma guia específica</a>
117	101	</p>
118	102	<p>
119		- <a href="fotos1.htm" target="_blank">Guias do tipo sanfona com
120		- fotos</a>
	103	+ <a href="fotos1.htm" target="_blank">Guias do tipo sanfona com fotos</a>
121	104	</p>
122	105	<p>
123		- <a href="guias1.htm" target="_blank">Retorna à guia
124		- padrão após adicionar um tema</a>
	106	+ <a href="guias1.htm" target="_blank">Retorna à guia padrão após adicionar um tema</a>
125	107	</p>
126	108	</fieldset>
127	109	<fieldset>
128	110	<legend>
129		- <b>Barras de botões</b>
	111	+ <b>Barras de botões</b>
130	112	</legend>
131	113	<p>
132	114	<a href="botoestop.htm" target="_blank">Barra do tipo "olho de peixe" posicionada na parte superior do mapa</a>
133	115	</p>
134	116	<p>
135		- <a href="botoes6.htm" target="_blank">Apenas alguns
136		- ícones são mostrados e com uma função
137		- alterada (binóculo)</a>
	117	+ <a href="botoes6.htm" target="_blank">Apenas alguns ícones são mostrados e com uma função alterada (binóculo)</a>
138	118	</p>
139	119	<p>
140		- <a href="botoes1.htm" target="_blank">Barra apenas com os
141		- ícones</a>
	120	+ <a href="botoes1.htm" target="_blank">Barra apenas com os ícones</a>
142	121	</p>
143	122	<p>
144		- <a href="botoeshtm.htm" target="_blank">Barra com botões
145		- criados via HTML</a>
	123	+ <a href="botoeshtm.htm" target="_blank">Barra com botões criados via HTML</a>
146	124	</p>
147	125	<p>
148		- <a href="botoes5.htm" target="_blank">Como inserir botões
149		- na barra de botões</a>
	126	+ <a href="botoes5.htm" target="_blank">Como inserir botões na barra de botões</a>
150	127	</p>
151	128	<p>
152		- <a href="botoes2.htm" target="_blank">Construção
153		- das barras de botões via javascript, sem necessidade de
154		- definir elementos no HTML</a>
	129	+ <a href="botoes2.htm" target="_blank">Construção das barras de botões via javascript, sem necessidade de definir elementos no HTML</a>
155	130	</p>
156	131	<p>
157		- <a href="botoes3.htm" target="_blank">Construção
158		- das barras de botões via javascript, com escolha dos
159		- botões que irão ser incluídos</a>
	132	+ <a href="botoes3.htm" target="_blank">Construção das barras de botões via javascript, com escolha dos botões que irão ser incluídos</a>
160	133	</p>
161	134	<p>
162		- <a href="botoes4.htm" target="_blank">Construção
163		- das barras de botões via javascript, com escolha dos
164		- botões que irão ser incluídos e estilo
165		- diferente</a>
	135	+ <a href="botoes4.htm" target="_blank">Construção das barras de botões via javascript, com escolha dos botões que irão ser incluídos e estilo diferente</a>
166	136	</p>
167	137	</fieldset>
168	138	<fieldset>
169	139	<legend>
170		- <b>Legenda</b>
	140	+ <b>Legenda</b>
171	141	</legend>
172	142	<p>
173	143	<a href="legenda1.htm" target="_blank">Legenda com grupos</a>
...	...	@@ -175,11 +145,10 @@ body,td {
175	145	</fieldset>
176	146	<fieldset>
177	147	<legend>
178		- <b>Customização de ferramentas existentes</b>
	148	+ <b>Customização de ferramentas existentes</b>
179	149	</legend>
180	150	<p>
181		- <a href="fotos.htm" target="_blank">Mapa com a ferramenta
182		- "carousel" posicionada início do mapa</a>
	151	+ <a href="fotos.htm" target="_blank">Mapa com a ferramenta "carousel" posicionada início do mapa</a>
183	152	</p>
184	153	<p>
185	154	<a href="fotos.htm" target="_blank">Lista de fotos em uma guia</a>
...	...	@@ -188,12 +157,10 @@ body,td {
188	157	<a href="aplic1.htm" target="_blank">Busca rápida</a>
189	158	</p>
190	159	<p>
191		- <a href="aplic2.htm" target="_blank">Adiciona uma camada extra
192		- via javascript</a>
	160	+ <a href="aplic2.htm" target="_blank">Adiciona uma camada extra via javascript</a>
193	161	</p>
194	162	<p>
195		- <a href="camadas5.htm" target="_blank">Vincula temas na
196		- árvore de camadas para ligar/desligar em bloco</a>
	163	+ <a href="camadas5.htm" target="_blank">Vincula temas na árvore de camadas para ligar/desligar em bloco</a>
197	164	</p>
198	165	</fieldset>
199	166	<fieldset>
...	...	@@ -201,86 +168,63 @@ body,td {
201	168	<b>Inclusão de um mapa dentro de uma página usando DIV</b>
202	169	</legend>
203	170	<p>
204		- <a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Botões
205		- com destaque laranja, em dois grupos na parte superior e mapa com
206		- zoom
	171	+ <a href="mashup1.htm" target="_blank">Exemplo 1 </a>- Botões com destaque laranja, em dois grupos na parte superior e mapa com zoom
207	172	</p>
208	173	<p>
209		- <a href="mashup2.htm" target="_blank">Exemplo 2 </a>- Botões
210		- com destaque laranja, em um único grupo na parte superior e
211		- mapa sem zoom
	174	+ <a href="mashup2.htm" target="_blank">Exemplo 2 </a>- Botões com destaque laranja, em um único grupo na parte superior e mapa sem zoom
212	175	</p>
213	176	<p>
214		- <a href="mashup3.htm" target="_blank">Exemplo 3 </a>- Sem as guias,
215		- com os botões na parte superior e a legenda em um outro local
216		- da página
	177	+ <a href="mashup3.htm" target="_blank">Exemplo 3 </a>- Sem as guias, com os botões na parte superior e a legenda em um outro local da página
217	178	</p>
218	179	<p>
219	180	<a href="mashup9.htm" target="_blank">Exemplo 3a </a>- O mesmo que o 3 mas usando o Open Street Map
220	181	</p>
221	182	<p>
222		- <a href="mashup4.htm" target="_blank">Exemplo 4 </a>- Sem as guias,
223		- com os botões na parte superior e a legenda em uma janela
224		- flutuante
	183	+ <a href="mashup4.htm" target="_blank">Exemplo 4 </a>- Sem as guias, com os botões na parte superior e a legenda em uma janela flutuante
225	184	</p>
226	185	<p>
227		- <a href="mashup5.htm" target="_blank">Exemplo 5 </a>- Sem as guias e
228		- apenas com os botões de naveção em uma janela
229		- flutuante
	186	+ <a href="mashup5.htm" target="_blank">Exemplo 5 </a>- Sem as guias e apenas com os botões de naveção em uma janela flutuante
230	187	</p>
231	188	<p>
232		- <a href="mashup6.htm" target="_blank">Exemplo 6 </a>- Mapa
233		- posicionado no canto superior esquerdo, sem as guias e apenas com os
234		- botões de naveção em uma janela flutuante
	189	+ <a href="mashup6.htm" target="_blank">Exemplo 6 </a>- Mapa posicionado no canto superior esquerdo, sem as guias e apenas com os botões de naveção em uma janela flutuante
235	190	</p>
236	191	</fieldset>
237	192	<fieldset>
238	193	<legend>
239		- <b>Inclusão de um mapa dentro de uma página em um
240		- IFRAME</b>
	194	+ <b>Inclusão de um mapa dentro de uma página em um IFRAME</b>
241	195	</legend>
242	196	<p>
243		- <a href="iframe1.htm" target="_blank">Exemplo 1</a> - Sem controle
244		- de tamanho
	197	+ <a href="iframe1.htm" target="_blank">Exemplo 1</a> - Sem controle de tamanho
245	198	</p>
246	199	<p>
247		- <a href="iframe2.htm" target="_blank">Exemplo 2</a> - Com tamanho
248		- controlado<br>
	200	+ <a href="iframe2.htm" target="_blank">Exemplo 2</a> - Com tamanho controlado<br>
249	201	</p>
250	202	</fieldset>
251	203	<h2>Interface Google Maps</h2>
252	204	<fieldset>
253	205	<p>
254		- <a href="googlemapssanfona.phtml" target="_blank">Guias do tipo
255		- sanfona</a>
	206	+ <a href="googlemapssanfona.phtml" target="_blank">Guias do tipo sanfona</a>
256	207	</p>
257	208	<p>
258	209	<a href="googlemapscomogc.php" target="_blank">Como adicionar uma camada WMS do i3Geo em um mapa normal do Google Maps</a>
259	210	</p>
260	211	</fieldset>
261		- <h2>Configuração de janelas, árvores de
262		- camadas e adição de temas</h2>
	212	+ <h2>Configuração de janelas, árvores de camadas e adição de temas</h2>
263	213	<fieldset>
264	214	<p>
265	215	<a href="adicionatema.htm" target="_blank">Como definir as camadas que serão incluídas no mapa na inicialização por meio da configuração de propriedades via Javascript</a>
266	216	</p>
267	217	<p>
268		- <a href="janelas.htm" target="_blank">Opções de
269		- criação de janelas flutuantes</a>
	218	+ <a href="janelas.htm" target="_blank">Opções de criação de janelas flutuantes</a>
270	219	</p>
271	220	<p>
272		- <a href="arvoredetemas.htm" target="_blank">Construtor de
273		- opções da árvore de adição de
274		- temas</a>
	221	+ <a href="arvoredetemas.htm" target="_blank">Construtor de opções da árvore de adição de temas</a>
275	222	</p>
276	223	<p>
277		- <a href="arvoredecamadas.htm" target="_blank">Construtor de
278		- opções da árvore de camadas</a>
	224	+ <a href="arvoredecamadas.htm" target="_blank">Construtor de opções da árvore de camadas</a>
279	225	</p>
280	226	<p>
281		- <a href="combos.htm" target="_blank">Criação de
282		- combos baseados na árvore de camadas e lista de colunas de
283		- um tema</a>
	227	+ <a href="combos.htm" target="_blank">Criação de combos baseados na árvore de camadas e lista de colunas de um tema</a>
284	228	</p>
285	229	<p>
286	230	<a href="camadas1.htm" target="_blank">Árvore expandida</a>
...	...	@@ -289,12 +233,10 @@ body,td {
289	233	<a href="camadas2.htm" target="_blank">Legenda expandida</a>
290	234	</p>
291	235	<p>
292		- <a href="camadas3.htm" target="_blank">Árvore
293		- simplificada</a>
	236	+ <a href="camadas3.htm" target="_blank">Árvore simplificada</a>
294	237	</p>
295	238	<p>
296		- <a href="camadas4.htm" target="_blank">Opção "mais
297		- temas" na guia de camadas</a>
	239	+ <a href="camadas4.htm" target="_blank">Opção "mais temas" na guia de camadas</a>
298	240	</p>
299	241	<p>
300	242	<a href="legenda2.htm" target="_blank">Árvore com grupos</a>
...	...	@@ -309,39 +251,19 @@ body,td {
309	251	<h2>Login</h2>
310	252	<fieldset>
311	253	<p>
312		- <a href="login.htm" target="_blank">Login simples</a> Abre uma
313		- janela de diálogo para que o usuário faça
314		- login. Nesse exemplo não é considerado se o login
315		- já foi feito antes ou não. Essa técnica
316		- não oferece muita segurança pois o código
317		- javascript fica exposto e um usuário mais experiente pode
318		- burlar o login.
	254	+ <a href="login.htm" target="_blank">Login simples</a> Abre uma janela de diálogo para que o usuário faça login. Nesse exemplo não é considerado se o login já foi feito antes ou não. Essa técnica não oferece muita segurança pois o código javascript fica exposto e um usuário mais experiente pode burlar o login.
319	255	</p>
320	256	<p>
321		- <a href="login1.htm" target="_blank">Login simples com
322		- verificação</a> Abre uma janela de diálogo para
323		- que o usuário faça login. Ao contrário do
324		- anterior nesse exemplo é considerado se o login já foi
325		- feito antes ou não. Essa técnica não oferece
326		- muita segurança pois o código javascript fica exposto
327		- e um usuário mais experiente pode burlar o login.
	257	+ <a href="login1.htm" target="_blank">Login simples com verificação</a> Abre uma janela de diálogo para que o usuário faça login. Ao contrário do anterior nesse exemplo é considerado se o login já foi feito antes ou não. Essa técnica não oferece muita segurança pois o código javascript fica exposto e um usuário mais experiente pode burlar o login.
328	258	</p>
329	259	<p>
330		- <a href="login2.htm" target="_blank">Login com página de
331		- verificação anterior</a> Abre uma janela de
332		- diálogo para que o usuário faça login. O
333		- código javascript só fica exposto após o login.
	260	+ <a href="login2.htm" target="_blank">Login com página de verificação anterior</a> Abre uma janela de diálogo para que o usuário faça login. O código javascript só fica exposto após o login.
334	261	</p>
335	262	<p>
336		- <a href="login3.php" target="_blank">Exigência de login </a>A
337		- página só é aberta se o usuário estiver
338		- logado.
	263	+ <a href="login3.php" target="_blank">Exigência de login </a>A página só é aberta se o usuário estiver logado.
339	264	</p>
340	265	<p>
341		- <a href="login4.htm" target="_blank">Exige login e verifica
342		- acesso à página </a>O mapa só é aberto se o
343		- usuário estiver cadastrado em um dos papéis que pode
344		- acessar essa operação.
	266	+ <a href="login4.htm" target="_blank">Exige login e verifica acesso à página </a>O mapa só é aberto se o usuário estiver cadastrado em um dos papéis que pode acessar essa operação.
345	267	</p>
346	268	</fieldset>
347	269	</div>
...	...
...	...	@@ -19,18 +19,21 @@ Para a versão 6.0
19	19
20	20	- a ordem dos botões na barra de botões foi alterada para mostrar primeiro o botão da barra de edição
21	21
22		-- as funções de desenho de elementos gráficos utilizados pela interface GoogleEarth foram movidos de classesjs/classe_interface.js
	22	+- as funções de desenho de elementos gráficos utilizados pela interface GoogleEarth foram movidos de classesjs/classe_interface.js
23	23	para classe_desenho.js
24	24
25	25	- por default a árvore de temas agora é mostrada com checkbox ao invés de botão do tipo radio
26	26
27	27	- a árvore de temas agora pode ser utilizada para ligar/desligar camadas já existentes no mapa
28	28
29		-- alteração na estrutura do objeto que contém as informações sobre as camadas existentes no mapa. Esse objeto foi reduzido em
	29	+- alteração na estrutura do objeto que contém as informações sobre as camadas existentes no mapa. Esse objeto foi reduzido em
30	30	tamanho passando a usar uma lista de chaves e um array com os valores. Esse objeto é estruturado no servidor por classe_temas.php
31	31
32	32	- remoção do arquivo css/botoes.css em favor de css/botoes2.css
33	33
	34	+- as opções da guia móvel foram alteradas. Podem ser necessários ajustes nos estilos inline das interfaces em uso
	35	+para posicionar corretamente os elementos dentro das guias
	36	+
34	37	-------------------------------------------------------------------------------------------------
35	38	Para a versão 5.0
36	39
...	...