From d7939428c123d60fdbe2c7c82df12563215e4236 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 27 Jan 2020 16:03:27 -0500 Subject: [PATCH 1/2] [Maps] tighten default map zoom --- .../legacy/plugins/maps/common/constants.js | 4 ++++ .../connected_components/map/mb/view.js | 24 ++++++++++++------- .../plugins/maps/public/reducers/map.js | 7 ++---- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/x-pack/legacy/plugins/maps/common/constants.js b/x-pack/legacy/plugins/maps/common/constants.js index eef621e6a2cd62..56f92b93c82881 100644 --- a/x-pack/legacy/plugins/maps/common/constants.js +++ b/x-pack/legacy/plugins/maps/common/constants.js @@ -37,6 +37,10 @@ export function createMapPath(id) { return `${MAP_BASE_URL}/${id}`; } +export const DEFAULT_ZOOM = 1; +export const DEFAULT_LAT = 20; +export const DEFAULT_LON = 15; + export const LAYER_TYPE = { TILE: 'TILE', VECTOR: 'VECTOR', diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js index cf6085e0c398cb..a60ba8139b99b1 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js @@ -13,7 +13,13 @@ import { addSpritesheetToMap, } from './utils'; import { getGlyphUrl, isRetina } from '../../../meta'; -import { DECIMAL_DEGREES_PRECISION, ZOOM_PRECISION } from '../../../../common/constants'; +import { + DEFAULT_ZOOM, + DEFAULT_LAT, + DEFAULT_LON, + DECIMAL_DEGREES_PRECISION, + ZOOM_PRECISION, +} from '../../../../common/constants'; import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp'; import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker'; import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js'; @@ -107,7 +113,11 @@ export class MBMapContainer extends React.Component { } async _createMbMapInstance() { - const initialView = this.props.goto ? this.props.goto.center : null; + const initialView = _.get(this.props.goto, 'center', { + zoom: DEFAULT_ZOOM, + lat: DEFAULT_LAT, + lon: DEFAULT_LON, + }); return new Promise(resolve => { const mbStyle = { version: 8, @@ -126,14 +136,12 @@ export class MBMapContainer extends React.Component { scrollZoom: this.props.scrollZoom, preserveDrawingBuffer: chrome.getInjected('preserveDrawingBuffer', false), interactive: !this.props.disableInteractive, - }; - if (initialView) { - options.zoom = initialView.zoom; - options.center = { + zoom: initialView.zoom, + center: { lng: initialView.lon, lat: initialView.lat, - }; - } + }, + }; const mbMap = new mapboxgl.Map(options); mbMap.dragRotate.disable(); mbMap.touchZoomRotate.disableRotation(); diff --git a/x-pack/legacy/plugins/maps/public/reducers/map.js b/x-pack/legacy/plugins/maps/public/reducers/map.js index f933babb6f61b8..234584d08a3114 100644 --- a/x-pack/legacy/plugins/maps/public/reducers/map.js +++ b/x-pack/legacy/plugins/maps/public/reducers/map.js @@ -99,11 +99,8 @@ const INITIAL_STATE = { goto: null, tooltipState: null, mapState: { - zoom: 4, - center: { - lon: -100.41, - lat: 32.82, - }, + zoom: null, // setting this value does not adjust map zoom, read only value used to store current map zoom for persisting between sessions + center: null, // setting this value does not adjust map view, read only value used to store current map center for persisting between sessions scrollZoom: true, extent: null, mouseCoordinates: null, From 19786024c9cc91931de6e87fac761f896bbad894 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 29 Jan 2020 08:31:29 -0500 Subject: [PATCH 2/2] rework using bounds to work on multiple screen resolutions --- .../legacy/plugins/maps/common/constants.js | 4 --- .../connected_components/map/mb/view.js | 26 +++++++------------ 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/x-pack/legacy/plugins/maps/common/constants.js b/x-pack/legacy/plugins/maps/common/constants.js index 56f92b93c82881..eef621e6a2cd62 100644 --- a/x-pack/legacy/plugins/maps/common/constants.js +++ b/x-pack/legacy/plugins/maps/common/constants.js @@ -37,10 +37,6 @@ export function createMapPath(id) { return `${MAP_BASE_URL}/${id}`; } -export const DEFAULT_ZOOM = 1; -export const DEFAULT_LAT = 20; -export const DEFAULT_LON = 15; - export const LAYER_TYPE = { TILE: 'TILE', VECTOR: 'VECTOR', diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js index a60ba8139b99b1..1e44c7225a564c 100644 --- a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js +++ b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js @@ -13,13 +13,7 @@ import { addSpritesheetToMap, } from './utils'; import { getGlyphUrl, isRetina } from '../../../meta'; -import { - DEFAULT_ZOOM, - DEFAULT_LAT, - DEFAULT_LON, - DECIMAL_DEGREES_PRECISION, - ZOOM_PRECISION, -} from '../../../../common/constants'; +import { DECIMAL_DEGREES_PRECISION, ZOOM_PRECISION } from '../../../../common/constants'; import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp'; import mbWorkerUrl from '!!file-loader!mapbox-gl/dist/mapbox-gl-csp-worker'; import mbRtlPlugin from '!!file-loader!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js'; @@ -113,11 +107,6 @@ export class MBMapContainer extends React.Component { } async _createMbMapInstance() { - const initialView = _.get(this.props.goto, 'center', { - zoom: DEFAULT_ZOOM, - lat: DEFAULT_LAT, - lon: DEFAULT_LON, - }); return new Promise(resolve => { const mbStyle = { version: 8, @@ -136,12 +125,17 @@ export class MBMapContainer extends React.Component { scrollZoom: this.props.scrollZoom, preserveDrawingBuffer: chrome.getInjected('preserveDrawingBuffer', false), interactive: !this.props.disableInteractive, - zoom: initialView.zoom, - center: { + }; + const initialView = _.get(this.props.goto, 'center'); + if (initialView) { + options.zoom = initialView.zoom; + options.center = { lng: initialView.lon, lat: initialView.lat, - }, - }; + }; + } else { + options.bounds = [-170, -60, 170, 75]; + } const mbMap = new mapboxgl.Map(options); mbMap.dragRotate.disable(); mbMap.touchZoomRotate.disableRotation();