BHMap documentação básica

Exemplos de uso básico da API do BHMap

Exemplo 3: Mapa base com camada sobreposta e popup de informação

Clique no mapa para exibir informações da camada.
Observação: Para realizar as chamadas de busca de informação, é preciso configurar um proxy que realize as chamadas cross domain. Configure isso na variável BHMap.ProxyHost.

Código

O parâmetro layer=bairro na url do script que carrega o BHMap adiciona a camada de bairro no mapa. Você pode consultar as camadas disponíveis no menu 'API' do BHMap Visualizador.
A variável BHMap.ProxyHost define o proxy para chamadas cross domain
A função BHMap.util.info.callback é responsável por exibir o resultado da busca. Pode receber qualquer função com parâmetros (features, coordenada, camada)

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Treinamento OpenLayers</title>
   </head>
   <body onload="init()">
   
      <!-- elemento div do mapa. é necessário definir um id para o elemento -->
      <div id="map" style="height: 80vH;width:90vW"></div>

      <script type="text/javascript" src="https://bhmap.pbh.gov.br/v2/api/visualizador/js?funcionalidade=util&layersbase=base&layer=bairro&versao=0.0.3"></script>
      
      <script type="text/javascript">

         function init() {
                     
             // defina a variável abaixo com o endereço do seu proxy para requisições cross domain.
             BHMap.ProxyHost = 'https://seuservidor.com/proxy.jsp?q=';
         
             BHMap.afterload = function() {
                BHMap.Map.addControls([new OpenLayers.Control.MousePosition(), new OpenLayers.Control.ScaleLine()]);
                habilitarBuscaInformacao();
             }
         
             BHMap.startMap('map');          
           
         }
   
         function habilitarBuscaInformacao() {
         
             // Adicionar as camadas que deseja consultar
             BHMap.util.info.layers.push('bairro');
          
             // Registrar as função de click para buscar as informações
             BHMap.Map.events.register('click', null, BHMap.util.info.selecionarFeatureByEvent);
          
             // Registrar callback para receber e exibir as informações 
             BHMap.util.info.callback = BHMap.util.showInfo.featureByStrategy;
         
         }
         
      </script>
   </body>
</html>