Skip to content

Commit

Permalink
Maplibre is the new mapbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@MohamedHamouGisaia
MohamedHamouGisaia committed Dec 20, 2024
1 parent 8a6778c commit 668e016
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 107 deletions.
108 changes: 54 additions & 54 deletions projects/arlas-map/src/lib/draw/modes/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
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);
}
}
2 changes: 1 addition & 1 deletion projects/arlas-map/src/lib/legend/legend.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export class LegendComponent implements OnInit, AfterViewInit, OnChanges {
private legendData: Map<string, LegendData> = new Map();
public colorPalette = '';
public strokeColorPalette = '';

private readonly MAX_CIRLE_RADIUS = 7;
private readonly LEGEND_WIDTH = 210;
private readonly _onDestroy$ = new Subject<boolean>();
Expand Down
3 changes: 2 additions & 1 deletion projects/arlas-map/src/lib/legend/legend.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,8 @@ export abstract class LegendService {
}


public static setInterpolatedColorLegend(colorLegend: Legend, colorExpression: any[], legendData: Map<string, LegendData>,
public static setInterpolatedColorLegend(colorLegend: Legend, colorExpression: any[],
legendData: Map<string, LegendData>,
visibleMode: boolean) {
colorLegend.type = PROPERTY_SELECTOR_SOURCE.interpolated;
/** color = ["interplate", ['linear'], ["get", "field"], 0, 1... ]**/
Expand Down
63 changes: 31 additions & 32 deletions projects/arlas-mapbox/src/lib/map/ArlasMapboxGL.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand Down
37 changes: 18 additions & 19 deletions projects/arlas-maplibre/src/lib/legend/legend.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -103,35 +102,35 @@ export class MaplibreLegendService extends LegendService {

};

private static buildWidthLegend(width: number | any,
data: Map<string, LegendData>): Legend {
private static buildWidthLegend(lineWidth: number | any,
legendData: Map<string, LegendData>): 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<HistogramData> = 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:
Expand Down

0 comments on commit 668e016

Please sign in to comment.