Implementation of setProperties method on LineLayer in MapBox encounters resolution issues

I am currently utilizing the Android Mapbox SDK to integrate a VectorSource into a MapboxMap and then I am trying to incorporate a LineLayer onto the map as well.

My version is 5.1.3

This code will be written in TypeScript due to its compatibility with the NativeScript framework, which enables the utilization of native libraries and direct access to native android/iOS APIs.

// These variables serve as easy references to classes in the mapbox package

const PropertyFactory = com.mapbox.mapboxsdk.style.layers.PropertyFactory;
const Property = com.mapbox.mapboxsdk.style.layers.Property;
const LineLayer = com.mapbox.mapboxsdk.style.layers.LineLayer;
const VectorSource = com.mapbox.mapboxsdk.style.sources.VectorSource;
const lineCap = com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineCap;
const lineColor = com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineColor;
const lineJoin = com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineJoin;
const lineWidth = com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineWidth;
const LatLngBounds = com.mapbox.mapboxsdk.geometry.LatLngBounds;
const FillLayer = com.mapbox.mapboxsdk.style.layers.FillLayer;
const SymbolLayer = com.mapbox.mapboxsdk.style.layers.SymbolLayer;
const CircleLayer = com.mapbox.mapboxsdk.style.layers.CircleLayer;


 // Set the vector source (GLSource) for the mapbox map
    const vectorSource = new VectorSource(
      layer.ID.toString(),
      `http://themaptiles.cloudapp.net/data/${layer.GLSource}.json`
    );
    this._mapboxMap.addSource(vectorSource);

  let newLayer;
    if (layer.Type == "line") {
      console.log(`*** Creating new LineLayer ***`);
      newLayer = new LineLayer("line-layer", layer.ID.toString());

      // Obtain the line color for this style
      const lColor = style["line"]["line-color"];
      const androidColor = new Color(lColor).android; // Ends up valid and similar to -1293839 for android use

      newLayer.setSourceLayer(layer.ID.toString());

      // This will encounter an error with 'Failed resolving method setProperties on class com.mapbox.mapboxsdk.style.layers.Layer'
      newLayer.setProperties(
        PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
        PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
        PropertyFactory.lineColor(androidColor),
        PropertyFactory.lineWidth(new java.lang.Float(2))
      );
    }


this._mapboxMap.addLayer(newLayer);

If I avoid using the setProperties method, the code runs without issues but no visible line appears on the map after adding the layer.

androidtypescriptmapboxnativescript

Answer №1

One issue that arises in the interaction between Java and JavaScript is the challenge of handling variadic functions in NativeScript.

When examining mapbox's official API documentation, the Layer.setProperties method is found to require a list of arguments:

Unfortunately, extracting these arguments for the JNI -> Java call to Layer.setProperties is not straightforward when calling the function from JavaScript. A workaround involves wrapping the arguments in an array instead.

  newLayer.setProperties([
    PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
    PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
    PropertyFactory.lineColor(androidColor),
    PropertyFactory.lineWidth(new java.lang.Float(2))
  ]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 5+ does not have any compatible call signatures for Type Search

Utilizing an addItem function that I found on this site, I encountered the following error message: Error TS2349 (TS) Cannot invoke an expression whose type lacks a call signature. Type 'Search' has no compatible call signatures. Definition o ...

angulartypescript

Encountering error 2307 "Cannot find module" when using Vue 3 with script setup and TypeScript

I am currently attempting to run unit tests in my Vue3 project using vue/test-utils and jest. Upon running the npm run test script, the test fails due to an error with the import: error TS2307: Cannot find module 'pathtofile/file.vue' I have tr ...

typescriptvue.jsjestjsvuejs3

What is the reason behind localStorage.getItem consistently returning a string value?

Something strange is happening. In the lib.dom.d.ts file, the type for localstorage.getItem shows as 'string | null', but in my app it always returns a string. Why is this discrepancy occurring? ...

javascripttypescript

Filter error - Unable to retrieve property 'toLowerCase' from null value

When filtering the input against the cached query result, I convert both the user input value and database values to lowercase for comparison. result = this.cachedResults.filter(f => f.prj.toLowerCase().indexOf((this.sV).toLowerCase()) !== -1); This ...

javascriptangulartypescriptangular7

Semantic-ui-react cannot be located by Docker

I am a beginner when it comes to docker and I'm looking to create a React app, specifically using TypeScript, inside a docker container. In order to do this, I need to incorporate semantic-ui-react into my project. I followed the instructions provide ...

reactjstypescriptdockerdocker-composesemantic-ui

Using the appropriate asynchronous action in Redux with the Redux-Thunk middleware

While learning middleware redux-thunk, I created a simple React App. However, I am facing a transpilation issue due to an incorrect type of async action fetchPosts in the interface PostListProps. Below is the code snippet of the functional component where ...

reactjstypescriptreact-reduxredux-thunk

Dynamically load components within a modal window

I am looking for a way to dynamically load a custom component inside a modal while keeping it as flexible as possible. Here is an example : -HTML CODE- <button id="floating_button" class="floating_button animation_floating_in" (click)="loadCustomComp ...

twitter-bootstrapangulartypescriptmodal-dialog

Switching buttons with AngularJS

I am currently working on a Github search app using the Github API in Angular. My goal is to make it so that when the user clicks the "Add to Favorite" button, the button disappears and the "Remove Favorite" button is displayed instead. I attempted to achi ...

javascriptangulartypescript

The object must contain a property 'children', which is required in the type '{ children: any; }' but missing in the type '{}'

While learning React from a variety of sources, I've encountered an issue with one of the examples. Error message: Property 'children' is missing in type '{}' but required in type '{ children: any; }' export default fu ...

reactjstypescript

Utilizing Angular 4 Typescript to create cascading drop-downs within a table

As a newcomer to Angular, I am in the process of building my first application using Angular 4 and TypeScript. I would like to implement Cascading dropdowns within a table using Angular 4. Currently, I am facing an issue where changing the dropdown selec ...

angularjstypescript

Troubleshooting localhost issue with a Chrome extension in Visual Studio Code

When working in VS Code, I encountered an issue with launching my HTML AngularJS project on localhost. Every time I try to launch the project, I receive an error message stating "Failed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:8080/) ...

angularjstypescriptgoogle-chromevisual-studio-code

Utilizing combinedReducers will not prompt a re-render when dispatching actions

When I refrain from using combineReducers: const store = createStore<StoreState,any,any,any>(pointReducer, { points: 1, languageName: 'Points', }); function tick() { store.dispatch(gameTick()); requestAnimationFrame(tick) ...

reactjstypescriptreduxreact-redux

Error: The object is not defined (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView')

I am currently working on developing a chat application using react-native with the following dependencies: "dependencies": { "@react-native-async-storage/async-storage": "~1.17.3", "@react-native-community/masked ...

typescriptreact-nativereact-native-gifted-chat

Is there a more effective alternative to using the ternary condition operator for extended periods of time?

Do you know of a more efficient solution to handle a situation like this? <tr [style.background]="level == 'ALARM' ? 'violet' : level == 'ERROR' ? 'orange' : level == 'WARNING' ? 'yellow' ...

angulartypescript

“What is the process of setting a referenced object to null?”

Here is an example of the code I'm working with: ngOnInit{ let p1 : Person = {}; console.log(p1); //Object { } this.setNull<Person>(p1); console.log(p1); //Object { } } private setNull<T>(obj : T){ obj = null; } My objective is to ...

javascriptangulartypescript

Expo constants failing to load on web due to unresolved manifest object issue

When setting up Firebase Auth in my expo app (using Google Auth), I needed to store my firebase variables in a .env file containing API_KEYS, AuthDomain, and more. To access these environment variables, I utilized expo constants in my firebase.ts file. Ini ...

javascripttypescriptfirebaseexporeact-native-web

Alert me in TypeScript whenever a method reference is detected

When passing a function reference as a parameter to another function and then calling it elsewhere, the context of "this" gets lost. To avoid this issue, I have to convert the method into an arrow function. Here's an example to illustrate: class Mees ...

typescripttypescript2.0

Material-UI chart displays only loading lines upon hovering

Currently, I am utilizing a Material UI Line chart in my NextJS 14 application to showcase some data. Although the data is being displayed properly, I have encountered an issue where the lines on the chart only render when hovered over, rather than appeari ...

reactjstypescriptnext.jsmaterial-uifrontend

In Angular 5, you cannot assign type 'any[]' to type 'typeof User'

After extracting data from the JSON file, I encountered a typo error message stating: Type 'any[]' is not assignable to type 'typeof User'. Here is my code in app.component.ts: import { Component, OnInit } from '@angular/core&a ...

angulartypescript

No recommended imports provided for React Testing Library within the VS Code environment

I am currently in the process of setting up a Next JS project with Typescript integration and utilizing React Testing Library. Unfortunately, I'm facing an issue with getting the recommended imports to work properly within my VS Code environment. To i ...

reactjstypescriptnext.jsreact-testing-library