Commit 9ac1208e3151a535dbb75fde6f9b4da7dc025463
1 parent
f7bbc6be
Exists in
master
and in
7 other branches
inclusão de exemplo de uso da biblioteca heatmap
Showing
1 changed file
with
200 additions
and
0 deletions
Show diff stats
... | ... | @@ -0,0 +1,200 @@ |
1 | +<?php | |
2 | +include_once("../ms_configura.php"); | |
3 | +?> | |
4 | +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
5 | +<html> | |
6 | +<head> | |
7 | +<meta http-equiv="Category" content="i3Geo Mapa interativo MMA geoprocessamento sig mobile"> | |
8 | +<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> | |
9 | +<title>i3GEO - Google Maps</title> | |
10 | + | |
11 | +</head> | |
12 | +<body id="i3geo" style='margin-left: 7px; background: white;'> | |
13 | + <!-- inclui o nome do usuario logado --> | |
14 | + <div id="i3GEONomeLogin" style="position: absolute; left: 10px; top: 12px; font-size: 11px; z-index: 50000"></div> | |
15 | + <table id='mst' summary="" style='display: none;' width=100% cellspacing='0'> | |
16 | + <tr> | |
17 | + <td id="contemMenu" style="background: black; height: 30px; text-align: right; border-width: 0pt 0pt 1px; border-color: rgb(240, 240, 240)"> | |
18 | + <!--menu suspenso--> | |
19 | + <div id="menus" style="height: 0px;"></div> | |
20 | + </td> | |
21 | + </tr> | |
22 | + <tr> | |
23 | + <td style="vertical-align: top; border-width: 0px;"> | |
24 | + <table width="100%" style="vertical-align: top; border-width: 0px"> | |
25 | + <tr> | |
26 | + <td class=verdeclaro id=contemImg> | |
27 | + <div id=googlemapsdiv style="position: relative; background-image: url('../imagens/i3geo1bw.jpg');"></div> | |
28 | + </td> | |
29 | + </tr> | |
30 | + </table> | |
31 | + </td> | |
32 | + </tr> | |
33 | + <tr> | |
34 | + <td> | |
35 | + <table style="width: 100%; height: 28px"> | |
36 | + <tr> | |
37 | + <td class=fundoRodape style="width: 25%"> | |
38 | + <!-- aqui será incluída a escala numérica --> | |
39 | + <div id=escala style="margin: auto; text-align: right; left: 15px;"></div> | |
40 | + </td> | |
41 | + <td class=fundoRodape style="width: 5%"></td> | |
42 | + <td class=fundoRodape style="width: 40%"> | |
43 | + <!-- aqui será incluído o gadget que mostra a coordenada geográfica da posição do mouse --> | |
44 | + <div id=localizarxy style="margin: auto; text-align: left; font-size: 10px; display: inline-table"></div> | |
45 | + </td> | |
46 | + <td class=fundoRodape style="width: 20%"> | |
47 | + <!-- botão de compartilhamento em redes sociais--> | |
48 | + <div id=i3GEOcompartilhar style="width: 170px; margin: auto; text-align: left; padding-top: 1px"></div> <!-- aqui será incluído o contador de tempo quando o temporizador de redesenho do mapa estiver ativo --> | |
49 | + <div id=tempoRedesenho style="z-index: 100; position: absolute; top: 0px; color: green; background-color: black; width: 50px; display: none"></div> | |
50 | + </td> | |
51 | + <!-- aqui serão incluídas as bandeiras que permitem a troca de idioma --> | |
52 | + <td class=fundoRodape style="width: 10%;"> | |
53 | + <div id=seletorIdiomas style="right: 15px;"></div> | |
54 | + </td> | |
55 | + </tr> | |
56 | + </table> | |
57 | + </td> | |
58 | + </tr> | |
59 | + </table> | |
60 | + <table id="i3GEOlogoMarca" style='margin: 0px auto; box-shadow: 0 1px 13px gray; border-radius: 5px;'> | |
61 | + <tr> | |
62 | + <td><div id=versaoi3geo></div> | |
63 | + <h2 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">i3Geo - Software livre para criação de mapas interativos e geoprocessamento</h2> | |
64 | + <h3 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, é licenciado sob GPL e integra o Portal do Software Público Brasileiro</h3></td> | |
65 | + </tr> | |
66 | + <tr> | |
67 | + <td style="padding: 10px;"><img style="width: 560px; height: 81px" alt="" src='../imagens/logo_inicio.png'></td> | |
68 | + </tr> | |
69 | + <tr> | |
70 | + <td> | |
71 | + <!-- | |
72 | + <script id="ohloh" type="text/javascript" src="http://www.ohloh.net/p/150688/widgets/project_users.js?style=red"></script> | |
73 | + --> | |
74 | + </td> | |
75 | + </tr> | |
76 | + </table> | |
77 | + | |
78 | + <div id="i3GEOguiaMovel" style="position: absolute; display: block; border: 0px solid white; text-align: left; z-index: 1000; background-color: none"> | |
79 | + <img id='i3GEOguiaMovelPuxador' onclick='i3GEO.guias.guiaMovel.abreFecha()' style='z-index: 2; border: solid 0px white; left: 0px; position: absolute; top: 0px' width='0px' src='../imagens/openbars.png'> | |
80 | + <div id="i3GEOguiaMovelMolde" style="position: absolute; display: none; border: 0px solid white; text-align: left; z-index: 1000; background-color: gray"> | |
81 | + <div id='i3GEOguiaMovelIcones' style='overflow: none; left: 0px; display: none; position: absolute; top: 0px; text-align: center; height: 0px; width: 0px; border: solid 0px white; background-color: white'></div> | |
82 | + <div id='i3GEOguiaMovelConteudo' style='overflow: auto; display: none; position: absolute; border-color: gray; border-width: 0px 0 0px 0px; left: 0px; height: 0px; background-color: white'> | |
83 | + <div id='guia1obj' style='display: none;'> | |
84 | + <!-- Esta div acrescenta a opção de busca rápida, caso vc queira colocá-la em um lugar específico --> | |
85 | + <div style='left: 5px; top: 10px;' id=buscaRapida></div> | |
86 | + <!-- Esta div acrescenta a lista de propriedades do mapa --> | |
87 | + <div id=listaPropriedades style='top: 15px;'></div> | |
88 | + <!-- Esta div acrescenta a lista de de camadas do tipo 'baselayers' específicas da interface Openlayers. Veja também a opção i3GEO.Interface.openlayers.GADGETS.LayerSwitcher --> | |
89 | + <div id=listaLayersBase style='top: 15px;'></div> | |
90 | + <!-- Esta div acrescenta a lista de de camadas disponíveis no mapa atual --> | |
91 | + <div id=listaTemas style='top: 15px;'></div> | |
92 | + </div> | |
93 | + <div id='guia2obj' style='display: none;'> | |
94 | + Aguarde...<img alt="" src="../imagens/branco.gif" width=248 /> | |
95 | + </div> | |
96 | + <div id='guia4obj' style='display: none; text-align: left'> | |
97 | + <div id='legenda' style='text-align: left'></div> | |
98 | + </div> | |
99 | + <div id='guia5obj' style='display: none; text-align: left'> | |
100 | + <div id='banners' style='overflow: auto; text-align: left'>Aguarde...</div> | |
101 | + </div> | |
102 | + </div> | |
103 | + </div> | |
104 | + </div> | |
105 | + | |
106 | + <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing,geometry"></script> | |
107 | + <script type="text/javascript" src="../classesjs/i3geo6.js"></script> | |
108 | +<script type="text/javascript" src="farmaciaspopulares.js"></script> | |
109 | +<script type="text/javascript" src="../pacotes/heatmap/src/heatmap.js"></script> | |
110 | +<script type="text/javascript" src="../pacotes/heatmap/src/heatmap-gmaps.js"></script> | |
111 | + <link rel="stylesheet" type="text/css" href="../css/black.css"> | |
112 | + <script type="text/javascript"> | |
113 | +i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo"; | |
114 | +i3GEO.Interface.ATUAL = "googlemaps"; | |
115 | +i3GEO.Interface.IDCORPO = "contemImg"; | |
116 | +i3GEO.configura.diminuixN = 20; | |
117 | + | |
118 | +i3GEO.configura.oMenuData.submenus["interface"] = [ | |
119 | + { id:"omenudataInterface0a",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("d27")+'</b></span>',url: "#"}, | |
120 | + { id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_ol.htm?'+i3GEO.configura.sid" }, | |
121 | + { id:"omenudataInterface2a",text: "OpenLayers OSM", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_osm.htm?'+i3GEO.configura.sid" }, | |
122 | + { id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/black_gm.phtml?'+i3GEO.configura.sid" }, | |
123 | + { id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" }, | |
124 | + { id:"omenudataInterface0b",text: '<span style=color:gray;text-decoration:underline; ><b>'+$trad("u27")+'</b></span>',url: "#"}, | |
125 | + { id:"omenudataInterface6",text: $trad("u21"), url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" }, | |
126 | + { id:"omenudataInterface7",text: "Serviços WMS", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" }, | |
127 | + { id:"omenudataInterface9",text: "Download de dados", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/datadownload.htm')" }, | |
128 | + { id:"omenudataInterface11",text: $trad("p20"), url: "javascript:i3GEO.mapa.dialogo.telaRemota()" } | |
129 | +]; | |
130 | + | |
131 | +i3GEO.configura.autotamanho = false; | |
132 | +i3GEO.Interface.openlayers.TILES = true; | |
133 | +i3GEO.gadgets.PARAMETROS.mostraMenuSuspenso.finaliza = 'if($i("omenudataInterface1")){i3GEOoMenuBar.getMenuItem("omenudataInterface1").cfg.setProperty("text", " ");}'; | |
134 | +i3GEO.cria(); | |
135 | +i3GEO.configura.mapaRefDisplay = "none"; | |
136 | +i3GEO.barraDeBotoes.TIPO = "olhodepeixe"; | |
137 | +//ajusta o deslocamento da barra de botoes | |
138 | +i3GEO.barraDeBotoes.OFFSET = 11; | |
139 | +//ajusta a posicao da barra de botoes no IE | |
140 | +if(navm){ | |
141 | + i3GEO.barraDeBotoes.OFFSET = 5; | |
142 | +} | |
143 | +i3GEO.configura.oMenuData["submenus"]["janelas"] = []; | |
144 | +i3GEO.ajuda.ATIVAJANELA = false; | |
145 | +i3GEO.idioma.IDSELETOR = "seletorIdiomas"; | |
146 | +i3GEO.Interface.ATIVAMENUCONTEXTO = false; | |
147 | +//i3GEO.arvoreDeTemas.TIPOBOTAO = "radio"; | |
148 | +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.comentarios = true; | |
149 | +i3GEO.arvoreDeCamadas.VERIFICAABRANGENCIATEMAS = false; | |
150 | +i3GEO.arvoreDeCamadas.MOSTRALISTAKML = false; | |
151 | +i3GEO.mapa.AUTORESIZE = true; | |
152 | +i3GEO.guias.TIPO = "movel"; | |
153 | +i3GEO.guias.guiaMovel.config.topGuiaMovel = 36; | |
154 | +i3GEO.janela.ativaAlerta(); | |
155 | + | |
156 | +//i3GEO.Interface.googlemaps.TIPOMAPA = "satellite"; | |
157 | + | |
158 | +i3GEO.arvoreDeTemas.OPCOESADICIONAIS.navegacaoDir = true; | |
159 | +i3GEO.janela.TRANSICAOSUAVE = true; | |
160 | + | |
161 | +i3GEO.finaliza = function(){ | |
162 | + if($i("i3GEOlogoMarca")){ | |
163 | + $i("i3GEOlogoMarca").style.display = "none"; | |
164 | + } | |
165 | + i3GEO.mapa.insereDobraPagina("openlayers","../imagens/dobraopenlayers.png"); | |
166 | +} | |
167 | +i3GEO.finalizaAPI = function(){ | |
168 | + heatmap = new HeatmapOverlay(i3GeoMap, { | |
169 | + "radius":15, | |
170 | + "visible":true, | |
171 | + "opacity":60, | |
172 | + "gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" }, | |
173 | + "legend": { | |
174 | + "title": "Quantidade de farmácias", | |
175 | + "position": "bl", | |
176 | + "offset": 15 | |
177 | + } | |
178 | + }); | |
179 | + var pontos={ | |
180 | + max: 10, | |
181 | + data: dados | |
182 | + }; | |
183 | + // this is important, because if you set the data set too early, the latlng/pixel projection doesn't work | |
184 | + google.maps.event.addListenerOnce(i3GeoMap, "idle", function(){ | |
185 | + i3GeoMap.setZoom(3); | |
186 | + i3GeoMap.panTo(new google.maps.LatLng(-12,-54)); | |
187 | + heatmap.setDataSet(pontos); | |
188 | + }); | |
189 | + | |
190 | +} | |
191 | +//altera o estilo do google maps | |
192 | +//Estilos pre-definidos Red, Countries, Night, Blue, Greyscale, No roads, Mixed, Chilled | |
193 | +i3GEO.Interface.googlemaps.ESTILOPADRAO = "Night"; | |
194 | +i3GEO.configura.guardaExtensao = false; | |
195 | +i3GEO.inicia(); | |
196 | + | |
197 | + | |
198 | +</script> | |
199 | +</body> | |
200 | +</html> | ... | ... |