Presentation on the Pentaho Day Brazil 2017 about the CDE NewMapComponent.

1. Desvendando o
NewMapComponent
Kleyson Rios
Pentaho Day Brasil
2017

2.  Breve introdução
 Principais features
 Exemplos
Agenda

3.  Engine de mapas
 Criar dashboards com informações georeferenciadas
 Markers e Shapes
 Bibliotecas Openlayers2 e GoogleMaps*
Introdução
* Requer uma API key

4.  Panning mode (pan)
 Zoom box mode (zoombox)
 Selection box mode* (selection)
Modos de operação (estados do mapa)
Panning mode
Selection mode
Zoom box mode
* Para ativar o Selection mode, basta setar a propriedade Parameter

5.  disabled
‒ Quando o mapa não está configurado
para Selection mode
 noneSelected
‒ Quando não existe nenhum item selecionado
 allSelected
‒ Quando todos os itens estão selecionados
 someSelected
‒ Quando pelo menos um conjunto de itens está
selecionado
 selected
‒ Quando o item é selecionado
 unselected
‒ Quando o item não está selecionado
 normal
‒ Quando o mouse não está sobre um item
 hover
‒ Quando o mouse está sobre um item
Estados das features

6.  Combinação dos vários estados
Tipo do Mapa vs Estado do Mapa vs Estado das Features
‒ Exemplo:
global/markers/shapes : pan/zoombox/selection : featureStates : Atributo
 Estilização baseado no conceito do CSS, onde ”paths” mais específicos tem prioridades
sobre os mais genéricos. Exemplo.
 Cadeia de precedência:
- global
- markers/shapes
- disabled/noneSelected/someSelected/allSelected
- pan/zoombox/selection
- unselected/selected
- normal/hover
- attribute
- calculated attributes based on the result set*
Estilizando o mapa
O estilo pode alterado via preExecution:
this.styleMap = {
markers: {
cursor: "pointer”
}
};

7.  Define o estilo visual do item
‒ Stroke, color, opacity, etc
 Em geral os atributos são padrão SVG.
‒ Openlayers2 atributos.
 Pode ser valor estático
‒ Definido no styleMap
 Pode ser dinâmico, baseado em regras de
negócio
Definindo os atributos dos itens
Atributos dinâmicos podem serem definidos via preExecution:
this.attributeMapping.fill = function(context, seriesRoot, mapping, row) {
var value = row[2];
if ( _.isNumber(value) && value < 25 ) {
return "green";
} else {
return "red";
}
};

8.  Baseado em um paleta de cores.
 Espera-se uma coluna numérica chamada fill no resultSet.
 Permite-se alterar a paleta de cores.
Escala automática de cores
Alterar paleta de cores via preExecution:
this.colormap = [
"[213,238,249]",
"[194,231,246]",
"[175,223,244]",
"[156,216,241]",
"[137,208,239]",
"[117,201,236]",
"[98,193,233]",
"[79,186,231]",
"[60,178,228]",
"[41,171,226]"
];

9.  Definição automática do raio (markers)
 Espera-se uma coluna numérica chamada r no resultSet.
 Tamanho do raio baseado em um range de valores.
Markers com tamanhos dinâmicos
Configurar Min e Max do raio via preExecution:
/*
* Set Min and Max size (pixel) for the markers based on the r values
*/
this.scales.r = [3, 10];

10.  Corretamente indexar os dados no resultset.
‒ id (valores únicos)
‒ fill (escala automática de cores)
‒ r (raio dinâmico)
‒ latitude
‒ longitude
 Mapear os dados acima para colunas de diferente nomes.
Colunas obrigatórias
Redefinir o mapeamento das colunas via preExecution:
this.visualRoles = {
id: 0,
fill: 1,
r: 2,
latitude: 3,
longitude: 4
};
ResultSet:
Cidade – IdadeMedia – RendaMedia – Lat – Lng

11.  Zoom automático
 Popup’s
 Markers com gráficos CGG
 Eventos
 Latitude/Longitude lookup
 Shapefile formats (geoJSON, kml, simpleJSON)
 AddIn’s (LocationResolver, ShapeResolver, MarkerImage)
 Manipular a API*
O que mais podemos fazer ?!?!?!
* Não suportado

12.  CDE Samples: Public / plugin-samples / CDE / Require Samples
/ CDE Reference / NewMapComponent
 Source code
 Comunidade
 NMC-Samples repository (kleysonr @ github)*
Fontes de aprendizado
* Pode haver exemplos com funcionalidades não suportadas

13. DEMO

14. Perguntas ?
Obrigado !
Twitter: @kleysonr
Github: https://github.com/kleysonr
Blog: http://kleysonrios.blogspot.com.br
Comunidade Pentahobr