From 0310a6619485db6c09d752289dcf137a50d32832 Mon Sep 17 00:00:00 2001
From: Edmar Moretti <edmar.moretti@gmail.com>
Date: Mon, 14 May 2018 23:01:54 -0300
Subject: [PATCH] Modificação na forma de apresentação das opções das guias móveis

---
 interface/ol.htm              | 1117 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 interface/openlayersdebug.htm |  950 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 interface/osm.htm             | 1119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 interface/osmdebug.htm        | 1163 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 4 files changed, 2282 insertions(+), 2067 deletions(-)

diff --git a/interface/ol.htm b/interface/ol.htm
index 9145771..5da1f25 100755
--- a/interface/ol.htm
+++ b/interface/ol.htm
@@ -7,6 +7,8 @@
 <title>i3GEO - OpenLayers</title>
 <script src="../pacotes/ol4/ol.js"></script>
 <script src="../js/i3geo.js"></script>
+<!-- carrega as funcoes dos botoes de edicao de elementos graficos -->
+<script src="../ferramentas/editorol/editorol.js"></script>
 <!-- lista com os links que serao mostrados na guia ferramentas -->
 <script src="../js/listaDeFerramentas.js"></script>
 <!-- configuracoes default tipo pode ser OL (openLayers) ou GM (googlemaps) -->
@@ -15,7 +17,6 @@
 <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-material-design/dist/css/bootstrap-material-design.min.css">
 <!-- <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-material-design/dist/css/ripples.min.css">-->
-
 <!-- <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-accessibility-plugin/plugins/js/bootstrap-accessibility.min.js"> -->
 <link rel="stylesheet" type="text/css" href="../css/default.css">
 <!-- para o tutorial -->
@@ -43,12 +44,12 @@
 	-->
 <body id="i3geo" style='background: white;'>
     <!-- inclui o nome do usuario logado
-    <div id="i3GEONomeLogin"
-        style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
-    -->
+	<div id="i3GEONomeLogin"
+		style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
+	-->
     <!-- Aqui vai o mapa. O div a ser inserido e padronizado e depende da interface usar openlayers ou googlemaps
-    Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
-    -->
+	Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
+	-->
     <div id="mapai3Geo"></div>
     <!-- aqui sera incluida a escala numerica. E necessario ter o id=i3GEOescalanum para que o valor seja atualizado-->
     <form data-tutorial="escalas" class="escalanumerica hidden-xs" onsubmit="javascript:i3GEO.navega.aplicaEscala($i('i3GEOescalanum').value);return false;">
@@ -69,29 +70,48 @@
             </select>
         </div>
         <div class="i3GeoMascaraCoord" id="localizarxygeoProj" style="display: block; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
-            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text"> Y: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg"
-                type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text"> <input name="" value="00.00" size="5" title="segundo"
-                id="localizarxygeoProjys" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
+            X:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text">
+            Y:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjys" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
         </div>
         <div id="localizarxydd" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
         </div>
         <div id="localizarxygeohash" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            GeoHash <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom"
-                onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
+            GeoHash
+            <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
         </div>
         <div id="localizarxypoliconicaSad69" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y"
-                type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y" type="text">
         </div>
         <div id="localizarxyutmSad69Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
         </div>
         <div id="localizarxyutmSirgas2000Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
         </div>
     </div>
     <!-- barra de icones de navegacao -->
@@ -141,28 +161,29 @@
     <!-- botoes laterais que abrem guias moveis -->
     <div id="i3GEOguiaMovel">
         <!-- configuracao para todos os botoes
-            data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
-        -->
+			data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
+		-->
         <div class="iconesGuiaMovel ol-control" data-traduzir="true">
             <!-- ferramentas
-                data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
-                data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
-                data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
-            -->
-            <div data-tutorial="ferramentas" data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
+				data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
+				data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
+				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
+			-->
+            <div data-tutorial="ferramentas" data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas"
+                onclick="i3GEO.guias.ativa('ferramentas',this)">
                 <button title="{{{iconeFerramentas}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">business_center</i>
                 </button>
             </div>
             <!-- temas existentes no mapa
-                data-idListaDeCamadas - id onde sera incluida a lista de camadas
-                data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
-                data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
-                    inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
-                    do metadata existente na camada. Deixe vazio para nao ativar a operacao.
-            -->
-            <div data-tutorial="camadas" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas"
-                style="margin-top: 3px;">
+				data-idListaDeCamadas - id onde sera incluida a lista de camadas
+				data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
+				data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
+					inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
+					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
+			-->
+            <div data-tutorial="camadas" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo"
+                data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
                 <button title="{{{iconeMapa}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons"><i class="material-icons">visibility</i></i>
                 </button>
@@ -188,6 +209,13 @@
                     <i class="material-icons">view_list</i>
                 </button>
             </div>
+            <!--
+            <div data-tutorial="troca" class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
+                <button title="{{{trocaInterface}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
+                    <i class="material-icons">compare_arrows</i>
+                </button>
+            </div>
+            -->
             <!-- Busca -->
             <div data-tutorial="busca" onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
                 <button class="iconeGuiaMovel" style="color: white; box-shadow: none;">
@@ -205,12 +233,12 @@
                 </button>
             </div>
             <!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
-            <div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
-                <button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
-                    <img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
-                </button>
-            </div>
-            -->
+			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
+				<button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
+					<img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
+				</button>
+			</div>
+			-->
         </div>
         <!-- veja i3GEO.guias.CONFIGURA -->
         <!-- Os IDs sao definidos no botao que ativa a guia veja: "i3GEOguiaMovel" -->
@@ -223,6 +251,41 @@
                         <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle">{{{iconeMapa}}}</span>
                         </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-refresh"></span> Refresh
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-open"></span> {{{t3a}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-close"></span> {{{t3b}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-trash"></span> {{{t12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-filter"></span> {{{t2a}}}
+                                    </a></li>
+                                <li role="separator" class="divider"></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-adjust"></span> {{{t20}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-film"></span> {{{p21}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-print"></span> {{{d12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-erase"></span> {{{t4}}}
+                                    </a></li>
+                            </ul>
+                        </div>
                         <button title="{{{iconeCatalogo}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj"
                             data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus">
                             <span style="vertical-align: middle" class="material-icons">layers</span>
@@ -234,49 +297,20 @@
                         <button style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
+
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <div class="list-group condensed noprint collapsed" data-toggle="collapse" data-target="#opcoesGuia1">
-                            <label>{{{opcoes}}}</label>
-                        </div>
-                        <div class="text-left collapse noprint" id="opcoesGuia1" style="margin-left: 30px;">
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">Refresh</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">{{{t3a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">{{{t3b}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">{{{t12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">{{{t2a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">{{{t20}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">{{{p21}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">{{{d12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">{{{t4}}}</a>
-                            </p>
-                        </div>
-                        <hr>
-                        <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
+                    <div class="guiaOverflow" style="height: calc(100% - 45px); width: calc(100% - 5px);">
+                        <!-- Esta div acrescenta a lista de layers graficos -->
+                        <div id="listaLayersGr" style="overflow: none;" data-template="templates/camadaGr.html"></div>
+                        <div id="listaLayersGrBtn" style="overflow: none;"></div>
+                        <!-- Esta div acrescenta a lista de camadas disponiveis no mapa atual -->
                         <div id="listaTemas" style="overflow: none;" data-template="templates/camada.html"></div>
                         <!-- Esta div acrescenta a lista de de camadas de fundo
-                    A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
-                    Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
-                    no programa interface/config.php
-                    -->
+					A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
+					Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
+					no programa interface/config.php
+					-->
                         <div data-toggle="collapse" data-target="#collapseFundo" class="list-group condensed collapsed">
                             <label>{{{camadasDeFundo}}}</label>
                         </div>
@@ -285,17 +319,44 @@
                                 <div id="listaFundo" class="form-group condensed" data-template="templates/camadaFundo.html"></div>
                             </form>
                         </div>
-
                     </div>
                 </div>
                 <!-- Catalogo de temas -->
-                <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left;height:100%;'>
+                <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left; height: 100%;'>
                     <div class="i3GEOfechaGuia" style="display: flex;">
                         <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
                             <span style="vertical-align: middle">{{{iconeCatalogo}}}</span>
                         </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">
+                                        <span class="glyphicon glyphicon-log-in"></span> Login/Logout
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">
+                                        <span class="glyphicon glyphicon-globe"></span> {{{a15}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">
+                                        <span class="glyphicon glyphicon-cloud-upload"></span> {{{a14}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">
+                                        <span class="glyphicon glyphicon-cloud-download"></span> {{{a3}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a3a}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">
+                                        <span class="glyphicon glyphicon-search"></span> Busca na INDE
+                                    </a></li>
+                                <li><a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a13}}}
+                                    </a></li>
+                            </ul>
+                        </div>
                         <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
-                            data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas">
+                            data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" data-idListaLayersGr="listaLayersGr" data-idBtnLayersGr="listaLayersGrBtn">
                             <span style="vertical-align: middle" class="material-icons">visibility</span>
                         </button>
                         <button title="{{{iconeLegenda}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj"
@@ -309,99 +370,58 @@
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
 
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <div id="catalogoMigalha" style="display:block;" data-template="templates/catalogoMigalha.html"></div>
+                        <div id="catalogoMigalha" style="display: block;" data-template="templates/catalogoMigalha.html"></div>
                         <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
                         <div id="catalogoNavegacao"></div>
                         <!-- Opcoes -->
                         <div id="catalogoPrincipal">
-                            <div data-toggle="collapse" data-target="#opcoesGuia2" class="list-group condensed collapsed noprint">
-                                <label>{{{opcoes}}}</label>
-                            </div>
-                            <div class="text-left collapse" id="opcoesGuia2" style="margin-left: 30px;">
-                                <p>
-                                    <a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">Login/Logout</a>
-                                </p>
-                                <p>
-                                    <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.atualiza()">Refresh</a> -->
-                                </p>
-                                <li class="divider"></p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">{{{a15}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">{{{a14}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">{{{a3}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">{{{a3a}}}</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.nuvemTags()">{{{a5a}}}</a> -->
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.carouselTemas()">Miniaturas</a> -->
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">Busca na INDE</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatisticos</a>-->
-                                    </p>
-                                    <p>
-                                        <a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
-                                    </p>
-                            </div>
-
                             <hr>
                             <!-- busca tema no catalogo
-                        <div class="form-group label-floating">
-                            <label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
-                            <div class="input-group">
-                                <input id="i3GEObuscatema" class="form-control" type="text" value="">
-                                <span class="input-group-btn">
-                                    <a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
-                                        <span class="material-icons ">send</span>
-                                    </a>
-                                </span>
-                            </div>
-                        </div>
-                         -->
+						<div class="form-group label-floating">
+							<label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
+							<div class="input-group">
+								<input id="i3GEObuscatema" class="form-control" type="text" value="">
+								<span class="input-group-btn">
+									<a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
+										<span class="material-icons ">send</span>
+									</a>
+								</span>
+							</div>
+						</div>
+						 -->
                             <!-- A lista de menus e uma funcao de i3GEO.guias.CONFIGURA.adiciona
-                            Nessa funcao ficam tambem os parametros:
-                            "idOndeMenus": "catalogoMenus",
-                            "idCatalogoPrincipal": "catalogoPrincipal",
-                            "idCatalogoNavegacao": "catalogoNavegacao",
-                            "idOndeMigalha": "catalogoMigalha"
-                        -->
+							Nessa funcao ficam tambem os parametros:
+							"idOndeMenus": "catalogoMenus",
+							"idCatalogoPrincipal": "catalogoPrincipal",
+							"idCatalogoNavegacao": "catalogoNavegacao",
+							"idOndeMigalha": "catalogoMigalha"
+						-->
                             <div id="catalogoMenus" data-templateDir="templates/dir.html" data-templateTema="templates/tema.html"></div>
 
                             <div id="arvoreAdicionaTema"></div>
 
                             <!--
-                        As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
-                        config: {
-                            'templateDir': 'templates/dir.html',
-                            'templateTema': 'templates/tema.html',
-                            'idCatalogoPrincipal': 'catalogoPrincipal',
-                            'idCatalogoNavegacao': 'catalogoNavegacao',
-                            'idOndeMigalha': 'catalogoMigalha'
-                        }
+						As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
+						config: {
+							'templateDir': 'templates/dir.html',
+							'templateTema': 'templates/tema.html',
+							'idCatalogoPrincipal': 'catalogoPrincipal',
+							'idCatalogoNavegacao': 'catalogoNavegacao',
+							'idOndeMigalha': 'catalogoMigalha'
+						}
 
-                        exemplo:
+						exemplo:
 
-                        onclick="i3GEO.catalogoInde.inicia({'templateDir': 'templates/dir.html','templateTema': 'templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
-                        -->
+						onclick="i3GEO.catalogoInde.inicia({'templateDir': 'templates/dir.html','templateTema': 'templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
+						-->
 
                             <!-- servicos da INDE brasileira -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoInde.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i>
-                                            INDE-Br
+                                                <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i> INDE-Br
                                             </h4>
                                         </a>
                                         <h6>Infraestrutura Nacional de Dados Espaciais do Brasil</h6>
@@ -414,12 +434,11 @@
                             <hr>
                             <!-- lista de wms cadastrados no sistema de administracao -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i>
-                                            OGC-WMS
+                                                <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i> OGC-WMS
                                             </h4>
                                         </a>
                                         <h6>{{{descOgcWms}}}</h6>
@@ -436,8 +455,7 @@
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">domain</i>
-                                            {{{x87}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">domain</i> {{{x87}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descLimLoc}}}</h6>
@@ -450,12 +468,11 @@
                             <hr>
                             <!--  camadas que vem do sistema de metadados estatisticos -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">trending_up</i>
-                                            {{{x57}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">trending_up</i> {{{x57}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descMeta}}}</h6>
@@ -468,13 +485,11 @@
                             <hr>
                             <!--  camadas por estrelas -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
-                                    <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button"
-                                            href="javascript:void(0)">
+                                        <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">star_border</i>
-                                            {{{t46}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">star_border</i> {{{t46}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descEstrelas}}}</h6>
@@ -487,12 +502,11 @@
                             <hr>
                             <!--  sistemas que adicionam camadas -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">widgets</i>
-                                            {{{a11}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">widgets</i> {{{a11}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descSistemas}}}</h6>
@@ -506,12 +520,11 @@
                             <hr>
                             <!--  navegacao em diretorios -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">storage</i>
-                                            {{{a6}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">storage</i> {{{a6}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descDir}}}</h6>
@@ -526,11 +539,14 @@
                     </div>
                 </div>
                 <!-- Legenda -->
-                <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left;height:100%;'>
-                    <div class="i3GEOfechaGuia" style="display: flex;" >
+                <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left; height: 100%;'>
+                    <div class="i3GEOfechaGuia" style="display: flex;">
                         <button class="pull-left text-left" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle">{{{iconeLegenda}}}</span>
                         </button>
+                        <button type="button" title="{{{x11}}}" style="width: 3.5rem; height: 3rem;" class="text-right" onclick="i3GEO.legenda.inicia({'janela':true})">
+                            <span style="vertical-align: middle" class="material-icons">list_alt</span>
+                        </button>
                         <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
                             data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas">
                             <span style="vertical-align: middle" class="material-icons">visibility</span>
@@ -543,18 +559,18 @@
                             <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
                     </div>
+
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})">{{{x11}}}</a>
                         <div id="legendaHtml" data-template="templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
                     </div>
                 </div>
                 <!-- busca
-                Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
-                No botao que dispara a busca, ficam os parametros de configuracao
-                Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
-                -->
-                <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left; height:100%'>
+				Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
+				No botao que dispara a busca, ficam os parametros de configuracao
+				Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
+				-->
+                <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left; height: 100%'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
                             <span class="pull-left">{{{t23}}}</span> <span class="pull-right material-icons">cancel</span>
@@ -566,11 +582,11 @@
                             <div class="form-group label-floating">
                                 <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
                                 <div class="input-group">
-                                    <input class="form-control" type="text" value="" name="valorBuscaRapida"> <span class="input-group-btn"> <a
-                                            onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html" data-inputGoogle="[name=google]"
-                                            data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html" data-inputTemasMapa="[name=temasMapa]"
-                                            data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html" data-ondeConteiner="#guia7obj"
-                                            data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
+                                    <input class="form-control" type="text" value="" name="valorBuscaRapida">
+                                    <span class="input-group-btn"> <a onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html"
+                                            data-inputGoogle="[name=google]" data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html"
+                                            data-inputTemasMapa="[name=temasMapa]" data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html"
+                                            data-ondeConteiner="#guia7obj" data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
                                             data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
                                             <span class="material-icons ">send</span>
                                         </a>
@@ -581,26 +597,30 @@
                             <div class="form-inline" style="width: 100%;">
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos"> {{{x38}}}
+                                        <label>
+                                            <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos">
+                                            {{{x38}}}
                                         </label>
                                     </div>
                                 </div>
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input class="noprint" value="on" type="checkbox" name="temasMapa"> {{{x39}}}
+                                        <label>
+                                            <input class="noprint" value="on" type="checkbox" name="temasMapa">
+                                            {{{x39}}}
                                         </label>
                                     </div>
                                 </div>
                                 <!-- Apenas para a interface google maps
-                            <div class="list-group condensed">
-                                <div class="checkbox text-left">
-                                <label>
-                                    <input class="noprint" value="on" type="checkbox" name="google">
-                                    <span class="checkbox-material noprint"><span class="check"></span></span> Google
-                                </label>
-                                </div>
-                            </div>
-                             -->
+							<div class="list-group condensed">
+								<div class="checkbox text-left">
+								<label>
+									<input class="noprint" value="on" type="checkbox" name="google">
+									<span class="checkbox-material noprint"><span class="check"></span></span> Google
+								</label>
+								</div>
+							</div>
+							 -->
                             </div>
                         </form>
                         <hr>
@@ -611,7 +631,7 @@
                     </div>
                 </div>
                 <!-- Ferramentas -->
-                <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left;height:100%'>
+                <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left; height: 100%'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
                             <span class="pull-left">{{{iconeFerramentas}}}</span> <span class="pull-right material-icons">cancel</span>
@@ -620,25 +640,25 @@
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
                         <div class="form-inline" style="width: 100%;">
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/area-measure.png">
                                 </a>
                                 <h6>{{{d21at}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/length-measure.png">
                                 </a>
                                 <h6>{{{d21t}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.selecao();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/select.png">
                                 </a>
                                 <h6>{{{d24t}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.geolocal();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/layer-gps.png">
                                 </a>
@@ -646,8 +666,8 @@
                             </div>
                         </div>
                         <div class="clearfix"></div>
-                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block;text-align: center;width: 100%;padding-left: 1rem;padding-right: 1rem;'></div>
 
+                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block; text-align: center; width: 100%; padding-left: 1rem; padding-right: 1rem;'></div>
                         <div id="migalhaFerramentas" data-template="templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
                         <div id="listaFerramentasLinks" data-template="templates/ferramentasLink.html" style='display: block; text-align: left'></div>
                         <div id="listaFerramentas" data-template="templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
@@ -656,7 +676,6 @@
             </div>
         </div>
     </div>
-
     <!--  para mostrar o banner de abertura -->
     <script id="i3GEOlogoMarcaTemplate" type="x-tmpl-mustache">
 	<div>
@@ -677,335 +696,371 @@
 	</div>
 	</script>
     <script>
-					//ativa o banner de inicializacao
-					i3GEO.janela.tempoMsg(
-							$i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
-					(function() {
-						//parametros aplicados na criacao do arquivo mapfile
-						var parametrosMapa = {
-							//arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
-							//Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
-							mapfilebase : "",
-							//extensao geografica do mapa
-							//deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
-							//exemplo [-77,-26,-30,6]
-							mapext : [],
-							//perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
-							perfil : "",
-							//layers que serao adicionados ao mapa.
-							//Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
-							layers : {
-								//array com a lista dos layers que serao adicionados e ligados (visiveis)
-								add : [],
-								//array com a lista dos layers que serao adicionados mas nao ligados
-								on : [],
-								//array com os layers desligados
-								off : []
-							},
-							//lista de coordenadas x e y que serao adicionadas como pontos no mapa
-							points : {
-								//array com a lista de coordenadas
-								coord : [],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como linhas no mapa
-							lines : {
-								//array de arrays com a lista de coordenadas de cada linha
-								//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como poligonos no mapa
-							polygons : {
-								//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
-								//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//insere elementos no mapa com coordenadas definidas em wkt
-							wkt : {
-								//string no formato wkt
-								coord : "",
-								//titulo da nova camada
-								title : ""
-							},
-							//simbolo que sera utilizado para desenhar os elementos inseridos
-							symbol : {
-								//codigo do simbolo conforme definido em i3geo/symbols
-								name : "",
-								//em rgb, exemplo "0 255 0"
-								color : "",
-								//em pixels
-								size : ""
-							},
-							//arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
-							kml : {
-								url : ""
-							},
-							//endereco de um WMS (sera incluido como uma camada no mapa)
-							wms : {
-								url : "",
-								layer : "",
-								style : "",
-								title : "",
-								srs : "",
-								imagetype : "",
-								version : ""
-							},
-							//filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
-							//do mapserver, exemplo
-							//{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
-							filters : [ {
-								layer : "",
-								expression : ""
-							} ],
-							//id de um mapa salvo e que sera recuperado
-							restoreMapId : ""
-						};
-						var config = {
-							//id do elemento HTML onde o corpo do mapa sera renderizado
-							mapBody : "mapai3Geo",
-							//tipo de mapa. Pode ser:
-							//OL - utiliza o OpenLayers e coordenadas geograficas
-							//OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
-							//GM - utiliza o GoogleMaps como motor de controle do mapa
-							mapType : "OL",
-							//armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
-							saveExtension : false,
-							//aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
-							posRenderType : "",
-							//Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
-							//Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
-                			//Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
-                			i3GeoServer : i3GeoUrl,
-							//opacidade default para camadas que nao sejam do tipo linha ou ponto
-							//a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
-							//se for vazio, sera utilizado o valor definido no LAYER original
-							//Nao se aplica na interface googlemaps
-							layerOpacity : "",
-							//Funcao que sera executada apos a inicializacao do mapa
-							afterStart : function() {
-								$('.iconeGuiaMovel').tooltip({
-									animation : false,
-									trigger : "manual hover",
-									placement : "left"
-								});
-								$('.iconeGuiaMovel').tooltip('show');
-								setTimeout(function(){$('.iconeGuiaMovel').tooltip('hide');},5000);
+		    //ativa o banner de inicializacao
+		    i3GEO.janela.tempoMsg(
+			    $i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
+		    (function() {
+			//parametros aplicados na criacao do arquivo mapfile
+			var parametrosMapa = {
+			    //arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
+			    //Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
+			    mapfilebase : "",
+			    //extensao geografica do mapa
+			    //deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
+			    //exemplo [-77,-26,-30,6]
+			    mapext : [],
+			    //perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
+			    perfil : "",
+			    //layers que serao adicionados ao mapa.
+			    //Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
+			    layers : {
+				//array com a lista dos layers que serao adicionados e ligados (visiveis)
+				add : [],
+				//array com a lista dos layers que serao adicionados mas nao ligados. Inclusive IDs do sistema de metadados estatisticos
+				on : [],
+				//array com os layers desligados
+				off : [],
+				//array com a lista de IDs que identificam medidas registradas no sistema de metadados
+				//estatisticos
+				metaestat : []
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como pontos no mapa
+			    points : {
+				//array com a lista de coordenadas
+				coord : [],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como linhas no mapa
+			    lines : {
+				//array de arrays com a lista de coordenadas de cada linha
+				//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como poligonos no mapa
+			    polygons : {
+				//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
+				//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //insere elementos no mapa com coordenadas definidas em wkt
+			    wkt : {
+				//string no formato wkt
+				coord : "",
+				//titulo da nova camada
+				title : ""
+			    },
+			    //simbolo que sera utilizado para desenhar os elementos inseridos
+			    symbol : {
+				//codigo do simbolo conforme definido em i3geo/symbols
+				name : "",
+				//em rgb, exemplo "0 255 0"
+				color : "",
+				//em pixels
+				size : ""
+			    },
+			    //arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
+			    kml : {
+				url : ""
+			    },
+			    //endereco de um WMS (sera incluido como uma camada no mapa)
+			    wms : {
+				url : "",
+				layer : "",
+				style : "",
+				title : "",
+				srs : "",
+				imagetype : "",
+				version : ""
+			    },
+			    //filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
+			    //do mapserver, exemplo
+			    //{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
+			    filters : [ {
+				layer : "",
+				expression : ""
+			    } ],
+			    //id de um mapa salvo e que sera recuperado
+			    restoreMapId : ""
+			};
+			var config = {
+			    //id do elemento HTML onde o corpo do mapa sera renderizado
+			    mapBody : "mapai3Geo",
+			    //tipo de mapa. Pode ser:
+			    //OL - utiliza o OpenLayers e coordenadas geograficas
+			    //OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
+			    //GM - utiliza o GoogleMaps como motor de controle do mapa
+			    mapType : "OL",
+			    //armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
+			    saveExtension : false,
+			    //aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
+			    posRenderType : "",
+			    //Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
+			    //Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
+			    //Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
+			    i3GeoServer : i3GeoUrl,
+			    //opacidade default para camadas que nao sejam do tipo linha ou ponto
+			    //a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
+			    //se for vazio, sera utilizado o valor definido no LAYER original
+			    //Nao se aplica na interface googlemaps
+			    layerOpacity : "",
+			    //Funcao que sera executada apos a inicializacao do mapa
+			    afterStart : function() {
+				$('.iconeGuiaMovel').tooltip({
+				    animation : false,
+				    trigger : "manual hover",
+				    placement : "left"
+				});
+				$('.iconeGuiaMovel').tooltip('show');
+				setTimeout(function() {
+				    $('.iconeGuiaMovel').tooltip('hide');
+				}, 5000);
+
+				$('.ol-i3GEOcontrols button')
+					.tooltip(
+						{
+						    animation : false,
+						    trigger : "hover",
+						    placement : "auto",
+						    template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
+						});
+
+				//$(".guiaOverflow").css("height",i3GEO.parametros.h - 140);
+
+				$(".guiaOverflow").mCustomScrollbar({
+				    scrollbarPosition : "inside",
+				    theme : "inset-2-dark"
+				});
+				tutorial.init();
+				//i3GEO.eventos.adicionaEventos("RESIZE", $(".guiaOverflow").css("height",i3GEO.parametros.h - 140));
 
-								$('.ol-i3GEOcontrols button').tooltip({
-									animation : false,
-									trigger : "hover",
-									placement : "auto",
-									template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
-								});
-								$(".guiaOverflow").mCustomScrollbar({
-									scrollbarPosition : "inside",
-									theme : "inset-2-dark"
-								});
-								tutorial.init();
-								//setTimeout(function() {
-								//	$('.iconeGuiaMovel').tooltip('destroy');
-								//}, 30000);
-								//i3GEO.maparef.inicia();
-								//
-								//(largura, altura, topo, esquerda);
-								//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
-								//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
+				//setTimeout(function() {
+				//	$('.iconeGuiaMovel').tooltip('destroy');
+				//}, 30000);
+				//i3GEO.maparef.inicia();
+				//
+				//(largura, altura, topo, esquerda);
+				//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
+				//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
 
-								//abre a legenda do mapa em uma janela flutuante
-								//i3GEO.legenda.inicia({
-								//"idLegenda": "legendaHtml",
-								//"templateLegenda": "templates/legenda.html",
-								//"janela": true
-								//});
-							},
-							//parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
-							components : {
-							    //restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
-							    //e nao aos que possuem o link para a fonte definido no mapfile
-							    restrictAtt: true,
-								//define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
-								info : true,
-								//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
-								idsMenus : [],
-								//webservice utilizado na opcao de encontrar lugares
-								searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
-								//webservice wms que faz a apresentacao do lugar encontrado por searchService
-								searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
-								//posicao do mapa de referencia, em pixels [top,right]
-								referenceMapPosition : [ 4, 120 ],
-								//tipo do mapa de referencia. Pode ser wms ou map
-								referenceType: "wms",
-								//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
-								tooltip : {
-									//o resultado sera mostrado em uma janela do tipo modal
-									modal : false,
-									//url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
-									//Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
-									//use apenas se modal for true
-									//exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
-									url : "",
-									//template que sera usado para compor o resultado da busca de dados
-									//se for vazio, serao utilizadas as outras opcoes
-									//se contiver a string {{{url}}} a mesma sera substituida por url
-									//exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
-									templateModal : "",
-									//serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
-									simple : true,
-									removeAoAdicionar : true,
-									//parametros exclusivos da interface openlayers
-									autoPan : true,
-									autoPanAnimation : {
-										duration : 250
-									},
-									minWidth : '200px',
-									//Altura e largura do tooltip (balao)
-									toolTipSize : [ "100px", "200px" ],
-									//mostra ou nao o balao caso seja vazio
-									openTipNoData : true
-								},
-								//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
-								scrollBar : {
-									theme : "inset-2",
-									axis : "yx",
-									scrollbarPosition : "inside",
-									scrollButtons : {
-										enable : true
-									},
-									advanced : {
-										autoExpandHorizontalScroll : true
-									}
-								}
-							},
-							//parametros de configuracao das ferramentas que sao acionadas sob demanda
-							//ferramentas localizadas em i3geo/ferramentas
-							tools : {
-								//ferramenta de busca de camadas em um servico CSW
-								buscainde : {
-									//endereco do servico no padrao CSW
-									csw : "http://www.metadados.inde.gov.br/geonetwork/srv/br"
-								},
-								//ferramenta de identificacao
-								identifica : {
-									//resolucao em pixels para busca de elementos
-									resolution : 8
-								},
-								//mapa de referencia
-                                opcoesMaparef : {
-								    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
-                                    images : [
-                                    	{name: "Colorida", img: "referencia1"},
-                                    	{name: "B & W", img: "referencia1cinza"}
-                                	]
-                                }
-							},
-							//configuracoes especificas para a interface que utiliza o OpenLayers
-							openLayers : {
-								//utiliza ou nao tiles ao renderizar as camadas do mapa
-								//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
-								singleTile : false,
-								//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
-								MapOptions : {
-									layers : [],
-									controls : [ new ol.control.Zoom(),
-											new ol.control.ZoomSlider(),
-											new ol.control.ScaleLine(),
-											new ol.control.Attribution({
-												collapsible : true
-											}) ],
-									loadTilesWhileAnimating : true,
-									loadTilesWhileInteracting : true,
-									//os objetos devem ser comentados na interface googleMaps
-									interactions : [
-											new ol.interaction.DoubleClickZoom(),
-											new ol.interaction.KeyboardPan(),
-											new ol.interaction.KeyboardZoom(),
-											new ol.interaction.MouseWheelZoom(),
-											new ol.interaction.PinchRotate(),
-											new ol.interaction.PinchZoom(),
-											//new ol.interaction.DragZoom(),
-											i3GEO.navega.dragZoom(),
-											new ol.interaction.DragPan() ]
-								},
-								//opcoes para o objeto view, que e uma instancia de MapOptions
-								//ver https://openlayers.org/en/latest/apidoc/ol.View.html
-								ViewOptions : {
+				//abre a legenda do mapa em uma janela flutuante
+				//i3GEO.legenda.inicia({
+				//"idLegenda": "legendaHtml",
+				//"templateLegenda": "templates/legenda.html",
+				//"janela": true
+				//});
+				//para abrir uma guia
+				//i3GEO.guias.ativa('temas',$("[data-idconteudo='guia1obj'"));
+			    },
+			    //parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
+			    components : {
+				//restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
+				//e nao aos que possuem o link para a fonte definido no mapfile
+				restrictAtt : true,
+				//define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
+				info : true,
+				//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
+				idsMenus : [],
+				//webservice utilizado na opcao de encontrar lugares
+				searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
+				//webservice wms que faz a apresentacao do lugar encontrado por searchService
+				searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
+				//posicao do mapa de referencia, em pixels [top,right]
+				referenceMapPosition : [ 4, 120 ],
+				//tipo do mapa de referencia. Pode ser wms ou map
+				referenceType : "map",
+				//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
+				tooltip : {
+				    //o resultado sera mostrado em uma janela do tipo modal
+				    modal : false,
+				    //url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
+				    //Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
+				    //use apenas se modal for true
+				    //exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
+				    url : "",
+				    //template que sera usado para compor o resultado da busca de dados
+				    //se for vazio, serao utilizadas as outras opcoes
+				    //se contiver a string {{{url}}} a mesma sera substituida por url
+				    //exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
+				    templateModal : "",
+				    //serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
+				    simple : true,
+				    removeAoAdicionar : true,
+				    //parametros exclusivos da interface openlayers
+				    autoPan : true,
+				    autoPanAnimation : {
+					duration : 250
+				    },
+				    minWidth : '200px',
+				    //Altura e largura do tooltip (balao)
+				    toolTipSize : [ "100px", "200px" ],
+				    //mostra ou nao o balao caso seja vazio
+				    openTipNoData : true
+				},
+				//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
+				scrollBar : {
+				    theme : "inset-2",
+				    axis : "yx",
+				    scrollbarPosition : "inside",
+				    scrollButtons : {
+					enable : true
+				    },
+				    advanced : {
+					autoExpandHorizontalScroll : true
+				    }
+				}
+			    },
+			    //parametros de configuracao das ferramentas que sao acionadas sob
+			    //demanda. Veja em js/ini_i3geo.js e js/configura.js
+			    //Algumas ferramentas localizadas em i3geo/ferramentas
+			    //permitem que qualquer parametro ou funcao seja sobrescrita
+			    //Veja o codigo de cada ferramenta para obter os nomes de parametros e funcoes
+			    //O codigo index.js da ferramenta deve permitir o uso dessas configuracoes (veja o final de cada index.js
+			    tools : {
+				//ferramenta de identificacao
+				identifica : {
+				    //resolucao em pixels para busca de elementos
+				    resolution : 8
+				},
+				legenda : {
+				    //define o local onde os templates da ferramenta ficam armazenados
+				    //esse eh o local default, colocado aqui para documentacao
+				    templateDir : i3GeoUrl
+					    + "/ferramentas/legenda"
+				},
+				metaestat : {},
+				buscainde : {},
+				//mapa de referencia
+				opcoesMaparef : {
+				    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
+				    images : [ {
+					name : "Colorida",
+					img : "referencia1"
+				    }, {
+					name : "B & W",
+					img : "referencia1cinza"
+				    } ]
+				},
+				//janela de conversao de coordenadas
+				wkt2layer : {
+				    position : [ 150, 150 ]
+				},
+				area : {
+				    position : [ 150, 10 ]
+				},
+				distancia : {
+				    position : [ 150, 10 ]
+				}
+			    },
+			    //configuracoes especificas para a interface que utiliza o OpenLayers
+			    openLayers : {
+				//utiliza ou nao tiles ao renderizar as camadas do mapa
+				//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
+				singleTile : false,
+				//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
+				MapOptions : {
+				    layers : [],
+				    controls : [ new ol.control.Zoom(),
+					    new ol.control.ZoomSlider(),
+					    new ol.control.ScaleLine(),
+					    new ol.control.Attribution({
+						collapsible : true
+					    }) ],
+				    loadTilesWhileAnimating : true,
+				    loadTilesWhileInteracting : true,
+				    //os objetos devem ser comentados na interface googleMaps
+				    interactions : [
+					    new ol.interaction.DoubleClickZoom(),
+					    new ol.interaction.KeyboardPan(),
+					    new ol.interaction.KeyboardZoom(),
+					    new ol.interaction.MouseWheelZoom(),
+					    //new ol.interaction.PinchRotate(),
+					    new ol.interaction.PinchZoom(),
+					    //new ol.interaction.DragZoom(),
+					    i3GEO.navega.dragZoom(),
+					    new ol.interaction.DragPan() ]
+				},
+				//opcoes para o objeto view, que e uma instancia de MapOptions
+				//ver https://openlayers.org/en/latest/apidoc/ol.View.html
+				ViewOptions : {
 
-								},
-								//botoes que sao mostrados no editor vetorial
-								editorButtons : {
-									'imprimir' : false,
-									'grid' : false,
-									'pan' : false,
-									'zoombox' : false,
-									'zoomtot' : false,
-									'zoomin' : false,
-									'zoomout' : false,
-									'distancia' : false,
-									'area' : false,
-									'identifica' : false,
-									'linha' : true,
-									'ponto' : true,
-									'poligono' : true,
-									'texto' : true,
-									'edita' : true,
-									'listag' : true,
-									'corta' : true,
-									'apaga' : true,
-									'procura' : false,
-									'selecao' : true,
-									'selecaotudo' : true,
-									'salva' : true,
-									'ajuda' : true,
-									'propriedades' : true,
-									'fecha' : true,
-									'tools' : true,
-									'undo' : false,
-									'frente' : false,
-									'legenda' : false,
-									'rodadomouse' : true,
-									'novaaba' : false
-								}
-							},
-							//configuracoes especificas para a interface GoogleMaps
-							googleMaps : {
-								//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
-								MapOptions : {
-									//estilo que sera utilizado no mapa
-									//pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
-									//ver i3GEO.Interface.googleMaps.ESTILOS
-									mapTypeId : "roadmap",
-									scaleControl : true,
-									mapTypeControl : true,
-									mapTypeControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_BOTTOM
-									},
-									zoomControl : true,
-									zoomControlOptions : {
-									//style : google.maps.ZoomControlStyle.SMALL,
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									},
-									streetViewControl : true,
-									streetViewControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									}
-								}
-							}
-						};
-						//
-						//inicia o mapa
-						//Veja tambem config.php
-						//
-						//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
-						//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
-						//
-						i3GEO.init(parametrosMapa, config);
-					})();
-				</script>
+				},
+				//botoes que sao mostrados no editor vetorial
+				editorButtons : {
+				    'imprimir' : false,
+				    'grid' : false,
+				    'pan' : false,
+				    'zoombox' : false,
+				    'zoomtot' : false,
+				    'zoomin' : false,
+				    'zoomout' : false,
+				    'distancia' : false,
+				    'area' : false,
+				    'identifica' : false,
+				    'linha' : true,
+				    'ponto' : true,
+				    'poligono' : true,
+				    'texto' : true,
+				    'edita' : true,
+				    'listag' : true,
+				    'corta' : true,
+				    'apaga' : true,
+				    'procura' : false,
+				    'selecao' : true,
+				    'selecaotudo' : true,
+				    'salva' : true,
+				    'ajuda' : true,
+				    'propriedades' : true,
+				    'fecha' : true,
+				    'tools' : true,
+				    'undo' : false,
+				    'frente' : false,
+				    'legenda' : false,
+				    'rodadomouse' : true,
+				    'novaaba' : false
+				}
+			    },
+			    //configuracoes especificas para a interface GoogleMaps
+			    googleMaps : {
+				//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
+				MapOptions : {
+				    //estilo que sera utilizado no mapa
+				    //pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
+				    //ver i3GEO.Interface.googleMaps.ESTILOS
+				    mapTypeId : "roadmap",
+				    scaleControl : true,
+				    mapTypeControl : true,
+				    mapTypeControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_BOTTOM
+				    },
+				    zoomControl : true,
+				    zoomControlOptions : {
+				    //style : google.maps.ZoomControlStyle.SMALL,
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    },
+				    streetViewControl : true,
+				    streetViewControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    }
+				}
+			    }
+			};
+			//
+			//inicia o mapa
+			//Veja tambem config.php
+			//
+			//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
+			//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
+			//
+			//caso queira evitar os efeitos do material design, comente a linha abaixo
+			//$.material = false;
+			i3GEO.init(parametrosMapa, config);
+		    })();
+		</script>
 </body>
 
 </html>
diff --git a/interface/openlayersdebug.htm b/interface/openlayersdebug.htm
index 29d2856..0334f46 100755
--- a/interface/openlayersdebug.htm
+++ b/interface/openlayersdebug.htm
@@ -33,6 +33,7 @@
 	background: none;
 	margin-bottom: 15px;
 }
+
 .foraDoMapa+span>span {
 	background-color: yellow;
 }
@@ -69,29 +70,48 @@
             </select>
         </div>
         <div class="i3GeoMascaraCoord" id="localizarxygeoProj" style="display: block; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
-            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text"> Y: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg"
-                type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text"> <input name="" value="00.00" size="5" title="segundo"
-                id="localizarxygeoProjys" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
+            X:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text">
+            Y:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjys" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
         </div>
         <div id="localizarxydd" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
         </div>
         <div id="localizarxygeohash" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            GeoHash <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom"
-                onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
+            GeoHash
+            <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
         </div>
         <div id="localizarxypoliconicaSad69" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y"
-                type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y" type="text">
         </div>
         <div id="localizarxyutmSad69Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
         </div>
         <div id="localizarxyutmSirgas2000Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
         </div>
     </div>
     <!-- barra de icones de navegacao -->
@@ -231,6 +251,41 @@
                         <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle">{{{iconeMapa}}}</span>
                         </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-refresh"></span> Refresh
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-open"></span> {{{t3a}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-close"></span> {{{t3b}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-trash"></span> {{{t12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-filter"></span> {{{t2a}}}
+                                    </a></li>
+                                <li role="separator" class="divider"></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-adjust"></span> {{{t20}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-film"></span> {{{p21}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-print"></span> {{{d12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-erase"></span> {{{t4}}}
+                                    </a></li>
+                            </ul>
+                        </div>
                         <button title="{{{iconeCatalogo}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj"
                             data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus">
                             <span style="vertical-align: middle" class="material-icons">layers</span>
@@ -242,45 +297,13 @@
                         <button style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
+
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px); width: calc(100% - 5px);">
-                        <div class="list-group condensed noprint collapsed" data-toggle="collapse" data-target="#opcoesGuia1">
-                            <label>{{{opcoes}}}</label>
-                        </div>
-                        <div class="text-left collapse noprint" id="opcoesGuia1" style="margin-left: 30px;">
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">Refresh</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">{{{t3a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">{{{t3b}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">{{{t12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">{{{t2a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">{{{t20}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">{{{p21}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">{{{d12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">{{{t4}}}</a>
-                            </p>
-                        </div>
-                        <hr>
                         <!-- Esta div acrescenta a lista de layers graficos -->
                         <div id="listaLayersGr" style="overflow: none;" data-template="templates/camadaGr.html"></div>
-                        <div id="listaLayersGrBtn" style="overflow: none;" ></div>
+                        <div id="listaLayersGrBtn" style="overflow: none;"></div>
                         <!-- Esta div acrescenta a lista de camadas disponiveis no mapa atual -->
                         <div id="listaTemas" style="overflow: none;" data-template="templates/camada.html"></div>
                         <!-- Esta div acrescenta a lista de de camadas de fundo
@@ -296,7 +319,6 @@
                                 <div id="listaFundo" class="form-group condensed" data-template="templates/camadaFundo.html"></div>
                             </form>
                         </div>
-
                     </div>
                 </div>
                 <!-- Catalogo de temas -->
@@ -305,6 +327,34 @@
                         <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
                             <span style="vertical-align: middle">{{{iconeCatalogo}}}</span>
                         </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">
+                                        <span class="glyphicon glyphicon-log-in"></span> Login/Logout
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">
+                                        <span class="glyphicon glyphicon-globe"></span> {{{a15}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">
+                                        <span class="glyphicon glyphicon-cloud-upload"></span> {{{a14}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">
+                                        <span class="glyphicon glyphicon-cloud-download"></span> {{{a3}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a3a}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">
+                                        <span class="glyphicon glyphicon-search"></span> Busca na INDE
+                                    </a></li>
+                                <li><a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a13}}}
+                                    </a></li>
+                            </ul>
+                        </div>
                         <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
                             data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" data-idListaLayersGr="listaLayersGr" data-idBtnLayersGr="listaLayersGrBtn">
                             <span style="vertical-align: middle" class="material-icons">visibility</span>
@@ -320,53 +370,11 @@
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
 
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <div id="catalogoMigalha" style="display:block;" data-template="templates/catalogoMigalha.html"></div>
+                        <div id="catalogoMigalha" style="display: block;" data-template="templates/catalogoMigalha.html"></div>
                         <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
                         <div id="catalogoNavegacao"></div>
                         <!-- Opcoes -->
                         <div id="catalogoPrincipal">
-                            <div data-toggle="collapse" data-target="#opcoesGuia2" class="list-group condensed collapsed noprint">
-                                <label>{{{opcoes}}}</label>
-                            </div>
-                            <div class="text-left collapse" id="opcoesGuia2" style="margin-left: 30px;">
-                                <p>
-                                    <a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">Login/Logout</a>
-                                </p>
-                                <!--
-                                <p>
-                                    <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.atualiza()">Refresh</a>
-                                </p>
-                                 -->
-                                <li class="divider">
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">{{{a15}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">{{{a14}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">{{{a3}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">{{{a3a}}}</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.nuvemTags()">{{{a5a}}}</a> -->
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.carouselTemas()">Miniaturas</a> -->
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">Busca na INDE</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatisticos</a>-->
-                                    </p>
-                                    <p>
-                                        <a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
-                                    </p>
-                            </div>
-
                             <hr>
                             <!-- busca tema no catalogo
 						<div class="form-group label-floating">
@@ -427,7 +435,8 @@
                             <!-- lista de wms cadastrados no sistema de administracao -->
                             <div class="list-group condensed">
                                 <div class="row-content text-left" style="opacity: 0.8;">
-                                    <label style="width: 300px; vertical-align: middle;"> <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
+                                    <label style="width: 300px; vertical-align: middle;">
+                                        <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
                                                 <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i> OGC-WMS
                                             </h4>
@@ -443,7 +452,8 @@
                             <!--  regioes cadastradas no sistema de metadados -->
                             <div class="list-group condensed">
                                 <div class="row-content text-left">
-                                    <label style="width: 300px; vertical-align: middle;"> <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
+                                    <label style="width: 300px; vertical-align: middle;">
+                                        <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
                                                 <i class="material-icons" style="vertical-align: text-bottom;">domain</i> {{{x87}}}
                                             </h4>
@@ -459,7 +469,8 @@
                             <!--  camadas que vem do sistema de metadados estatisticos -->
                             <div class="list-group condensed">
                                 <div class="row-content text-left" style="opacity: 0.8;">
-                                    <label style="width: 300px; vertical-align: middle;"> <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
+                                    <label style="width: 300px; vertical-align: middle;">
+                                        <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
                                                 <i class="material-icons" style="vertical-align: text-bottom;">trending_up</i> {{{x57}}}
                                             </h4>
@@ -475,8 +486,8 @@
                             <!--  camadas por estrelas -->
                             <div class="list-group condensed">
                                 <div class="row-content text-left" style="opacity: 0.8;">
-                                    <label style="width: 300px; vertical-align: middle;"> <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button"
-                                            href="javascript:void(0)">
+                                    <label style="width: 300px; vertical-align: middle;">
+                                        <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" href="javascript:void(0)">
                                             <h4>
                                                 <i class="material-icons" style="vertical-align: text-bottom;">star_border</i> {{{t46}}}
                                             </h4>
@@ -492,7 +503,8 @@
                             <!--  sistemas que adicionam camadas -->
                             <div class="list-group condensed">
                                 <div class="row-content text-left" style="opacity: 0.8;">
-                                    <label style="width: 300px; vertical-align: middle;"> <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
+                                    <label style="width: 300px; vertical-align: middle;">
+                                        <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
                                                 <i class="material-icons" style="vertical-align: text-bottom;">widgets</i> {{{a11}}}
                                             </h4>
@@ -509,7 +521,8 @@
                             <!--  navegacao em diretorios -->
                             <div class="list-group condensed">
                                 <div class="row-content text-left" style="opacity: 0.8;">
-                                    <label style="width: 300px; vertical-align: middle;"> <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
+                                    <label style="width: 300px; vertical-align: middle;">
+                                        <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
                                                 <i class="material-icons" style="vertical-align: text-bottom;">storage</i> {{{a6}}}
                                             </h4>
@@ -527,10 +540,13 @@
                 </div>
                 <!-- Legenda -->
                 <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left; height: 100%;'>
-                    <div class="i3GEOfechaGuia" style="display: flex;" >
+                    <div class="i3GEOfechaGuia" style="display: flex;">
                         <button class="pull-left text-left" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle">{{{iconeLegenda}}}</span>
                         </button>
+                        <button type="button" title="{{{x11}}}" style="width: 3.5rem; height: 3rem;" class="text-right" onclick="i3GEO.legenda.inicia({'janela':true})">
+                            <span style="vertical-align: middle" class="material-icons">list_alt</span>
+                        </button>
                         <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
                             data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas">
                             <span style="vertical-align: middle" class="material-icons">visibility</span>
@@ -546,7 +562,6 @@
 
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})">{{{x11}}}</a>
                         <div id="legendaHtml" data-template="templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
                     </div>
                 </div>
@@ -567,11 +582,11 @@
                             <div class="form-group label-floating">
                                 <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
                                 <div class="input-group">
-                                    <input class="form-control" type="text" value="" name="valorBuscaRapida"> <span class="input-group-btn"> <a
-                                            onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html" data-inputGoogle="[name=google]"
-                                            data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html" data-inputTemasMapa="[name=temasMapa]"
-                                            data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html" data-ondeConteiner="#guia7obj"
-                                            data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
+                                    <input class="form-control" type="text" value="" name="valorBuscaRapida">
+                                    <span class="input-group-btn"> <a onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html"
+                                            data-inputGoogle="[name=google]" data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html"
+                                            data-inputTemasMapa="[name=temasMapa]" data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html"
+                                            data-ondeConteiner="#guia7obj" data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
                                             data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
                                             <span class="material-icons ">send</span>
                                         </a>
@@ -582,13 +597,17 @@
                             <div class="form-inline" style="width: 100%;">
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos"> {{{x38}}}
+                                        <label>
+                                            <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos">
+                                            {{{x38}}}
                                         </label>
                                     </div>
                                 </div>
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input class="noprint" value="on" type="checkbox" name="temasMapa"> {{{x39}}}
+                                        <label>
+                                            <input class="noprint" value="on" type="checkbox" name="temasMapa">
+                                            {{{x39}}}
                                         </label>
                                     </div>
                                 </div>
@@ -648,7 +667,7 @@
                         </div>
                         <div class="clearfix"></div>
 
-                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block;text-align: center;width: 100%;padding-left: 1rem;padding-right: 1rem;'></div>
+                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block; text-align: center; width: 100%; padding-left: 1rem; padding-right: 1rem;'></div>
                         <div id="migalhaFerramentas" data-template="templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
                         <div id="listaFerramentasLinks" data-template="templates/ferramentasLink.html" style='display: block; text-align: left'></div>
                         <div id="listaFerramentas" data-template="templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
@@ -677,368 +696,371 @@
 	</div>
 	</script>
     <script>
-					//ativa o banner de inicializacao
-					i3GEO.janela.tempoMsg(
-							$i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
-					(function() {
-						//parametros aplicados na criacao do arquivo mapfile
-						var parametrosMapa = {
-							//arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
-							//Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
-							mapfilebase : "",
-							//extensao geografica do mapa
-							//deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
-							//exemplo [-77,-26,-30,6]
-							mapext : [],
-							//perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
-							perfil : "",
-							//layers que serao adicionados ao mapa.
-							//Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
-							layers : {
-								//array com a lista dos layers que serao adicionados e ligados (visiveis)
-								add : [],
-								//array com a lista dos layers que serao adicionados mas nao ligados. Inclusive IDs do sistema de metadados estatisticos
-								on : [],
-								//array com os layers desligados
-								off : [],
-								//array com a lista de IDs que identificam medidas registradas no sistema de metadados
-								//estatisticos
-								metaestat : []
-							},
-							//lista de coordenadas x e y que serao adicionadas como pontos no mapa
-							points : {
-								//array com a lista de coordenadas
-								coord : [],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como linhas no mapa
-							lines : {
-								//array de arrays com a lista de coordenadas de cada linha
-								//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como poligonos no mapa
-							polygons : {
-								//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
-								//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//insere elementos no mapa com coordenadas definidas em wkt
-							wkt : {
-								//string no formato wkt
-								coord : "",
-								//titulo da nova camada
-								title : ""
-							},
-							//simbolo que sera utilizado para desenhar os elementos inseridos
-							symbol : {
-								//codigo do simbolo conforme definido em i3geo/symbols
-								name : "",
-								//em rgb, exemplo "0 255 0"
-								color : "",
-								//em pixels
-								size : ""
-							},
-							//arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
-							kml : {
-								url : ""
-							},
-							//endereco de um WMS (sera incluido como uma camada no mapa)
-							wms : {
-								url : "",
-								layer : "",
-								style : "",
-								title : "",
-								srs : "",
-								imagetype : "",
-								version : ""
-							},
-							//filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
-							//do mapserver, exemplo
-							//{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
-							filters : [ {
-								layer : "",
-								expression : ""
-							} ],
-							//id de um mapa salvo e que sera recuperado
-							restoreMapId : ""
-						};
-						var config = {
-							//id do elemento HTML onde o corpo do mapa sera renderizado
-							mapBody : "mapai3Geo",
-							//tipo de mapa. Pode ser:
-							//OL - utiliza o OpenLayers e coordenadas geograficas
-							//OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
-							//GM - utiliza o GoogleMaps como motor de controle do mapa
-							mapType : "OL",
-							//armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
-							saveExtension : false,
-							//aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
-							posRenderType : "",
-							//Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
-							//Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
-							//Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
-							i3GeoServer : i3GeoUrl,
-							//opacidade default para camadas que nao sejam do tipo linha ou ponto
-							//a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
-							//se for vazio, sera utilizado o valor definido no LAYER original
-							//Nao se aplica na interface googlemaps
-							layerOpacity : "",
-							//Funcao que sera executada apos a inicializacao do mapa
-							afterStart : function() {
-								$('.iconeGuiaMovel').tooltip({
-									animation : false,
-									trigger : "manual hover",
-									placement : "left"
-								});
-								$('.iconeGuiaMovel').tooltip('show');
-								setTimeout(function() {
-									$('.iconeGuiaMovel').tooltip('hide');
-								}, 5000);
+		    //ativa o banner de inicializacao
+		    i3GEO.janela.tempoMsg(
+			    $i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
+		    (function() {
+			//parametros aplicados na criacao do arquivo mapfile
+			var parametrosMapa = {
+			    //arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
+			    //Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
+			    mapfilebase : "",
+			    //extensao geografica do mapa
+			    //deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
+			    //exemplo [-77,-26,-30,6]
+			    mapext : [],
+			    //perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
+			    perfil : "",
+			    //layers que serao adicionados ao mapa.
+			    //Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
+			    layers : {
+				//array com a lista dos layers que serao adicionados e ligados (visiveis)
+				add : [],
+				//array com a lista dos layers que serao adicionados mas nao ligados. Inclusive IDs do sistema de metadados estatisticos
+				on : [],
+				//array com os layers desligados
+				off : [],
+				//array com a lista de IDs que identificam medidas registradas no sistema de metadados
+				//estatisticos
+				metaestat : []
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como pontos no mapa
+			    points : {
+				//array com a lista de coordenadas
+				coord : [],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como linhas no mapa
+			    lines : {
+				//array de arrays com a lista de coordenadas de cada linha
+				//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como poligonos no mapa
+			    polygons : {
+				//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
+				//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //insere elementos no mapa com coordenadas definidas em wkt
+			    wkt : {
+				//string no formato wkt
+				coord : "",
+				//titulo da nova camada
+				title : ""
+			    },
+			    //simbolo que sera utilizado para desenhar os elementos inseridos
+			    symbol : {
+				//codigo do simbolo conforme definido em i3geo/symbols
+				name : "",
+				//em rgb, exemplo "0 255 0"
+				color : "",
+				//em pixels
+				size : ""
+			    },
+			    //arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
+			    kml : {
+				url : ""
+			    },
+			    //endereco de um WMS (sera incluido como uma camada no mapa)
+			    wms : {
+				url : "",
+				layer : "",
+				style : "",
+				title : "",
+				srs : "",
+				imagetype : "",
+				version : ""
+			    },
+			    //filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
+			    //do mapserver, exemplo
+			    //{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
+			    filters : [ {
+				layer : "",
+				expression : ""
+			    } ],
+			    //id de um mapa salvo e que sera recuperado
+			    restoreMapId : ""
+			};
+			var config = {
+			    //id do elemento HTML onde o corpo do mapa sera renderizado
+			    mapBody : "mapai3Geo",
+			    //tipo de mapa. Pode ser:
+			    //OL - utiliza o OpenLayers e coordenadas geograficas
+			    //OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
+			    //GM - utiliza o GoogleMaps como motor de controle do mapa
+			    mapType : "OL",
+			    //armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
+			    saveExtension : false,
+			    //aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
+			    posRenderType : "",
+			    //Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
+			    //Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
+			    //Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
+			    i3GeoServer : i3GeoUrl,
+			    //opacidade default para camadas que nao sejam do tipo linha ou ponto
+			    //a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
+			    //se for vazio, sera utilizado o valor definido no LAYER original
+			    //Nao se aplica na interface googlemaps
+			    layerOpacity : "",
+			    //Funcao que sera executada apos a inicializacao do mapa
+			    afterStart : function() {
+				$('.iconeGuiaMovel').tooltip({
+				    animation : false,
+				    trigger : "manual hover",
+				    placement : "left"
+				});
+				$('.iconeGuiaMovel').tooltip('show');
+				setTimeout(function() {
+				    $('.iconeGuiaMovel').tooltip('hide');
+				}, 5000);
 
-								$('.ol-i3GEOcontrols button')
-										.tooltip(
-												{
-													animation : false,
-													trigger : "hover",
-													placement : "auto",
-													template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
-												});
+				$('.ol-i3GEOcontrols button')
+					.tooltip(
+						{
+						    animation : false,
+						    trigger : "hover",
+						    placement : "auto",
+						    template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
+						});
 
-								//$(".guiaOverflow").css("height",i3GEO.parametros.h - 140);
+				//$(".guiaOverflow").css("height",i3GEO.parametros.h - 140);
 
-								$(".guiaOverflow").mCustomScrollbar({
-									scrollbarPosition : "inside",
-									theme : "inset-2-dark"
-								});
-								tutorial.init();
-								//i3GEO.eventos.adicionaEventos("RESIZE", $(".guiaOverflow").css("height",i3GEO.parametros.h - 140));
+				$(".guiaOverflow").mCustomScrollbar({
+				    scrollbarPosition : "inside",
+				    theme : "inset-2-dark"
+				});
+				tutorial.init();
+				//i3GEO.eventos.adicionaEventos("RESIZE", $(".guiaOverflow").css("height",i3GEO.parametros.h - 140));
 
-								//setTimeout(function() {
-								//	$('.iconeGuiaMovel').tooltip('destroy');
-								//}, 30000);
-								//i3GEO.maparef.inicia();
-								//
-								//(largura, altura, topo, esquerda);
-								//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
-								//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
+				//setTimeout(function() {
+				//	$('.iconeGuiaMovel').tooltip('destroy');
+				//}, 30000);
+				//i3GEO.maparef.inicia();
+				//
+				//(largura, altura, topo, esquerda);
+				//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
+				//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
 
-								//abre a legenda do mapa em uma janela flutuante
-								//i3GEO.legenda.inicia({
-								//"idLegenda": "legendaHtml",
-								//"templateLegenda": "templates/legenda.html",
-								//"janela": true
-								//});
-								//para abrir uma guia
-								//i3GEO.guias.ativa('temas',$("[data-idconteudo='guia1obj'"));
-							},
-							//parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
-							components : {
-							    //restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
-							    //e nao aos que possuem o link para a fonte definido no mapfile
-							    restrictAtt: true,
-							    //define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
-								info : true,
-								//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
-								idsMenus : [],
-								//webservice utilizado na opcao de encontrar lugares
-								searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
-								//webservice wms que faz a apresentacao do lugar encontrado por searchService
-								searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
-								//posicao do mapa de referencia, em pixels [top,right]
-								referenceMapPosition : [ 4, 120 ],
-								//tipo do mapa de referencia. Pode ser wms ou map
-								referenceType : "map",
-								//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
-								tooltip : {
-									//o resultado sera mostrado em uma janela do tipo modal
-									modal : false,
-									//url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
-									//Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
-									//use apenas se modal for true
-									//exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
-									url : "",
-									//template que sera usado para compor o resultado da busca de dados
-									//se for vazio, serao utilizadas as outras opcoes
-									//se contiver a string {{{url}}} a mesma sera substituida por url
-									//exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
-									templateModal : "",
-									//serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
-									simple : true,
-									removeAoAdicionar : true,
-									//parametros exclusivos da interface openlayers
-									autoPan : true,
-									autoPanAnimation : {
-										duration : 250
-									},
-									minWidth : '200px',
-									//Altura e largura do tooltip (balao)
-									toolTipSize : [ "100px", "200px" ],
-									//mostra ou nao o balao caso seja vazio
-									openTipNoData : true
-								},
-								//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
-								scrollBar : {
-									theme : "inset-2",
-									axis : "yx",
-									scrollbarPosition : "inside",
-									scrollButtons : {
-										enable : true
-									},
-									advanced : {
-										autoExpandHorizontalScroll : true
-									}
-								}
-							},
-							//parametros de configuracao das ferramentas que sao acionadas sob
-							//demanda. Veja em js/ini_i3geo.js e js/configura.js
-							//Algumas ferramentas localizadas em i3geo/ferramentas
-							//permitem que qualquer parametro ou funcao seja sobrescrita
-							//Veja o codigo de cada ferramenta para obter os nomes de parametros e funcoes
-							//O codigo index.js da ferramenta deve permitir o uso dessas configuracoes (veja o final de cada index.js
-							tools : {
-								//ferramenta de identificacao
-								identifica : {
-									//resolucao em pixels para busca de elementos
-									resolution : 8
-								},
-								legenda : {
-									//define o local onde os templates da ferramenta ficam armazenados
-									//esse eh o local default, colocado aqui para documentacao
-									templateDir : i3GeoUrl
-											+ "/ferramentas/legenda"
-								},
-								metaestat : {},
-								buscainde : {},
-								//mapa de referencia
-                                opcoesMaparef : {
-								    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
-                                    images : [
-                                    	{name: "Colorida", img: "referencia1"},
-                                    	{name: "B & W", img: "referencia1cinza"}
-                                	]
-                                },
-                                //janela de conversao de coordenadas
-                                wkt2layer : {
-                                    position : [150,150]
-                                },
-                                area : {
-                                    position : [150,10]
-                                },
-                                distancia : {
-                                    position : [150,10]
-                                }
-							},
-							//configuracoes especificas para a interface que utiliza o OpenLayers
-							openLayers : {
-								//utiliza ou nao tiles ao renderizar as camadas do mapa
-								//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
-								singleTile : false,
-								//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
-								MapOptions : {
-									layers : [],
-									controls : [ new ol.control.Zoom(),
-											new ol.control.ZoomSlider(),
-											new ol.control.ScaleLine(),
-											new ol.control.Attribution({
-												collapsible : true
-											}) ],
-									loadTilesWhileAnimating : true,
-									loadTilesWhileInteracting : true,
-									//os objetos devem ser comentados na interface googleMaps
-									interactions : [
-											new ol.interaction.DoubleClickZoom(),
-											new ol.interaction.KeyboardPan(),
-											new ol.interaction.KeyboardZoom(),
-											new ol.interaction.MouseWheelZoom(),
-											new ol.interaction.PinchRotate(),
-											new ol.interaction.PinchZoom(),
-											//new ol.interaction.DragZoom(),
-											i3GEO.navega.dragZoom(),
-											new ol.interaction.DragPan()]
-								},
-								//opcoes para o objeto view, que e uma instancia de MapOptions
-								//ver https://openlayers.org/en/latest/apidoc/ol.View.html
-								ViewOptions : {
+				//abre a legenda do mapa em uma janela flutuante
+				//i3GEO.legenda.inicia({
+				//"idLegenda": "legendaHtml",
+				//"templateLegenda": "templates/legenda.html",
+				//"janela": true
+				//});
+				//para abrir uma guia
+				//i3GEO.guias.ativa('temas',$("[data-idconteudo='guia1obj'"));
+			    },
+			    //parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
+			    components : {
+				//restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
+				//e nao aos que possuem o link para a fonte definido no mapfile
+				restrictAtt : true,
+				//define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
+				info : true,
+				//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
+				idsMenus : [],
+				//webservice utilizado na opcao de encontrar lugares
+				searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
+				//webservice wms que faz a apresentacao do lugar encontrado por searchService
+				searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
+				//posicao do mapa de referencia, em pixels [top,right]
+				referenceMapPosition : [ 4, 120 ],
+				//tipo do mapa de referencia. Pode ser wms ou map
+				referenceType : "map",
+				//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
+				tooltip : {
+				    //o resultado sera mostrado em uma janela do tipo modal
+				    modal : false,
+				    //url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
+				    //Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
+				    //use apenas se modal for true
+				    //exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
+				    url : "",
+				    //template que sera usado para compor o resultado da busca de dados
+				    //se for vazio, serao utilizadas as outras opcoes
+				    //se contiver a string {{{url}}} a mesma sera substituida por url
+				    //exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
+				    templateModal : "",
+				    //serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
+				    simple : true,
+				    removeAoAdicionar : true,
+				    //parametros exclusivos da interface openlayers
+				    autoPan : true,
+				    autoPanAnimation : {
+					duration : 250
+				    },
+				    minWidth : '200px',
+				    //Altura e largura do tooltip (balao)
+				    toolTipSize : [ "100px", "200px" ],
+				    //mostra ou nao o balao caso seja vazio
+				    openTipNoData : true
+				},
+				//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
+				scrollBar : {
+				    theme : "inset-2",
+				    axis : "yx",
+				    scrollbarPosition : "inside",
+				    scrollButtons : {
+					enable : true
+				    },
+				    advanced : {
+					autoExpandHorizontalScroll : true
+				    }
+				}
+			    },
+			    //parametros de configuracao das ferramentas que sao acionadas sob
+			    //demanda. Veja em js/ini_i3geo.js e js/configura.js
+			    //Algumas ferramentas localizadas em i3geo/ferramentas
+			    //permitem que qualquer parametro ou funcao seja sobrescrita
+			    //Veja o codigo de cada ferramenta para obter os nomes de parametros e funcoes
+			    //O codigo index.js da ferramenta deve permitir o uso dessas configuracoes (veja o final de cada index.js
+			    tools : {
+				//ferramenta de identificacao
+				identifica : {
+				    //resolucao em pixels para busca de elementos
+				    resolution : 8
+				},
+				legenda : {
+				    //define o local onde os templates da ferramenta ficam armazenados
+				    //esse eh o local default, colocado aqui para documentacao
+				    templateDir : i3GeoUrl
+					    + "/ferramentas/legenda"
+				},
+				metaestat : {},
+				buscainde : {},
+				//mapa de referencia
+				opcoesMaparef : {
+				    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
+				    images : [ {
+					name : "Colorida",
+					img : "referencia1"
+				    }, {
+					name : "B & W",
+					img : "referencia1cinza"
+				    } ]
+				},
+				//janela de conversao de coordenadas
+				wkt2layer : {
+				    position : [ 150, 150 ]
+				},
+				area : {
+				    position : [ 150, 10 ]
+				},
+				distancia : {
+				    position : [ 150, 10 ]
+				}
+			    },
+			    //configuracoes especificas para a interface que utiliza o OpenLayers
+			    openLayers : {
+				//utiliza ou nao tiles ao renderizar as camadas do mapa
+				//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
+				singleTile : false,
+				//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
+				MapOptions : {
+				    layers : [],
+				    controls : [ new ol.control.Zoom(),
+					    new ol.control.ZoomSlider(),
+					    new ol.control.ScaleLine(),
+					    new ol.control.Attribution({
+						collapsible : true
+					    }) ],
+				    loadTilesWhileAnimating : true,
+				    loadTilesWhileInteracting : true,
+				    //os objetos devem ser comentados na interface googleMaps
+				    interactions : [
+					    new ol.interaction.DoubleClickZoom(),
+					    new ol.interaction.KeyboardPan(),
+					    new ol.interaction.KeyboardZoom(),
+					    new ol.interaction.MouseWheelZoom(),
+					    //new ol.interaction.PinchRotate(),
+					    new ol.interaction.PinchZoom(),
+					    //new ol.interaction.DragZoom(),
+					    i3GEO.navega.dragZoom(),
+					    new ol.interaction.DragPan() ]
+				},
+				//opcoes para o objeto view, que e uma instancia de MapOptions
+				//ver https://openlayers.org/en/latest/apidoc/ol.View.html
+				ViewOptions : {
 
-								},
-								//botoes que sao mostrados no editor vetorial
-								editorButtons : {
-									'imprimir' : false,
-									'grid' : false,
-									'pan' : false,
-									'zoombox' : false,
-									'zoomtot' : false,
-									'zoomin' : false,
-									'zoomout' : false,
-									'distancia' : false,
-									'area' : false,
-									'identifica' : false,
-									'linha' : true,
-									'ponto' : true,
-									'poligono' : true,
-									'texto' : true,
-									'edita' : true,
-									'listag' : true,
-									'corta' : true,
-									'apaga' : true,
-									'procura' : false,
-									'selecao' : true,
-									'selecaotudo' : true,
-									'salva' : true,
-									'ajuda' : true,
-									'propriedades' : true,
-									'fecha' : true,
-									'tools' : true,
-									'undo' : false,
-									'frente' : false,
-									'legenda' : false,
-									'rodadomouse' : true,
-									'novaaba' : false
-								}
-							},
-							//configuracoes especificas para a interface GoogleMaps
-							googleMaps : {
-								//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
-								MapOptions : {
-									//estilo que sera utilizado no mapa
-									//pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
-									//ver i3GEO.Interface.googleMaps.ESTILOS
-									mapTypeId : "roadmap",
-									scaleControl : true,
-									mapTypeControl : true,
-									mapTypeControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_BOTTOM
-									},
-									zoomControl : true,
-									zoomControlOptions : {
-									//style : google.maps.ZoomControlStyle.SMALL,
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									},
-									streetViewControl : true,
-									streetViewControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									}
-								}
-							}
-						};
-						//
-						//inicia o mapa
-						//Veja tambem config.php
-						//
-						//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
-						//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
-						//
-						//caso queira evitar os efeitos do material design, comente a linha abaixo
-						//$.material = false;
-						i3GEO.init(parametrosMapa, config);
-					})();
-				</script>
+				},
+				//botoes que sao mostrados no editor vetorial
+				editorButtons : {
+				    'imprimir' : false,
+				    'grid' : false,
+				    'pan' : false,
+				    'zoombox' : false,
+				    'zoomtot' : false,
+				    'zoomin' : false,
+				    'zoomout' : false,
+				    'distancia' : false,
+				    'area' : false,
+				    'identifica' : false,
+				    'linha' : true,
+				    'ponto' : true,
+				    'poligono' : true,
+				    'texto' : true,
+				    'edita' : true,
+				    'listag' : true,
+				    'corta' : true,
+				    'apaga' : true,
+				    'procura' : false,
+				    'selecao' : true,
+				    'selecaotudo' : true,
+				    'salva' : true,
+				    'ajuda' : true,
+				    'propriedades' : true,
+				    'fecha' : true,
+				    'tools' : true,
+				    'undo' : false,
+				    'frente' : false,
+				    'legenda' : false,
+				    'rodadomouse' : true,
+				    'novaaba' : false
+				}
+			    },
+			    //configuracoes especificas para a interface GoogleMaps
+			    googleMaps : {
+				//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
+				MapOptions : {
+				    //estilo que sera utilizado no mapa
+				    //pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
+				    //ver i3GEO.Interface.googleMaps.ESTILOS
+				    mapTypeId : "roadmap",
+				    scaleControl : true,
+				    mapTypeControl : true,
+				    mapTypeControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_BOTTOM
+				    },
+				    zoomControl : true,
+				    zoomControlOptions : {
+				    //style : google.maps.ZoomControlStyle.SMALL,
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    },
+				    streetViewControl : true,
+				    streetViewControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    }
+				}
+			    }
+			};
+			//
+			//inicia o mapa
+			//Veja tambem config.php
+			//
+			//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
+			//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
+			//
+			//caso queira evitar os efeitos do material design, comente a linha abaixo
+			//$.material = false;
+			i3GEO.init(parametrosMapa, config);
+		    })();
+		</script>
 </body>
 
 </html>
diff --git a/interface/osm.htm b/interface/osm.htm
index 3a2c3ea..4a08948 100755
--- a/interface/osm.htm
+++ b/interface/osm.htm
@@ -7,6 +7,8 @@
 <title>i3GEO - OpenLayers</title>
 <script src="../pacotes/ol4/ol.js"></script>
 <script src="../js/i3geo.js"></script>
+<!-- carrega as funcoes dos botoes de edicao de elementos graficos -->
+<script src="../ferramentas/editorol/editorol.js"></script>
 <!-- lista com os links que serao mostrados na guia ferramentas -->
 <script src="../js/listaDeFerramentas.js"></script>
 <!-- configuracoes default tipo pode ser OL (openLayers) ou GM (googlemaps) -->
@@ -15,7 +17,6 @@
 <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-material-design/dist/css/bootstrap-material-design.min.css">
 <!-- <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-material-design/dist/css/ripples.min.css">-->
-
 <!-- <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-accessibility-plugin/plugins/js/bootstrap-accessibility.min.js"> -->
 <link rel="stylesheet" type="text/css" href="../css/default.css">
 <!-- para o tutorial -->
@@ -43,12 +44,12 @@
 	-->
 <body id="i3geo" style='background: white;'>
     <!-- inclui o nome do usuario logado
-    <div id="i3GEONomeLogin"
-        style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
-    -->
+	<div id="i3GEONomeLogin"
+		style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
+	-->
     <!-- Aqui vai o mapa. O div a ser inserido e padronizado e depende da interface usar openlayers ou googlemaps
-    Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
-    -->
+	Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
+	-->
     <div id="mapai3Geo"></div>
     <!-- aqui sera incluida a escala numerica. E necessario ter o id=i3GEOescalanum para que o valor seja atualizado-->
     <form data-tutorial="escalas" class="escalanumerica hidden-xs" onsubmit="javascript:i3GEO.navega.aplicaEscala($i('i3GEOescalanum').value);return false;">
@@ -69,29 +70,48 @@
             </select>
         </div>
         <div class="i3GeoMascaraCoord" id="localizarxygeoProj" style="display: block; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
-            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text"> Y: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg"
-                type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text"> <input name="" value="00.00" size="5" title="segundo"
-                id="localizarxygeoProjys" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
+            X:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text">
+            Y:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjys" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
         </div>
         <div id="localizarxydd" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
         </div>
         <div id="localizarxygeohash" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            GeoHash <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom"
-                onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
+            GeoHash
+            <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
         </div>
         <div id="localizarxypoliconicaSad69" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y"
-                type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y" type="text">
         </div>
         <div id="localizarxyutmSad69Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
         </div>
         <div id="localizarxyutmSirgas2000Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
         </div>
     </div>
     <!-- barra de icones de navegacao -->
@@ -141,28 +161,29 @@
     <!-- botoes laterais que abrem guias moveis -->
     <div id="i3GEOguiaMovel">
         <!-- configuracao para todos os botoes
-            data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
-        -->
+			data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
+		-->
         <div class="iconesGuiaMovel ol-control" data-traduzir="true">
             <!-- ferramentas
-                data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
-                data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
-                data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
-            -->
-            <div data-tutorial="ferramentas" data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
+				data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
+				data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
+				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
+			-->
+            <div data-tutorial="ferramentas" data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas"
+                onclick="i3GEO.guias.ativa('ferramentas',this)">
                 <button title="{{{iconeFerramentas}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">business_center</i>
                 </button>
             </div>
             <!-- temas existentes no mapa
-                data-idListaDeCamadas - id onde sera incluida a lista de camadas
-                data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
-                data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
-                    inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
-                    do metadata existente na camada. Deixe vazio para nao ativar a operacao.
-            -->
-            <div data-tutorial="camadas" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas"
-                style="margin-top: 3px;">
+				data-idListaDeCamadas - id onde sera incluida a lista de camadas
+				data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
+				data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
+					inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
+					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
+			-->
+            <div data-tutorial="camadas" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo"
+                data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
                 <button title="{{{iconeMapa}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons"><i class="material-icons">visibility</i></i>
                 </button>
@@ -188,6 +209,13 @@
                     <i class="material-icons">view_list</i>
                 </button>
             </div>
+            <!--
+            <div data-tutorial="troca" class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
+                <button title="{{{trocaInterface}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
+                    <i class="material-icons">compare_arrows</i>
+                </button>
+            </div>
+            -->
             <!-- Busca -->
             <div data-tutorial="busca" onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
                 <button class="iconeGuiaMovel" style="color: white; box-shadow: none;">
@@ -205,12 +233,12 @@
                 </button>
             </div>
             <!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
-            <div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
-                <button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
-                    <img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
-                </button>
-            </div>
-            -->
+			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
+				<button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
+					<img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
+				</button>
+			</div>
+			-->
         </div>
         <!-- veja i3GEO.guias.CONFIGURA -->
         <!-- Os IDs sao definidos no botao que ativa a guia veja: "i3GEOguiaMovel" -->
@@ -218,11 +246,46 @@
         <div id="i3GEOguiaMovelMolde">
             <div id="i3GEOguiaMovelConteudo">
                 <!-- camadas existentes no mapa -->
-                <div id='guia1obj' data-traduzir="true" style='display: none; height:100%'>
+                <div id='guia1obj' data-traduzir="true" style='display: none; height: 100%'>
                     <div class="i3GEOfechaGuia" style="display: flex;">
                         <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle">{{{iconeMapa}}}</span>
                         </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-refresh"></span> Refresh
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-open"></span> {{{t3a}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-close"></span> {{{t3b}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-trash"></span> {{{t12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-filter"></span> {{{t2a}}}
+                                    </a></li>
+                                <li role="separator" class="divider"></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-adjust"></span> {{{t20}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-film"></span> {{{p21}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-print"></span> {{{d12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-erase"></span> {{{t4}}}
+                                    </a></li>
+                            </ul>
+                        </div>
                         <button title="{{{iconeCatalogo}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj"
                             data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus">
                             <span style="vertical-align: middle" class="material-icons">layers</span>
@@ -234,49 +297,20 @@
                         <button style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
+
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <div class="list-group condensed noprint collapsed" data-toggle="collapse" data-target="#opcoesGuia1">
-                            <label>{{{opcoes}}}</label>
-                        </div>
-                        <div class="text-left collapse noprint" id="opcoesGuia1" style="margin-left: 30px;">
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">Refresh</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">{{{t3a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">{{{t3b}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">{{{t12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">{{{t2a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">{{{t20}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">{{{p21}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">{{{d12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">{{{t4}}}</a>
-                            </p>
-                        </div>
-                        <hr>
-                        <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
+                    <div class="guiaOverflow" style="height: calc(100% - 45px); width: calc(100% - 5px);">
+                        <!-- Esta div acrescenta a lista de layers graficos -->
+                        <div id="listaLayersGr" style="overflow: none;" data-template="templates/camadaGr.html"></div>
+                        <div id="listaLayersGrBtn" style="overflow: none;"></div>
+                        <!-- Esta div acrescenta a lista de camadas disponiveis no mapa atual -->
                         <div id="listaTemas" style="overflow: none;" data-template="templates/camada.html"></div>
                         <!-- Esta div acrescenta a lista de de camadas de fundo
-                    A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
-                    Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
-                    no programa interface/config.php
-                    -->
+					A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
+					Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
+					no programa interface/config.php
+					-->
                         <div data-toggle="collapse" data-target="#collapseFundo" class="list-group condensed collapsed">
                             <label>{{{camadasDeFundo}}}</label>
                         </div>
@@ -285,17 +319,44 @@
                                 <div id="listaFundo" class="form-group condensed" data-template="templates/camadaFundo.html"></div>
                             </form>
                         </div>
-
                     </div>
                 </div>
                 <!-- Catalogo de temas -->
-                <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left;height:100%;'>
+                <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left; height: 100%;'>
                     <div class="i3GEOfechaGuia" style="display: flex;">
                         <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
                             <span style="vertical-align: middle">{{{iconeCatalogo}}}</span>
                         </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">
+                                        <span class="glyphicon glyphicon-log-in"></span> Login/Logout
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">
+                                        <span class="glyphicon glyphicon-globe"></span> {{{a15}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">
+                                        <span class="glyphicon glyphicon-cloud-upload"></span> {{{a14}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">
+                                        <span class="glyphicon glyphicon-cloud-download"></span> {{{a3}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a3a}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">
+                                        <span class="glyphicon glyphicon-search"></span> Busca na INDE
+                                    </a></li>
+                                <li><a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a13}}}
+                                    </a></li>
+                            </ul>
+                        </div>
                         <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
-                            data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas">
+                            data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" data-idListaLayersGr="listaLayersGr" data-idBtnLayersGr="listaLayersGrBtn">
                             <span style="vertical-align: middle" class="material-icons">visibility</span>
                         </button>
                         <button title="{{{iconeLegenda}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj"
@@ -309,99 +370,58 @@
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
 
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <div id="catalogoMigalha" style="display:block;" data-template="templates/catalogoMigalha.html"></div>
+                        <div id="catalogoMigalha" style="display: block;" data-template="templates/catalogoMigalha.html"></div>
                         <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
                         <div id="catalogoNavegacao"></div>
                         <!-- Opcoes -->
                         <div id="catalogoPrincipal">
-                            <div data-toggle="collapse" data-target="#opcoesGuia2" class="list-group condensed collapsed noprint">
-                                <label>{{{opcoes}}}</label>
-                            </div>
-                            <div class="text-left collapse" id="opcoesGuia2" style="margin-left: 30px;">
-                                <p>
-                                    <a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">Login/Logout</a>
-                                </p>
-                                <p>
-                                    <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.atualiza()">Refresh</a> -->
-                                </p>
-                                <li class="divider"></p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">{{{a15}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">{{{a14}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">{{{a3}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">{{{a3a}}}</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.nuvemTags()">{{{a5a}}}</a> -->
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.carouselTemas()">Miniaturas</a> -->
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">Busca na INDE</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatisticos</a>-->
-                                    </p>
-                                    <p>
-                                        <a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
-                                    </p>
-                            </div>
-
                             <hr>
                             <!-- busca tema no catalogo
-                        <div class="form-group label-floating">
-                            <label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
-                            <div class="input-group">
-                                <input id="i3GEObuscatema" class="form-control" type="text" value="">
-                                <span class="input-group-btn">
-                                    <a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
-                                        <span class="material-icons ">send</span>
-                                    </a>
-                                </span>
-                            </div>
-                        </div>
-                         -->
+						<div class="form-group label-floating">
+							<label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
+							<div class="input-group">
+								<input id="i3GEObuscatema" class="form-control" type="text" value="">
+								<span class="input-group-btn">
+									<a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
+										<span class="material-icons ">send</span>
+									</a>
+								</span>
+							</div>
+						</div>
+						 -->
                             <!-- A lista de menus e uma funcao de i3GEO.guias.CONFIGURA.adiciona
-                            Nessa funcao ficam tambem os parametros:
-                            "idOndeMenus": "catalogoMenus",
-                            "idCatalogoPrincipal": "catalogoPrincipal",
-                            "idCatalogoNavegacao": "catalogoNavegacao",
-                            "idOndeMigalha": "catalogoMigalha"
-                        -->
+							Nessa funcao ficam tambem os parametros:
+							"idOndeMenus": "catalogoMenus",
+							"idCatalogoPrincipal": "catalogoPrincipal",
+							"idCatalogoNavegacao": "catalogoNavegacao",
+							"idOndeMigalha": "catalogoMigalha"
+						-->
                             <div id="catalogoMenus" data-templateDir="templates/dir.html" data-templateTema="templates/tema.html"></div>
 
                             <div id="arvoreAdicionaTema"></div>
 
                             <!--
-                        As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
-                        config: {
-                            'templateDir': 'templates/dir.html',
-                            'templateTema': 'templates/tema.html',
-                            'idCatalogoPrincipal': 'catalogoPrincipal',
-                            'idCatalogoNavegacao': 'catalogoNavegacao',
-                            'idOndeMigalha': 'catalogoMigalha'
-                        }
+						As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
+						config: {
+							'templateDir': 'templates/dir.html',
+							'templateTema': 'templates/tema.html',
+							'idCatalogoPrincipal': 'catalogoPrincipal',
+							'idCatalogoNavegacao': 'catalogoNavegacao',
+							'idOndeMigalha': 'catalogoMigalha'
+						}
 
-                        exemplo:
+						exemplo:
 
-                        onclick="i3GEO.catalogoInde.inicia({'templateDir': 'templates/dir.html','templateTema': 'templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
-                        -->
+						onclick="i3GEO.catalogoInde.inicia({'templateDir': 'templates/dir.html','templateTema': 'templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
+						-->
 
                             <!-- servicos da INDE brasileira -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoInde.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i>
-                                            INDE-Br
+                                                <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i> INDE-Br
                                             </h4>
                                         </a>
                                         <h6>Infraestrutura Nacional de Dados Espaciais do Brasil</h6>
@@ -414,12 +434,11 @@
                             <hr>
                             <!-- lista de wms cadastrados no sistema de administracao -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i>
-                                            OGC-WMS
+                                                <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i> OGC-WMS
                                             </h4>
                                         </a>
                                         <h6>{{{descOgcWms}}}</h6>
@@ -436,8 +455,7 @@
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">domain</i>
-                                            {{{x87}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">domain</i> {{{x87}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descLimLoc}}}</h6>
@@ -450,12 +468,11 @@
                             <hr>
                             <!--  camadas que vem do sistema de metadados estatisticos -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">trending_up</i>
-                                            {{{x57}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">trending_up</i> {{{x57}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descMeta}}}</h6>
@@ -468,13 +485,11 @@
                             <hr>
                             <!--  camadas por estrelas -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
-                                    <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button"
-                                            href="javascript:void(0)">
+                                        <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">star_border</i>
-                                            {{{t46}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">star_border</i> {{{t46}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descEstrelas}}}</h6>
@@ -487,12 +502,11 @@
                             <hr>
                             <!--  sistemas que adicionam camadas -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">widgets</i>
-                                            {{{a11}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">widgets</i> {{{a11}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descSistemas}}}</h6>
@@ -506,12 +520,11 @@
                             <hr>
                             <!--  navegacao em diretorios -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">storage</i>
-                                            {{{a6}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">storage</i> {{{a6}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descDir}}}</h6>
@@ -526,11 +539,14 @@
                     </div>
                 </div>
                 <!-- Legenda -->
-                <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left;height:100%;'>
-                    <div class="i3GEOfechaGuia" style="display: flex;" >
+                <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left; height: 100%;'>
+                    <div class="i3GEOfechaGuia" style="display: flex;">
                         <button class="pull-left text-left" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
                             <span style="vertical-align: middle">{{{iconeLegenda}}}</span>
                         </button>
+                        <button type="button" title="{{{x11}}}" style="width: 3.5rem; height: 3rem;" class="text-right" onclick="i3GEO.legenda.inicia({'janela':true})">
+                            <span style="vertical-align: middle" class="material-icons">list_alt</span>
+                        </button>
                         <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
                             data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas">
                             <span style="vertical-align: middle" class="material-icons">visibility</span>
@@ -543,18 +559,18 @@
                             <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
                     </div>
+
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})">{{{x11}}}</a>
                         <div id="legendaHtml" data-template="templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
                     </div>
                 </div>
                 <!-- busca
-                Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
-                No botao que dispara a busca, ficam os parametros de configuracao
-                Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
-                -->
-                <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left; height:100%'>
+				Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
+				No botao que dispara a busca, ficam os parametros de configuracao
+				Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
+				-->
+                <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left; height: 100%'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
                             <span class="pull-left">{{{t23}}}</span> <span class="pull-right material-icons">cancel</span>
@@ -566,11 +582,11 @@
                             <div class="form-group label-floating">
                                 <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
                                 <div class="input-group">
-                                    <input class="form-control" type="text" value="" name="valorBuscaRapida"> <span class="input-group-btn"> <a
-                                            onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html" data-inputGoogle="[name=google]"
-                                            data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html" data-inputTemasMapa="[name=temasMapa]"
-                                            data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html" data-ondeConteiner="#guia7obj"
-                                            data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
+                                    <input class="form-control" type="text" value="" name="valorBuscaRapida">
+                                    <span class="input-group-btn"> <a onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html"
+                                            data-inputGoogle="[name=google]" data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html"
+                                            data-inputTemasMapa="[name=temasMapa]" data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html"
+                                            data-ondeConteiner="#guia7obj" data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
                                             data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
                                             <span class="material-icons ">send</span>
                                         </a>
@@ -581,26 +597,30 @@
                             <div class="form-inline" style="width: 100%;">
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos"> {{{x38}}}
+                                        <label>
+                                            <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos">
+                                            {{{x38}}}
                                         </label>
                                     </div>
                                 </div>
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input class="noprint" value="on" type="checkbox" name="temasMapa"> {{{x39}}}
+                                        <label>
+                                            <input class="noprint" value="on" type="checkbox" name="temasMapa">
+                                            {{{x39}}}
                                         </label>
                                     </div>
                                 </div>
                                 <!-- Apenas para a interface google maps
-                            <div class="list-group condensed">
-                                <div class="checkbox text-left">
-                                <label>
-                                    <input class="noprint" value="on" type="checkbox" name="google">
-                                    <span class="checkbox-material noprint"><span class="check"></span></span> Google
-                                </label>
-                                </div>
-                            </div>
-                             -->
+							<div class="list-group condensed">
+								<div class="checkbox text-left">
+								<label>
+									<input class="noprint" value="on" type="checkbox" name="google">
+									<span class="checkbox-material noprint"><span class="check"></span></span> Google
+								</label>
+								</div>
+							</div>
+							 -->
                             </div>
                         </form>
                         <hr>
@@ -611,7 +631,7 @@
                     </div>
                 </div>
                 <!-- Ferramentas -->
-                <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left;height:100%'>
+                <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left; height: 100%'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
                             <span class="pull-left">{{{iconeFerramentas}}}</span> <span class="pull-right material-icons">cancel</span>
@@ -620,25 +640,25 @@
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
                         <div class="form-inline" style="width: 100%;">
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/area-measure.png">
                                 </a>
                                 <h6>{{{d21at}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/length-measure.png">
                                 </a>
                                 <h6>{{{d21t}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.selecao();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/select.png">
                                 </a>
                                 <h6>{{{d24t}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.geolocal();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/layer-gps.png">
                                 </a>
@@ -646,8 +666,8 @@
                             </div>
                         </div>
                         <div class="clearfix"></div>
-                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block;text-align: center;width: 100%;padding-left: 1rem;padding-right: 1rem;'></div>
 
+                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block; text-align: center; width: 100%; padding-left: 1rem; padding-right: 1rem;'></div>
                         <div id="migalhaFerramentas" data-template="templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
                         <div id="listaFerramentasLinks" data-template="templates/ferramentasLink.html" style='display: block; text-align: left'></div>
                         <div id="listaFerramentas" data-template="templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
@@ -656,7 +676,6 @@
             </div>
         </div>
     </div>
-
     <!--  para mostrar o banner de abertura -->
     <script id="i3GEOlogoMarcaTemplate" type="x-tmpl-mustache">
 	<div>
@@ -677,335 +696,371 @@
 	</div>
 	</script>
     <script>
-					//ativa o banner de inicializacao
-					i3GEO.janela.tempoMsg(
-							$i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
-					(function() {
-						//parametros aplicados na criacao do arquivo mapfile
-						var parametrosMapa = {
-							//arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
-							//Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
-							mapfilebase : "",
-							//extensao geografica do mapa
-							//deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
-							//exemplo [-77,-26,-30,6]
-							mapext : [],
-							//perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
-							perfil : "",
-							//layers que serao adicionados ao mapa.
-							//Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
-							layers : {
-								//array com a lista dos layers que serao adicionados e ligados (visiveis)
-								add : [],
-								//array com a lista dos layers que serao adicionados mas nao ligados
-								on : [],
-								//array com os layers desligados
-								off : []
-							},
-							//lista de coordenadas x e y que serao adicionadas como pontos no mapa
-							points : {
-								//array com a lista de coordenadas
-								coord : [],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como linhas no mapa
-							lines : {
-								//array de arrays com a lista de coordenadas de cada linha
-								//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como poligonos no mapa
-							polygons : {
-								//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
-								//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//insere elementos no mapa com coordenadas definidas em wkt
-							wkt : {
-								//string no formato wkt
-								coord : "",
-								//titulo da nova camada
-								title : ""
-							},
-							//simbolo que sera utilizado para desenhar os elementos inseridos
-							symbol : {
-								//codigo do simbolo conforme definido em i3geo/symbols
-								name : "",
-								//em rgb, exemplo "0 255 0"
-								color : "",
-								//em pixels
-								size : ""
-							},
-							//arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
-							kml : {
-								url : ""
-							},
-							//endereco de um WMS (sera incluido como uma camada no mapa)
-							wms : {
-								url : "",
-								layer : "",
-								style : "",
-								title : "",
-								srs : "",
-								imagetype : "",
-								version : ""
-							},
-							//filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
-							//do mapserver, exemplo
-							//{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
-							filters : [ {
-								layer : "",
-								expression : ""
-							} ],
-							//id de um mapa salvo e que sera recuperado
-							restoreMapId : ""
-						};
-						var config = {
-							//id do elemento HTML onde o corpo do mapa sera renderizado
-							mapBody : "mapai3Geo",
-							//tipo de mapa. Pode ser:
-							//OL - utiliza o OpenLayers e coordenadas geograficas
-							//OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
-							//GM - utiliza o GoogleMaps como motor de controle do mapa
-							mapType : "OSM",
-							//armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
-							saveExtension : false,
-							//aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
-							posRenderType : "",
-							//Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
-							//Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
-                			//Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
-                			i3GeoServer : i3GeoUrl,
-							//opacidade default para camadas que nao sejam do tipo linha ou ponto
-							//a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
-							//se for vazio, sera utilizado o valor definido no LAYER original
-							//Nao se aplica na interface googlemaps
-							layerOpacity : "",
-							//Funcao que sera executada apos a inicializacao do mapa
-							afterStart : function() {
-								$('.iconeGuiaMovel').tooltip({
-									animation : false,
-									trigger : "manual hover",
-									placement : "left"
-								});
-								$('.iconeGuiaMovel').tooltip('show');
-								setTimeout(function(){$('.iconeGuiaMovel').tooltip('hide');},5000);
+		    //ativa o banner de inicializacao
+		    i3GEO.janela.tempoMsg(
+			    $i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
+		    (function() {
+			//parametros aplicados na criacao do arquivo mapfile
+			var parametrosMapa = {
+			    //arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
+			    //Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
+			    mapfilebase : "",
+			    //extensao geografica do mapa
+			    //deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
+			    //exemplo [-77,-26,-30,6]
+			    mapext : [],
+			    //perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
+			    perfil : "",
+			    //layers que serao adicionados ao mapa.
+			    //Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
+			    layers : {
+				//array com a lista dos layers que serao adicionados e ligados (visiveis)
+				add : [],
+				//array com a lista dos layers que serao adicionados mas nao ligados. Inclusive IDs do sistema de metadados estatisticos
+				on : [],
+				//array com os layers desligados
+				off : [],
+				//array com a lista de IDs que identificam medidas registradas no sistema de metadados
+				//estatisticos
+				metaestat : []
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como pontos no mapa
+			    points : {
+				//array com a lista de coordenadas
+				coord : [],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como linhas no mapa
+			    lines : {
+				//array de arrays com a lista de coordenadas de cada linha
+				//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como poligonos no mapa
+			    polygons : {
+				//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
+				//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //insere elementos no mapa com coordenadas definidas em wkt
+			    wkt : {
+				//string no formato wkt
+				coord : "",
+				//titulo da nova camada
+				title : ""
+			    },
+			    //simbolo que sera utilizado para desenhar os elementos inseridos
+			    symbol : {
+				//codigo do simbolo conforme definido em i3geo/symbols
+				name : "",
+				//em rgb, exemplo "0 255 0"
+				color : "",
+				//em pixels
+				size : ""
+			    },
+			    //arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
+			    kml : {
+				url : ""
+			    },
+			    //endereco de um WMS (sera incluido como uma camada no mapa)
+			    wms : {
+				url : "",
+				layer : "",
+				style : "",
+				title : "",
+				srs : "",
+				imagetype : "",
+				version : ""
+			    },
+			    //filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
+			    //do mapserver, exemplo
+			    //{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
+			    filters : [ {
+				layer : "",
+				expression : ""
+			    } ],
+			    //id de um mapa salvo e que sera recuperado
+			    restoreMapId : ""
+			};
+			var config = {
+			    //id do elemento HTML onde o corpo do mapa sera renderizado
+			    mapBody : "mapai3Geo",
+			    //tipo de mapa. Pode ser:
+			    //OL - utiliza o OpenLayers e coordenadas geograficas
+			    //OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
+			    //GM - utiliza o GoogleMaps como motor de controle do mapa
+			    mapType : "OSM",
+			    //armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
+			    saveExtension : false,
+			    //aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
+			    posRenderType : "",
+			    //Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
+			    //Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
+			    //Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
+			    i3GeoServer : i3GeoUrl,
+			    //opacidade default para camadas que nao sejam do tipo linha ou ponto
+			    //a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
+			    //se for vazio, sera utilizado o valor definido no LAYER original
+			    //Nao se aplica na interface googlemaps
+			    layerOpacity : "",
+			    //Funcao que sera executada apos a inicializacao do mapa
+			    afterStart : function() {
+				$('.iconeGuiaMovel').tooltip({
+				    animation : false,
+				    trigger : "manual hover",
+				    placement : "left"
+				});
+				$('.iconeGuiaMovel').tooltip('show');
+				setTimeout(function() {
+				    $('.iconeGuiaMovel').tooltip('hide');
+				}, 5000);
+
+				$('.ol-i3GEOcontrols button')
+					.tooltip(
+						{
+						    animation : false,
+						    trigger : "hover",
+						    placement : "auto",
+						    template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
+						});
+
+				//$(".guiaOverflow").css("height",i3GEO.parametros.h - 140);
+
+				$(".guiaOverflow").mCustomScrollbar({
+				    scrollbarPosition : "inside",
+				    theme : "inset-2-dark"
+				});
+				tutorial.init();
+				//i3GEO.eventos.adicionaEventos("RESIZE", $(".guiaOverflow").css("height",i3GEO.parametros.h - 140));
 
-								$('.ol-i3GEOcontrols button').tooltip({
-									animation : false,
-									trigger : "hover",
-									placement : "auto",
-									template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
-								});
-								$(".guiaOverflow").mCustomScrollbar({
-									scrollbarPosition : "inside",
-									theme : "inset-2-dark"
-								});
-								tutorial.init();
-								//setTimeout(function() {
-								//	$('.iconeGuiaMovel').tooltip('destroy');
-								//}, 30000);
-								//i3GEO.maparef.inicia();
-								//
-								//(largura, altura, topo, esquerda);
-								//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
-								//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
+				//setTimeout(function() {
+				//	$('.iconeGuiaMovel').tooltip('destroy');
+				//}, 30000);
+				//i3GEO.maparef.inicia();
+				//
+				//(largura, altura, topo, esquerda);
+				//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
+				//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
 
-								//abre a legenda do mapa em uma janela flutuante
-								//i3GEO.legenda.inicia({
-								//"idLegenda": "legendaHtml",
-								//"templateLegenda": "templates/legenda.html",
-								//"janela": true
-								//});
-							},
-							//parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
-							components : {
-							    //restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
-							    //e nao aos que possuem o link para a fonte definido no mapfile
-							    restrictAtt: true,
-								//define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
-								info : true,
-								//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
-								idsMenus : [],
-								//webservice utilizado na opcao de encontrar lugares
-								searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
-								//webservice wms que faz a apresentacao do lugar encontrado por searchService
-								searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
-								//posicao do mapa de referencia, em pixels [top,right]
-								referenceMapPosition : [ 4, 120 ],
-								//tipo do mapa de referencia. Pode ser wms ou map
-								referenceType: "wms",
-								//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
-								tooltip : {
-									//o resultado sera mostrado em uma janela do tipo modal
-									modal : false,
-									//url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
-									//Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
-									//use apenas se modal for true
-									//exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
-									url : "",
-									//template que sera usado para compor o resultado da busca de dados
-									//se for vazio, serao utilizadas as outras opcoes
-									//se contiver a string {{{url}}} a mesma sera substituida por url
-									//exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
-									templateModal : "",
-									//serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
-									simple : true,
-									removeAoAdicionar : true,
-									//parametros exclusivos da interface openlayers
-									autoPan : true,
-									autoPanAnimation : {
-										duration : 250
-									},
-									minWidth : '200px',
-									//Altura e largura do tooltip (balao)
-									toolTipSize : [ "100px", "200px" ],
-									//mostra ou nao o balao caso seja vazio
-									openTipNoData : true
-								},
-								//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
-								scrollBar : {
-									theme : "inset-2",
-									axis : "yx",
-									scrollbarPosition : "inside",
-									scrollButtons : {
-										enable : true
-									},
-									advanced : {
-										autoExpandHorizontalScroll : true
-									}
-								}
-							},
-							//parametros de configuracao das ferramentas que sao acionadas sob demanda
-							//ferramentas localizadas em i3geo/ferramentas
-							tools : {
-								//ferramenta de busca de camadas em um servico CSW
-								buscainde : {
-									//endereco do servico no padrao CSW
-									csw : "http://www.metadados.inde.gov.br/geonetwork/srv/br"
-								},
-								//ferramenta de identificacao
-								identifica : {
-									//resolucao em pixels para busca de elementos
-									resolution : 8
-								},
-								//mapa de referencia
-                                opcoesMaparef : {
-								    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
-                                    images : [
-                                    	{name: "Colorida", img: "referencia1"},
-                                    	{name: "B & W", img: "referencia1cinza"}
-                                	]
-                                }
-							},
-							//configuracoes especificas para a interface que utiliza o OpenLayers
-							openLayers : {
-								//utiliza ou nao tiles ao renderizar as camadas do mapa
-								//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
-								singleTile : false,
-								//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
-								MapOptions : {
-									layers : [],
-									controls : [ new ol.control.Zoom(),
-											new ol.control.ZoomSlider(),
-											new ol.control.ScaleLine(),
-											new ol.control.Attribution({
-												collapsible : true
-											}) ],
-									loadTilesWhileAnimating : true,
-									loadTilesWhileInteracting : true,
-									//os objetos devem ser comentados na interface googleMaps
-									interactions : [
-											new ol.interaction.DoubleClickZoom(),
-											new ol.interaction.KeyboardPan(),
-											new ol.interaction.KeyboardZoom(),
-											new ol.interaction.MouseWheelZoom(),
-											new ol.interaction.PinchRotate(),
-											new ol.interaction.PinchZoom(),
-											//new ol.interaction.DragZoom(),
-											i3GEO.navega.dragZoom(),
-											new ol.interaction.DragPan() ]
-								},
-								//opcoes para o objeto view, que e uma instancia de MapOptions
-								//ver https://openlayers.org/en/latest/apidoc/ol.View.html
-								ViewOptions : {
+				//abre a legenda do mapa em uma janela flutuante
+				//i3GEO.legenda.inicia({
+				//"idLegenda": "legendaHtml",
+				//"templateLegenda": "templates/legenda.html",
+				//"janela": true
+				//});
+				//para abrir uma guia
+				//i3GEO.guias.ativa('temas',$("[data-idconteudo='guia1obj'"));
+			    },
+			    //parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
+			    components : {
+				//restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
+				//e nao aos que possuem o link para a fonte definido no mapfile
+				restrictAtt : true,
+				//define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
+				info : true,
+				//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
+				idsMenus : [],
+				//webservice utilizado na opcao de encontrar lugares
+				searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
+				//webservice wms que faz a apresentacao do lugar encontrado por searchService
+				searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
+				//posicao do mapa de referencia, em pixels [top,right]
+				referenceMapPosition : [ 4, 120 ],
+				//tipo do mapa de referencia. Pode ser wms ou map
+				referenceType : "map",
+				//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
+				tooltip : {
+				    //o resultado sera mostrado em uma janela do tipo modal
+				    modal : false,
+				    //url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
+				    //Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
+				    //use apenas se modal for true
+				    //exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
+				    url : "",
+				    //template que sera usado para compor o resultado da busca de dados
+				    //se for vazio, serao utilizadas as outras opcoes
+				    //se contiver a string {{{url}}} a mesma sera substituida por url
+				    //exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
+				    templateModal : "",
+				    //serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
+				    simple : true,
+				    removeAoAdicionar : true,
+				    //parametros exclusivos da interface openlayers
+				    autoPan : true,
+				    autoPanAnimation : {
+					duration : 250
+				    },
+				    minWidth : '200px',
+				    //Altura e largura do tooltip (balao)
+				    toolTipSize : [ "100px", "200px" ],
+				    //mostra ou nao o balao caso seja vazio
+				    openTipNoData : true
+				},
+				//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
+				scrollBar : {
+				    theme : "inset-2",
+				    axis : "yx",
+				    scrollbarPosition : "inside",
+				    scrollButtons : {
+					enable : true
+				    },
+				    advanced : {
+					autoExpandHorizontalScroll : true
+				    }
+				}
+			    },
+			    //parametros de configuracao das ferramentas que sao acionadas sob
+			    //demanda. Veja em js/ini_i3geo.js e js/configura.js
+			    //Algumas ferramentas localizadas em i3geo/ferramentas
+			    //permitem que qualquer parametro ou funcao seja sobrescrita
+			    //Veja o codigo de cada ferramenta para obter os nomes de parametros e funcoes
+			    //O codigo index.js da ferramenta deve permitir o uso dessas configuracoes (veja o final de cada index.js
+			    tools : {
+				//ferramenta de identificacao
+				identifica : {
+				    //resolucao em pixels para busca de elementos
+				    resolution : 8
+				},
+				legenda : {
+				    //define o local onde os templates da ferramenta ficam armazenados
+				    //esse eh o local default, colocado aqui para documentacao
+				    templateDir : i3GeoUrl
+					    + "/ferramentas/legenda"
+				},
+				metaestat : {},
+				buscainde : {},
+				//mapa de referencia
+				opcoesMaparef : {
+				    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
+				    images : [ {
+					name : "Colorida",
+					img : "referencia1"
+				    }, {
+					name : "B & W",
+					img : "referencia1cinza"
+				    } ]
+				},
+				//janela de conversao de coordenadas
+				wkt2layer : {
+				    position : [ 150, 150 ]
+				},
+				area : {
+				    position : [ 150, 10 ]
+				},
+				distancia : {
+				    position : [ 150, 10 ]
+				}
+			    },
+			    //configuracoes especificas para a interface que utiliza o OpenLayers
+			    openLayers : {
+				//utiliza ou nao tiles ao renderizar as camadas do mapa
+				//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
+				singleTile : false,
+				//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
+				MapOptions : {
+				    layers : [],
+				    controls : [ new ol.control.Zoom(),
+					    new ol.control.ZoomSlider(),
+					    new ol.control.ScaleLine(),
+					    new ol.control.Attribution({
+						collapsible : true
+					    }) ],
+				    loadTilesWhileAnimating : true,
+				    loadTilesWhileInteracting : true,
+				    //os objetos devem ser comentados na interface googleMaps
+				    interactions : [
+					    new ol.interaction.DoubleClickZoom(),
+					    new ol.interaction.KeyboardPan(),
+					    new ol.interaction.KeyboardZoom(),
+					    new ol.interaction.MouseWheelZoom(),
+					    //new ol.interaction.PinchRotate(),
+					    new ol.interaction.PinchZoom(),
+					    //new ol.interaction.DragZoom(),
+					    i3GEO.navega.dragZoom(),
+					    new ol.interaction.DragPan() ]
+				},
+				//opcoes para o objeto view, que e uma instancia de MapOptions
+				//ver https://openlayers.org/en/latest/apidoc/ol.View.html
+				ViewOptions : {
 
-								},
-								//botoes que sao mostrados no editor vetorial
-								editorButtons : {
-									'imprimir' : false,
-									'grid' : false,
-									'pan' : false,
-									'zoombox' : false,
-									'zoomtot' : false,
-									'zoomin' : false,
-									'zoomout' : false,
-									'distancia' : false,
-									'area' : false,
-									'identifica' : false,
-									'linha' : true,
-									'ponto' : true,
-									'poligono' : true,
-									'texto' : true,
-									'edita' : true,
-									'listag' : true,
-									'corta' : true,
-									'apaga' : true,
-									'procura' : false,
-									'selecao' : true,
-									'selecaotudo' : true,
-									'salva' : true,
-									'ajuda' : true,
-									'propriedades' : true,
-									'fecha' : true,
-									'tools' : true,
-									'undo' : false,
-									'frente' : false,
-									'legenda' : false,
-									'rodadomouse' : true,
-									'novaaba' : false
-								}
-							},
-							//configuracoes especificas para a interface GoogleMaps
-							googleMaps : {
-								//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
-								MapOptions : {
-									//estilo que sera utilizado no mapa
-									//pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
-									//ver i3GEO.Interface.googleMaps.ESTILOS
-									mapTypeId : "roadmap",
-									scaleControl : true,
-									mapTypeControl : true,
-									mapTypeControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_BOTTOM
-									},
-									zoomControl : true,
-									zoomControlOptions : {
-									//style : google.maps.ZoomControlStyle.SMALL,
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									},
-									streetViewControl : true,
-									streetViewControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									}
-								}
-							}
-						};
-						//
-						//inicia o mapa
-						//Veja tambem config.php
-						//
-						//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
-						//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
-						//
-						i3GEO.init(parametrosMapa, config);
-					})();
-				</script>
+				},
+				//botoes que sao mostrados no editor vetorial
+				editorButtons : {
+				    'imprimir' : false,
+				    'grid' : false,
+				    'pan' : false,
+				    'zoombox' : false,
+				    'zoomtot' : false,
+				    'zoomin' : false,
+				    'zoomout' : false,
+				    'distancia' : false,
+				    'area' : false,
+				    'identifica' : false,
+				    'linha' : true,
+				    'ponto' : true,
+				    'poligono' : true,
+				    'texto' : true,
+				    'edita' : true,
+				    'listag' : true,
+				    'corta' : true,
+				    'apaga' : true,
+				    'procura' : false,
+				    'selecao' : true,
+				    'selecaotudo' : true,
+				    'salva' : true,
+				    'ajuda' : true,
+				    'propriedades' : true,
+				    'fecha' : true,
+				    'tools' : true,
+				    'undo' : false,
+				    'frente' : false,
+				    'legenda' : false,
+				    'rodadomouse' : true,
+				    'novaaba' : false
+				}
+			    },
+			    //configuracoes especificas para a interface GoogleMaps
+			    googleMaps : {
+				//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
+				MapOptions : {
+				    //estilo que sera utilizado no mapa
+				    //pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
+				    //ver i3GEO.Interface.googleMaps.ESTILOS
+				    mapTypeId : "roadmap",
+				    scaleControl : true,
+				    mapTypeControl : true,
+				    mapTypeControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_BOTTOM
+				    },
+				    zoomControl : true,
+				    zoomControlOptions : {
+				    //style : google.maps.ZoomControlStyle.SMALL,
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    },
+				    streetViewControl : true,
+				    streetViewControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    }
+				}
+			    }
+			};
+			//
+			//inicia o mapa
+			//Veja tambem config.php
+			//
+			//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
+			//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
+			//
+			//caso queira evitar os efeitos do material design, comente a linha abaixo
+			//$.material = false;
+			i3GEO.init(parametrosMapa, config);
+		    })();
+		</script>
 </body>
 
 </html>
diff --git a/interface/osmdebug.htm b/interface/osmdebug.htm
index 822d5d4..26e2d75 100755
--- a/interface/osmdebug.htm
+++ b/interface/osmdebug.htm
@@ -5,8 +5,10 @@
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
 <title>i3GEO - OpenLayers</title>
-<script src="../pacotes/ol4/ol-debug.js"></script>
+<script src="../pacotes/ol4/ol.js"></script>
 <script src="../js/i3geonaocompacto.js"></script>
+<!-- carrega as funcoes dos botoes de edicao de elementos graficos -->
+<script src="../ferramentas/editorol/editorol.js"></script>
 <!-- lista com os links que serao mostrados na guia ferramentas -->
 <script src="../js/listaDeFerramentas.js"></script>
 <!-- configuracoes default tipo pode ser OL (openLayers) ou GM (googlemaps) -->
@@ -15,7 +17,6 @@
 <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-material-design/dist/css/bootstrap-material-design.min.css">
 <!-- <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-material-design/dist/css/ripples.min.css">-->
-
 <!-- <link rel="stylesheet" type="text/css" href="../pacotes/bootstrap-accessibility-plugin/plugins/js/bootstrap-accessibility.min.js"> -->
 <link rel="stylesheet" type="text/css" href="../css/default.css">
 <!-- para o tutorial -->
@@ -43,12 +44,12 @@
 	-->
 <body id="i3geo" style='background: white;'>
     <!-- inclui o nome do usuario logado
-    <div id="i3GEONomeLogin"
-        style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
-    -->
+	<div id="i3GEONomeLogin"
+		style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
+	-->
     <!-- Aqui vai o mapa. O div a ser inserido e padronizado e depende da interface usar openlayers ou googlemaps
-    Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
-    -->
+	Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
+	-->
     <div id="mapai3Geo"></div>
     <!-- aqui sera incluida a escala numerica. E necessario ter o id=i3GEOescalanum para que o valor seja atualizado-->
     <form data-tutorial="escalas" class="escalanumerica hidden-xs" onsubmit="javascript:i3GEO.navega.aplicaEscala($i('i3GEOescalanum').value);return false;">
@@ -69,29 +70,48 @@
             </select>
         </div>
         <div class="i3GeoMascaraCoord" id="localizarxygeoProj" style="display: block; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
-            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text"> Y: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg"
-                type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text"> <input name="" value="00.00" size="5" title="segundo"
-                id="localizarxygeoProjys" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
+            X:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text">
+            Y:
+            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg" type="text">
+            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjys" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
         </div>
         <div id="localizarxydd" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
         </div>
         <div id="localizarxygeohash" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            GeoHash <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom"
-                onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
+            GeoHash
+            <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text">
+            <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
         </div>
         <div id="localizarxypoliconicaSad69" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y"
-                type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y" type="text">
         </div>
         <div id="localizarxyutmSad69Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
         </div>
         <div id="localizarxyutmSirgas2000Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY"
-                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
+            X:
+            <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text">
+            Y:
+            <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY" type="text">
+            Zn:
+            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
         </div>
     </div>
     <!-- barra de icones de navegacao -->
@@ -141,28 +161,29 @@
     <!-- botoes laterais que abrem guias moveis -->
     <div id="i3GEOguiaMovel">
         <!-- configuracao para todos os botoes
-            data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
-        -->
+			data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
+		-->
         <div class="iconesGuiaMovel ol-control" data-traduzir="true">
             <!-- ferramentas
-                data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
-                data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
-                data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
-            -->
-            <div data-tutorial="ferramentas" data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
+				data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
+				data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
+				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
+			-->
+            <div data-tutorial="ferramentas" data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas"
+                onclick="i3GEO.guias.ativa('ferramentas',this)">
                 <button title="{{{iconeFerramentas}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">business_center</i>
                 </button>
             </div>
             <!-- temas existentes no mapa
-                data-idListaDeCamadas - id onde sera incluida a lista de camadas
-                data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
-                data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
-                    inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
-                    do metadata existente na camada. Deixe vazio para nao ativar a operacao.
-            -->
-            <div data-tutorial="camadas" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas"
-                style="margin-top: 3px;">
+				data-idListaDeCamadas - id onde sera incluida a lista de camadas
+				data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
+				data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
+					inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
+					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
+			-->
+            <div data-tutorial="camadas" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo"
+                data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
                 <button title="{{{iconeMapa}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons"><i class="material-icons">visibility</i></i>
                 </button>
@@ -188,11 +209,13 @@
                     <i class="material-icons">view_list</i>
                 </button>
             </div>
+            <!--
             <div data-tutorial="troca" class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
                 <button title="{{{trocaInterface}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">compare_arrows</i>
                 </button>
             </div>
+            -->
             <!-- Busca -->
             <div data-tutorial="busca" onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
                 <button class="iconeGuiaMovel" style="color: white; box-shadow: none;">
@@ -210,12 +233,12 @@
                 </button>
             </div>
             <!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
-            <div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
-                <button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
-                    <img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
-                </button>
-            </div>
-            -->
+			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
+				<button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
+					<img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
+				</button>
+			</div>
+			-->
         </div>
         <!-- veja i3GEO.guias.CONFIGURA -->
         <!-- Os IDs sao definidos no botao que ativa a guia veja: "i3GEOguiaMovel" -->
@@ -223,54 +246,71 @@
         <div id="i3GEOguiaMovelMolde">
             <div id="i3GEOguiaMovelConteudo">
                 <!-- camadas existentes no mapa -->
-                <div id='guia1obj' data-traduzir="true" style='display: none; height:100%'>
-                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
-                        <button>
-                            <span class="pull-left">{{{iconeMapa}}}</span> <span class="pull-right material-icons">cancel</span>
+                <div id='guia1obj' data-traduzir="true" style='display: none; height: 100%'>
+                    <div class="i3GEOfechaGuia" style="display: flex;">
+                        <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');">
+                            <span style="vertical-align: middle">{{{iconeMapa}}}</span>
+                        </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-refresh"></span> Refresh
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-open"></span> {{{t3a}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-eye-close"></span> {{{t3b}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-trash"></span> {{{t12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-filter"></span> {{{t2a}}}
+                                    </a></li>
+                                <li role="separator" class="divider"></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-adjust"></span> {{{t20}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-film"></span> {{{p21}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-print"></span> {{{d12}}}
+                                    </a></li>
+                                <li><a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">
+                                        <span class="glyphicon glyphicon-erase"></span> {{{t4}}}
+                                    </a></li>
+                            </ul>
+                        </div>
+                        <button title="{{{iconeCatalogo}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj"
+                            data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus">
+                            <span style="vertical-align: middle" class="material-icons">layers</span>
+                        </button>
+                        <button title="{{{iconeLegenda}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj"
+                            data-idLegenda="legendaHtml">
+                            <span style="vertical-align: middle" class="material-icons">view_list</span>
+                        </button>
+                        <button style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.abreFecha('fecha');">
+                            <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
+
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <div class="list-group condensed noprint collapsed" data-toggle="collapse" data-target="#opcoesGuia1">
-                            <label>{{{opcoes}}}</label>
-                        </div>
-                        <div class="text-left collapse noprint" id="opcoesGuia1" style="margin-left: 30px;">
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">Refresh</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">{{{t3a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">{{{t3b}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">{{{t12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">{{{t2a}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">{{{t20}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">{{{p21}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">{{{d12}}}</a>
-                            </p>
-                            <p>
-                                <a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">{{{t4}}}</a>
-                            </p>
-                        </div>
-                        <hr>
-                        <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
+                    <div class="guiaOverflow" style="height: calc(100% - 45px); width: calc(100% - 5px);">
+                        <!-- Esta div acrescenta a lista de layers graficos -->
+                        <div id="listaLayersGr" style="overflow: none;" data-template="templates/camadaGr.html"></div>
+                        <div id="listaLayersGrBtn" style="overflow: none;"></div>
+                        <!-- Esta div acrescenta a lista de camadas disponiveis no mapa atual -->
                         <div id="listaTemas" style="overflow: none;" data-template="templates/camada.html"></div>
                         <!-- Esta div acrescenta a lista de de camadas de fundo
-                    A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
-                    Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
-                    no programa interface/config.php
-                    -->
+					A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
+					Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
+					no programa interface/config.php
+					-->
                         <div data-toggle="collapse" data-target="#collapseFundo" class="list-group condensed collapsed">
                             <label>{{{camadasDeFundo}}}</label>
                         </div>
@@ -279,112 +319,109 @@
                                 <div id="listaFundo" class="form-group condensed" data-template="templates/camadaFundo.html"></div>
                             </form>
                         </div>
-
                     </div>
                 </div>
                 <!-- Catalogo de temas -->
-                <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left;height:100%;'>
-                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
-                        <button>
-                            <span class="pull-left">{{{iconeCatalogo}}}</span> <span class="pull-right material-icons">cancel</span>
+                <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left; height: 100%;'>
+                    <div class="i3GEOfechaGuia" style="display: flex;">
+                        <button class="pull-left text-left" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
+                            <span style="vertical-align: middle">{{{iconeCatalogo}}}</span>
+                        </button>
+                        <div class="dropdown">
+                            <button title="{{{opcoes}}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span style="vertical-align: middle" class="material-icons">playlist_add_check</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-right">
+                                <li><a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">
+                                        <span class="glyphicon glyphicon-log-in"></span> Login/Logout
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">
+                                        <span class="glyphicon glyphicon-globe"></span> {{{a15}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">
+                                        <span class="glyphicon glyphicon-cloud-upload"></span> {{{a14}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">
+                                        <span class="glyphicon glyphicon-cloud-download"></span> {{{a3}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a3a}}}
+                                    </a></li>
+                                <li><a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">
+                                        <span class="glyphicon glyphicon-search"></span> Busca na INDE
+                                    </a></li>
+                                <li><a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">
+                                        <span class="glyphicon glyphicon-import"></span> {{{a13}}}
+                                    </a></li>
+                            </ul>
+                        </div>
+                        <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
+                            data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" data-idListaLayersGr="listaLayersGr" data-idBtnLayersGr="listaLayersGrBtn">
+                            <span style="vertical-align: middle" class="material-icons">visibility</span>
+                        </button>
+                        <button title="{{{iconeLegenda}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj"
+                            data-idLegenda="legendaHtml">
+                            <span style="vertical-align: middle" class="material-icons">view_list</span>
+                        </button>
+                        <button style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
+                            <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
 
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <div id="catalogoMigalha" style="display:block;" data-template="templates/catalogoMigalha.html"></div>
+                        <div id="catalogoMigalha" style="display: block;" data-template="templates/catalogoMigalha.html"></div>
                         <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
                         <div id="catalogoNavegacao"></div>
                         <!-- Opcoes -->
                         <div id="catalogoPrincipal">
-                            <div data-toggle="collapse" data-target="#opcoesGuia2" class="list-group condensed collapsed noprint">
-                                <label>{{{opcoes}}}</label>
-                            </div>
-                            <div class="text-left collapse" id="opcoesGuia2" style="margin-left: 30px;">
-                                <p>
-                                    <a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">Login/Logout</a>
-                                </p>
-                                <p>
-                                    <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.atualiza()">Refresh</a> -->
-                                </p>
-                                <li class="divider"></p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">{{{a15}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">{{{a14}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">{{{a3}}}</a>
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">{{{a3a}}}</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.nuvemTags()">{{{a5a}}}</a> -->
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.carouselTemas()">Miniaturas</a> -->
-                                    </p>
-                                    <p>
-                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">Busca na INDE</a>
-                                    </p>
-                                    <p>
-                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatisticos</a>-->
-                                    </p>
-                                    <p>
-                                        <a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
-                                    </p>
-                            </div>
-
                             <hr>
                             <!-- busca tema no catalogo
-                        <div class="form-group label-floating">
-                            <label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
-                            <div class="input-group">
-                                <input id="i3GEObuscatema" class="form-control" type="text" value="">
-                                <span class="input-group-btn">
-                                    <a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
-                                        <span class="material-icons ">send</span>
-                                    </a>
-                                </span>
-                            </div>
-                        </div>
-                         -->
+						<div class="form-group label-floating">
+							<label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
+							<div class="input-group">
+								<input id="i3GEObuscatema" class="form-control" type="text" value="">
+								<span class="input-group-btn">
+									<a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
+										<span class="material-icons ">send</span>
+									</a>
+								</span>
+							</div>
+						</div>
+						 -->
                             <!-- A lista de menus e uma funcao de i3GEO.guias.CONFIGURA.adiciona
-                            Nessa funcao ficam tambem os parametros:
-                            "idOndeMenus": "catalogoMenus",
-                            "idCatalogoPrincipal": "catalogoPrincipal",
-                            "idCatalogoNavegacao": "catalogoNavegacao",
-                            "idOndeMigalha": "catalogoMigalha"
-                        -->
+							Nessa funcao ficam tambem os parametros:
+							"idOndeMenus": "catalogoMenus",
+							"idCatalogoPrincipal": "catalogoPrincipal",
+							"idCatalogoNavegacao": "catalogoNavegacao",
+							"idOndeMigalha": "catalogoMigalha"
+						-->
                             <div id="catalogoMenus" data-templateDir="templates/dir.html" data-templateTema="templates/tema.html"></div>
 
                             <div id="arvoreAdicionaTema"></div>
 
                             <!--
-                        As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
-                        config: {
-                            'templateDir': 'templates/dir.html',
-                            'templateTema': 'templates/tema.html',
-                            'idCatalogoPrincipal': 'catalogoPrincipal',
-                            'idCatalogoNavegacao': 'catalogoNavegacao',
-                            'idOndeMigalha': 'catalogoMigalha'
-                        }
+						As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
+						config: {
+							'templateDir': 'templates/dir.html',
+							'templateTema': 'templates/tema.html',
+							'idCatalogoPrincipal': 'catalogoPrincipal',
+							'idCatalogoNavegacao': 'catalogoNavegacao',
+							'idOndeMigalha': 'catalogoMigalha'
+						}
 
-                        exemplo:
+						exemplo:
 
-                        onclick="i3GEO.catalogoInde.inicia({'templateDir': 'templates/dir.html','templateTema': 'templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
-                        -->
+						onclick="i3GEO.catalogoInde.inicia({'templateDir': 'templates/dir.html','templateTema': 'templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
+						-->
 
                             <!-- servicos da INDE brasileira -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoInde.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i>
-                                            INDE-Br
+                                                <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i> INDE-Br
                                             </h4>
                                         </a>
                                         <h6>Infraestrutura Nacional de Dados Espaciais do Brasil</h6>
@@ -397,12 +434,11 @@
                             <hr>
                             <!-- lista de wms cadastrados no sistema de administracao -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i>
-                                            OGC-WMS
+                                                <i class="material-icons" style="vertical-align: text-bottom;">cloud_queue</i> OGC-WMS
                                             </h4>
                                         </a>
                                         <h6>{{{descOgcWms}}}</h6>
@@ -419,8 +455,7 @@
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">domain</i>
-                                            {{{x87}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">domain</i> {{{x87}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descLimLoc}}}</h6>
@@ -433,12 +468,11 @@
                             <hr>
                             <!--  camadas que vem do sistema de metadados estatisticos -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">trending_up</i>
-                                            {{{x57}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">trending_up</i> {{{x57}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descMeta}}}</h6>
@@ -451,13 +485,11 @@
                             <hr>
                             <!--  camadas por estrelas -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
-                                    <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button"
-                                            href="javascript:void(0)">
+                                        <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">star_border</i>
-                                            {{{t46}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">star_border</i> {{{t46}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descEstrelas}}}</h6>
@@ -470,12 +502,11 @@
                             <hr>
                             <!--  sistemas que adicionam camadas -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">widgets</i>
-                                            {{{a11}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">widgets</i> {{{a11}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descSistemas}}}</h6>
@@ -489,12 +520,11 @@
                             <hr>
                             <!--  navegacao em diretorios -->
                             <div class="list-group condensed">
-                                <div class="row-content text-left" style="opacity:0.8;">
+                                <div class="row-content text-left" style="opacity: 0.8;">
                                     <label style="width: 300px; vertical-align: middle;">
                                         <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
                                             <h4>
-                                            <i class="material-icons" style="vertical-align: text-bottom;">storage</i>
-                                            {{{a6}}}
+                                                <i class="material-icons" style="vertical-align: text-bottom;">storage</i> {{{a6}}}
                                             </h4>
                                         </a>
                                         <h6>{{{descDir}}}</h6>
@@ -509,24 +539,38 @@
                     </div>
                 </div>
                 <!-- Legenda -->
-                <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left;height:100%;'>
-                    <div class="i3GEOfechaGuia" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
-                        <button>
-                            <span class="pull-left">{{{iconeLegenda}}}</span> <span class="pull-right material-icons">cancel</span>
+                <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left; height: 100%;'>
+                    <div class="i3GEOfechaGuia" style="display: flex;">
+                        <button class="pull-left text-left" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
+                            <span style="vertical-align: middle">{{{iconeLegenda}}}</span>
+                        </button>
+                        <button type="button" title="{{{x11}}}" style="width: 3.5rem; height: 3rem;" class="text-right" onclick="i3GEO.legenda.inicia({'janela':true})">
+                            <span style="vertical-align: middle" class="material-icons">list_alt</span>
+                        </button>
+                        <button title="{{{iconeMapa}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia=""
+                            data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas">
+                            <span style="vertical-align: middle" class="material-icons">visibility</span>
+                        </button>
+                        <button title="{{{iconeCatalogo}}}" style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj"
+                            data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus">
+                            <span style="vertical-align: middle" class="material-icons">layers</span>
+                        </button>
+                        <button style="width: unset; height: 3rem;" class="text-right" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
+                            <span style="vertical-align: middle" class="material-icons">cancel</span>
                         </button>
                     </div>
+
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
-                        <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})">{{{x11}}}</a>
                         <div id="legendaHtml" data-template="templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
                     </div>
                 </div>
                 <!-- busca
-                Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
-                No botao que dispara a busca, ficam os parametros de configuracao
-                Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
-                -->
-                <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left; height:100%'>
+				Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
+				No botao que dispara a busca, ficam os parametros de configuracao
+				Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
+				-->
+                <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left; height: 100%'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
                             <span class="pull-left">{{{t23}}}</span> <span class="pull-right material-icons">cancel</span>
@@ -538,11 +582,11 @@
                             <div class="form-group label-floating">
                                 <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
                                 <div class="input-group">
-                                    <input class="form-control" type="text" value="" name="valorBuscaRapida"> <span class="input-group-btn"> <a
-                                            onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html" data-inputGoogle="[name=google]"
-                                            data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html" data-inputTemasMapa="[name=temasMapa]"
-                                            data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html" data-ondeConteiner="#guia7obj"
-                                            data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
+                                    <input class="form-control" type="text" value="" name="valorBuscaRapida">
+                                    <span class="input-group-btn"> <a onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="templates/buscaEmTemas.html"
+                                            data-inputGoogle="[name=google]" data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="templates/buscaEmTemas.html"
+                                            data-inputTemasMapa="[name=temasMapa]" data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="templates/buscaEmServico.html"
+                                            data-ondeConteiner="#guia7obj" data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
                                             data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
                                             <span class="material-icons ">send</span>
                                         </a>
@@ -553,26 +597,30 @@
                             <div class="form-inline" style="width: 100%;">
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos"> {{{x38}}}
+                                        <label>
+                                            <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos">
+                                            {{{x38}}}
                                         </label>
                                     </div>
                                 </div>
                                 <div class="list-group condensed">
                                     <div class="checkbox text-left">
-                                        <label> <input class="noprint" value="on" type="checkbox" name="temasMapa"> {{{x39}}}
+                                        <label>
+                                            <input class="noprint" value="on" type="checkbox" name="temasMapa">
+                                            {{{x39}}}
                                         </label>
                                     </div>
                                 </div>
                                 <!-- Apenas para a interface google maps
-                            <div class="list-group condensed">
-                                <div class="checkbox text-left">
-                                <label>
-                                    <input class="noprint" value="on" type="checkbox" name="google">
-                                    <span class="checkbox-material noprint"><span class="check"></span></span> Google
-                                </label>
-                                </div>
-                            </div>
-                             -->
+							<div class="list-group condensed">
+								<div class="checkbox text-left">
+								<label>
+									<input class="noprint" value="on" type="checkbox" name="google">
+									<span class="checkbox-material noprint"><span class="check"></span></span> Google
+								</label>
+								</div>
+							</div>
+							 -->
                             </div>
                         </form>
                         <hr>
@@ -583,7 +631,7 @@
                     </div>
                 </div>
                 <!-- Ferramentas -->
-                <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left;height:100%'>
+                <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left; height: 100%'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
                             <span class="pull-left">{{{iconeFerramentas}}}</span> <span class="pull-right material-icons">cancel</span>
@@ -592,25 +640,25 @@
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
                     <div class="guiaOverflow" style="height: calc(100% - 45px)">
                         <div class="form-inline" style="width: 100%;">
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/area-measure.png">
                                 </a>
                                 <h6>{{{d21at}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/length-measure.png">
                                 </a>
                                 <h6>{{{d21t}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.selecao();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/select.png">
                                 </a>
                                 <h6>{{{d24t}}}</h6>
                             </div>
-                            <div class="text-center form-group" style="margin: 4px;display:inline-block">
+                            <div class="text-center form-group" style="margin: 4px; display: inline-block">
                                 <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.geolocal();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
                                     <img style="margin-top: 4px;" src="../imagens/gisicons/layer-gps.png">
                                 </a>
@@ -618,8 +666,8 @@
                             </div>
                         </div>
                         <div class="clearfix"></div>
-                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block;text-align: center;width: 100%;padding-left: 1rem;padding-right: 1rem;'></div>
 
+                        <div id="searchInputFerramentas" data-template="templates/searchInput.html" style='display: block; text-align: center; width: 100%; padding-left: 1rem; padding-right: 1rem;'></div>
                         <div id="migalhaFerramentas" data-template="templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
                         <div id="listaFerramentasLinks" data-template="templates/ferramentasLink.html" style='display: block; text-align: left'></div>
                         <div id="listaFerramentas" data-template="templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
@@ -628,7 +676,6 @@
             </div>
         </div>
     </div>
-
     <!--  para mostrar o banner de abertura -->
     <script id="i3GEOlogoMarcaTemplate" type="x-tmpl-mustache">
 	<div>
@@ -649,335 +696,371 @@
 	</div>
 	</script>
     <script>
-					//ativa o banner de inicializacao
-					i3GEO.janela.tempoMsg(
-							$i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
-					(function() {
-						//parametros aplicados na criacao do arquivo mapfile
-						var parametrosMapa = {
-							//arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
-							//Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
-							mapfilebase : "",
-							//extensao geografica do mapa
-							//deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
-							//exemplo [-77,-26,-30,6]
-							mapext : [],
-							//perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
-							perfil : "",
-							//layers que serao adicionados ao mapa.
-							//Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
-							layers : {
-								//array com a lista dos layers que serao adicionados e ligados (visiveis)
-								add : [],
-								//array com a lista dos layers que serao adicionados mas nao ligados
-								on : [],
-								//array com os layers desligados
-								off : []
-							},
-							//lista de coordenadas x e y que serao adicionadas como pontos no mapa
-							points : {
-								//array com a lista de coordenadas
-								coord : [],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como linhas no mapa
-							lines : {
-								//array de arrays com a lista de coordenadas de cada linha
-								//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//lista de coordenadas x e y que serao adicionadas como poligonos no mapa
-							polygons : {
-								//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
-								//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
-								coord : [ [] ],
-								//titulo da nova camada
-								title : ""
-							},
-							//insere elementos no mapa com coordenadas definidas em wkt
-							wkt : {
-								//string no formato wkt
-								coord : "",
-								//titulo da nova camada
-								title : ""
-							},
-							//simbolo que sera utilizado para desenhar os elementos inseridos
-							symbol : {
-								//codigo do simbolo conforme definido em i3geo/symbols
-								name : "",
-								//em rgb, exemplo "0 255 0"
-								color : "",
-								//em pixels
-								size : ""
-							},
-							//arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
-							kml : {
-								url : ""
-							},
-							//endereco de um WMS (sera incluido como uma camada no mapa)
-							wms : {
-								url : "",
-								layer : "",
-								style : "",
-								title : "",
-								srs : "",
-								imagetype : "",
-								version : ""
-							},
-							//filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
-							//do mapserver, exemplo
-							//{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
-							filters : [ {
-								layer : "",
-								expression : ""
-							} ],
-							//id de um mapa salvo e que sera recuperado
-							restoreMapId : ""
-						};
-						var config = {
-							//id do elemento HTML onde o corpo do mapa sera renderizado
-							mapBody : "mapai3Geo",
-							//tipo de mapa. Pode ser:
-							//OL - utiliza o OpenLayers e coordenadas geograficas
-							//OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
-							//GM - utiliza o GoogleMaps como motor de controle do mapa
-							mapType : "OSM",
-							//armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
-							saveExtension : false,
-							//aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
-							posRenderType : "",
-							//Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
-							//Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
-                			//Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
-                			i3GeoServer : i3GeoUrl,
-							//opacidade default para camadas que nao sejam do tipo linha ou ponto
-							//a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
-							//se for vazio, sera utilizado o valor definido no LAYER original
-							//Nao se aplica na interface googlemaps
-							layerOpacity : "",
-							//Funcao que sera executada apos a inicializacao do mapa
-							afterStart : function() {
-								$('.iconeGuiaMovel').tooltip({
-									animation : false,
-									trigger : "manual hover",
-									placement : "left"
-								});
-								$('.iconeGuiaMovel').tooltip('show');
-								setTimeout(function(){$('.iconeGuiaMovel').tooltip('hide');},5000);
+		    //ativa o banner de inicializacao
+		    i3GEO.janela.tempoMsg(
+			    $i("i3GEOlogoMarcaTemplate").innerHTML, 4000);
+		    (function() {
+			//parametros aplicados na criacao do arquivo mapfile
+			var parametrosMapa = {
+			    //arquivo mapfile que servira de base para a criacao do mapa. Por default, sao utilizados os arquivos existentes em i3geo/aplicmap (geral1windows, geral1,...)
+			    //Essa variavel pode ser definida em ms_configura tambem. Se nao estiver definida em nenhum lugar, o i3Geo tentara descobrir o arquivo adequado a ser utilizado. Voce pode utilizar essa opcao para abrir um mapa com as camadas que voce quiser, mas para evitar redundâncias, prefira o uso de &temasa
+			    mapfilebase : "",
+			    //extensao geografica do mapa
+			    //deve ser definida em coordenadas no formato decimos de grau e na projecao geografica na sequencia xmin ymin xmax ymax
+			    //exemplo [-77,-26,-30,6]
+			    mapext : [],
+			    //perfil utilizado para restringir os menus de temas mostrando apenas os que correspondem a determinado perfil
+			    perfil : "",
+			    //layers que serao adicionados ao mapa.
+			    //Cada layer corresponde ao nome do mapfile existente na pasta i3geo/temas sem a extensao '.map'
+			    layers : {
+				//array com a lista dos layers que serao adicionados e ligados (visiveis)
+				add : [],
+				//array com a lista dos layers que serao adicionados mas nao ligados. Inclusive IDs do sistema de metadados estatisticos
+				on : [],
+				//array com os layers desligados
+				off : [],
+				//array com a lista de IDs que identificam medidas registradas no sistema de metadados
+				//estatisticos
+				metaestat : []
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como pontos no mapa
+			    points : {
+				//array com a lista de coordenadas
+				coord : [],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como linhas no mapa
+			    lines : {
+				//array de arrays com a lista de coordenadas de cada linha
+				//exemplo [[-54,-12,-50,-12],[-50,-1,-50,-2,-50,-3]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //lista de coordenadas x e y que serao adicionadas como poligonos no mapa
+			    polygons : {
+				//array de arrays com a lista de coordenadas de cada poligono. A primeira coordenada deve ser igual a ultima.
+				//exemplo [[-50,-1,-48,-2,-50,-3,-50,-1]]
+				coord : [ [] ],
+				//titulo da nova camada
+				title : ""
+			    },
+			    //insere elementos no mapa com coordenadas definidas em wkt
+			    wkt : {
+				//string no formato wkt
+				coord : "",
+				//titulo da nova camada
+				title : ""
+			    },
+			    //simbolo que sera utilizado para desenhar os elementos inseridos
+			    symbol : {
+				//codigo do simbolo conforme definido em i3geo/symbols
+				name : "",
+				//em rgb, exemplo "0 255 0"
+				color : "",
+				//em pixels
+				size : ""
+			    },
+			    //arquivo KML que sera incluido no mapa. Valido apenas na interface google maps
+			    kml : {
+				url : ""
+			    },
+			    //endereco de um WMS (sera incluido como uma camada no mapa)
+			    wms : {
+				url : "",
+				layer : "",
+				style : "",
+				title : "",
+				srs : "",
+				imagetype : "",
+				version : ""
+			    },
+			    //filtros que serao aplicados aos layers. Utilize a expressaso conforme definido na documentacao
+			    //do mapserver, exemplo
+			    //{layer: "_lbiomashp",expression: "(('[CD_LEGENDA]'='CAATINGA'))"} ou {layer: "_lbiomashp",expression: "cd_legenda='CAATINGA'"}
+			    filters : [ {
+				layer : "",
+				expression : ""
+			    } ],
+			    //id de um mapa salvo e que sera recuperado
+			    restoreMapId : ""
+			};
+			var config = {
+			    //id do elemento HTML onde o corpo do mapa sera renderizado
+			    mapBody : "mapai3Geo",
+			    //tipo de mapa. Pode ser:
+			    //OL - utiliza o OpenLayers e coordenadas geograficas
+			    //OSM - utiliza o OpenLayers e o OpenStreetMap como fundo, em projecao semelhante ao GoogleMaps
+			    //GM - utiliza o GoogleMaps como motor de controle do mapa
+			    mapType : "OSM",
+			    //armazena em um cookie a ultima extensao geografica do mapa e utiliza essa extensao quando o mapa for aberto
+			    saveExtension : false,
+			    //aplica um filtro de cores apos a renderizacao da imagem de cada camada que compoe o mapa cinza|sepiaclara|sepianormal
+			    posRenderType : "",
+			    //Endereco do servidor i3Geo. Utilizado para gerar as requisicoes AJAX
+			    //Por default e definido como: i3GEO.util.protocolo() + "://" + window.location.host + "/i3geo"
+			    //Para facilitar as coisas, i3GeoUrl e definida em interface/config.php
+			    i3GeoServer : i3GeoUrl,
+			    //opacidade default para camadas que nao sejam do tipo linha ou ponto
+			    //a opacidade sera aplicada ao objeto HTML e nao ao LAYER original
+			    //se for vazio, sera utilizado o valor definido no LAYER original
+			    //Nao se aplica na interface googlemaps
+			    layerOpacity : "",
+			    //Funcao que sera executada apos a inicializacao do mapa
+			    afterStart : function() {
+				$('.iconeGuiaMovel').tooltip({
+				    animation : false,
+				    trigger : "manual hover",
+				    placement : "left"
+				});
+				$('.iconeGuiaMovel').tooltip('show');
+				setTimeout(function() {
+				    $('.iconeGuiaMovel').tooltip('hide');
+				}, 5000);
+
+				$('.ol-i3GEOcontrols button')
+					.tooltip(
+						{
+						    animation : false,
+						    trigger : "hover",
+						    placement : "auto",
+						    template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
+						});
+
+				//$(".guiaOverflow").css("height",i3GEO.parametros.h - 140);
+
+				$(".guiaOverflow").mCustomScrollbar({
+				    scrollbarPosition : "inside",
+				    theme : "inset-2-dark"
+				});
+				tutorial.init();
+				//i3GEO.eventos.adicionaEventos("RESIZE", $(".guiaOverflow").css("height",i3GEO.parametros.h - 140));
 
-								$('.ol-i3GEOcontrols button').tooltip({
-									animation : false,
-									trigger : "hover",
-									placement : "auto",
-									template : "<div class='tooltip ' ><div class='tooltip-inner'></div></div>"
-								});
-								$(".guiaOverflow").mCustomScrollbar({
-									scrollbarPosition : "inside",
-									theme : "inset-2-dark"
-								});
-								tutorial.init();
-								//setTimeout(function() {
-								//	$('.iconeGuiaMovel').tooltip('destroy');
-								//}, 30000);
-								//i3GEO.maparef.inicia();
-								//
-								//(largura, altura, topo, esquerda);
-								//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
-								//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
+				//setTimeout(function() {
+				//	$('.iconeGuiaMovel').tooltip('destroy');
+				//}, 30000);
+				//i3GEO.maparef.inicia();
+				//
+				//(largura, altura, topo, esquerda);
+				//i3GEO.mapa.dialogo.locregiao(215, "", 150, 150);
+				//i3GEO.mapa.dialogo.metaestat(215, "", 150, 150);
 
-								//abre a legenda do mapa em uma janela flutuante
-								//i3GEO.legenda.inicia({
-								//"idLegenda": "legendaHtml",
-								//"templateLegenda": "templates/legenda.html",
-								//"janela": true
-								//});
-							},
-							//parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
-							components : {
-							    //restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
-							    //e nao aos que possuem o link para a fonte definido no mapfile
-							    restrictAtt: true,
-								//define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
-								info : true,
-								//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
-								idsMenus : [],
-								//webservice utilizado na opcao de encontrar lugares
-								searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
-								//webservice wms que faz a apresentacao do lugar encontrado por searchService
-								searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
-								//posicao do mapa de referencia, em pixels [top,right]
-								referenceMapPosition : [ 4, 120 ],
-								//tipo do mapa de referencia. Pode ser wms ou map
-								referenceType: "wms",
-								//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
-								tooltip : {
-									//o resultado sera mostrado em uma janela do tipo modal
-									modal : false,
-									//url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
-									//Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
-									//use apenas se modal for true
-									//exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
-									url : "",
-									//template que sera usado para compor o resultado da busca de dados
-									//se for vazio, serao utilizadas as outras opcoes
-									//se contiver a string {{{url}}} a mesma sera substituida por url
-									//exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
-									templateModal : "",
-									//serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
-									simple : true,
-									removeAoAdicionar : true,
-									//parametros exclusivos da interface openlayers
-									autoPan : true,
-									autoPanAnimation : {
-										duration : 250
-									},
-									minWidth : '200px',
-									//Altura e largura do tooltip (balao)
-									toolTipSize : [ "100px", "200px" ],
-									//mostra ou nao o balao caso seja vazio
-									openTipNoData : true
-								},
-								//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
-								scrollBar : {
-									theme : "inset-2",
-									axis : "yx",
-									scrollbarPosition : "inside",
-									scrollButtons : {
-										enable : true
-									},
-									advanced : {
-										autoExpandHorizontalScroll : true
-									}
-								}
-							},
-							//parametros de configuracao das ferramentas que sao acionadas sob demanda
-							//ferramentas localizadas em i3geo/ferramentas
-							tools : {
-								//ferramenta de busca de camadas em um servico CSW
-								buscainde : {
-									//endereco do servico no padrao CSW
-									csw : "http://www.metadados.inde.gov.br/geonetwork/srv/br"
-								},
-								//ferramenta de identificacao
-								identifica : {
-									//resolucao em pixels para busca de elementos
-									resolution : 8
-								},
-								//mapa de referencia
-                                opcoesMaparef : {
-								    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
-                                    images : [
-                                    	{name: "Colorida", img: "referencia1"},
-                                    	{name: "B & W", img: "referencia1cinza"}
-                                	]
-                                }
-							},
-							//configuracoes especificas para a interface que utiliza o OpenLayers
-							openLayers : {
-								//utiliza ou nao tiles ao renderizar as camadas do mapa
-								//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
-								singleTile : false,
-								//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
-								MapOptions : {
-									layers : [],
-									controls : [ new ol.control.Zoom(),
-											new ol.control.ZoomSlider(),
-											new ol.control.ScaleLine(),
-											new ol.control.Attribution({
-												collapsible : true
-											}) ],
-									loadTilesWhileAnimating : true,
-									loadTilesWhileInteracting : true,
-									//os objetos devem ser comentados na interface googleMaps
-									interactions : [
-											new ol.interaction.DoubleClickZoom(),
-											new ol.interaction.KeyboardPan(),
-											new ol.interaction.KeyboardZoom(),
-											new ol.interaction.MouseWheelZoom(),
-											new ol.interaction.PinchRotate(),
-											new ol.interaction.PinchZoom(),
-											//new ol.interaction.DragZoom(),
-											i3GEO.navega.dragZoom(),
-											new ol.interaction.DragPan() ]
-								},
-								//opcoes para o objeto view, que e uma instancia de MapOptions
-								//ver https://openlayers.org/en/latest/apidoc/ol.View.html
-								ViewOptions : {
+				//abre a legenda do mapa em uma janela flutuante
+				//i3GEO.legenda.inicia({
+				//"idLegenda": "legendaHtml",
+				//"templateLegenda": "templates/legenda.html",
+				//"janela": true
+				//});
+				//para abrir uma guia
+				//i3GEO.guias.ativa('temas',$("[data-idconteudo='guia1obj'"));
+			    },
+			    //parametros de configuracao de diferentes componentes do mapa, como o catalogo de temas, balao de info, etc
+			    components : {
+				//restringe a inclusao de attribution apenas aos LAYERS adicionados manualmente
+				//e nao aos que possuem o link para a fonte definido no mapfile
+				restrictAtt : true,
+				//define se ao clicar no mapa sera feita a busca de atributos nas camadas existentes no mapa
+				info : true,
+				//lista com os codigos dos menus que serao considerados na montagem do catalogo de temas
+				idsMenus : [],
+				//webservice utilizado na opcao de encontrar lugares
+				searchService : "http://mapas.mma.gov.br/webservices/geonames.php",
+				//webservice wms que faz a apresentacao do lugar encontrado por searchService
+				searchWms : "http://mapas.mma.gov.br/webservices/geonameswms.php",
+				//posicao do mapa de referencia, em pixels [top,right]
+				referenceMapPosition : [ 4, 120 ],
+				//tipo do mapa de referencia. Pode ser wms ou map
+				referenceType : "map",
+				//propriedades do balao de informacoes mostrado quando o usuario clica no mapa
+				tooltip : {
+				    //o resultado sera mostrado em uma janela do tipo modal
+				    modal : false,
+				    //url que sera utilizada para obter os dados via $.get. Deve estar no mesmo dominio do i3Geo.
+				    //Ao final da url serao inseridos os parametros &xx=&yy= com valores em decimos de grau
+				    //use apenas se modal for true
+				    //exemplo: http://i3geo.saude.gov.br/i3geo/sage_tabelas/odm/odm6.php?
+				    url : "",
+				    //template que sera usado para compor o resultado da busca de dados
+				    //se for vazio, serao utilizadas as outras opcoes
+				    //se contiver a string {{{url}}} a mesma sera substituida por url
+				    //exemplo: "<iframe style='width:400px;height:190px;border:0px white solid' src='{{{url}}}'></iframe>"
+				    templateModal : "",
+				    //serao mostrados todos os dados ou apenas aqueles definidos na configuracao da camada
+				    simple : true,
+				    removeAoAdicionar : true,
+				    //parametros exclusivos da interface openlayers
+				    autoPan : true,
+				    autoPanAnimation : {
+					duration : 250
+				    },
+				    minWidth : '200px',
+				    //Altura e largura do tooltip (balao)
+				    toolTipSize : [ "100px", "200px" ],
+				    //mostra ou nao o balao caso seja vazio
+				    openTipNoData : true
+				},
+				//barra de rolagem - ver plugin jquery https://github.com/malihu/malihu-custom-scrollbar-plugin
+				scrollBar : {
+				    theme : "inset-2",
+				    axis : "yx",
+				    scrollbarPosition : "inside",
+				    scrollButtons : {
+					enable : true
+				    },
+				    advanced : {
+					autoExpandHorizontalScroll : true
+				    }
+				}
+			    },
+			    //parametros de configuracao das ferramentas que sao acionadas sob
+			    //demanda. Veja em js/ini_i3geo.js e js/configura.js
+			    //Algumas ferramentas localizadas em i3geo/ferramentas
+			    //permitem que qualquer parametro ou funcao seja sobrescrita
+			    //Veja o codigo de cada ferramenta para obter os nomes de parametros e funcoes
+			    //O codigo index.js da ferramenta deve permitir o uso dessas configuracoes (veja o final de cada index.js
+			    tools : {
+				//ferramenta de identificacao
+				identifica : {
+				    //resolucao em pixels para busca de elementos
+				    resolution : 8
+				},
+				legenda : {
+				    //define o local onde os templates da ferramenta ficam armazenados
+				    //esse eh o local default, colocado aqui para documentacao
+				    templateDir : i3GeoUrl
+					    + "/ferramentas/legenda"
+				},
+				metaestat : {},
+				buscainde : {},
+				//mapa de referencia
+				opcoesMaparef : {
+				    //opcoes de imagens. As imagens devem existir em i3geo/imagens e serem do tipo png
+				    images : [ {
+					name : "Colorida",
+					img : "referencia1"
+				    }, {
+					name : "B & W",
+					img : "referencia1cinza"
+				    } ]
+				},
+				//janela de conversao de coordenadas
+				wkt2layer : {
+				    position : [ 150, 150 ]
+				},
+				area : {
+				    position : [ 150, 10 ]
+				},
+				distancia : {
+				    position : [ 150, 10 ]
+				}
+			    },
+			    //configuracoes especificas para a interface que utiliza o OpenLayers
+			    openLayers : {
+				//utiliza ou nao tiles ao renderizar as camadas do mapa
+				//a utilizacao de tiles pode ser definida em cada camada, mas se essa propriedade for true, a definicao das camadas nao serao consideradas
+				singleTile : false,
+				//opcoes de inicializacao do mapa conforme definido na API do OpenLayers
+				MapOptions : {
+				    layers : [],
+				    controls : [ new ol.control.Zoom(),
+					    new ol.control.ZoomSlider(),
+					    new ol.control.ScaleLine(),
+					    new ol.control.Attribution({
+						collapsible : true
+					    }) ],
+				    loadTilesWhileAnimating : true,
+				    loadTilesWhileInteracting : true,
+				    //os objetos devem ser comentados na interface googleMaps
+				    interactions : [
+					    new ol.interaction.DoubleClickZoom(),
+					    new ol.interaction.KeyboardPan(),
+					    new ol.interaction.KeyboardZoom(),
+					    new ol.interaction.MouseWheelZoom(),
+					    //new ol.interaction.PinchRotate(),
+					    new ol.interaction.PinchZoom(),
+					    //new ol.interaction.DragZoom(),
+					    i3GEO.navega.dragZoom(),
+					    new ol.interaction.DragPan() ]
+				},
+				//opcoes para o objeto view, que e uma instancia de MapOptions
+				//ver https://openlayers.org/en/latest/apidoc/ol.View.html
+				ViewOptions : {
 
-								},
-								//botoes que sao mostrados no editor vetorial
-								editorButtons : {
-									'imprimir' : false,
-									'grid' : false,
-									'pan' : false,
-									'zoombox' : false,
-									'zoomtot' : false,
-									'zoomin' : false,
-									'zoomout' : false,
-									'distancia' : false,
-									'area' : false,
-									'identifica' : false,
-									'linha' : true,
-									'ponto' : true,
-									'poligono' : true,
-									'texto' : true,
-									'edita' : true,
-									'listag' : true,
-									'corta' : true,
-									'apaga' : true,
-									'procura' : false,
-									'selecao' : true,
-									'selecaotudo' : true,
-									'salva' : true,
-									'ajuda' : true,
-									'propriedades' : true,
-									'fecha' : true,
-									'tools' : true,
-									'undo' : false,
-									'frente' : false,
-									'legenda' : false,
-									'rodadomouse' : true,
-									'novaaba' : false
-								}
-							},
-							//configuracoes especificas para a interface GoogleMaps
-							googleMaps : {
-								//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
-								MapOptions : {
-									//estilo que sera utilizado no mapa
-									//pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
-									//ver i3GEO.Interface.googleMaps.ESTILOS
-									mapTypeId : "roadmap",
-									scaleControl : true,
-									mapTypeControl : true,
-									mapTypeControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_BOTTOM
-									},
-									zoomControl : true,
-									zoomControlOptions : {
-									//style : google.maps.ZoomControlStyle.SMALL,
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									},
-									streetViewControl : true,
-									streetViewControlOptions : {
-									//position : google.maps.ControlPosition.LEFT_CENTER
-									}
-								}
-							}
-						};
-						//
-						//inicia o mapa
-						//Veja tambem config.php
-						//
-						//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
-						//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
-						//
-						i3GEO.init(parametrosMapa, config);
-					})();
-				</script>
+				},
+				//botoes que sao mostrados no editor vetorial
+				editorButtons : {
+				    'imprimir' : false,
+				    'grid' : false,
+				    'pan' : false,
+				    'zoombox' : false,
+				    'zoomtot' : false,
+				    'zoomin' : false,
+				    'zoomout' : false,
+				    'distancia' : false,
+				    'area' : false,
+				    'identifica' : false,
+				    'linha' : true,
+				    'ponto' : true,
+				    'poligono' : true,
+				    'texto' : true,
+				    'edita' : true,
+				    'listag' : true,
+				    'corta' : true,
+				    'apaga' : true,
+				    'procura' : false,
+				    'selecao' : true,
+				    'selecaotudo' : true,
+				    'salva' : true,
+				    'ajuda' : true,
+				    'propriedades' : true,
+				    'fecha' : true,
+				    'tools' : true,
+				    'undo' : false,
+				    'frente' : false,
+				    'legenda' : false,
+				    'rodadomouse' : true,
+				    'novaaba' : false
+				}
+			    },
+			    //configuracoes especificas para a interface GoogleMaps
+			    googleMaps : {
+				//opcoes de inicializacao do mapa conforme definido na API do GoogleMaps
+				MapOptions : {
+				    //estilo que sera utilizado no mapa
+				    //pode ser um desses: roadmap, satellite, hybrid, terrain, Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled
+				    //ver i3GEO.Interface.googleMaps.ESTILOS
+				    mapTypeId : "roadmap",
+				    scaleControl : true,
+				    mapTypeControl : true,
+				    mapTypeControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_BOTTOM
+				    },
+				    zoomControl : true,
+				    zoomControlOptions : {
+				    //style : google.maps.ZoomControlStyle.SMALL,
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    },
+				    streetViewControl : true,
+				    streetViewControlOptions : {
+				    //position : google.maps.ControlPosition.LEFT_CENTER
+				    }
+				}
+			    }
+			};
+			//
+			//inicia o mapa
+			//Veja tambem config.php
+			//
+			//O primeiro parametro permite alterar o mapa, inserindo camadas e outras definicoes que afetam o corpo do mapa
+			//O segundo parametro inclui configuracoes que afetam o funcionamento da interface que controla a visualizacao do mapa
+			//
+			//caso queira evitar os efeitos do material design, comente a linha abaixo
+			//$.material = false;
+			i3GEO.init(parametrosMapa, config);
+		    })();
+		</script>
 </body>
 
 </html>
--
libgit2 0.21.2