I have a map loaded with a large geojson feature collection and would like to apply some fading (opacity) of the geometries that are near a certain latitude. All of the feature collections are MultiLinestrings so I have tried doing this for the line-opacity:
seamap.addLayer({
id: 'ship-segments-bottom',
type: 'line',
source: 'ship-segments',
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: jQuery("body").hasClass('page-id-18') ? 'none' : 'visible'
},
paint: {
'line-color': 'rgba(47, 76, 107, 0.4)',
'line-opacity': [
'case',
[
'all',
['>', ['at', 1, ['at', 0, ['at', 0, ['get', 'coordinates']]]], 34],
['<', ['at', 1, ['at', 0, ['at', 0, ['get', 'coordinates']]]], 41]
],
0.3,
1.0
]
}
})
However, they always render at full opacity.
Is this possible to access the coordinates directly? or do I need to add a property for each feature that gives it's latitude? I am a little concerned for performance if I have to process that in the frontend, I'm working with >50,000 features
I've also tried
{
'line-color': 'rgba(47, 76, 107, 0.4)',
'line-opacity':
[
'case',
[
'all',
['>', ['at', 1, ['at', 0, ['at', 0, ['get', 'coordinates', ['get', 'geometry']]]]], 34],
['<', ['at', 1, ['at', 0, ['at', 0, ['get', 'coordinates', ['get', 'geometry']]]]], 41]
],
0.3,
1.0
]
}
For reference, the collection might be like this but with many features:
{
"type": "FeatureCollection",
"features": [
{
"geometry": {
"coordinates": [
[
[
-121.5577,
34.6467
],
[
-121.5514,
34.6438
],
[
-121.5474,
34.642
],
[
-121.5434,
34.6403
],
[
-121.5289,
34.6334
],
[
-121.5154,
34.6273
],
[
-121.5123,
34.6257
],
[
-121.4936,
34.6177
],
[
-121.4909,
34.6164
],
[
-121.4833,
34.613
],
[
-121.4712,
34.6081
],
[
-121.4613,
34.6041
],
[
-121.4546,
34.6013
],
[
-121.4512,
34.6001
],
[
-121.4439,
34.5973
],
[
-121.4391,
34.5954
],
[
-121.4367,
34.5945
],
[
-121.4314,
34.5924
],
[
-121.4275,
34.5909
],
[
-121.4252,
34.5901
],
[
-121.414,
34.5857
],
[
-121.4117,
34.5847
],
[
-121.3808,
34.572
],
[
-121.3627,
34.5645
],
[
-121.3445,
34.557
],
[
-121.3414,
34.5556
],
[
-121.3394,
34.5548
],
[
-121.3212,
34.5477
],
[
-121.3069,
34.5418
],
[
-121.3017,
34.5397
],
[
-121.2844,
34.5325
],
[
-121.2785,
34.5298
],
[
-121.2626,
34.523
],
[
-121.2204,
34.505
],
[
-121.179,
34.4865
],
[
-121.1443,
34.4705
],
[
-121.1368,
34.467
],
[
-121.1333,
34.4653
],
[
-121.1138,
34.4593
],
[
-121.072,
34.4492
],
[
-121.0622,
34.4469
],
[
-121.0592,
34.4462
],
[
-121.0567,
34.4456
],
[
-121.0492,
34.4439
],
[
-121.0088,
34.4345
],
[
-120.982,
34.4283
],
[
-120.9452,
34.4201
],
[
-120.935,
34.418
],
[
-120.9279,
34.4164
],
[
-120.9124,
34.4128
],
[
-120.9085,
34.4121
],
[
-120.8935,
34.4091
],
[
-120.8885,
34.408
],
[
-120.8775,
34.4058
],
[
-120.8676,
34.4036
],
[
-120.8637,
34.4028
],
[
-120.8547,
34.4008
],
[
-120.8456,
34.3986
],
[
-120.8321,
34.3955
],
[
-120.8179,
34.3922
],
[
-120.8133,
34.3911
],
[
-120.7995,
34.3878
],
[
-120.7882,
34.385
],
[
-120.7759,
34.3821
],
[
-120.7618,
34.3795
],
[
-120.756,
34.3787
],
[
-120.748,
34.3776
],
[
-120.7361,
34.3751
],
[
-120.7289,
34.3735
],
[
-120.7249,
34.3727
],
[
-120.7177,
34.3712
],
[
-120.7013,
34.3676
],
[
-120.6721,
34.3609
],
[
-120.6572,
34.3575
],
[
-120.6521,
34.3563
],
[
-120.6334,
34.3518
],
[
-120.6236,
34.3494
],
[
-120.6161,
34.3475
],
[
-120.6023,
34.3439
],
[
-120.5875,
34.3401
],
[
-120.5748,
34.3371
],
[
-120.56,
34.3334
],
[
-120.5454,
34.3301
],
[
-120.5309,
34.3272
],
[
-120.5165,
34.3241
],
[
-120.5034,
34.3214
],
[
-120.5019,
34.3211
],
[
-120.4872,
34.3178
],
[
-120.4723,
34.3141
],
[
-120.4556,
34.3102
],
[
-120.4451,
34.3075
],
[
-120.4407,
34.3064
],
[
-120.4277,
34.3034
],
[
-120.3914,
34.2952
],
[
-120.3825,
34.2933
],
[
-120.365,
34.2898
],
[
-120.3525,
34.2872
],
[
-120.3354,
34.2837
],
[
-120.3223,
34.2809
],
[
-120.3074,
34.2777
],
[
-120.3011,
34.2763
],
[
-120.293,
34.2745
],
[
-120.2785,
34.2713
],
[
-120.264,
34.268
],
[
-120.2577,
34.2665
],
[
-120.2494,
34.2647
],
[
-120.2361,
34.262
],
[
-120.2346,
34.2618
],
[
-120.2213,
34.2592
],
[
-120.2199,
34.2589
],
[
-120.2049,
34.2559
],
[
-120.1908,
34.2529
],
[
-120.1898,
34.2526
],
[
-120.1844,
34.2514
],
[
-120.175,
34.2494
],
[
-120.1648,
34.2469
],
[
-120.1449,
34.2416
],
[
-120.1313,
34.2382
],
[
-120.125,
34.2367
],
[
-120.1167,
34.2348
],
[
-120.1065,
34.2325
],
[
-120.1006,
34.2311
],
[
-120.1001,
34.231
],
[
-120.0961,
34.2301
],
[
-120.0857,
34.2278
],
[
-120.0722,
34.225
],
[
-120.0602,
34.2226
],
[
-120.0481,
34.2201
],
[
-120.0421,
34.2187
],
[
-120.0345,
34.217
],
[
-120.025,
34.2148
],
[
-120.0101,
34.2115
],
[
-119.9974,
34.2086
],
[
-119.981,
34.205
],
[
-119.9666,
34.2014
],
[
-119.9463,
34.1958
],
[
-119.9401,
34.1946
],
[
-119.9255,
34.1915
],
[
-119.9208,
34.1903
],
[
-119.9161,
34.1891
],
[
-119.91,
34.1876
],
[
-119.9029,
34.186
],
[
-119.8957,
34.1842
],
[
-119.8827,
34.1811
],
[
-119.8665,
34.1771
],
[
-119.8592,
34.1753
],
[
-119.8572,
34.1749
],
[
-119.8542,
34.1742
],
[
-119.8518,
34.1737
],
[
-119.8375,
34.1705
],
[
-119.8251,
34.1678
],
[
-119.8161,
34.1658
],
[
-119.8091,
34.1642
],
[
-119.795,
34.1614
],
[
-119.7807,
34.1585
],
[
-119.7737,
34.1571
],
[
-119.7667,
34.1557
],
[
-119.7529,
34.1524
],
[
-119.7487,
34.1513
],
[
-119.7382,
34.1486
],
[
-119.7241,
34.1452
],
[
-119.7104,
34.1418
],
[
-119.7066,
34.1409
],
[
-119.6959,
34.1383
],
[
-119.6816,
34.1347
],
[
-119.6678,
34.1315
],
[
-119.663,
34.1304
],
[
-119.6545,
34.1284
],
[
-119.624,
34.1214
],
[
-119.6192,
34.1204
],
[
-119.5954,
34.1148
],
[
-119.5814,
34.1115
],
[
-119.5755,
34.11
],
[
-119.5681,
34.1084
],
[
-119.5561,
34.1057
],
[
-119.5543,
34.1054
],
[
-119.5505,
34.1047
],
[
-119.5405,
34.103
],
[
-119.5308,
34.1013
],
[
-119.5277,
34.1008
],
[
-119.5204,
34.0998
],
[
-119.5133,
34.0982
],
[
-119.5009,
34.0954
],
[
-119.4948,
34.094
],
[
-119.4914,
34.0932
],
[
-119.4879,
34.0923
],
[
-119.4758,
34.0897
],
[
-119.457,
34.0855
],
[
-119.4507,
34.0841
],
[
-119.4489,
34.0837
],
[
-119.4444,
34.0827
],
[
-119.4426,
34.0823
],
[
-119.4372,
34.0809
],
[
-119.4359,
34.0806
],
[
-119.4232,
34.0774
],
[
-119.4214,
34.0769
],
[
-119.4151,
34.0752
],
[
-119.4123,
34.0744
],
[
-119.4096,
34.0737
],
[
-119.4069,
34.073
],
[
-119.4041,
34.0722
],
[
-119.3987,
34.0707
],
[
-119.3928,
34.069
],
[
-119.3869,
34.0673
],
[
-119.3797,
34.0653
],
[
-119.3683,
34.0623
],
[
-119.3669,
34.062
],
[
-119.3525,
34.0588
],
[
-119.3398,
34.0561
],
[
-119.3339,
34.0548
],
[
-119.3254,
34.053
],
[
-119.2933,
34.0463
],
[
-119.2883,
34.0453
],
[
-119.2875,
34.0451
],
[
-119.2821,
34.0437
],
[
-119.2764,
34.0422
],
[
-119.2716,
34.0408
],
[
-119.2541,
34.0328
],
[
-119.2478,
34.0299
],
[
-119.2361,
34.0244
],
[
-119.224,
34.0188
],
[
-119.2125,
34.0136
],
[
-119.2009,
34.0083
],
[
-119.1896,
34.0027
],
[
-119.1667,
33.9916
],
[
-119.1587,
33.9877
],
[
-119.1556,
33.9862
],
[
-119.1465,
33.9818
],
[
-119.1438,
33.9805
],
[
-119.1323,
33.9748
],
[
-119.1292,
33.9733
],
[
-119.1242,
33.9708
],
[
-119.1206,
33.969
],
[
-119.1117,
33.9645
],
[
-119.1089,
33.9631
],
[
-119.0892,
33.9532
],
[
-119.0852,
33.9512
],
[
-119.0731,
33.9453
],
[
-119.0606,
33.9391
],
[
-119.0517,
33.9348
],
[
-119.0497,
33.9339
],
[
-119.0389,
33.9291
],
[
-119.0368,
33.9282
],
[
-119.0259,
33.9233
],
[
-119.0144,
33.9183
],
[
-119.012,
33.9173
],
[
-119.0068,
33.915
],
[
-119.0023,
33.9129
],
[
-118.9999,
33.9119
],
[
-118.9874,
33.9063
],
[
-118.9773,
33.9017
],
[
-118.9535,
33.8908
],
[
-118.9515,
33.8899
],
[
-118.9491,
33.8888
],
[
-118.9397,
33.8841
],
[
-118.928,
33.878
],
[
-118.923,
33.8753
],
[
-118.8931,
33.8609
],
[
-118.8872,
33.8581
],
[
-118.8808,
33.8551
],
[
-118.8709,
33.8504
],
[
-118.8511,
33.8411
],
[
-118.8474,
33.8395
],
[
-118.845,
33.8384
],
[
-118.8331,
33.8328
],
[
-118.8255,
33.8293
],
[
-118.821,
33.8273
],
[
-118.815,
33.8246
],
[
-118.8142,
33.8242
],
[
-118.809,
33.8218
],
[
-118.7929,
33.8145
],
[
-118.7893,
33.8128
],
[
-118.7849,
33.8108
],
[
-118.7784,
33.8078
],
[
-118.7773,
33.8073
],
[
-118.7626,
33.8001
],
[
-118.761,
33.7993
],
[
-118.7491,
33.7934
],
[
-118.7373,
33.7874
],
[
-118.7293,
33.7835
],
[
-118.7266,
33.7821
],
[
-118.7253,
33.7815
],
[
-118.7202,
33.7789
],
[
-118.7016,
33.7694
],
[
-118.6891,
33.7632
],
[
-118.6867,
33.762
],
[
-118.6839,
33.7605
]
]
],
"type": "MultiLineString"
},
"properties": {
"date": "2025年8月04日 00:00:00 GMT",
"time_ago": 18
},
"type": "Feature"
}
]
}