From 8d522127304a780e80c22ae42ca5cafa8a5a5da5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20de=20Dios=20Mart=C3=ADnez=20Vallejo?= Date: Tue, 24 Feb 2026 16:00:18 +0100 Subject: [PATCH 1/4] feat: line layer --- .../lib/layers/LineLayer/common.ts | 16 ++++++++ .../lib/layers/LineLayer/index.android.ts | 28 ++++++++++++++ .../lib/layers/LineLayer/index.d.ts | 17 +++++++++ .../lib/layers/LineLayer/index.ios.ts | 37 +++++++++++++++++++ packages/ui-maplibre/lib/layers/index.ts | 1 + 5 files changed, 99 insertions(+) create mode 100644 packages/ui-maplibre/lib/layers/LineLayer/common.ts create mode 100644 packages/ui-maplibre/lib/layers/LineLayer/index.android.ts create mode 100644 packages/ui-maplibre/lib/layers/LineLayer/index.d.ts create mode 100644 packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts diff --git a/packages/ui-maplibre/lib/layers/LineLayer/common.ts b/packages/ui-maplibre/lib/layers/LineLayer/common.ts new file mode 100644 index 0000000..f4f5d01 --- /dev/null +++ b/packages/ui-maplibre/lib/layers/LineLayer/common.ts @@ -0,0 +1,16 @@ +import { LineLayer as ILineLayer, LineLayerProperties } from '.'; +import { AbstractVectorLayer } from '../AbstractVectorLayer'; +import type { ColorSpecification, PropertyValueSpecification } from '../../Expression'; +import { PaintProperty } from '../../utils/decorators'; + +export abstract class LineLayerCommon extends AbstractVectorLayer implements ILineLayer { + @PaintProperty('line-color') + public set lineColor(value: PropertyValueSpecification) { + this.setPropertyValueInternal('line-color', value); + } + + @PaintProperty('line-width') + public set lineWidth(value: PropertyValueSpecification) { + this.setPropertyValueInternal('line-width', value); + } +} diff --git a/packages/ui-maplibre/lib/layers/LineLayer/index.android.ts b/packages/ui-maplibre/lib/layers/LineLayer/index.android.ts new file mode 100644 index 0000000..41041cd --- /dev/null +++ b/packages/ui-maplibre/lib/layers/LineLayer/index.android.ts @@ -0,0 +1,28 @@ +import { LineLayerCommon } from './common'; +import { BaseSource } from '../../sources'; + +export class LineLayer extends LineLayerCommon { + constructor(id: string, source: BaseSource) { + super(id, source); + } + + public override initNative(id: string, source: BaseSource): org.maplibre.android.style.layers.LineLayer { + return new org.maplibre.android.style.layers.LineLayer(id, source.getId()); + } + + public override get lineColor() { + return this.getOrSetPropertyValueInternal('line-color', () => this.native.getLineColor().value); + } + + public override set lineColor(value) { + super.lineColor = value; + } + + public override get lineWidth() { + return this.getOrSetPropertyValueInternal('line-width', () => this.native.getLineWidth().value?.floatValue?.()); + } + + public override set lineWidth(value) { + super.lineWidth = value; + } +} diff --git a/packages/ui-maplibre/lib/layers/LineLayer/index.d.ts b/packages/ui-maplibre/lib/layers/LineLayer/index.d.ts new file mode 100644 index 0000000..5817028 --- /dev/null +++ b/packages/ui-maplibre/lib/layers/LineLayer/index.d.ts @@ -0,0 +1,17 @@ +import { ColorSpecification, PropertyValueSpecification } from '../../Expression'; +import { BaseSource } from '../../sources'; +import { AbstractVectorLayer } from '../AbstractVectorLayer'; +import { LayerProperties } from '../BaseLayer'; + +export type LineLayerProperties = LayerProperties & { + 'line-color': PropertyValueSpecification; + 'line-width': PropertyValueSpecification; +}; + +export declare class LineLayer extends AbstractVectorLayer { + constructor(id: string, source: BaseSource); + public get lineColor(): PropertyValueSpecification; + public set lineColor(value: PropertyValueSpecification); + public get lineWidth(): PropertyValueSpecification; + public set lineWidth(value: PropertyValueSpecification); +} diff --git a/packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts b/packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts new file mode 100644 index 0000000..39a9e39 --- /dev/null +++ b/packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts @@ -0,0 +1,37 @@ +import { LineLayerCommon } from './common'; +import { BaseSource } from '../../sources'; +import { Expression } from '../../Expression'; +import { Color } from '@nativescript/core'; +import { NativeBoxedValue } from '../../nativeWrappers/NativeBoxedValue'; + +export class LineLayer extends LineLayerCommon { + constructor(id: string, source: BaseSource) { + super(id, source); + } + + public override initNative(id: string, source: BaseSource): MLNLineStyleLayer { + return MLNLineStyleLayer.alloc().initWithIdentifierSource(id, source.native); + } + + public override get lineColor() { + return this.getOrSetPropertyValueInternal('line-color', () => (Expression.initWithNative(this.native.lineColor) as Expression).toJSON()); + } + + public override set lineColor(value) { + const expression = Expression.propertyValue(typeof value === 'string' ? new NativeBoxedValue(new Color(value).ios) : value); + + super.lineColor = value; + this.native.lineColor = expression?.native; + } + + public override get lineWidth() { + return this.getOrSetPropertyValueInternal('line-width', () => (Expression.initWithNative(this.native.lineWidth) as Expression).toJSON()); + } + + public override set lineWidth(value) { + const expression = Expression.propertyValue(value); + + super.lineWidth = value; + this.native.lineWidth = expression?.native; + } +} diff --git a/packages/ui-maplibre/lib/layers/index.ts b/packages/ui-maplibre/lib/layers/index.ts index 7574f2a..f9a9cc0 100644 --- a/packages/ui-maplibre/lib/layers/index.ts +++ b/packages/ui-maplibre/lib/layers/index.ts @@ -2,4 +2,5 @@ export * from './AbstractVectorLayer'; export * from './BackgroundLayer'; export * from './BaseLayer'; export * from './CircleLayer'; +export * from './LineLayer'; export * from './SymbolLayer'; From 989927704281a67648c1a6ba362e6941420f5abe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20de=20Dios=20Mart=C3=ADnez=20Vallejo?= Date: Fri, 27 Feb 2026 23:09:08 +0100 Subject: [PATCH 2/4] chore: bump ios MapLibre --- packages/ui-maplibre/platforms/ios/Podfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-maplibre/platforms/ios/Podfile b/packages/ui-maplibre/platforms/ios/Podfile index d987bc6..79b17be 100644 --- a/packages/ui-maplibre/platforms/ios/Podfile +++ b/packages/ui-maplibre/platforms/ios/Podfile @@ -1,3 +1,3 @@ platform :ios, '12.0' -pod 'MapLibre', '~> 6.19.1' \ No newline at end of file +pod 'MapLibre', '~> 6.23.0' \ No newline at end of file From e0aac7555aedf0c21e9769ca7552538621b95a73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20de=20Dios=20Mart=C3=ADnez=20Vallejo?= Date: Fri, 27 Feb 2026 23:09:41 +0100 Subject: [PATCH 3/4] fix: add LineLayer support in Style class for Android and iOS --- packages/ui-maplibre/lib/Style/index.android.ts | 4 +++- packages/ui-maplibre/lib/Style/index.ios.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ui-maplibre/lib/Style/index.android.ts b/packages/ui-maplibre/lib/Style/index.android.ts index 5f18976..cd17b3f 100644 --- a/packages/ui-maplibre/lib/Style/index.android.ts +++ b/packages/ui-maplibre/lib/Style/index.android.ts @@ -1,7 +1,7 @@ import { ImageSource } from '@nativescript/core'; import { StyleCommon } from './common'; import { BaseSource, GeoJsonSource } from '../sources'; -import { BackgroundLayer, BaseLayer, CircleLayer, SymbolLayer } from '../layers'; +import { BackgroundLayer, BaseLayer, CircleLayer, LineLayer, SymbolLayer } from '../layers'; export class Style extends StyleCommon { public override addImage(name: string, source: ImageSource): void { @@ -66,6 +66,8 @@ export class Style extends StyleCommon { layer = BackgroundLayer.initWithNative(nLayer) as BackgroundLayer; } else if (nLayer instanceof org.maplibre.android.style.layers.CircleLayer) { layer = CircleLayer.initWithNative(nLayer) as CircleLayer; + } else if (nLayer instanceof org.maplibre.android.style.layers.LineLayer) { + layer = LineLayer.initWithNative(nLayer) as LineLayer; } else if (nLayer instanceof org.maplibre.android.style.layers.SymbolLayer) { layer = SymbolLayer.initWithNative(nLayer) as SymbolLayer; } else { diff --git a/packages/ui-maplibre/lib/Style/index.ios.ts b/packages/ui-maplibre/lib/Style/index.ios.ts index 75e8362..eab8d8c 100644 --- a/packages/ui-maplibre/lib/Style/index.ios.ts +++ b/packages/ui-maplibre/lib/Style/index.ios.ts @@ -1,7 +1,7 @@ import { ImageSource } from '@nativescript/core'; import { StyleCommon } from './common'; import { BaseSource, GeoJsonSource } from '../sources'; -import { BackgroundLayer, BaseLayer, CircleLayer, SymbolLayer } from '../layers'; +import { BackgroundLayer, BaseLayer, CircleLayer, LineLayer, SymbolLayer } from '../layers'; export class Style extends StyleCommon { public override addImage(name: string, source: ImageSource) { @@ -78,6 +78,8 @@ export class Style extends StyleCommon { layer = BackgroundLayer.initWithNative(nLayer) as BackgroundLayer; } else if (nLayer instanceof MLNCircleStyleLayer) { layer = CircleLayer.initWithNative(nLayer) as CircleLayer; + } else if (nLayer instanceof MLNLineStyleLayer) { + layer = LineLayer.initWithNative(nLayer) as LineLayer; } else if (nLayer instanceof MLNSymbolStyleLayer) { layer = SymbolLayer.initWithNative(nLayer) as SymbolLayer; } else { From 708280003ac3abcc227b4e57d2ffb6296bd2905c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20de=20Dios=20Mart=C3=ADnez=20Vallejo?= Date: Sat, 28 Feb 2026 00:44:16 +0100 Subject: [PATCH 4/4] feat: add line-opacity --- packages/ui-maplibre/lib/layers/LineLayer/common.ts | 5 +++++ .../ui-maplibre/lib/layers/LineLayer/index.android.ts | 8 ++++++++ packages/ui-maplibre/lib/layers/LineLayer/index.d.ts | 3 +++ .../ui-maplibre/lib/layers/LineLayer/index.ios.ts | 11 +++++++++++ 4 files changed, 27 insertions(+) diff --git a/packages/ui-maplibre/lib/layers/LineLayer/common.ts b/packages/ui-maplibre/lib/layers/LineLayer/common.ts index f4f5d01..7a0ee5c 100644 --- a/packages/ui-maplibre/lib/layers/LineLayer/common.ts +++ b/packages/ui-maplibre/lib/layers/LineLayer/common.ts @@ -13,4 +13,9 @@ export abstract class LineLayerCommon extends AbstractVectorLayer) { this.setPropertyValueInternal('line-width', value); } + + @PaintProperty('line-opacity') + public set lineOpacity(value: PropertyValueSpecification) { + this.setPropertyValueInternal('line-opacity', value); + } } diff --git a/packages/ui-maplibre/lib/layers/LineLayer/index.android.ts b/packages/ui-maplibre/lib/layers/LineLayer/index.android.ts index 41041cd..1d6cf47 100644 --- a/packages/ui-maplibre/lib/layers/LineLayer/index.android.ts +++ b/packages/ui-maplibre/lib/layers/LineLayer/index.android.ts @@ -25,4 +25,12 @@ export class LineLayer extends LineLayerCommon this.native.getLineOpacity().value?.floatValue?.()); + } + + public override set lineOpacity(value) { + super.lineOpacity = value; + } } diff --git a/packages/ui-maplibre/lib/layers/LineLayer/index.d.ts b/packages/ui-maplibre/lib/layers/LineLayer/index.d.ts index 5817028..d927a52 100644 --- a/packages/ui-maplibre/lib/layers/LineLayer/index.d.ts +++ b/packages/ui-maplibre/lib/layers/LineLayer/index.d.ts @@ -6,6 +6,7 @@ import { LayerProperties } from '../BaseLayer'; export type LineLayerProperties = LayerProperties & { 'line-color': PropertyValueSpecification; 'line-width': PropertyValueSpecification; + 'line-opacity': PropertyValueSpecification; }; export declare class LineLayer extends AbstractVectorLayer { @@ -14,4 +15,6 @@ export declare class LineLayer extends AbstractVectorLayer); public get lineWidth(): PropertyValueSpecification; public set lineWidth(value: PropertyValueSpecification); + public get lineOpacity(): PropertyValueSpecification; + public set lineOpacity(value: PropertyValueSpecification); } diff --git a/packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts b/packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts index 39a9e39..9e164c7 100644 --- a/packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts +++ b/packages/ui-maplibre/lib/layers/LineLayer/index.ios.ts @@ -34,4 +34,15 @@ export class LineLayer extends LineLayerCommon { super.lineWidth = value; this.native.lineWidth = expression?.native; } + + public override get lineOpacity() { + return this.getOrSetPropertyValueInternal('line-opacity', () => (Expression.initWithNative(this.native.lineOpacity) as Expression).toJSON()); + } + + public override set lineOpacity(value) { + const expression = Expression.propertyValue(value); + + super.lineOpacity = value; + this.native.lineOpacity = expression?.native; + } }