* default alpha * update heatmap descriptor to use constant * clean-up * use ValidatedRange to ensure alphaValue can not be set to invalid value * fix jest test expect * move alpha to layer property * ensure defaults are set when Layer object is instantiated
This commit is contained in:
parent
2d7fcfe348
commit
98476b5d8d
|
@ -42,7 +42,6 @@ export const UPDATE_LAYER_STYLE_FOR_SELECTED_LAYER = 'UPDATE_LAYER_STYLE';
|
||||||
export const PROMOTE_TEMPORARY_STYLES = 'PROMOTE_TEMPORARY_STYLES';
|
export const PROMOTE_TEMPORARY_STYLES = 'PROMOTE_TEMPORARY_STYLES';
|
||||||
export const CLEAR_TEMPORARY_STYLES = 'CLEAR_TEMPORARY_STYLES';
|
export const CLEAR_TEMPORARY_STYLES = 'CLEAR_TEMPORARY_STYLES';
|
||||||
export const TOUCH_LAYER = 'TOUCH_LAYER';
|
export const TOUCH_LAYER = 'TOUCH_LAYER';
|
||||||
export const UPDATE_LAYER_ALPHA_VALUE = 'UPDATE_LAYER_ALPHA_VALUE';
|
|
||||||
export const UPDATE_SOURCE_PROP = 'UPDATE_SOURCE_PROP';
|
export const UPDATE_SOURCE_PROP = 'UPDATE_SOURCE_PROP';
|
||||||
export const SET_REFRESH_CONFIG = 'SET_REFRESH_CONFIG';
|
export const SET_REFRESH_CONFIG = 'SET_REFRESH_CONFIG';
|
||||||
export const SET_MOUSE_COORDINATES = 'SET_MOUSE_COORDINATES';
|
export const SET_MOUSE_COORDINATES = 'SET_MOUSE_COORDINATES';
|
||||||
|
@ -352,11 +351,12 @@ export function updateLayerMaxZoom(id, maxZoom) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updateLayerAlphaValue(id, newAlphaValue) {
|
export function updateLayerAlpha(id, alpha) {
|
||||||
return {
|
return {
|
||||||
type: UPDATE_LAYER_ALPHA_VALUE,
|
type: UPDATE_LAYER_PROP,
|
||||||
id,
|
id,
|
||||||
newAlphaValue
|
propName: 'alpha',
|
||||||
|
newValue: alpha,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -45,6 +45,7 @@ describe('Saved object does not have layer list', () => {
|
||||||
|
|
||||||
const layers = getInitialLayers(null, dataSources);
|
const layers = getInitialLayers(null, dataSources);
|
||||||
expect(layers).toEqual([{
|
expect(layers).toEqual([{
|
||||||
|
"alpha": 1,
|
||||||
dataRequests: [],
|
dataRequests: [],
|
||||||
id: layers[0].id,
|
id: layers[0].id,
|
||||||
label: null,
|
label: null,
|
||||||
|
@ -56,7 +57,7 @@ describe('Saved object does not have layer list', () => {
|
||||||
url: 'myTileUrl',
|
url: 'myTileUrl',
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
properties: undefined,
|
properties: {},
|
||||||
type: 'TILE',
|
type: 'TILE',
|
||||||
},
|
},
|
||||||
temporary: false,
|
temporary: false,
|
||||||
|
@ -72,6 +73,7 @@ describe('Saved object does not have layer list', () => {
|
||||||
|
|
||||||
const layers = getInitialLayers(null, dataSources);
|
const layers = getInitialLayers(null, dataSources);
|
||||||
expect(layers).toEqual([{
|
expect(layers).toEqual([{
|
||||||
|
"alpha": 1,
|
||||||
dataRequests: [],
|
dataRequests: [],
|
||||||
id: layers[0].id,
|
id: layers[0].id,
|
||||||
label: null,
|
label: null,
|
||||||
|
@ -83,7 +85,7 @@ describe('Saved object does not have layer list', () => {
|
||||||
type: 'EMS_TMS'
|
type: 'EMS_TMS'
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
properties: undefined,
|
properties: {},
|
||||||
type: 'TILE',
|
type: 'TILE',
|
||||||
},
|
},
|
||||||
temporary: false,
|
temporary: false,
|
||||||
|
|
|
@ -7,12 +7,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { LayerPanel } from './view';
|
import { LayerPanel } from './view';
|
||||||
import { getSelectedLayer } from '../../selectors/map_selectors';
|
import { getSelectedLayer } from '../../selectors/map_selectors';
|
||||||
import {
|
|
||||||
updateLayerLabel,
|
|
||||||
updateLayerMaxZoom,
|
|
||||||
updateLayerMinZoom,
|
|
||||||
updateLayerAlphaValue
|
|
||||||
} from '../../actions/store_actions';
|
|
||||||
|
|
||||||
function mapStateToProps(state = {}) {
|
function mapStateToProps(state = {}) {
|
||||||
return {
|
return {
|
||||||
|
@ -20,13 +14,8 @@ function mapStateToProps(state = {}) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function mapDispatchToProps(dispatch) {
|
function mapDispatchToProps(/* dispatch */) {
|
||||||
return {
|
return {};
|
||||||
updateLabel: (id, label) => dispatch(updateLayerLabel(id, label)),
|
|
||||||
updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
|
|
||||||
updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
|
|
||||||
updateAlphaValue: (id, alphaValue) => dispatch(updateLayerAlphaValue(id, alphaValue))
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const connectedLayerPanel = connect(mapStateToProps, mapDispatchToProps)(LayerPanel);
|
const connectedLayerPanel = connect(mapStateToProps, mapDispatchToProps)(LayerPanel);
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import _ from 'lodash';
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { SettingsPanel } from './settings_panel';
|
import { SettingsPanel } from './settings_panel';
|
||||||
import { getSelectedLayer } from '../../../selectors/map_selectors';
|
import { getSelectedLayer } from '../../../selectors/map_selectors';
|
||||||
|
@ -12,19 +11,18 @@ import {
|
||||||
updateLayerLabel,
|
updateLayerLabel,
|
||||||
updateLayerMaxZoom,
|
updateLayerMaxZoom,
|
||||||
updateLayerMinZoom,
|
updateLayerMinZoom,
|
||||||
updateLayerAlphaValue,
|
updateLayerAlpha,
|
||||||
updateSourceProp,
|
updateSourceProp,
|
||||||
} from '../../../actions/store_actions';
|
} from '../../../actions/store_actions';
|
||||||
|
|
||||||
function mapStateToProps(state = {}) {
|
function mapStateToProps(state = {}) {
|
||||||
const selectedLayer = getSelectedLayer(state);
|
const selectedLayer = getSelectedLayer(state);
|
||||||
return {
|
return {
|
||||||
alphaValue: _.get(selectedLayer.getCurrentStyle(), '_descriptor.properties.alphaValue', 1),
|
alpha: selectedLayer.getAlpha(),
|
||||||
label: selectedLayer.getLabel(),
|
label: selectedLayer.getLabel(),
|
||||||
layerId: selectedLayer.getId(),
|
layerId: selectedLayer.getId(),
|
||||||
maxZoom: selectedLayer.getMaxZoom(),
|
maxZoom: selectedLayer.getMaxZoom(),
|
||||||
minZoom: selectedLayer.getMinZoom(),
|
minZoom: selectedLayer.getMinZoom(),
|
||||||
alphaValue: _.get(selectedLayer.getCurrentStyle(), '_descriptor.properties.alphaValue', 1),
|
|
||||||
renderSourceDetails: selectedLayer.renderSourceDetails,
|
renderSourceDetails: selectedLayer.renderSourceDetails,
|
||||||
renderSourceSettingsEditor: selectedLayer.renderSourceSettingsEditor,
|
renderSourceSettingsEditor: selectedLayer.renderSourceSettingsEditor,
|
||||||
};
|
};
|
||||||
|
@ -35,7 +33,7 @@ function mapDispatchToProps(dispatch) {
|
||||||
updateLabel: (id, label) => dispatch(updateLayerLabel(id, label)),
|
updateLabel: (id, label) => dispatch(updateLayerLabel(id, label)),
|
||||||
updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
|
updateMinZoom: (id, minZoom) => dispatch(updateLayerMinZoom(id, minZoom)),
|
||||||
updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
|
updateMaxZoom: (id, maxZoom) => dispatch(updateLayerMaxZoom(id, maxZoom)),
|
||||||
updateAlphaValue: (id, alphaValue) => dispatch(updateLayerAlphaValue(id, alphaValue)),
|
updateAlpha: (id, alpha) => dispatch(updateLayerAlpha(id, alpha)),
|
||||||
updateSourceProp: (id, propName, value) => dispatch(updateSourceProp(id, propName, value)),
|
updateSourceProp: (id, propName, value) => dispatch(updateSourceProp(id, propName, value)),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@ import {
|
||||||
EuiSpacer,
|
EuiSpacer,
|
||||||
EuiLink,
|
EuiLink,
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
|
import { ValidatedRange } from '../../../shared/components/validated_range';
|
||||||
|
|
||||||
export class SettingsPanel extends Component {
|
export class SettingsPanel extends Component {
|
||||||
|
|
||||||
|
@ -45,10 +46,8 @@ export class SettingsPanel extends Component {
|
||||||
this.props.updateMaxZoom(this.props.layerId, zoom);
|
this.props.updateMaxZoom(this.props.layerId, zoom);
|
||||||
}
|
}
|
||||||
|
|
||||||
onAlphaValueChange = (event) => {
|
onAlphaChange = (alpha) => {
|
||||||
const sanitizedValue = parseFloat(event.target.value);
|
this.props.updateAlpha(this.props.layerId, alpha);
|
||||||
const alphaValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
|
|
||||||
this.props.updateAlphaValue(this.props.layerId, alphaValue);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onSourceChange = ({ propName, value }) => {
|
onSourceChange = ({ propName, value }) => {
|
||||||
|
@ -113,12 +112,12 @@ export class SettingsPanel extends Component {
|
||||||
label="Layer transparency"
|
label="Layer transparency"
|
||||||
>
|
>
|
||||||
<div className="gisAlphaRange">
|
<div className="gisAlphaRange">
|
||||||
<EuiRange
|
<ValidatedRange
|
||||||
min={.00}
|
min={.00}
|
||||||
max={1.00}
|
max={1.00}
|
||||||
step={.05}
|
step={.05}
|
||||||
value={this.props.alphaValue.toString()} // EuiRange value must be string
|
value={this.props.alpha}
|
||||||
onChange={this.onAlphaValueChange}
|
onChange={this.onAlphaChange}
|
||||||
showLabels
|
showLabels
|
||||||
showInput
|
showInput
|
||||||
showRange
|
showRange
|
||||||
|
|
|
@ -35,7 +35,7 @@ export class ValidatedRange extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
_onRangeChange = (e) => {
|
_onRangeChange = (e) => {
|
||||||
const sanitizedValue = parseInt(e.target.value, 10);
|
const sanitizedValue = parseFloat(e.target.value, 10);
|
||||||
let newValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
|
let newValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
|
||||||
// work around for https://github.com/elastic/eui/issues/1458
|
// work around for https://github.com/elastic/eui/issues/1458
|
||||||
// TODO remove once above EUI issue is resolved
|
// TODO remove once above EUI issue is resolved
|
||||||
|
@ -56,11 +56,19 @@ export class ValidatedRange extends React.Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const {
|
||||||
|
max,
|
||||||
|
min,
|
||||||
|
value, // eslint-disable-line no-unused-vars
|
||||||
|
onChange, // eslint-disable-line no-unused-vars
|
||||||
|
...rest
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
let errorMessage;
|
let errorMessage;
|
||||||
if (!this.state.isValid) {
|
if (!this.state.isValid) {
|
||||||
errorMessage = (
|
errorMessage = (
|
||||||
<EuiFormErrorText>
|
<EuiFormErrorText>
|
||||||
{`Must be between ${this.props.min} and ${this.props.max}`}
|
{`Must be between ${min} and ${max}`}
|
||||||
</EuiFormErrorText>
|
</EuiFormErrorText>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -68,12 +76,11 @@ export class ValidatedRange extends React.Component {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<EuiRange
|
<EuiRange
|
||||||
min={this.props.min}
|
min={min}
|
||||||
max={this.props.max}
|
max={max}
|
||||||
value={this.state.value.toString()}
|
value={this.state.value.toString()}
|
||||||
onChange={this._onRangeChange}
|
onChange={this._onRangeChange}
|
||||||
showInput
|
{...rest}
|
||||||
showRange
|
|
||||||
/>
|
/>
|
||||||
{errorMessage}
|
{errorMessage}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|
|
@ -88,7 +88,12 @@ export class HeatmapLayer extends ALayer {
|
||||||
}
|
}
|
||||||
|
|
||||||
mbMap.setLayoutProperty(heatmapLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
mbMap.setLayoutProperty(heatmapLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
||||||
this._style.setMBPaintProperties(mbMap, heatmapLayerId, SCALED_PROPERTY_NAME);
|
this._style.setMBPaintProperties({
|
||||||
|
mbMap,
|
||||||
|
layerId: heatmapLayerId,
|
||||||
|
propertyName: SCALED_PROPERTY_NAME,
|
||||||
|
alpha: this.getAlpha(),
|
||||||
|
});
|
||||||
mbMap.setLayerZoomRange(heatmapLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
mbMap.setLayerZoomRange(heatmapLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,7 @@ const NO_SOURCE_UPDATE_REQUIRED = false;
|
||||||
export class ALayer {
|
export class ALayer {
|
||||||
|
|
||||||
constructor({ layerDescriptor, source, style }) {
|
constructor({ layerDescriptor, source, style }) {
|
||||||
this._descriptor = layerDescriptor;
|
this._descriptor = ALayer.createDescriptor(layerDescriptor);
|
||||||
this._source = source;
|
this._source = source;
|
||||||
this._style = style;
|
this._style = style;
|
||||||
|
|
||||||
|
@ -30,16 +30,15 @@ export class ALayer {
|
||||||
return mbStyle.sources[sourceId].data;
|
return mbStyle.sources[sourceId].data;
|
||||||
}
|
}
|
||||||
|
|
||||||
static createDescriptor(options) {
|
static createDescriptor(options = {}) {
|
||||||
const layerDescriptor = {};
|
const layerDescriptor = { ...options };
|
||||||
|
|
||||||
layerDescriptor.dataRequests = [];
|
layerDescriptor.dataRequests = _.get(options, 'dataRequests', []);
|
||||||
layerDescriptor.id = Math.random().toString(36).substr(2, 5);
|
layerDescriptor.id = _.get(options, 'id', Math.random().toString(36).substr(2, 5));
|
||||||
layerDescriptor.label = options.label && options.label.length > 0 ? options.label : null;
|
layerDescriptor.label = options.label && options.label.length > 0 ? options.label : null;
|
||||||
layerDescriptor.minZoom = _.get(options, 'minZoom', 0);
|
layerDescriptor.minZoom = _.get(options, 'minZoom', 0);
|
||||||
layerDescriptor.maxZoom = _.get(options, 'maxZoom', 24);
|
layerDescriptor.maxZoom = _.get(options, 'maxZoom', 24);
|
||||||
layerDescriptor.source = options.source;
|
layerDescriptor.alpha = _.get(options, 'alpha', 0.75);
|
||||||
layerDescriptor.sourceDescriptor = options.sourceDescriptor;
|
|
||||||
layerDescriptor.visible = options.visible || true;
|
layerDescriptor.visible = options.visible || true;
|
||||||
layerDescriptor.temporary = options.temporary || false;
|
layerDescriptor.temporary = options.temporary || false;
|
||||||
layerDescriptor.style = options.style || {};
|
layerDescriptor.style = options.style || {};
|
||||||
|
@ -109,6 +108,10 @@ export class ALayer {
|
||||||
return this._descriptor.maxZoom;
|
return this._descriptor.maxZoom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getAlpha() {
|
||||||
|
return this._descriptor.alpha;
|
||||||
|
}
|
||||||
|
|
||||||
getZoomConfig() {
|
getZoomConfig() {
|
||||||
return {
|
return {
|
||||||
minZoom: this._descriptor.minZoom,
|
minZoom: this._descriptor.minZoom,
|
||||||
|
|
|
@ -301,12 +301,9 @@ export class ESGeohashGridSource extends VectorSource {
|
||||||
sourceDescriptor: this._descriptor,
|
sourceDescriptor: this._descriptor,
|
||||||
...options
|
...options
|
||||||
});
|
});
|
||||||
descriptor.style = {
|
descriptor.style = VectorStyle.createDescriptor({
|
||||||
...descriptor.style,
|
|
||||||
type: 'VECTOR',
|
|
||||||
properties: {
|
|
||||||
fillColor: {
|
fillColor: {
|
||||||
type: 'DYNAMIC',
|
type: VectorStyle.STYLE_TYPE.DYNAMIC,
|
||||||
options: {
|
options: {
|
||||||
field: {
|
field: {
|
||||||
label: COUNT_PROP_LABEL,
|
label: COUNT_PROP_LABEL,
|
||||||
|
@ -316,20 +313,8 @@ export class ESGeohashGridSource extends VectorSource {
|
||||||
color: 'Blues'
|
color: 'Blues'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lineColor: {
|
|
||||||
type: 'STATIC',
|
|
||||||
options: {
|
|
||||||
color: '#cccccc'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineWidth: {
|
|
||||||
type: 'STATIC',
|
|
||||||
options: {
|
|
||||||
size: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
iconSize: {
|
iconSize: {
|
||||||
type: 'DYNAMIC',
|
type: VectorStyle.STYLE_TYPE.DYNAMIC,
|
||||||
options: {
|
options: {
|
||||||
field: {
|
field: {
|
||||||
label: COUNT_PROP_LABEL,
|
label: COUNT_PROP_LABEL,
|
||||||
|
@ -339,10 +324,8 @@ export class ESGeohashGridSource extends VectorSource {
|
||||||
minSize: 4,
|
minSize: 4,
|
||||||
maxSize: 32,
|
maxSize: 32,
|
||||||
}
|
}
|
||||||
},
|
|
||||||
alphaValue: 1
|
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
return descriptor;
|
return descriptor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,6 +43,8 @@ export function SizeRangeSelector({ minSize, maxSize, onChange }) {
|
||||||
max={DEFAULT_MAX_SIZE}
|
max={DEFAULT_MAX_SIZE}
|
||||||
value={minSize}
|
value={minSize}
|
||||||
onChange={onMinSizeChange}
|
onChange={onMinSizeChange}
|
||||||
|
showInput
|
||||||
|
showRange
|
||||||
/>
|
/>
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
@ -56,6 +58,8 @@ export function SizeRangeSelector({ minSize, maxSize, onChange }) {
|
||||||
max={DEFAULT_MAX_SIZE}
|
max={DEFAULT_MAX_SIZE}
|
||||||
value={maxSize}
|
value={maxSize}
|
||||||
onChange={onMaxSizeChange}
|
onChange={onMaxSizeChange}
|
||||||
|
showInput
|
||||||
|
showRange
|
||||||
/>
|
/>
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
|
|
@ -20,6 +20,8 @@ export function StaticSizeSelection({ onChange, styleOptions }) {
|
||||||
max={100}
|
max={100}
|
||||||
value={styleOptions.size}
|
value={styleOptions.size}
|
||||||
onChange={onSizeChange}
|
onChange={onSizeChange}
|
||||||
|
showInput
|
||||||
|
showRange
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,20 +14,23 @@ export class HeatmapStyle {
|
||||||
|
|
||||||
static type = 'HEATMAP';
|
static type = 'HEATMAP';
|
||||||
|
|
||||||
constructor(styleDescriptor) {
|
constructor(styleDescriptor = {}) {
|
||||||
this._descriptor = styleDescriptor;
|
this._descriptor = HeatmapStyle.createDescriptor(
|
||||||
|
styleDescriptor.refinement,
|
||||||
|
styleDescriptor.properties
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
static canEdit(styleInstance) {
|
static canEdit(styleInstance) {
|
||||||
return styleInstance.constructor === HeatmapStyle;
|
return styleInstance.constructor === HeatmapStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
static createDescriptor(refinement) {
|
static createDescriptor(refinement, properties = {}) {
|
||||||
return {
|
return {
|
||||||
type: HeatmapStyle.type,
|
type: HeatmapStyle.type,
|
||||||
refinement: refinement || 'coarse',
|
refinement: refinement || 'coarse',
|
||||||
properties: {
|
properties: {
|
||||||
alphaValue: 1
|
...properties
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -47,15 +50,8 @@ export class HeatmapStyle {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_getMBOpacity() {
|
setMBPaintProperties({ alpha, mbMap, layerId, propertyName }) {
|
||||||
const DEFAULT_OPACITY = 1;
|
|
||||||
return typeof this._descriptor.properties.alphaValue === 'number' ? this._descriptor.properties.alphaValue : DEFAULT_OPACITY;
|
|
||||||
}
|
|
||||||
|
|
||||||
setMBPaintProperties(mbMap, pointLayerID, property) {
|
|
||||||
|
|
||||||
let radius;
|
let radius;
|
||||||
const opacity = this._getMBOpacity();
|
|
||||||
if (this._descriptor.refinement === 'coarse') {
|
if (this._descriptor.refinement === 'coarse') {
|
||||||
radius = 64;
|
radius = 64;
|
||||||
} else if (this._descriptor.refinement === 'fine') {
|
} else if (this._descriptor.refinement === 'fine') {
|
||||||
|
@ -65,12 +61,12 @@ export class HeatmapStyle {
|
||||||
} else {
|
} else {
|
||||||
throw new Error(`Refinement param not recognized: ${this._descriptor.refinement}`);
|
throw new Error(`Refinement param not recognized: ${this._descriptor.refinement}`);
|
||||||
}
|
}
|
||||||
mbMap.setPaintProperty(pointLayerID, 'heatmap-radius', radius);
|
mbMap.setPaintProperty(layerId, 'heatmap-radius', radius);
|
||||||
mbMap.setPaintProperty(pointLayerID, 'heatmap-weight', {
|
mbMap.setPaintProperty(layerId, 'heatmap-weight', {
|
||||||
"type": 'identity',
|
type: 'identity',
|
||||||
"property": property
|
property: propertyName
|
||||||
});
|
});
|
||||||
mbMap.setPaintProperty(pointLayerID, 'heatmap-opacity', opacity);
|
mbMap.setPaintProperty(layerId, 'heatmap-opacity', alpha);
|
||||||
}
|
}
|
||||||
|
|
||||||
getRefinement() {
|
getRefinement() {
|
||||||
|
|
|
@ -8,18 +8,20 @@ export class TileStyle {
|
||||||
|
|
||||||
static type = 'TILE';
|
static type = 'TILE';
|
||||||
|
|
||||||
constructor(styleDescriptor) {
|
constructor(styleDescriptor = {}) {
|
||||||
this._descriptor = styleDescriptor;
|
this._descriptor = TileStyle.createDescriptor(styleDescriptor.properties);
|
||||||
}
|
}
|
||||||
|
|
||||||
static canEdit(styleInstance) {
|
static canEdit(styleInstance) {
|
||||||
return styleInstance.constructor === TileStyle;
|
return styleInstance.constructor === TileStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
static createDescriptor(properties) {
|
static createDescriptor(properties = {}) {
|
||||||
return {
|
return {
|
||||||
type: TileStyle.type,
|
type: TileStyle.type,
|
||||||
properties
|
properties: {
|
||||||
|
...properties,
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,13 +29,7 @@ export class TileStyle {
|
||||||
return 'Tile style';
|
return 'Tile style';
|
||||||
}
|
}
|
||||||
|
|
||||||
_getMBOpacity() {
|
setMBPaintProperties({ alpha, mbMap, layerId }) {
|
||||||
const DEFAULT_OPACITY = 1;
|
mbMap.setPaintProperty(layerId, 'raster-opacity', alpha);
|
||||||
return typeof this._descriptor.properties.alphaValue === 'number' ? this._descriptor.properties.alphaValue : DEFAULT_OPACITY;
|
|
||||||
}
|
|
||||||
|
|
||||||
setMBPaintProperties(mbMap, tileLayerID) {
|
|
||||||
const opacity = this._getMBOpacity();
|
|
||||||
mbMap.setPaintProperty(tileLayerID, 'raster-opacity', opacity);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ import { FillableCircle, FillableVector } from '../../icons/additional_layer_ico
|
||||||
import { ColorGradient } from '../../icons/color_gradient';
|
import { ColorGradient } from '../../icons/color_gradient';
|
||||||
import { getHexColorRangeStrings } from '../../utils/color_utils';
|
import { getHexColorRangeStrings } from '../../utils/color_utils';
|
||||||
import { VectorStyleEditor } from './components/vector/vector_style_editor';
|
import { VectorStyleEditor } from './components/vector/vector_style_editor';
|
||||||
import { DEFAULT_ALPHA_VALUE, getDefaultStaticProperties } from './vector_style_defaults';
|
import { getDefaultStaticProperties } from './vector_style_defaults';
|
||||||
|
|
||||||
export class VectorStyle {
|
export class VectorStyle {
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ export class VectorStyle {
|
||||||
return `__kbn__scaled(${fieldName})`;
|
return `__kbn__scaled(${fieldName})`;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(descriptor) {
|
constructor(descriptor = {}) {
|
||||||
this._descriptor = VectorStyle.createDescriptor(descriptor.properties);
|
this._descriptor = VectorStyle.createDescriptor(descriptor.properties);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,11 +30,10 @@ export class VectorStyle {
|
||||||
return styleInstance.constructor === VectorStyle;
|
return styleInstance.constructor === VectorStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
static createDescriptor(properties) {
|
static createDescriptor(properties = {}) {
|
||||||
const defaultStyleProperties = getDefaultStaticProperties();
|
|
||||||
return {
|
return {
|
||||||
type: VectorStyle.type,
|
type: VectorStyle.type,
|
||||||
properties: { ...defaultStyleProperties, ...properties }
|
properties: { ...getDefaultStaticProperties(), ...properties }
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -259,10 +258,6 @@ export class VectorStyle {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
_getMBOpacity() {
|
|
||||||
return _.get(this._descriptor.properties, 'alphaValue', DEFAULT_ALPHA_VALUE);
|
|
||||||
}
|
|
||||||
|
|
||||||
_getMbSize(styleDescriptor) {
|
_getMbSize(styleDescriptor) {
|
||||||
if (styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC) {
|
if (styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC) {
|
||||||
return styleDescriptor.options.size;
|
return styleDescriptor.options.size;
|
||||||
|
@ -282,13 +277,11 @@ export class VectorStyle {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
setMBPaintProperties(mbMap, sourceId, fillLayerId, lineLayerId) {
|
setMBPaintProperties({ alpha, mbMap, fillLayerId, lineLayerId }) {
|
||||||
const opacity = this._getMBOpacity();
|
|
||||||
|
|
||||||
if (this._descriptor.properties.fillColor) {
|
if (this._descriptor.properties.fillColor) {
|
||||||
const color = this._getMBColor(this._descriptor.properties.fillColor);
|
const color = this._getMBColor(this._descriptor.properties.fillColor);
|
||||||
mbMap.setPaintProperty(fillLayerId, 'fill-color', color);
|
mbMap.setPaintProperty(fillLayerId, 'fill-color', color);
|
||||||
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', opacity);
|
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', alpha);
|
||||||
} else {
|
} else {
|
||||||
mbMap.setPaintProperty(fillLayerId, 'fill-color', null);
|
mbMap.setPaintProperty(fillLayerId, 'fill-color', null);
|
||||||
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', 0);
|
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', 0);
|
||||||
|
@ -297,7 +290,7 @@ export class VectorStyle {
|
||||||
if (this._descriptor.properties.lineColor) {
|
if (this._descriptor.properties.lineColor) {
|
||||||
const color = this._getMBColor(this._descriptor.properties.lineColor);
|
const color = this._getMBColor(this._descriptor.properties.lineColor);
|
||||||
mbMap.setPaintProperty(lineLayerId, 'line-color', color);
|
mbMap.setPaintProperty(lineLayerId, 'line-color', color);
|
||||||
mbMap.setPaintProperty(lineLayerId, 'line-opacity', opacity);
|
mbMap.setPaintProperty(lineLayerId, 'line-opacity', alpha);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
mbMap.setPaintProperty(lineLayerId, 'line-color', null);
|
mbMap.setPaintProperty(lineLayerId, 'line-color', null);
|
||||||
|
@ -312,12 +305,11 @@ export class VectorStyle {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setMBPaintPropertiesForPoints(mbMap, sourceId, pointLayerId) {
|
setMBPaintPropertiesForPoints({ alpha, mbMap, pointLayerId }) {
|
||||||
const opacity = this._getMBOpacity();
|
|
||||||
if (this._descriptor.properties.fillColor) {
|
if (this._descriptor.properties.fillColor) {
|
||||||
const color = this._getMBColor(this._descriptor.properties.fillColor);
|
const color = this._getMBColor(this._descriptor.properties.fillColor);
|
||||||
mbMap.setPaintProperty(pointLayerId, 'circle-color', color);
|
mbMap.setPaintProperty(pointLayerId, 'circle-color', color);
|
||||||
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', opacity);
|
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', alpha);
|
||||||
} else {
|
} else {
|
||||||
mbMap.setPaintProperty(pointLayerId, 'circle-color', null);
|
mbMap.setPaintProperty(pointLayerId, 'circle-color', null);
|
||||||
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', 0);
|
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', 0);
|
||||||
|
@ -325,7 +317,7 @@ export class VectorStyle {
|
||||||
if (this._descriptor.properties.lineColor) {
|
if (this._descriptor.properties.lineColor) {
|
||||||
const color = this._getMBColor(this._descriptor.properties.lineColor);
|
const color = this._getMBColor(this._descriptor.properties.lineColor);
|
||||||
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color);
|
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color);
|
||||||
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', opacity);
|
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', null);
|
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', null);
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { VectorStyle } from './vector_style';
|
||||||
import { COLOR_GRADIENTS } from './components/vector/color/color_ramp_select';
|
import { COLOR_GRADIENTS } from './components/vector/color/color_ramp_select';
|
||||||
|
|
||||||
const DEFAULT_COLORS = ['#e6194b', '#3cb44b', '#ffe119', '#f58231', '#911eb4'];
|
const DEFAULT_COLORS = ['#e6194b', '#3cb44b', '#ffe119', '#f58231', '#911eb4'];
|
||||||
export const DEFAULT_ALPHA_VALUE = 1;
|
|
||||||
export const DEFAULT_MIN_SIZE = 1;
|
export const DEFAULT_MIN_SIZE = 1;
|
||||||
export const DEFAULT_MAX_SIZE = 64;
|
export const DEFAULT_MAX_SIZE = 64;
|
||||||
|
|
||||||
|
@ -43,7 +43,6 @@ export function getDefaultStaticProperties(mapColors = []) {
|
||||||
size: 10
|
size: 10
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
alphaValue: DEFAULT_ALPHA_VALUE
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -75,6 +74,5 @@ export function getDefaultDynamicProperties() {
|
||||||
maxSize: DEFAULT_MAX_SIZE
|
maxSize: DEFAULT_MAX_SIZE
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
alphaValue: DEFAULT_ALPHA_VALUE
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,11 +4,11 @@
|
||||||
* you may not use this file except in compliance with the Elastic License.
|
* you may not use this file except in compliance with the Elastic License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import _ from 'lodash';
|
||||||
import { ALayer } from './layer';
|
import { ALayer } from './layer';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { EuiIcon } from '@elastic/eui';
|
import { EuiIcon } from '@elastic/eui';
|
||||||
import { TileStyle } from '../layers/styles/tile_style';
|
import { TileStyle } from '../layers/styles/tile_style';
|
||||||
import _ from 'lodash';
|
|
||||||
|
|
||||||
export class TileLayer extends ALayer {
|
export class TileLayer extends ALayer {
|
||||||
|
|
||||||
|
@ -16,17 +16,15 @@ export class TileLayer extends ALayer {
|
||||||
|
|
||||||
constructor({ layerDescriptor, source, style }) {
|
constructor({ layerDescriptor, source, style }) {
|
||||||
super({ layerDescriptor, source, style });
|
super({ layerDescriptor, source, style });
|
||||||
if (!style || !_.get(style, '_descriptor.properties.alphaValue')) {
|
if (!style) {
|
||||||
const defaultStyle = TileStyle.createDescriptor({
|
this._style = new TileStyle();
|
||||||
alphaValue: 1
|
|
||||||
});
|
|
||||||
this._style = new TileStyle(defaultStyle);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static createDescriptor(options) {
|
static createDescriptor(options) {
|
||||||
const tileLayerDescriptor = super.createDescriptor(options);
|
const tileLayerDescriptor = super.createDescriptor(options);
|
||||||
tileLayerDescriptor.type = TileLayer.type;
|
tileLayerDescriptor.type = TileLayer.type;
|
||||||
|
tileLayerDescriptor.alpha = _.get(options, 'alpha', 1);
|
||||||
tileLayerDescriptor.style =
|
tileLayerDescriptor.style =
|
||||||
TileStyle.createDescriptor(tileLayerDescriptor.style.properties);
|
TileStyle.createDescriptor(tileLayerDescriptor.style.properties);
|
||||||
return tileLayerDescriptor;
|
return tileLayerDescriptor;
|
||||||
|
@ -57,7 +55,11 @@ export class TileLayer extends ALayer {
|
||||||
|
|
||||||
mbMap.setLayoutProperty(layerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
mbMap.setLayoutProperty(layerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
||||||
mbMap.setLayerZoomRange(layerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
mbMap.setLayerZoomRange(layerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
||||||
this._style && this._style.setMBPaintProperties(mbMap, layerId);
|
this._style && this._style.setMBPaintProperties({
|
||||||
|
alpha: this.getAlpha(),
|
||||||
|
mbMap,
|
||||||
|
layerId,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getIcon() {
|
getIcon() {
|
||||||
|
|
|
@ -397,13 +397,17 @@ export class VectorLayer extends ALayer {
|
||||||
});
|
});
|
||||||
mbMap.setFilter(pointLayerId, ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]);
|
mbMap.setFilter(pointLayerId, ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]);
|
||||||
}
|
}
|
||||||
this._style.setMBPaintPropertiesForPoints(mbMap, this.getId(), pointLayerId);
|
this._style.setMBPaintPropertiesForPoints({
|
||||||
|
alpha: this.getAlpha(),
|
||||||
|
mbMap,
|
||||||
|
pointLayerId: pointLayerId,
|
||||||
|
});
|
||||||
mbMap.setLayoutProperty(pointLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
mbMap.setLayoutProperty(pointLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
||||||
mbMap.setLayerZoomRange(pointLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
mbMap.setLayerZoomRange(pointLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
||||||
this._addTooltipListeners(mbMap, pointLayerId);
|
this._addTooltipListeners(mbMap, pointLayerId);
|
||||||
}
|
}
|
||||||
|
|
||||||
_setMbLinePolygonProeprties(mbMap) {
|
_setMbLinePolygonProperties(mbMap) {
|
||||||
const sourceId = this.getId();
|
const sourceId = this.getId();
|
||||||
const fillLayerId = this.getId() + '_fill';
|
const fillLayerId = this.getId() + '_fill';
|
||||||
const lineLayerId = this.getId() + '_line';
|
const lineLayerId = this.getId() + '_line';
|
||||||
|
@ -437,7 +441,12 @@ export class VectorLayer extends ALayer {
|
||||||
['==', ['geometry-type'], 'MultiLineString']
|
['==', ['geometry-type'], 'MultiLineString']
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
this._style.setMBPaintProperties(mbMap, this.getId(), fillLayerId, lineLayerId, this.isTemporary());
|
this._style.setMBPaintProperties({
|
||||||
|
alpha: this.getAlpha(),
|
||||||
|
mbMap,
|
||||||
|
fillLayerId,
|
||||||
|
lineLayerId,
|
||||||
|
});
|
||||||
mbMap.setLayoutProperty(fillLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
mbMap.setLayoutProperty(fillLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
||||||
mbMap.setLayoutProperty(lineLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
mbMap.setLayoutProperty(lineLayerId, 'visibility', this.isVisible() ? 'visible' : 'none');
|
||||||
mbMap.setLayerZoomRange(lineLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
mbMap.setLayerZoomRange(lineLayerId, this._descriptor.minZoom, this._descriptor.maxZoom);
|
||||||
|
@ -447,7 +456,7 @@ export class VectorLayer extends ALayer {
|
||||||
|
|
||||||
_syncStylePropertiesWithMb(mbMap) {
|
_syncStylePropertiesWithMb(mbMap) {
|
||||||
this._setMbPointsProperties(mbMap);
|
this._setMbPointsProperties(mbMap);
|
||||||
this._setMbLinePolygonProeprties(mbMap);
|
this._setMbLinePolygonProperties(mbMap);
|
||||||
}
|
}
|
||||||
|
|
||||||
_syncSourceBindingWithMb(mbMap) {
|
_syncSourceBindingWithMb(mbMap) {
|
||||||
|
|
|
@ -27,7 +27,6 @@ import {
|
||||||
CLEAR_TEMPORARY_STYLES,
|
CLEAR_TEMPORARY_STYLES,
|
||||||
SET_JOINS,
|
SET_JOINS,
|
||||||
TOUCH_LAYER,
|
TOUCH_LAYER,
|
||||||
UPDATE_LAYER_ALPHA_VALUE,
|
|
||||||
UPDATE_SOURCE_PROP,
|
UPDATE_SOURCE_PROP,
|
||||||
SET_REFRESH_CONFIG,
|
SET_REFRESH_CONFIG,
|
||||||
TRIGGER_REFRESH_TIMER,
|
TRIGGER_REFRESH_TIMER,
|
||||||
|
@ -192,13 +191,6 @@ export function map(state = INITIAL_STATE, action) {
|
||||||
return { ...state, selectedLayerId: match ? action.selectedLayerId : null };
|
return { ...state, selectedLayerId: match ? action.selectedLayerId : null };
|
||||||
case UPDATE_LAYER_ORDER:
|
case UPDATE_LAYER_ORDER:
|
||||||
return { ...state, layerList: action.newLayerOrder.map(layerNumber => state.layerList[layerNumber]) };
|
return { ...state, layerList: action.newLayerOrder.map(layerNumber => state.layerList[layerNumber]) };
|
||||||
case UPDATE_LAYER_ALPHA_VALUE:
|
|
||||||
const alphaLayer = state.layerList.find(layer => layer.id === action.id);
|
|
||||||
const preAlphaStyle = alphaLayer.style;
|
|
||||||
return updateLayerInList(state, action.id, 'style',
|
|
||||||
{ ...preAlphaStyle, properties: { ...preAlphaStyle.properties,
|
|
||||||
alphaValue: action.newAlphaValue }
|
|
||||||
});
|
|
||||||
case UPDATE_LAYER_PROP:
|
case UPDATE_LAYER_PROP:
|
||||||
return updateLayerInList(state, action.id, action.propName, action.newValue);
|
return updateLayerInList(state, action.id, action.propName, action.newValue);
|
||||||
case UPDATE_SOURCE_PROP:
|
case UPDATE_SOURCE_PROP:
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
"title" : "[Logs] Web Traffic",
|
"title" : "[Logs] Web Traffic",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"mapStateJSON" : "{\"zoom\":3.92,\"center\":{\"lon\":-83.95443,\"lat\":38.02463},\"timeFilters\":{\"from\":\"now-7d\",\"to\":\"now\"}}",
|
"mapStateJSON" : "{\"zoom\":3.92,\"center\":{\"lon\":-83.95443,\"lat\":38.02463},\"timeFilters\":{\"from\":\"now-7d\",\"to\":\"now\"}}",
|
||||||
"layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{\"alphaValue\":1}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"ajk2l\",\"label\":\"logs(heatmap)\",\"minZoom\":0,\"maxZoom\":9,\"sourceDescriptor\":{\"type\":\"ES_GEOHASH_GRID\",\"id\":\"60c5dffb-7fca-431c-b1f0-9cc2e6697e8c\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"HEATMAP\"},{\"id\":\"6hgh2\",\"label\":\"logs(documents)\",\"minZoom\":7,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"541f2ca1-6a0f-4937-8846-a589222b7f28\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[\"timestamp\",\"clientip\",\"url\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}},\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
|
"layerListJSON" : "[{\"id\":\"0hmz5\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{\"alphaValue\":1}},\"type\":\"TILE\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":24},{\"id\":\"ajk2l\",\"label\":\"logs(heatmap)\",\"alpha\":1,\"minZoom\":0,\"maxZoom\":9,\"sourceDescriptor\":{\"type\":\"ES_GEOHASH_GRID\",\"id\":\"60c5dffb-7fca-431c-b1f0-9cc2e6697e8c\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"requestType\":\"heatmap\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"HEATMAP\",\"refinement\":\"coarse\",\"properties\":{\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"HEATMAP\"},{\"id\":\"6hgh2\",\"label\":\"logs(documents)\",\"alpha\":1,\"minZoom\":7,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"541f2ca1-6a0f-4937-8846-a589222b7f28\",\"type\":\"ES_SEARCH\",\"indexPatternId\":\"90943e30-9a47-11e8-b64d-95841ca0b247\",\"geoField\":\"geo.coordinates\",\"limit\":2048,\"filterByMapBounds\":true,\"showTooltip\":true,\"tooltipProperties\":[\"timestamp\",\"clientip\",\"url\"]},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#e6194b\"}},\"lineColor\":{\"type\":\"STATIC\",\"options\":{\"color\":\"#FFFFFF\"}},\"lineWidth\":{\"type\":\"STATIC\",\"options\":{\"size\":1}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}},\"alphaValue\":0.75},\"previousStyle\":null},\"type\":\"VECTOR\"}]",
|
||||||
"uiStateJSON" : "{\"isDarkMode\":false}",
|
"uiStateJSON" : "{\"isDarkMode\":false}",
|
||||||
"bounds" : {
|
"bounds" : {
|
||||||
"type" : "envelope",
|
"type" : "envelope",
|
||||||
|
|
Loading…
Reference in a new issue