Download as
Browse Code »

Commit 9ac1208e3151a535dbb75fde6f9b4da7dc025463

Authored by Edmar Moretti
1 parent f7bbc6be
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

inclusão de exemplo de uso da biblioteca heatmap

Showing 1 changed file with 200 additions and 0 deletions   Show diff stats
exemplos/googlemaps_calor.phtml 0 → 100755
  Diff comments   View file @9ac1208
@@ -0,0 +1,200 @@ @@ -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&aacute; inclu&iacute;da a escala num&eacute;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&aacute; inclu&iacute;do o gadget que mostra a coordenada geogr&aacute;fica da posi&ccedil;&atilde;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&atilde;o de compartilhamento em redes sociais-->
  48 + <div id=i3GEOcompartilhar style="width: 170px; margin: auto; text-align: left; padding-top: 1px"></div> <!-- aqui ser&aacute; inclu&iacute;do o contador de tempo quando o temporizador de redesenho do mapa estiver ativo -->
  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&atilde;o inclu&iacute;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&ccedil;&atilde;o de mapas interativos e geoprocessamento</h2>
  64 + <h3 style="font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;">Baseado no Mapserver, &eacute; licenciado sob GPL e integra o Portal do Software P&uacute;blico Brasileiro</h3></td>
  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&ccedil;&atilde;o de busca r&aacute;pida, caso vc queira coloc&aacute;-la em um lugar espec&iacute;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&iacute;ficas da interface Openlayers. Veja tamb&eacute;m a op&ccedil;&atilde;o i3GEO.Interface.openlayers.GADGETS.LayerSwitcher -->
  89 + <div id=listaLayersBase style='top: 15px;'></div>
  90 + <!-- Esta div acrescenta a lista de de camadas dispon&iacute;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&ccedil;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&aacute;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>