editandolink.html
11.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<h1>Publicação de mapas em aplicação externa ao i3GeoSaúde</h1>
<p>
A publicação externa ao i3GeoSaúde é implementada por meio da tecnologia <span style="font-style: italic;">Mashup</span>. Essa tecnologia representa pequenos programas que podem ser facilmente inseridos em páginas HTML e que mostram determinados conteúdos como temas de mapas. No caso do i3GeoSaude, os
<span style="font-style: italic;">mashups</span> apresentam mapas tendo como base os temas cadastrados na<a href="index.php?conteudo=publicacao2.html"> lista de mapas cadastrados disponíveis internamente</a>.
<p>
Para gerar o Mashup do mapa clique em "Preview", presente na lista de mapas cadastrados (opção "Arquivo", do menu suspenso), a opção de preview escolhida foi o exemplo do "Mapa Publicacao".
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink22.jpg">
<p>Lista de mapas cadastrados e seleção da opção "preview"
</div>
<p>Em seguida, o i3GeoSaúde abrirá uma janela no navegador com o mapa em escala reduzida. Essa forma de "zoom" (escala reduzida) é o padrão adotado na ferramenta i3GeoSaúde, bem como a configuração da URL (visto na barra de endereço do navegador).
<div class="imagemExemplo">
<img src="imagens/publicacaoII/pub22.jpg">
<p>Mashup com escala reduzida apresentando o "link" com os parâmetros iniciais.
</div>
<p>A seguir, veremos como parametrizar a URL do mashup do mapa publicado.
<h2>Editando link do mapa</h2>
<p>É possível modificar a URL que abre o mapa, permitindo diferentes visualizações do mapa. Para editar o link (URL) do mapa, deve-se abrir o painel ''Edição de link", no modo Administrador, por meio de duas maneiras:
<ul>
<li>Acesso do painel ''Edição de link", por meio da página inicial.</li>
<li>Acesso do painel ''Edição de link", pela interface do i3GeoSaúde.</li>
</ul>
O acesso do painel
<span style="font-weight: bold;"> ''Edição de link"</span>, por meio da
<span style="font-weight: bold;"> página inicial</span>, é realizado pelo menu suspenso, opção "Admin/Login". Em seguida, clique no item ''Página principal''.
<ul>
</ul>
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink03.jpg">
<p>Página principal.
</div>
<p>Depois de selecionar o item "Página Principal", surgirá uma nova página. Nessa página clique na opção "Links para mapas" para ampliá-la, em seguida, selecione a opção ''Edição dos links''.
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink04.jpg">
<p>Seleção do item "Edição dos links".
</div>
<p>
O outro acesso ao painel <span style="font-weight: bold;">''Edição de link", </span>é realizado pelo menu suspenso ''Arquivo", selecionando a opção ''Salvar mapa''.
<ul>
</ul>
<div class="imagemExemplo">
<img src="imagens/publicacaoII/pub02.jpg">
<p>Seleção do item "Salvar mapa" do menu "Arquivo".
</div>
<p>Em seguida, surgirá uma janela flutuante "Salvar mapa". Siga a barra de rolagem (seta para baixo), na barra lateral. Em seguida, clique em ''Clique aqui para editar a lista de mapas".
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink02.jpg">
<p>janela flutante "Salvar mapa" com a opção ''Clique aqui para editar a lista de mapas".
</div>
<p>
Na página de edição, haverá uma lista de mapas previamente cadastrados no i3GeoSaúde, assim como mapas salvos pelo <a href="index.php?conteudo=publicacao2.html">método de publicação do tema no i3GeoSaúde</a>. Para editar o link de seu mapa, e adicionar os parâmetros necessários clique no ícone
<p>
<img style="width: 20px; height: 19px;" alt="icone de edição" title="icone de edição" src="imagens/editlink/edtlink06.jpg"> encontrado ao lado de "Mapa publicacao".
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink05.jpg">
<p>Selecionando a opção de edição do link do tema "Mapa publicacao".
</div>
<ul>
<li><a name="visualizacaolLink"></a><span style="font-weight: bold;">Parâmetros de extensão inicial</span></li>
</ul>
<p>A janela que se abre, permite que você edite as informações que serão publicadas do seu mapa. Desça a barra de rolagem lateral, localizada à direita da janela, até encontrar a opção "Outros Parâmetros". Na caixa de texto você digita os parâmetros que serão adicionados ao link de seu mapa.
<p>
Um dos parâmetros que podem ser utilizados é o ''mapext''', extensão geográfica inicial do mapa (xmin,ymin,xmax,ymax), usado para alterar as dimensões iniciais do tema. Para usar esse parâmetro, basta adicionar o ''mapext'', o separador ''&'' e suas coordenadas ao final do link inicial ( <span style="font-weight: bold;">*</span>) de seu mapa na caixa de texto. (*) <span style="font-style: italic;"></span><span style="font-style: italic; text-decoration: underline;">
</span>link inicial<span style="font-style: italic;">: "&restauramapa=8&interface=http://localhost/i3geo/interface/openlayers.htm"</span><br style="font-style: italic;"> <br style="font-style: italic;"> <span style="font-style: italic;"><span style="font-weight: bold;">link com modificação da extensão inicial: </span>''&restauramapa=8&interface=http://localhost/i3geo/interface/openlayers.htm&<span style="font-weight: bold;"><p>mapext</span>=-48.67183 -1.521909
-48.228257 -1.225278"</span><br style="font-weight: bold;">
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink08.jpg">
<p>Modificação de link com parâmetro de extensão inicial.
</div>
<p>Com a modificação do link, com parâmetro de extensão inicial, perceba que ao carregar o mapa novamente ele iniciará na região do tema e não mais em escala reduzida.
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink23.jpg">
<p>
Mapa gerado sem definir extensão inicial (<span style="font-weight: bold;">1</span>); Mapa com modificação de parâmetros<span style="font-weight: bold;"> </span>(<span style="font-weight: bold;">2</span>).
</div>
<p>
Essas dimensões de extensão inicial podem ser modificadas, de acordo com as preferências do usuário, da seguinte forma: Com seu mapa aberto na região de seu tema , selecione o zoom ( <span style="font-weight: bold;">1</span>) e amplie a barra de botões (<span style="font-weight: bold;">2</span>), conforme indicado com o ponteiro de "mão"<span style="font-weight: bold;"></span>.
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink10.jpg">
<p>
Apresentação do tema com escala definida pelo usuário<span style="font-weight: bold;"> </span>(<span style="font-weight: bold;">1</span>) e ampliação da barra de botões (<span style="font-weight: bold;">2</span>).
</div>
<p>
Após ampliar a barra de botões, clique em <span style="font-weight: bold;">Extensão atual</span>.
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink11.jpg">
<p>Seleção do ícone Extensão atual.
</div>
<p>
Em seguida, surgirá uma janela flutuante "Extensão atual" com as coordenadas geográficas em um campo de texto. Copie estas informações e cole no campo referente ao "link", após o uso do parâmetro "mapext"<span style="font-style: italic;"> </span> acrescido do "="<span style="font-weight: bold;"></span> <a href="index.php?conteudo=visualizacaolLink">conforme visto anteriormente</a>. Desse modo, quando o <span style="font-style: italic;">mashup </span>do seu tema for gerado<span
style="font-style: italic;"></span>, ele iniciará na dimensão definida pelo parâmetro "mapext" e não mais com a escala inicial.
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink12.jpg">
<p>Cópia das coordenadas da extensão inicial.
</div>
<ul>
<li><span style="font-weight: bold;">Parâmetro de botões</span></li>
</ul>
<p>
O parâmetro de botões permite ao usuário escolher os botões que deseja apresentar no <span style="font-style: italic;">Mashup</span>, se não for definidos os botões que seram exibidos ( <span style="font-weight: bold;">*</span>), por padrão serão mostrados todos os botões. (<span style="font-weight: bold;">*</span>) link original sem definir parâmetro "botoes'': <span style="font-style: italic;">"&restauramapa=8&interface=http://localhost/i3geo/interface/openlayers.htm"</span>
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink19.jpg">
<p>Apresentação padrão de botões no mashup.
</div>
<p>
Os botões podem ser ocultados ou exibidos conforme o exemplo definido no link a seguir (<span style="font-weight: bold;">*</span>), exemplificado na <span style="font-weight: bold;">Figura 14</span>. ( <span style="font-weight: bold;">*</span>) Link com definições de alguns botões: <span style="font-style: italic;">"&restauramapa=8&interface=http://localhost/i3geo/interface/openlayers.htm</span><span style="font-weight: bold; font-style: italic;">&
botoes=pan,edita,salva</span>
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink20.jpg">
<p>
Exemplo de <span style="font-style: italic;">Mashup</span> com botões "pan", "edita" e "salva" selecionados.
</div>
<p>
Além dos parâmetros de extensão incial ''mapext'' e "botoes" apresentados nos exemplos, existem outros que podem ser visualizados no <a target="_blank" href="http://mapas.mma.gov.br/i3geo/mashups/openlayers.php">tutorial sobre mashup do OpenLayers</a>. Após adicionar os parâmetros, salve sua edição clicando em "salva" (presente no topo da janela do editor).
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink13.jpg">
<p>Salvando edição.
</div>
<h2>Publicação de mapas em aplicação externa ao i3GeoSaude</h2>
<p>Após configurar o link de seu mashup, você pode adicioná-lo em páginas web de aplicativos externos ao i3GeoSaúde. Para isso, basta selecionar o link criado anteriormente, e adiciona-lo em uma marca HTML do tipo "iframe", conforme visto a seguir: "
<pre>
<iframe src="http://localhost/i3geo/mashups/openlayers.php?&restauramapa=
8&interface=http://localhost/i3geo/int></iframe>
</pre>
<p>Observação: o link faz referência ao servidor local (localhost). Dessa forma, para disponibilizar o conteúdo na Web é necessário um endereço internet do servidor Web onde está hospedado o mapa. Na figura seguinte é apresentado o mashup do mapa exemplo dentro de um quadro "iframe" definido em uma página de "blog". Dessa forma, pode-se publicar o cartograma em uma página Web e disponibiliza-la ao público.
<div class="imagemExemplo">
<img src="imagens/editlink/edtlink18.jpg">
<p>Visualização do mapa do i3GeoSaúde em uma página web de uma aplicação Blog.
</div>