Customize the color of polylines in Nativescript Google Maps

After reading the Nativescript app documentation on changing Google Maps polyline color, I found this information:

The line segment color should be in ARGB format, similar to the Color format. The default color is black (0xff000000).

I would like to utilize the following color:

rgb(138, 191, 95)

However, my attempts failed when implementing it in the code snippet below:

drawRoute(encodedPolylinePoints) {
            this.mapView.removeAllPolylines();
            this.routeCordinates = decodePolyline(encodedPolylinePoints);
            this.polyline = new Polyline();
            this.routeCordinates.forEach(point =>
                this.polyline.addPoint(Position.positionFromLatLng(point.lat, point.lng))
            );
            this.polyline.visible = true;
            this.polyline.geodesic = true;
            this.polyline.width = 2;
            this.polyline.color = new Color('#8ABF5F');
            this.mapView.addPolyline(this.polyline);
        },

How can I properly convert it to the required format for the app?

Answer №1

If you want to change the color of the polyline, you could first find the HEX conversion and then apply it like this

polyline.color = new Color('#8ABF5F');
.

    mapView.removeAllShapes();
    // Uncomment the following line if you want to decode the encoded polyline points
    // this.routeCoordinates = decodePolyline(encodedPolylinePoints);
    let testPolyLine = new Polyline();        
    US_COORDINATES.map((coordinates: USCoordinate) => {
        testPolyLine.addPoint(Position.positionFromLatLng(coordinates.latitude, coordinates.longitude));
    });
    testPolyLine.visible = true;
    testPolyLine.geodesic = true;
    testPolyLine.width = 2;
    testPolyLine.color = new Color('#8ABF5F');
    mapView.addPolyline(testPolyLine);

I hope this solution is useful for you!

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

unable to locate text within tag a using javascript

I developed JavaScript code to search for tags within an accordion. function tagSearch(){ let keyword = document.getElementById('find').value.toUpperCase(); let items = document.querySelectorAll('.accordion'); let links = document ...

My Redux reducer is being overridden by changes made using setState or .map() within my React component

After logging this.state.orginalSeries, this.props.demandGraphSeriesDataReducer, and newSeries, it appears that all data is being mutated. Despite attempting to use .map() and .slice() to prevent mutation of the original reducer data, it seems to still be ...

Realm/Swift composite key for primary identification

Looking for guidance on creating a composite primary key in Swift and Realm. I attempted the following code: class DbLocation : Object { dynamic var id = 0 dynamic var tourId = 0 dynamic var uuid : String { return "\(id)\(tourId)" } ...

Encountering the error message "File not found" when attempting to upload a file using retrofit

Currently, I am developing an Android app and facing an issue with posting a request containing a file to the server. To achieve this functionality, I am utilizing the retrofit library and performing a Multipart API request. Additionally, I am using Intent ...

Activating the delete event trigger for a tinyMCE object

How can I create a function that activates when a user deletes an object in tinyMCE? I want to remove uploaded images from a cache folder whenever a user deletes an image from the tinyMCE editor. If they upload an image and then delete it, I would like an ...

Having trouble sending messages on the server?

Programmer Seeking Help with Adding Data on the Server using JavaScript Stack I am encountering an issue with my javascript code as I am attempting to use the post method to add data on the server-side, but it seems to not be posting successfully. Can ...

Tips for refining the data displayed on your Kendo Grid

I have implemented a Kendo grid in my view and I am looking to apply filters to the data displayed on the grid. The grid is populated from a list within my model. @(Html.Kendo().Grid(Model.list) .Name("listgrid") .Columns(columns => { ...

Creating a private variable in Javascript is possible by using getter and setter functions to manage access to the

Is this the correct way to simulate a private variable? var C = function(a) { var _private = a + 1; // more code... Object.defineProperties(this, { 'privateProp': { get: function() { return _privat ...

Encountering the error "Cannot GET /login" while attempting to send a file through a post request in Express.js

I'm having trouble sending a new HTML file to the user after a successful login. Every time I attempt to send the file, I keep getting an error message saying "Cannot GET /login" on the page. Below is the section of code that's causing me diffic ...

Creating a dynamic background image for the ul/li div element

As a newcomer to website development, I am currently exploring how to dynamically set images in the ul/li elements within a div. Below is a snippet of the HTML code I have been working on: <div class="results"> <ul class="row"> < ...

Attempting to generate a JSON array using JavaScript

As I embark on my journey to learn JSON, I've encountered an issue while attempting to create an array of object Messages. The declaration seems to be error-free, but when I try to access it using the code snippet below: serverReply2.Mesages[0].Date, ...

Implementing features similar to Facebook comments using ASP.NET

I'm currently working on a project to create a blog platform using ASP.NET. One of the key features I'd like to include is the ability for users to add comments. My goal is to replicate the functionality of Facebook when it comes to adding and d ...

Tabindex malfunction in Bootstrap dropdown menu when nested within a form and pressing Enter key

Within my form, I have integrated a Bootstrap 3 dropdown menu situated between two text input fields. The dropdown's role="menu" attribute allows for navigation using the up/down arrow and Enter keys. However, after making a selection in the dropdown ...

Transforming a sophisticated nested array containing named values into JSON format

I am facing a challenge with converting an array into JSON format. The array, named classProfiles, has the following structure (seen after inspecting console output): Buildings_clear: Array(0) band1: [Min: 24, Max: 24, Mean: 24, Median: 24, StdDev: 0] ...

Scraping the Web with Python: Harnessing the Power of Selenium and

Seeking assistance with a problem I've encountered. I'm attempting to extract numbers from a specific website (link provided in the code below). Since the website utilizes JavaScript, my approach involves using selenium to load the page first and ...

Adjust the color according to the key's value in every object within the array

Issue: I am faced with an array of objects, each containing a Name key. At times, the names may be repeated. I want to maintain the same color when the name is the same and switch to a different color when the name changes. Specifically, I want to alternat ...

Navigating through a complex JavaScript project and feeling a bit disoriented

I recently joined a JavaScript project that was being worked on by a single programmer for the past 6 months. However, this programmer left without providing much explanation. The project is built using Ionic, which I have discovered is primarily used for ...

The return value of fs.mkdirSync is undefined

I'm facing a challenge with creating a directory and utilizing that directory as a variable to extract files from zip/rar files. The section of code that is causing an error is shown below: var fileZip = fileName.replace(/^.*[\\\/]/, ...

Double invocation of AngularJS custom filter

I have successfully created a custom filter using AngularJS that displays only the fruits that begin with the letter "p." Although I believe my custom filter is implemented correctly, I have noticed that it is being called twice. While searching for simil ...

What is the optimal way to develop an npm module with a predefined name?

I am currently developing a module in nodejs and utilizing NAPI for its creation. Let's assume the name of my module is "hello", so it would be required in JavaScript as require("hello") However, I wish to require it like this require("Name/hello") ...