diff --git a/x-pack/plugins/maps/public/actions/map_action_constants.ts b/x-pack/plugins/maps/public/actions/map_action_constants.ts index 25a86e4c50d0..3e5b9677b003 100644 --- a/x-pack/plugins/maps/public/actions/map_action_constants.ts +++ b/x-pack/plugins/maps/public/actions/map_action_constants.ts @@ -38,11 +38,6 @@ export const SET_OPEN_TOOLTIPS = 'SET_OPEN_TOOLTIPS'; export const UPDATE_DRAW_STATE = 'UPDATE_DRAW_STATE'; export const SET_SCROLL_ZOOM = 'SET_SCROLL_ZOOM'; export const SET_MAP_INIT_ERROR = 'SET_MAP_INIT_ERROR'; -export const SET_INTERACTIVE = 'SET_INTERACTIVE'; -export const DISABLE_TOOLTIP_CONTROL = 'DISABLE_TOOLTIP_CONTROL'; -export const HIDE_TOOLBAR_OVERLAY = 'HIDE_TOOLBAR_OVERLAY'; -export const HIDE_LAYER_CONTROL = 'HIDE_LAYER_CONTROL'; -export const HIDE_VIEW_CONTROL = 'HIDE_VIEW_CONTROL'; export const SET_WAITING_FOR_READY_HIDDEN_LAYERS = 'SET_WAITING_FOR_READY_HIDDEN_LAYERS'; export const SET_MAP_SETTINGS = 'SET_MAP_SETTINGS'; export const ROLLBACK_MAP_SETTINGS = 'ROLLBACK_MAP_SETTINGS'; diff --git a/x-pack/plugins/maps/public/actions/map_actions.ts b/x-pack/plugins/maps/public/actions/map_actions.ts index 6dd8db4799d4..64c35bd20743 100644 --- a/x-pack/plugins/maps/public/actions/map_actions.ts +++ b/x-pack/plugins/maps/public/actions/map_actions.ts @@ -24,16 +24,11 @@ import { CLEAR_GOTO, CLEAR_MOUSE_COORDINATES, CLEAR_WAITING_FOR_MAP_READY_LAYER_LIST, - DISABLE_TOOLTIP_CONTROL, - HIDE_LAYER_CONTROL, - HIDE_TOOLBAR_OVERLAY, - HIDE_VIEW_CONTROL, MAP_DESTROYED, MAP_EXTENT_CHANGED, MAP_READY, ROLLBACK_MAP_SETTINGS, SET_GOTO, - SET_INTERACTIVE, SET_MAP_INIT_ERROR, SET_MAP_SETTINGS, SET_MOUSE_COORDINATES, @@ -73,7 +68,7 @@ export function setMapInitError(errorMessage: string) { }; } -export function setMapSettings(settings: MapSettings) { +export function setMapSettings(settings: Partial) { return { type: SET_MAP_SETTINGS, settings, @@ -316,22 +311,3 @@ export function updateDrawState(drawState: DrawState | null) { }); }; } - -export function disableInteractive() { - return { type: SET_INTERACTIVE, disableInteractive: true }; -} - -export function disableTooltipControl() { - return { type: DISABLE_TOOLTIP_CONTROL, disableTooltipControl: true }; -} - -export function hideToolbarOverlay() { - return { type: HIDE_TOOLBAR_OVERLAY, hideToolbarOverlay: true }; -} - -export function hideLayerControl() { - return { type: HIDE_LAYER_CONTROL, hideLayerControl: true }; -} -export function hideViewControl() { - return { type: HIDE_VIEW_CONTROL, hideViewControl: true }; -} diff --git a/x-pack/plugins/maps/public/connected_components/map_container/index.ts b/x-pack/plugins/maps/public/connected_components/map_container/index.ts index 37ee3a630066..e4c5cfe1c63a 100644 --- a/x-pack/plugins/maps/public/connected_components/map_container/index.ts +++ b/x-pack/plugins/maps/public/connected_components/map_container/index.ts @@ -16,7 +16,6 @@ import { getMapInitError, getMapSettings, getQueryableUniqueIndexPatternIds, - isToolbarOverlayHidden, } from '../../selectors/map_selectors'; import { MapStoreState } from '../../reducers/store'; import { getCoreChrome } from '../../kibana_services'; @@ -29,8 +28,7 @@ function mapStateToProps(state: MapStoreState) { refreshConfig: getRefreshConfig(state), mapInitError: getMapInitError(state), indexPatternIds: getQueryableUniqueIndexPatternIds(state), - hideToolbarOverlay: isToolbarOverlayHidden(state), - backgroundColor: getMapSettings(state).backgroundColor, + settings: getMapSettings(state), }; } diff --git a/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx b/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx index d7881d5f84bd..93476f6e14da 100644 --- a/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx +++ b/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx @@ -25,6 +25,7 @@ import { getIndexPatternsFromIds } from '../../index_pattern_util'; import { ES_GEO_FIELD_TYPE, RawValue } from '../../../common/constants'; import { indexPatterns as indexPatternsUtils } from '../../../../../../src/plugins/data/public'; import { FLYOUT_STATE } from '../../reducers/ui'; +import { MapSettings } from '../../reducers/map'; import { MapSettingsPanel } from '../map_settings_panel'; import { registerLayerWizards } from '../../classes/layers/load_layer_wizards'; import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property'; @@ -36,7 +37,6 @@ const RENDER_COMPLETE_EVENT = 'renderComplete'; interface Props { addFilters: ((filters: Filter[]) => Promise) | null; - backgroundColor: string; getFilterActions?: () => Promise; getActionContext?: () => ActionExecutionContext; onSingleValueTrigger?: (actionId: string, key: string, value: RawValue) => void; @@ -44,7 +44,6 @@ interface Props { cancelAllInFlightRequests: () => void; exitFullScreen: () => void; flyoutDisplay: FLYOUT_STATE; - hideToolbarOverlay: boolean; isFullScreen: boolean; indexPatternIds: string[]; mapInitError: string | null | undefined; @@ -53,6 +52,7 @@ interface Props { triggerRefreshTimer: () => void; title?: string; description?: string; + settings: MapSettings; } interface State { @@ -245,7 +245,7 @@ export class MapContainer extends Component { > { geoFields={this.state.geoFields} renderTooltipContent={renderTooltipContent} /> - {!this.props.hideToolbarOverlay && ( + {!this.props.settings.hideToolbarOverlay && ( void; onMapReady: (mapExtentState: MapExtentState) => void; onMapDestroyed: () => void; @@ -181,7 +178,7 @@ export class MBMap extends Component { style: mbStyle, scrollZoom: this.props.scrollZoom, preserveDrawingBuffer: getPreserveDrawingBuffer(), - interactive: !this.props.disableInteractive, + interactive: !this.props.settings.disableInteractive, maxZoom: this.props.settings.maxZoom, minZoom: this.props.settings.minZoom, }; @@ -197,7 +194,7 @@ export class MBMap extends Component { const mbMap = new mapboxgl.Map(options); mbMap.dragRotate.disable(); mbMap.touchZoomRotate.disableRotation(); - if (!this.props.disableInteractive) { + if (!this.props.settings.disableInteractive) { mbMap.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-left'); } @@ -260,7 +257,7 @@ export class MBMap extends Component { }, 100) ); // Attach event only if view control is visible, which shows lat/lon - if (!this.props.hideViewControl) { + if (!this.props.settings.hideViewControl) { const throttledSetMouseCoordinates = _.throttle((e: MapMouseEvent) => { this.props.setMouseCoordinates({ lat: e.lngLat.lat, @@ -386,7 +383,7 @@ export class MBMap extends Component { let tooltipControl; if (this.state.mbMap) { drawControl = ; - tooltipControl = !this.props.disableTooltipControl ? ( + tooltipControl = !this.props.settings.disableTooltipControl ? ( - {!hideLayerControl && } + {!settings.hideLayerControl && } - {!hideViewControl && } + {!settings.hideViewControl && } diff --git a/x-pack/plugins/maps/public/embeddable/README.md b/x-pack/plugins/maps/public/embeddable/README.md deleted file mode 100644 index 8ce3794e2ed2..000000000000 --- a/x-pack/plugins/maps/public/embeddable/README.md +++ /dev/null @@ -1,143 +0,0 @@ - -### Map specific `input` parameters -- **hideFilterActions:** (Boolean) Set to true to hide all filtering controls. -- **isLayerTOCOpen:** (Boolean) Set to false to render map with legend in collapsed state. -- **openTOCDetails:** (Array of Strings) Array of layer ids. Add layer id to show layer details on initial render. -- **mapCenter:** ({lat, lon, zoom }) Provide mapCenter to customize initial map location. -- **disableInteractive:** (Boolean) Will disable map interactions, panning, zooming in the map. -- **disableTooltipControl:** (Boolean) Will disable tooltip which shows relevant information on hover, like Continent name etc -- **hideToolbarOverlay:** (Boolean) Will disable toolbar, which can be used to navigate to coordinate by entering lat/long and zoom values. -- **hideLayerControl:** (Boolean) Will hide useful layer control, which can be used to hide/show a layer to get a refined view of the map. -- **hideViewControl:** (Boolean) Will hide view control at bottom right of the map, which shows lat/lon values based on mouse hover in the map, this is useful to get coordinate value from a particular point in map. -- **hiddenLayers:** (Array of Strings) Array of layer ids that should be hidden. Any other layers will be set to visible regardless of their value in the layerList used to initialize the embeddable - -### Creating a Map embeddable from saved object -``` - const factory = new MapEmbeddableFactory(); - const input = { - hideFilterActions: true, - isLayerTOCOpen: false, - openTOCDetails: ['tfi3f', 'edh66'], - mapCenter: { lat: 0.0, lon: 0.0, zoom: 7 } - } - const mapEmbeddable = await factory.createFromSavedObject( - 'de71f4f0-1902-11e9-919b-ffe5949a18d2', - input, - parent - ); -``` - -### Creating a Map embeddable from state -``` -const factory = new MapEmbeddableFactory(); -const input = { - hideFilterActions: true, - isLayerTOCOpen: false, - openTOCDetails: ['tfi3f', 'edh66'], - mapCenter: { lat: 0.0, lon: 0.0, zoom: 7 } -} -const mapEmbeddable = await factory.create(input, parent); -// where layerList is same as saved object layerListJSON property (unstringified)) -mapEmbeddable.setLayerList([]); -``` - -#### Customize tooltip -``` -/** - * Render custom tooltip content - * - * @param {function} addFilters - * @param {function} closeTooltip - * @param {Array} features - Vector features at tooltip location. - * @param {boolean} isLocked - * @param {function} getLayerName - Get layer name. Call with (layerId). Returns Promise. - * @param {function} loadFeatureProperties - Loads feature properties. Call with ({ layerId, featureId }). Returns Promise. - * @param {function} loadFeatureGeometry - Loads feature geometry. Call with ({ layerId, featureId }). Returns geojson geometry object { type, coordinates }. - * - * @return {Component} A React Component. - */ -const renderTooltipContent = ({ addFilters, closeTooltip, features, isLocked, loadFeatureProperties}) => { - return
Custom tooltip content
; -} - -const mapEmbeddable = await factory.create(input, parent) -mapEmbeddable.setLayerList(layerList); -mapEmbeddable.setRenderTooltipContent(renderTooltipContent); -``` - - -#### Event handlers -``` -const eventHandlers = { - onDataLoad: (layerId: string, dataId: string) => { - // take action on data load - }, - onDataLoadEnd: (layerId: string, dataId: string, resultMeta: object) => { - // take action on data load end - }, - onDataLoadError: (layerId: string, dataId: string, errorMessage: string) => { - // take action on data load error - }, -} - -const mapEmbeddable = await factory.create(input, parent); -mapEmbeddable.setLayerList(layerList); -mapEmbeddable.setRenderTooltipContent(renderTooltipContent); -mapEmbeddable.setEventHandlers(eventHandlers); -``` - - -#### Passing in geospatial data -You can pass geospatial data into the Map embeddable by configuring the layerList parameter with a layer with `GEOJSON_FILE` source. -Geojson sources will not update unless you modify `__featureCollection` property by calling the `setLayerList` method. - -``` -const factory = new MapEmbeddableFactory(); -const input = { - hideFilterActions: true, - isLayerTOCOpen: false, - openTOCDetails: ['tfi3f', 'edh66'], - mapCenter: { lat: 0.0, lon: 0.0, zoom: 7 } -} -const mapEmbeddable = await factory.create(input, parent); - -mapEmbeddable.setLayerList([ - { - 'id': 'gaxya', - 'label': 'My geospatial data', - 'minZoom': 0, - 'maxZoom': 24, - 'alpha': 1, - 'sourceDescriptor': { - 'id': 'b7486', - 'type': 'GEOJSON_FILE', - '__featureCollection': { - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "geometry": { - "type": "Polygon", - "coordinates": [ - [ - [35, 35], [45, 45], [45, 35], [35, 35] - ] - ] - }, - "properties": { - "name": "null island", - "another_prop": "something else interesting" - } - } - ] - } - }, - 'visible': true, - 'style': { - 'type': 'VECTOR', - 'properties': {} - }, - 'type': 'VECTOR' - } -]); -``` diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx index 5448043b35ba..5b9aea75b1a2 100644 --- a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx +++ b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx @@ -31,11 +31,6 @@ import { setQuery, setRefreshConfig, disableScrollZoom, - disableInteractive, - disableTooltipControl, - hideToolbarOverlay, - hideLayerControl, - hideViewControl, setReadOnly, } from '../actions'; import { getIsLayerTOCOpen, getOpenTOCDetails } from '../selectors/ui_selectors'; @@ -129,25 +124,6 @@ export class MapEmbeddable store.dispatch(setReadOnly(true)); store.dispatch(disableScrollZoom()); - if (_.has(this.input, 'disableInteractive') && this.input.disableInteractive) { - store.dispatch(disableInteractive()); - } - - if (_.has(this.input, 'disableTooltipControl') && this.input.disableTooltipControl) { - store.dispatch(disableTooltipControl()); - } - if (_.has(this.input, 'hideToolbarOverlay') && this.input.hideToolbarOverlay) { - store.dispatch(hideToolbarOverlay()); - } - - if (_.has(this.input, 'hideLayerControl') && this.input.hideLayerControl) { - store.dispatch(hideLayerControl()); - } - - if (_.has(this.input, 'hideViewControl') && this.input.hideViewControl) { - store.dispatch(hideViewControl()); - } - this._dispatchSetQuery({ query: this.input.query, timeRange: this.input.timeRange, diff --git a/x-pack/plugins/maps/public/embeddable/types.ts b/x-pack/plugins/maps/public/embeddable/types.ts index 417991ea2d36..40fdbd316682 100644 --- a/x-pack/plugins/maps/public/embeddable/types.ts +++ b/x-pack/plugins/maps/public/embeddable/types.ts @@ -13,6 +13,7 @@ import { import { RefreshInterval, Query, Filter, TimeRange } from '../../../../../src/plugins/data/common'; import { MapCenterAndZoom } from '../../common/descriptor_types'; import { MapSavedObjectAttributes } from '../../common/map_saved_object_type'; +import { MapSettings } from '../reducers/map'; export interface MapEmbeddableConfig { editable: boolean; @@ -22,12 +23,8 @@ interface MapEmbeddableState { refreshConfig?: RefreshInterval; isLayerTOCOpen?: boolean; openTOCDetails?: string[]; - disableTooltipControl?: boolean; - disableInteractive?: boolean; - hideToolbarOverlay?: boolean; - hideLayerControl?: boolean; - hideViewControl?: boolean; mapCenter?: MapCenterAndZoom; + mapSettings?: Partial; hiddenLayers?: string[]; hideFilterActions?: boolean; filters?: Filter[]; diff --git a/x-pack/plugins/maps/public/reducers/default_map_settings.ts b/x-pack/plugins/maps/public/reducers/default_map_settings.ts index e98af6f426b5..37fd19ea5a47 100644 --- a/x-pack/plugins/maps/public/reducers/default_map_settings.ts +++ b/x-pack/plugins/maps/public/reducers/default_map_settings.ts @@ -12,6 +12,11 @@ export function getDefaultMapSettings(): MapSettings { return { autoFitToDataBounds: false, backgroundColor: euiThemeVars.euiColorEmptyShade, + disableInteractive: false, + disableTooltipControl: false, + hideToolbarOverlay: false, + hideLayerControl: false, + hideViewControl: false, initialLocation: INITIAL_LOCATION.LAST_SAVED_LOCATION, fixedLocation: { lat: 0, lon: 0, zoom: 2 }, browserLocation: { zoom: 2 }, diff --git a/x-pack/plugins/maps/public/reducers/map.d.ts b/x-pack/plugins/maps/public/reducers/map.d.ts index d4ac20c7114d..da185a190e6d 100644 --- a/x-pack/plugins/maps/public/reducers/map.d.ts +++ b/x-pack/plugins/maps/public/reducers/map.d.ts @@ -34,16 +34,16 @@ export type MapContext = { refreshConfig?: MapRefreshConfig; refreshTimerLastTriggeredAt?: string; drawState?: DrawState; - disableInteractive: boolean; - disableTooltipControl: boolean; - hideToolbarOverlay: boolean; - hideLayerControl: boolean; - hideViewControl: boolean; }; export type MapSettings = { autoFitToDataBounds: boolean; backgroundColor: string; + disableInteractive: boolean; + disableTooltipControl: boolean; + hideToolbarOverlay: boolean; + hideLayerControl: boolean; + hideViewControl: boolean; initialLocation: INITIAL_LOCATION; fixedLocation: { lat: number; diff --git a/x-pack/plugins/maps/public/reducers/map.js b/x-pack/plugins/maps/public/reducers/map.js index 317c11eb7680..1395f2c5ce2f 100644 --- a/x-pack/plugins/maps/public/reducers/map.js +++ b/x-pack/plugins/maps/public/reducers/map.js @@ -39,11 +39,6 @@ import { SET_SCROLL_ZOOM, SET_MAP_INIT_ERROR, UPDATE_DRAW_STATE, - SET_INTERACTIVE, - DISABLE_TOOLTIP_CONTROL, - HIDE_TOOLBAR_OVERLAY, - HIDE_LAYER_CONTROL, - HIDE_VIEW_CONTROL, SET_WAITING_FOR_READY_HIDDEN_LAYERS, SET_MAP_SETTINGS, ROLLBACK_MAP_SETTINGS, @@ -118,11 +113,6 @@ export const DEFAULT_MAP_STATE = { refreshConfig: null, refreshTimerLastTriggeredAt: null, drawState: null, - disableInteractive: false, - disableTooltipControl: false, - hideToolbarOverlay: false, - hideLayerControl: false, - hideViewControl: false, }, selectedLayerId: null, layerList: [], @@ -355,46 +345,6 @@ export function map(state = DEFAULT_MAP_STATE, action) { ...state, mapInitError: action.errorMessage, }; - case SET_INTERACTIVE: - return { - ...state, - mapState: { - ...state.mapState, - disableInteractive: action.disableInteractive, - }, - }; - case DISABLE_TOOLTIP_CONTROL: - return { - ...state, - mapState: { - ...state.mapState, - disableTooltipControl: action.disableTooltipControl, - }, - }; - case HIDE_TOOLBAR_OVERLAY: - return { - ...state, - mapState: { - ...state.mapState, - hideToolbarOverlay: action.hideToolbarOverlay, - }, - }; - case HIDE_LAYER_CONTROL: - return { - ...state, - mapState: { - ...state.mapState, - hideLayerControl: action.hideLayerControl, - }, - }; - case HIDE_VIEW_CONTROL: - return { - ...state, - mapState: { - ...state.mapState, - hideViewControl: action.hideViewControl, - }, - }; case SET_WAITING_FOR_READY_HIDDEN_LAYERS: return { ...state, diff --git a/x-pack/plugins/maps/public/routes/map_page/saved_map/saved_map.ts b/x-pack/plugins/maps/public/routes/map_page/saved_map/saved_map.ts index 3530e3cc615a..88516aadc339 100644 --- a/x-pack/plugins/maps/public/routes/map_page/saved_map/saved_map.ts +++ b/x-pack/plugins/maps/public/routes/map_page/saved_map/saved_map.ts @@ -102,7 +102,9 @@ export class SavedMap { } } - if (this._attributes?.mapStateJSON) { + if (this._mapEmbeddableInput && this._mapEmbeddableInput.mapSettings !== undefined) { + this._store.dispatch(setMapSettings(this._mapEmbeddableInput.mapSettings)); + } else if (this._attributes?.mapStateJSON) { const mapState = JSON.parse(this._attributes.mapStateJSON); if (mapState.settings) { this._store.dispatch(setMapSettings(mapState.settings)); diff --git a/x-pack/plugins/maps/public/selectors/map_selectors.ts b/x-pack/plugins/maps/public/selectors/map_selectors.ts index 9a1b31852d39..0a18f7aca8dd 100644 --- a/x-pack/plugins/maps/public/selectors/map_selectors.ts +++ b/x-pack/plugins/maps/public/selectors/map_selectors.ts @@ -150,21 +150,6 @@ export const getWaitingForMapReadyLayerListRaw = ({ map }: MapStoreState): Layer export const getScrollZoom = ({ map }: MapStoreState): boolean => map.mapState.scrollZoom; -export const isInteractiveDisabled = ({ map }: MapStoreState): boolean => - map.mapState.disableInteractive; - -export const isTooltipControlDisabled = ({ map }: MapStoreState): boolean => - map.mapState.disableTooltipControl; - -export const isToolbarOverlayHidden = ({ map }: MapStoreState): boolean => - map.mapState.hideToolbarOverlay; - -export const isLayerControlHidden = ({ map }: MapStoreState): boolean => - map.mapState.hideLayerControl; - -export const isViewControlHidden = ({ map }: MapStoreState): boolean => - map.mapState.hideViewControl; - export const getMapExtent = ({ map }: MapStoreState): MapExtent | undefined => map.mapState.extent; export const getMapBuffer = ({ map }: MapStoreState): MapExtent | undefined => map.mapState.buffer; diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx index 2da57ef3138c..3cab8fb562ce 100644 --- a/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx +++ b/x-pack/plugins/uptime/public/components/monitor/status_details/location_map/embeddables/embedded_map.tsx @@ -83,10 +83,12 @@ export const EmbeddedMap = React.memo(({ upPoints, downPoints }: EmbeddedMapProp lat: 20, zoom: 0, }, - disableInteractive: true, - hideToolbarOverlay: true, - hideLayerControl: true, - hideViewControl: true, + mapSettings: { + disableInteractive: true, + hideToolbarOverlay: true, + hideLayerControl: true, + hideViewControl: true, + }, }; const renderTooltipContent = ({