Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Backport 2.5] Update mapbounds logic (#175) #186

Merged
merged 1 commit into from
Jan 10, 2023
Merged

[Backport 2.5] Update mapbounds logic (#175) #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions common/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ export const LAYER_PANEL_HIDE_LAYER_ICON = 'eyeClosed';
export const MAX_LAYER_NAME_LIMIT = 35;
export const MAP_LAYER_DEFAULT_NAME = 'Default map';
export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
export const MIN_LONGITUDE = -180;
export const MAX_LONGITUDE = 180;

// Starting position [lng, lat] and zoom
export const MAP_INITIAL_STATE = {
Expand Down
38 changes: 25 additions & 13 deletions public/model/layerRenderController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { Map as Maplibre } from 'maplibre-gl';
import { LngLatBounds, Map as Maplibre } from 'maplibre-gl';
import { DocumentLayerSpecification, MapLayerSpecification } from './mapLayerType';
import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../common';
import { DASHBOARDS_MAPS_LAYER_TYPE, MAX_LONGITUDE, MIN_LONGITUDE } from '../../common';
import {
buildOpenSearchQuery,
Filter,
Expand All @@ -22,16 +22,27 @@ interface MaplibreRef {
current: Maplibre | null;
}

// OpenSearch only accepts longitude in range [-180, 180]
// Maplibre could return value out of the range
function adjustLongitudeForSearch(lon: number) {
if (lon < -180) {
return -180;
}
if (lon > 180) {
return 180;
// calculate lng limits based on map bounds
// maps can render more than 1 copies of map at lower zoom level and displays
// one side from 1 copy and other side from other copy at higher zoom level if
// screen crosses internation dateline
function calculateBoundingBoxLngLimit(bounds: LngLatBounds) {
const boundsMinLng = bounds.getNorthWest().lng;
const boundsMaxLng = bounds.getSouthEast().lng;
// if bounds expands more than 360 then, consider complete globe is visible
if (boundsMaxLng - boundsMinLng >= MAX_LONGITUDE - MIN_LONGITUDE) {
return {
right: MAX_LONGITUDE,
left: MIN_LONGITUDE,
};
}
return lon;
// wrap bounds if only portion of globe is visible
// wrap() returns a new LngLat object whose longitude is
// wrapped to the range (-180, 180).
return {
right: bounds.getSouthEast().wrap().lng,
left: bounds.getNorthWest().wrap().lng,
};
}

export const prepareDataLayerSource = (
Expand Down Expand Up @@ -112,13 +123,14 @@ export const handleDataLayerRender = (
maplibreRef.current
) {
const mapBounds = maplibreRef.current.getBounds();
const lngLimit = calculateBoundingBoxLngLimit(mapBounds);
const filterBoundingBox = {
bottom_right: {
lon: adjustLongitudeForSearch(mapBounds.getSouthEast().lng),
lon: lngLimit.right,
lat: mapBounds.getSouthEast().lat,
},
top_left: {
lon: adjustLongitudeForSearch(mapBounds.getNorthWest().lng),
lon: lngLimit.left,
lat: mapBounds.getNorthWest().lat,
},
};
Expand Down