-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Maps] refactor createShapeFilterWithMeta to support more than just p…
…olygons (#43042) * [Maps] refactor createShapeFilterWithMeta to support more than just polygons * rename setPrecision to roundCoordinates * i18n cleanup * remove unused file * review feedback * split filter create into two functions
- Loading branch information
Showing
7 changed files
with
264 additions
and
159 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,18 +16,25 @@ import { | |
import { | ||
DECIMAL_DEGREES_PRECISION, | ||
FEATURE_ID_PROPERTY_NAME, | ||
ZOOM_PRECISION | ||
ZOOM_PRECISION, | ||
LON_INDEX | ||
} from '../../../../common/constants'; | ||
import mapboxgl from 'mapbox-gl'; | ||
import MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw-unminified'; | ||
import DrawRectangle from 'mapbox-gl-draw-rectangle-mode'; | ||
import { FeatureTooltip } from '../feature_tooltip'; | ||
import { DRAW_TYPE } from '../../../actions/map_actions'; | ||
import { createShapeFilterWithMeta, createExtentFilterWithMeta } from '../../../elasticsearch_geo_utils'; | ||
import { | ||
createSpatialFilterWithBoundingBox, | ||
createSpatialFilterWithGeometry, | ||
getBoundingBoxGeometry, | ||
roundCoordinates | ||
} from '../../../elasticsearch_geo_utils'; | ||
import chrome from 'ui/chrome'; | ||
import { spritesheet } from '@elastic/maki'; | ||
import sprites1 from '@elastic/maki/dist/[email protected]'; | ||
import sprites2 from '@elastic/maki/dist/[email protected]'; | ||
import { i18n } from '@kbn/i18n'; | ||
|
||
const isRetina = window.devicePixelRatio === 2; | ||
const mbDrawModes = MapboxDraw.modes; | ||
|
@@ -84,40 +91,44 @@ export class MBMapContainer extends React.Component { | |
this.props.setTooltipState(null); | ||
}; | ||
|
||
_onDraw = async (e) => { | ||
|
||
_onDraw = (e) => { | ||
if (!e.features.length) { | ||
return; | ||
} | ||
const { geoField, geoFieldType, indexPatternId, drawType } = this.props.drawState; | ||
this.props.disableDrawState(); | ||
|
||
|
||
let filter; | ||
if (drawType === DRAW_TYPE.POLYGON) { | ||
filter = createShapeFilterWithMeta(e.features[0].geometry, indexPatternId, geoField, geoFieldType); | ||
} else if (drawType === DRAW_TYPE.BOUNDS) { | ||
const coordinates = e.features[0].geometry.coordinates[0]; | ||
const extent = { | ||
minLon: coordinates[0][0], | ||
minLat: coordinates[0][1], | ||
maxLon: coordinates[0][0], | ||
maxLat: coordinates[0][1] | ||
}; | ||
for (let i = 1; i < coordinates.length; i++) { | ||
extent.minLon = Math.min(coordinates[i][0], extent.minLon); | ||
extent.minLat = Math.min(coordinates[i][1], extent.minLat); | ||
extent.maxLon = Math.max(coordinates[i][0], extent.maxLon); | ||
extent.maxLat = Math.max(coordinates[i][1], extent.maxLat); | ||
} | ||
filter = createExtentFilterWithMeta(extent, indexPatternId, geoField, geoFieldType); | ||
} | ||
|
||
if (!filter) { | ||
return; | ||
} | ||
const isBoundingBox = this.props.drawState.drawType === DRAW_TYPE.BOUNDS; | ||
const geometry = e.features[0].geometry; | ||
// MapboxDraw returns coordinates with 12 decimals. Round to a more reasonable number | ||
roundCoordinates(geometry.coordinates); | ||
|
||
this.props.addFilters([filter]); | ||
try { | ||
const options = { | ||
indexPatternId: this.props.drawState.indexPatternId, | ||
geoFieldName: this.props.drawState.geoField, | ||
geoFieldType: this.props.drawState.geoFieldType, | ||
}; | ||
const filter = isBoundingBox | ||
? createSpatialFilterWithBoundingBox({ | ||
...options, | ||
geometryLabel: i18n.translate('xpack.maps.drawControl.defaultEnvelopeLabel', { | ||
defaultMessage: 'extent' | ||
}), | ||
geometry: getBoundingBoxGeometry(geometry) | ||
}) | ||
: createSpatialFilterWithGeometry({ | ||
...options, | ||
geometryLabel: i18n.translate('xpack.maps.drawControl.defaultShapeLabel', { | ||
defaultMessage: 'shape' | ||
}), | ||
geometry | ||
}); | ||
this.props.addFilters([filter]); | ||
} catch (error) { | ||
// TODO notify user why filter was not created | ||
console.log(error); | ||
} finally { | ||
this.props.disableDrawState(); | ||
} | ||
}; | ||
|
||
_debouncedSync = _.debounce(() => { | ||
|
@@ -233,8 +244,8 @@ export class MBMapContainer extends React.Component { | |
// Ensure that if the map is zoomed out such that multiple | ||
// copies of the feature are visible, the popup appears | ||
// over the copy being pointed to. | ||
while (Math.abs(mbLngLat.lng - coordinates[0]) > 180) { | ||
coordinates[0] += mbLngLat.lng > coordinates[0] ? 360 : -360; | ||
while (Math.abs(mbLngLat.lng - coordinates[LON_INDEX]) > 180) { | ||
coordinates[0] += mbLngLat.lng > coordinates[LON_INDEX] ? 360 : -360; | ||
} | ||
|
||
popupAnchorLocation = coordinates; | ||
|
Oops, something went wrong.