diff --git a/x-pack/plugins/maps/common/descriptor_types/source_descriptor_types.ts b/x-pack/plugins/maps/common/descriptor_types/source_descriptor_types.ts index 400b6a41ead717..7de80eba480f53 100644 --- a/x-pack/plugins/maps/common/descriptor_types/source_descriptor_types.ts +++ b/x-pack/plugins/maps/common/descriptor_types/source_descriptor_types.ts @@ -134,3 +134,15 @@ export type GeojsonFileSourceDescriptor = { name: string; type: string; }; + +export type TileJsonVectorSourceSettings = { + url: string; + layerName: string; + minSourceZoom: number; + maxSourceZoom: number; +}; + +export type TileJsonVectorSourceDescriptor = AbstractSourceDescriptor & + TileJsonVectorSourceSettings & { + tooltipProperties?: string[]; + }; diff --git a/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts b/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts index 35bf08355e4c36..5af37e818fcac6 100644 --- a/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts +++ b/x-pack/plugins/maps/public/classes/fields/tilejson_field.ts @@ -8,8 +8,9 @@ import { AbstractField, IField } from './field'; import { FIELD_ORIGIN } from '../../../common/constants'; import { IVectorSource } from '../sources/vector_source'; import { TileJsonSource } from '../sources/tilejson_source/tilejson_source'; +import { MVTField } from './mvt_field'; -export class TileJsonField extends AbstractField implements IField { +export class TileJsonField extends MVTField implements IField { private readonly _source: TileJsonSource; constructor({ fieldName, diff --git a/x-pack/plugins/maps/public/classes/layers/mvt_wizard/tilejson_manual_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/mvt_wizard/tilejson_manual_wizard.tsx index 9aa462a5dfc5d3..c9d3ad078ab75c 100644 --- a/x-pack/plugins/maps/public/classes/layers/mvt_wizard/tilejson_manual_wizard.tsx +++ b/x-pack/plugins/maps/public/classes/layers/mvt_wizard/tilejson_manual_wizard.tsx @@ -7,7 +7,11 @@ import React, { Component } from 'react'; import { EuiSwitch, EuiPanel, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { TiledSingleLayerVectorSourceSettings } from '../../../../common/descriptor_types'; +import { + TiledSingleLayerVectorSourceSettings, + TileJsonVectorSourceDescriptor, + TileJsonVectorSourceSettings, +} from '../../../../common/descriptor_types'; import { MVTSingleLayerVectorSource } from '../../sources/mvt_single_layer_vector_source'; import { TiledVectorLayer } from '../tiled_vector_layer/tiled_vector_layer'; import { MVTSingleLayerVectorSourceEditor } from '../../sources/mvt_single_layer_vector_source/mvt_single_layer_vector_source_editor'; diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx index 2d208d5b8f3516..6bb51f148c45e7 100644 --- a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx +++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source.tsx @@ -12,10 +12,7 @@ import { ImmutableSourceProperty, SourceEditorArgs } from '../source'; import { FIELD_ORIGIN, MAX_ZOOM, MIN_ZOOM, SOURCE_TYPES } from '../../../../common/constants'; import { registerSource } from '../source_registry'; import { getDataSourceLabel, getUrlLabel } from '../../../../common/i18n_getters'; -import { - TiledSingleLayerVectorSourceDescriptor, - TileJsonVectorSourceDescriptor, -} from '../../../../common/descriptor_types'; +import { TileJsonVectorSourceDescriptor } from '../../../../common/descriptor_types'; import { MVTField } from '../../fields/mvt_field'; import { ITooltipProperty } from '../../tooltips/tooltip_property'; import { MVTSingleLayerVectorSource } from '../mvt_single_layer_vector_source'; @@ -40,6 +37,8 @@ export class TileJsonSource extends MVTSingleLayerVectorSource { static createDescriptor({ url, layerName, + minSourceZoom, + maxSourceZoom, tooltipProperties, }: Partial): TileJsonVectorSourceDescriptor { return { @@ -47,6 +46,8 @@ export class TileJsonSource extends MVTSingleLayerVectorSource { id: uuid(), url: url ? url : '', layerName: layerName ? layerName : '', + minSourceZoom: typeof minSourceZoom === 'number' ? minSourceZoom : MIN_ZOOM, + maxSourceZoom: typeof maxSourceZoom === 'number' ? maxSourceZoom : MAX_ZOOM, tooltipProperties: tooltipProperties ? tooltipProperties : [], }; } @@ -55,12 +56,9 @@ export class TileJsonSource extends MVTSingleLayerVectorSource { return tileJsonDoc.vector_layers || []; } - readonly _descriptor: TiledSingleLayerVectorSourceDescriptor; + readonly _descriptor: TileJsonVectorSourceDescriptor; - constructor( - sourceDescriptor: TiledSingleLayerVectorSourceDescriptor, - inspectorAdapters?: object - ) { + constructor(sourceDescriptor: TileJsonVectorSourceDescriptor, inspectorAdapters?: object) { super(sourceDescriptor, inspectorAdapters); this._descriptor = TileJsonSource.createDescriptor(sourceDescriptor); @@ -139,7 +137,9 @@ export class TileJsonSource extends MVTSingleLayerVectorSource { async getUrlTemplateWithMeta() { const layer = await this.getLayerConfig(); - // todo: EMS does not preserve licesing param + if (!layer) { + return null; + } const tileJsonDoc = await loadTileJsonDocument(this._descriptor.url); const tileUrl = tileJsonDoc.tiles[0]; return { @@ -149,29 +149,6 @@ export class TileJsonSource extends MVTSingleLayerVectorSource { maxSourceZoom: layer.maxzoom, }; } - - getFeatureProperties( - id: string | number | undefined, - mbProperties: GeoJsonProperties - ): GeoJsonProperties | null { - return mbProperties; - } - - getMinZoom() { - return MIN_ZOOM; - } - - getMaxZoom() { - return MAX_ZOOM; - } - - async filterAndFormatPropertiesToHtml( - properties: GeoJsonProperties, - featureId?: string | number - ): Promise { - // todo - return []; - } } registerSource({ diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx index 29aea21bd3813b..57d15c8190a41c 100644 --- a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_editor.tsx @@ -10,28 +10,23 @@ import { EuiFieldText, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { TileJsonVectorSourceSettings } from '../../../../common/descriptor_types'; import { TileJsonSourceSettings } from './tilejson_source_settings'; +import { MAX_ZOOM, MIN_ZOOM } from '../../../../common/constants'; export interface Props { onSourceConfigChange: (sourceConfig: TileJsonVectorSourceSettings) => void; } -interface State { - url: string; - layerName: string; -} - -export class TileJsonSourceEditor extends Component { +export class TileJsonSourceEditor extends Component { state = { url: '', layerName: '', + minSourceZoom: MIN_ZOOM, + maxSourceZoom: MAX_ZOOM, }; _sourceConfigChange = _.debounce(() => { if (this.state.layerName && this.state.url) { - this.props.onSourceConfigChange({ - url: this.state.url, - layerName: this.state.layerName, - }); + this.props.onSourceConfigChange(this.state); } }, 200); @@ -50,11 +45,18 @@ export class TileJsonSourceEditor extends Component { ); }; - _handleLayerNameChange = (layerName: string) => { - if (this.state.layerName === layerName) { + _handleChange = (settings: TileJsonSourceSettings) => { + if (this.state.layerName === settings.layerName) { return; } - this.setState({ layerName }, () => this._sourceConfigChange()); + this.setState( + { + layerName: settings.layerName, + minSourceZoom: settings.minSourceZoom, + maxSourceZoom: settings.maxSourceZoom, + }, + () => this._sourceConfigChange() + ); }; render() { @@ -75,7 +77,7 @@ export class TileJsonSourceEditor extends Component { diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx index e2d7178fa65bab..cb1555e78008b7 100644 --- a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx +++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_source_settings.tsx @@ -5,21 +5,23 @@ */ import React, { Fragment, Component, ChangeEvent } from 'react'; -import { EuiSelect, EuiFormRow, EuiText } from '@elastic/eui'; +import { EuiSelect, EuiFormRow, EuiText, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import _ from 'lodash'; import { TileJsonSource, TileJsonVectorLayerConfig } from './tilejson_source'; import { loadTileJsonDocument } from './tilejson_loader_util'; +import { TileJsonVectorSourceSettings } from '../../../../common/descriptor_types'; export interface State { currentLayerName: string; previousLayerName: string; urlForDoc: string; tileJsonDoc: any; + layers: TileJsonVectorLayerConfig[]; } export interface Props { - handleChange: (layerName: string) => void; + handleChange: (settings: Partial) => void; layerName: string; url: string[]; } @@ -30,6 +32,7 @@ export class TileJsonSourceSettings extends Component { previousLayerName: '', urlForDoc: '', tileJsonDoc: null, + layers: null, }; static getDerivedStateFromProps(nextProps: Props, prevState: State) { @@ -88,12 +91,20 @@ export class TileJsonSourceSettings extends Component { urlForDoc: url, tileJsonDoc, currentLayer: layers[0], + layers, }); } } _handleChange = _.debounce(() => { - this.props.handleChange(this.state.currentLayerName); + const selectedLayer: TileJsonVectorLayerConfig = this.state.layers.find((l) => { + return l.id === this.state.currentLayerName; + }); + this.props.handleChange({ + layerName: this.state.currentLayerName, + minSourceZoom: selectedLayer.minzoom, + maxSourceZoom: selectedLayer.maxzoom, + }); }, 200); _handleLayerNameInputChange = (e: ChangeEvent) => { @@ -105,21 +116,34 @@ export class TileJsonSourceSettings extends Component { }; render() { - if (!this.state.tileJsonDoc) { + if (!this.state.layers || !this.state.tileJsonDoc) { return null; } const description = this.state.tileJsonDoc.description; - const layers: TileJsonVectorLayerConfig[] = TileJsonSource.getLayerConfigsFromTileJson( - this.state.tileJsonDoc - ); - const layerOptions = layers.map((layer: TileJsonVectorLayerConfig) => { + const layerOptions = this.state.layers.map((layer: TileJsonVectorLayerConfig) => { return { text: layer.id, value: layer.id, }; }); + const selectedLayer = this.state.layers.find((l) => { + return l.id === this.state.currentLayerName; + }); + + const zoomText = selectedLayer ? ( + + {i18n.translate('xpack.maps.source.TileJsonSourceSettings.zoomText', { + defaultMessage: 'This layer has data from zoom level {minZoom} to {maxZoom}', + values: { + minZoom: selectedLayer.minzoom, + maxZoom: selectedLayer.maxzoom, + }, + })} + + ) : null; + return ( { } )} > - + <> + + + {zoomText} + ); diff --git a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx index 3614051a760955..05d6768ec7f421 100644 --- a/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/tilejson_source/tilejson_update_source_editor.tsx @@ -29,10 +29,16 @@ export class TileJsonUpdateSourceEditor extends Component { this.props.onChange({ propName: 'tooltipProperties', value: propertyNames }); }; - _handleChange = (layerName: string) => { + _handleChange = (settings: Partial) => { const changes: OnSourceChangeArgs[] = []; - if (layerName !== this.props.source.getLayerName()) { - changes.push({ propName: 'layerName', value: layerName }); + if (settings.layerName !== this.props.source.getLayerName()) { + changes.push({ propName: 'layerName', value: settings.layerName }); + } + if (settings.minSourceZoom !== this.props.source.getMinZoom()) { + changes.push({ propName: 'minSourceZoom', value: settings.minSourceZoom }); + } + if (settings.maxSourceZoom !== this.props.source.getMaxZoom()) { + changes.push({ propName: 'maxSourceZoom', value: settings.maxSourceZoom }); } this.props.onChange(...changes); };