nativescript-community / ui-mapbox

Interactive, thoroughly customizable maps powered by vector tiles and OpenGL.
33 stars 25 forks source link

circle-radius interpolation on iOS not working anymore #51

Open siewedu opened 3 years ago

siewedu commented 3 years ago

I updated the mapbox plugin from 5.0.0 to 6.2.9 and noticed that the circle-radius interpolation is not working anymore on iOS. Which means that a circle won't be adjusted in size according to the zoom level. The functionality was removed in PR #8

so basically this was removed

const nsDict = new (NSDictionary as any)(stopValues, stopKeys);

const nsArray = NSArray.arrayWithArray([nsDict]);

layer.circleRadius = NSExpression.expressionWithFormatArgumentArray("mgl_interpolate:withCurveType:parameters:stops:( $zoomLevel, 'exponential', 2, %@)", nsArray);

and replaced with a TODO

if (propertiesObject['circle-radius']) {
     if (typeof propertiesObject['circle-radius'] !== 'number') {
         throw new Error('Unsupported circle-radius type'); // TODO: Implement circle radius with stops
     }
     circleProperties['circleRadius'] = NSExpression.expressionForConstantValue(propertiesObject['circle-radius']);
 }

I tried to reintroduce the functionality and created a dictionary with some test values for the NSExpression

const nsDict = new (NSDictionary as any)([0, 5147], [0, 20]);
const nsArray = NSArray.arrayWithArray([nsDict]);
const expression = NSExpression.expressionWithFormatArgumentArray("mgl_interpolate:withCurveType:parameters:stops:( $zoomLevel, 'exponential', 2, %@)", nsArray);

but I get the following error at runtime

MapComponent:addCircle(): addCircle threw an error:Error: Unable to convert JSON object mgl_interpolate:withCurveType:parameters:stops:($zoomLevel, "linear", nil, {0 = 0, 20 = 5147}) to an NSExpression.

Which is weird since the same code was running in the old plugin version. Could it have something to do with the iOS-runtime? My project with the old plugin is running the iOS runtime 6.5.4 where as the new is project is running 8.0.0.

@cvietor did you run into the same issue while refactoring for the above mentioned PR? Might that be the reason you left it as a TODO?

siewedu commented 3 years ago

Ok nevermind, I just realised the functionality is working perfectly fine in the latest plugin version. You just have to use the new mapbox expression syntax https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/

{
    "circle-radius": [
        "interpolate", ["linear"], ["zoom"],
        // zoom is 5 (or less) -> circle radius will be 1px
        5, 1,
        // zoom is 10 (or greater) -> circle radius will be 5px
        10, 5
    ]
}

Would be nice to update that in the readme and the angular demo, since it is currently using the old syntax there which will not work with the current plugin version