Um exemplo básico de como apresentar a
rota entre endereço de partida e endereço de chegada:
Para fazer isso criamos primeiramente
no CDE no “Layout Panel” uma linha-> uma coluna -> com html:
Depois no Components Panel => Scripts => JavaScript Function adicionamos a função:
Segue link para download dos arquivos cdfde
e wcdf do exemplo:
https://drive.google.com/file/d/0B0TaKq3jquzndUtfT1Q2Zy1fV0E/view?usp=sharing
Para o correto funcionamento é necessário ter o arquivo estilo.css que deve estar no caminho:
- \biserver-ce\pentaho-solutions\system\common-ui\resources\js\google\stilo.css
o conteudo do stilo.css desse exemplo é:
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px }
#site { width: 960px; margin: 10px auto 0 auto }
fieldset { border: 0 }
legend { font-weight: bold; margin-bottom: 10px }
label { display: block; margin-bottom: 2px }
form div { margin-bottom: 10px }
h1 { text-align: center; font-size: 18px }
input { width: 500px; padding: 5px }
input[type=submit] { padding: 5px 10px; width: auto }
#mapa { width: 950px; height: 500px;float: left;left: 0px}
#trajeto-texto { width: 300px; height: 400px; float: right; overflow: scroll }
Link para download do stilo.css:
https://drive.google.com/file/d/0B0TaKq3jquznbDBKdlBVNHNFUVk/view?usp=sharing
Nesse exemplo básico não existe consulta ao banco de dados (DW) via MDX ou SQL.
https://drive.google.com/file/d/0B0TaKq3jquzndUtfT1Q2Zy1fV0E/view?usp=sharing
Para o correto funcionamento é necessário ter o arquivo estilo.css que deve estar no caminho:
- \biserver-ce\pentaho-solutions\system\common-ui\resources\js\google\stilo.css
o conteudo do stilo.css desse exemplo é:
* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px }
#site { width: 960px; margin: 10px auto 0 auto }
fieldset { border: 0 }
legend { font-weight: bold; margin-bottom: 10px }
label { display: block; margin-bottom: 2px }
form div { margin-bottom: 10px }
h1 { text-align: center; font-size: 18px }
input { width: 500px; padding: 5px }
input[type=submit] { padding: 5px 10px; width: auto }
#mapa { width: 950px; height: 500px;float: left;left: 0px}
#trajeto-texto { width: 300px; height: 400px; float: right; overflow: scroll }
Link para download do stilo.css:
https://drive.google.com/file/d/0B0TaKq3jquznbDBKdlBVNHNFUVk/view?usp=sharing
Nesse exemplo básico não existe consulta ao banco de dados (DW) via MDX ou SQL.
Quando necessário efetuar consultas:
-Será necessário adicionar os data Sources (mdx over modrianJndi ou Sql OverJndi) no Data Source Panel;
- Também adicionar componente Query no componentes Panel qual irá passar o parâmetro do resultado da consulta do data source. Esse parâmentro que é o endereço pode ser passado para a função javascript no lugar de:
- $("#txtEnderecoPartida").val();
- e $("#txtEnderecoChegada").val();
Blogs de referências utilizadas:
- Blog Princiweb: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html
- Blog Fernando Felix do Nascimento Junior: https://fjacademic.wordpress.com/2011/07/29/exemplo-google-maps-no-pentaho/
Documentação oficial da API do Google Maps:
https://developers.google.com/maps/documentation/javascript/directions?hl=pt-br
-Será necessário adicionar os data Sources (mdx over modrianJndi ou Sql OverJndi) no Data Source Panel;
- Também adicionar componente Query no componentes Panel qual irá passar o parâmetro do resultado da consulta do data source. Esse parâmentro que é o endereço pode ser passado para a função javascript no lugar de:
- $("#txtEnderecoPartida").val();
- e $("#txtEnderecoChegada").val();
Blogs de referências utilizadas:
- Blog Princiweb: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html
- Blog Fernando Felix do Nascimento Junior: https://fjacademic.wordpress.com/2011/07/29/exemplo-google-maps-no-pentaho/
Documentação oficial da API do Google Maps:
https://developers.google.com/maps/documentation/javascript/directions?hl=pt-br
