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

Update mapbounds logic #175

Merged
merged 1 commit into from
Jan 10, 2023
+27 −13
Merged

Update mapbounds logic #175

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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice improvement 👍

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) {
Copy link
Member Author

@VijayanB VijayanB Jan 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. SouthEast will always be greater than NorthWest in Maplibre since we are not wrapping.

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,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have a question here, suppose the current map lng bounding is [-170, 181], it is [-170, -179] after wrapping. It will return

{
  right: -179,
  left: -170,
}

The query would be

{
  bottom_right: {
        lon: -179,
        lat: ...,
      },
      top_left: {
        lon: -170,
        lat: ...,
      },
    };

Is this what OpenSearch expecting?

Copy link
Member Author

@VijayanB VijayanB Jan 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ruanyl Sorry, do you mean will OpenSearch accept similar to following query or not

{
  "DestLocation": {
    "bottom_right": {
      "lon": -176.8581559092076,
      "lat": -38.91257159667413
    },
    "top_left": {
      "lon": -173.24641047835382,
      "lat": 78.53889135857452
    }
  }
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@VijayanB I mean will OpenSearch return the same results as expected in the bounding box [-170, 181] after the lng been wrapped in such case where bottom_right.lon < top_left .lon?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ruanyl Yes.

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