From 668e01606ddc2bef23fddfff6c3491fbb006b297 Mon Sep 17 00:00:00 2001 From: Merge angular migration to maplibre/mapbox refactor Date: Fri, 20 Dec 2024 17:37:20 +0100 Subject: [PATCH] Maplibre is the new mapbox --- .../arlas-map/src/lib/draw/modes/utils.ts | 108 +++++++++--------- .../src/lib/legend/legend.component.ts | 2 +- .../src/lib/legend/legend.service.ts | 3 +- .../arlas-mapbox/src/lib/map/ArlasMapboxGL.ts | 63 +++++----- .../src/lib/legend/legend.service.ts | 37 +++--- 5 files changed, 106 insertions(+), 107 deletions(-) diff --git a/projects/arlas-map/src/lib/draw/modes/utils.ts b/projects/arlas-map/src/lib/draw/modes/utils.ts index 86518712..7f109e98 100644 --- a/projects/arlas-map/src/lib/draw/modes/utils.ts +++ b/projects/arlas-map/src/lib/draw/modes/utils.ts @@ -18,68 +18,68 @@ */ export function createDrawVertex(parentId, coordinates, path, selected) { - return { - type: 'Feature', - properties: { - meta: 'vertex', - parent: parentId, - coord_path: path, - active: selected ? 'true' : 'false', - }, - geometry: { - type: 'Point', - coordinates, - }, - }; + return { + type: 'Feature', + properties: { + meta: 'vertex', + parent: parentId, + coord_path: path, + active: selected ? 'true' : 'false', + }, + geometry: { + type: 'Point', + coordinates, + }, + }; } export function displayFeatures(state, geojson, display) { - const isActiveLine = geojson.properties.id === state.line.id; - geojson.properties.active = isActiveLine ? 'true' : 'false'; - if (!isActiveLine) { - if (!geojson.geometry.coordinates[0][0]) { - return null; - } - return display(geojson); + const isActiveLine = geojson.properties.id === state.line.id; + geojson.properties.active = isActiveLine ? 'true' : 'false'; + if (!isActiveLine) { + if (!geojson.geometry.coordinates[0][0]) { + return null; } + return display(geojson); + } - // Only render the line if it has at least one real coordinate - if (geojson.geometry.coordinates.length < 2) { - return null; - } - geojson.properties.meta = 'feature'; + // Only render the line if it has at least one real coordinate + if (geojson.geometry.coordinates.length < 2) { + return null; + } + geojson.properties.meta = 'feature'; - // displays center vertex as a point feature - display( - createDrawVertex( - state.line.id, - geojson.geometry.coordinates[ - state.direction === 'forward' - ? geojson.geometry.coordinates.length - 2 - : 1 - ], - `${state.direction === 'forward' - ? geojson.geometry.coordinates.length - 2 - : 1 - }`, - false - ) - ); + // displays center vertex as a point feature + display( + createDrawVertex( + state.line.id, + geojson.geometry.coordinates[ + state.direction === 'forward' + ? geojson.geometry.coordinates.length - 2 + : 1 + ], + `${state.direction === 'forward' + ? geojson.geometry.coordinates.length - 2 + : 1 + }`, + false + ) + ); - // displays the line as it is drawn - display(geojson); + // displays the line as it is drawn + display(geojson); } export function updateCoordinates(state, e) { - if (state.direction === 'forward') { - state.currentVertexPosition += 1; // eslint-disable-line - state.line.updateCoordinate( - state.currentVertexPosition, - e.lngLat.lng, - e.lngLat.lat - ); - } else { - state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat); - } -} \ No newline at end of file + if (state.direction === 'forward') { + state.currentVertexPosition += 1; // eslint-disable-line + state.line.updateCoordinate( + state.currentVertexPosition, + e.lngLat.lng, + e.lngLat.lat + ); + } else { + state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat); + } +} diff --git a/projects/arlas-map/src/lib/legend/legend.component.ts b/projects/arlas-map/src/lib/legend/legend.component.ts index e6426375..d16ebac4 100644 --- a/projects/arlas-map/src/lib/legend/legend.component.ts +++ b/projects/arlas-map/src/lib/legend/legend.component.ts @@ -97,7 +97,7 @@ export class LegendComponent implements OnInit, AfterViewInit, OnChanges { private legendData: Map = new Map(); public colorPalette = ''; public strokeColorPalette = ''; - + private readonly MAX_CIRLE_RADIUS = 7; private readonly LEGEND_WIDTH = 210; private readonly _onDestroy$ = new Subject(); diff --git a/projects/arlas-map/src/lib/legend/legend.service.ts b/projects/arlas-map/src/lib/legend/legend.service.ts index 5e015ab1..e1b48fc1 100644 --- a/projects/arlas-map/src/lib/legend/legend.service.ts +++ b/projects/arlas-map/src/lib/legend/legend.service.ts @@ -132,7 +132,8 @@ export abstract class LegendService { } - public static setInterpolatedColorLegend(colorLegend: Legend, colorExpression: any[], legendData: Map, + public static setInterpolatedColorLegend(colorLegend: Legend, colorExpression: any[], + legendData: Map, visibleMode: boolean) { colorLegend.type = PROPERTY_SELECTOR_SOURCE.interpolated; /** color = ["interplate", ['linear'], ["get", "field"], 0, 1... ]**/ diff --git a/projects/arlas-mapbox/src/lib/map/ArlasMapboxGL.ts b/projects/arlas-mapbox/src/lib/map/ArlasMapboxGL.ts index e55d004d..ad2b75d0 100644 --- a/projects/arlas-mapbox/src/lib/map/ArlasMapboxGL.ts +++ b/projects/arlas-mapbox/src/lib/map/ArlasMapboxGL.ts @@ -53,19 +53,19 @@ export class ArlasMapboxGL extends AbstractArlasMapGL { super(config); } - public paddedBounds(npad: number, spad: number, epad: number, wpad: number, map: mapboxgl.Map, SW: ArlasLngLat, NE: ArlasLngLat): LngLat[] { - const topRight = map.project(NE); - const bottomLeft = map.project(SW); + public paddedBounds(npad: number, spad: number, epad: number, wpad: number, mapboxMapInstance: mapboxgl.Map, SW: ArlasLngLat, NE: ArlasLngLat): LngLat[] { + const topRight = mapboxMapInstance.project(NE); + const bottomLeft = mapboxMapInstance.project(SW); const scale = 1; - const southWestToPoint = map.project(SW); - const southWestPoint = new Point(((southWestToPoint.x - bottomLeft.x) * scale) - wpad, ((southWestToPoint.y - topRight.y) * scale) + spad); + const swToPoint = mapboxMapInstance.project(SW); + const southWestPoint = new Point(((swToPoint.x - bottomLeft.x) * scale) - wpad, ((swToPoint.y - topRight.y) * scale) + spad); const southWestWorld = new Point(southWestPoint.x / scale + bottomLeft.x, southWestPoint.y / scale + topRight.y); - const swWorld = map.unproject(southWestWorld); - const northEastToPoint = map.project(NE); - const northEastPoint = new Point(((northEastToPoint.x - bottomLeft.x) * scale) + epad, ((northEastToPoint.y - topRight.y) * scale) - npad); + const sw = mapboxMapInstance.unproject(southWestWorld); + const neToPoint = mapboxMapInstance.project(NE); + const northEastPoint = new Point(((neToPoint.x - bottomLeft.x) * scale) + epad, ((neToPoint.y - topRight.y) * scale) - npad); const northEastWorld = new Point(northEastPoint.x / scale + bottomLeft.x, northEastPoint.y / scale + topRight.y); - const neWorld = map.unproject(northEastWorld); - return [swWorld, neWorld]; + const ne = mapboxMapInstance.unproject(northEastWorld); + return [sw, ne]; } public on(type: string, listener: (ev: any) => void): this { @@ -246,33 +246,32 @@ export class ArlasMapboxGL extends AbstractArlasMapGL { const panLoad = this._margePanForLoad * Math.max(height, width) / 100; const panTest = this._margePanForTest * Math.max(height, width) / 100; - const extendForLoadLatLng = this.paddedBounds(panLoad, panLoad, panLoad, panLoad, this.getMapProvider(), southWest, northEast); - const extendForTestdLatLng = this.paddedBounds(panTest, panTest, panTest, panTest, this.getMapProvider(), southWest, northEast); - onMoveData.extendForLoad = [ - extendForLoadLatLng[1].wrap().lat, - extendForLoadLatLng[0].wrap().lng, - extendForLoadLatLng[0].wrap().lat, - extendForLoadLatLng[1].wrap().lng - ]; + const loadLatLngExtent = this.paddedBounds(panLoad, panLoad, panLoad, panLoad, this.getMapProvider(), southWest, northEast); + const testLatLngExtent = this.paddedBounds(panTest, panTest, panTest, panTest, this.getMapProvider(), southWest, northEast); onMoveData.extendForTest = [ - extendForTestdLatLng[1].wrap().lat, - extendForTestdLatLng[0].wrap().lng, - extendForTestdLatLng[0].wrap().lat, - extendForTestdLatLng[1].wrap().lng + testLatLngExtent[1].wrap().lat, + testLatLngExtent[0].wrap().lng, + testLatLngExtent[0].wrap().lat, + testLatLngExtent[1].wrap().lng ]; - onMoveData.rawExtendForLoad = [ - extendForLoadLatLng[1].lat, - extendForLoadLatLng[0].lng, - extendForLoadLatLng[0].lat, - extendForLoadLatLng[1].lng, + onMoveData.extendForLoad = [ + loadLatLngExtent[1].wrap().lat, + loadLatLngExtent[0].wrap().lng, + loadLatLngExtent[0].wrap().lat, + loadLatLngExtent[1].wrap().lng ]; onMoveData.rawExtendForTest = [ - extendForTestdLatLng[1].lat, - extendForTestdLatLng[0].lng, - extendForTestdLatLng[0].lat, - extendForTestdLatLng[1].lng, + testLatLngExtent[1].lat, + testLatLngExtent[0].lng, + testLatLngExtent[0].lat, + testLatLngExtent[1].lng, + ]; + onMoveData.rawExtendForLoad = [ + loadLatLngExtent[1].lat, + loadLatLngExtent[0].lng, + loadLatLngExtent[0].lat, + loadLatLngExtent[1].lng, ]; - return onMoveData; } diff --git a/projects/arlas-maplibre/src/lib/legend/legend.service.ts b/projects/arlas-maplibre/src/lib/legend/legend.service.ts index 466d9e42..dad5a864 100644 --- a/projects/arlas-maplibre/src/lib/legend/legend.service.ts +++ b/projects/arlas-maplibre/src/lib/legend/legend.service.ts @@ -16,15 +16,14 @@ * specific language governing permissions and limitations * under the License. */ -import tinycolor from 'tinycolor2'; import { Injectable } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; import { HistogramData } from 'arlas-d3/histograms/utils/HistogramUtils'; import { - CircleLegend, FillLegend, getMax, HEATMAP_DENSITY, HeatmapLegend, INTERPOLATE, + CircleLegend, FillLegend, getMax, HeatmapLegend, INTERPOLATE, LabelLegend, LayerMetadata, Legend, LegendData, LegendService, LineLegend, MATCH, - MAX_CIRLE_RADIUS, MAX_LINE_WIDTH, OTHER, PROPERTY_SELECTOR_SOURCE + MAX_CIRLE_RADIUS, MAX_LINE_WIDTH, PROPERTY_SELECTOR_SOURCE } from 'arlas-map'; import { CirclePaintProps, FillPaintProps, HeatmapPaintProps, @@ -103,35 +102,35 @@ export class MaplibreLegendService extends LegendService { }; - private static buildWidthLegend(width: number | any, - data: Map): Legend { + private static buildWidthLegend(lineWidth: number | any, + legendData: Map): Legend { /** if the line width is fix then it is not added to the legend*/ - const legend: Legend = {}; - if (Array.isArray(width)) { - if (width.length >= 3) { - if (width[0] === INTERPOLATE) { - const field = width[2][1]; - legend.title = field; - if (data?.get(field)) { - legend.minValue = data.get(field).minValue; - legend.maxValue = data.get(field).maxValue; + const widthLegend: Legend = {}; + if (Array.isArray(lineWidth)) { + if (lineWidth.length >= 3) { + if (lineWidth[0] === INTERPOLATE) { + const field = lineWidth[2][1]; + widthLegend.title = field; + if (legendData?.get(field)) { + widthLegend.minValue = legendData.get(field).minValue; + widthLegend.maxValue = legendData.get(field).maxValue; } - legend.type = PROPERTY_SELECTOR_SOURCE.interpolated; + widthLegend.type = PROPERTY_SELECTOR_SOURCE.interpolated; const lineWidthEvolution: Array = new Array(); - width.filter((w, i) => i >= 3).forEach((w, i) => { + lineWidth.filter((w, i) => i >= 3).forEach((w, i) => { if (i % 2 === 0) { - lineWidthEvolution.push({ key: w, value: width[i + 1 + 3] }); + lineWidthEvolution.push({ key: w, value: lineWidth[i + 1 + 3] }); } }); const maxLineWidth = getMax(lineWidthEvolution); if (maxLineWidth > MAX_LINE_WIDTH) { lineWidthEvolution.forEach(lw => lw.value = lw.value * MAX_LINE_WIDTH / maxLineWidth); } - legend.histogram = lineWidthEvolution; + widthLegend.histogram = lineWidthEvolution; } } } - return legend; + return widthLegend; } public getCircleLegend(paint: CirclePaintProps, visibileMode: boolean, legendData: