Creating personalized properties for a Leaflet marker using Typescript

Is there a way to add a unique custom property to each marker on the map? When attempting the code below, an error is triggered:

The error "Property 'myCustomID' does not exist on type '(latlng: LatLngExpression, options?: MarkerOptions) => Marker'" occurs.

let customizedMarker = L.marker([item.latitude, item.longitude], {
  icon: icon({
    iconSize: [ 30, 41 ],
    iconAnchor: [ 13, 41 ],
    iconUrl: 'assets/icons8-street-view-64.png',
    shadowUrl: 'leaflet/marker-shadow.png'
  })
})

customizedMarker.myCustomID = "010000006148";
angulartypescriptleafletangular-leaflet-directiveleaflet.markercluster

Answer №1

This solution proved effective for me:

function createMarker(location) {
    const markerOptions = {color: 'red'};
    markerOptions['label'] = location.label;
    map.layers.push(newMarker([location.latitude, location.longitude], markerOptions)
        .bindTooltip(() => getTooltipContent(location)));
}

Consider adding your own unique property to the marker options like this: 

markerOptions['customProperty'] = customValue
;

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

Errors encountered when using Mongoose and TypeScript for operations involving $addToSet, $push, and $pull

I am encountering an issue with a function that subscribes a "userId" to a threadId as shown below: suscribeToThread: async (threadId: IThread["_id"], userId: IUser["_id"]) => { return await threadModel.updateOne( { _id: t ...

node.jstypescriptmongodbmongoose

RC7 is missing the necessary HTTP_PROVIDERS for the resolveAndCreate HTTP method in Angular2

During the time of RC4, I was able to create my own custom http instance using a function like this: export function createHTTP(url:string, headers?:Headers){ let injector = ReflectiveInjector.resolveAndCreate([ myHttp, {provide:'defaultUrl ...

httpangulartypescriptdependency-injection

Updating Values in Nested Forms with Angular Reactive Form

I have been grappling with a form setup that looks something like this: itemEntities: [ {customisable: [{food: {..}, quantity: 1}, {food: {..}, quantity: 5}]}, {customisable: [{food: {..}, quantity: 0}]}, ] My challenge lies in trying to u ...

javascriptangularionic-framework

Tips for handling various HTTP requests until a response is received

For my application, I have a need to make multiple http calls before proceeding to create certain objects. Only after all the http requests have received responses from the servers can I process the results and construct my page. To handle this scenario, ...

angularrxjsangular-httpclient

Different varieties of typescript variables

My variable is declared with two possible types. Consider this example: let foo: number | number[] = null; Then, I have an if condition that assigns either a single number or an array to that variable: if(condition) { foo = 3; } else { foo = [1,2,3 ...

angulartypescript

Customizing the appearance of tab labels in Angular Material

I've been struggling to find a solution for changing the color of the mat-tab labels. Despite combing through numerous Stack Overflow posts on styling mat-tabs, I have not been able to change the text color from white to black. Currently, the non-acti ...

angularangular-material

This error is being thrown because the element has an implicit 'any' type due to the fact that a 'string' type expression cannot be used to index the 'Users' type

As I attempt to extract data from a json file and create an HTML table, certain sections of the code are functioning correctly while others are displaying index errors. All relevant files are provided below. This issue pertains to Angular. This is my json ...

jsonangulartypescript

Is there a way to restrict the type of the value returned by URLSearchParams.get() to a specific union type?

When handling a search parameter in the URL, such as ?mode=view, it is important to validate the value of mode to ensure it is either 'edit' or 'view'. To achieve this, a custom type called ModeTuple is created and converted to a union ...

typescripttypes

To enable iteration of iterators when trying to spread, utilize the TypeScript compiler option '--downlevelIteration'

I have a function that accepts an argument of either an object or an array. const handleScenarioChange = (scenario: Scenario | Scenario[]) => { if (isArray(scenario)) { const scenarios = [...state.selectedScenarios, ...scenario]; const unique ...

typescripttsconfig

Transforming text into numbers from JSON response with *ngFor in Angular 6

I'm currently attempting to convert certain strings from a JSON response into numbers. For instance, I need to change the zipcode value from "92998-3874" to 92998-3874. While doing this, I came across a helpful resource on Stack Overflow. However, I s ...

jsonangularloopsangular6

The universe's cosmic energy is unable to retrieve uploaded documents

Struggling for days now with the issue of not being able to run any real tests using Karma. I can run basic sanity tests that don't require imports, but as soon as I try to import something from my app, I encounter this error: system.src.js:1085 GE ...

angularkarma-jasmine

Does Angular 4 Bundling Include the Complete Angular Library in the Bundle?

Is it possible that when running ng build --prod in CMD, Angular gathers all JavaScript files from node_modules and generates the vendor.bundle.js? To test this theory, I decided to delete certain definitions from package.json and rebuild. Surprisingly, t ...

angularbundle

Access Denied: Origin not allowed

Server Error: Access to XMLHttpRequest at '' from origin 'http://localhost:4200' has been blocked by CORS policy. The 'Access-Control-Allow-Origin' header is missing on the requested resource. import { Injectable } from &apo ...

node.jsangular

The issue with hiding the Angular PrimeNG megamenu despite setting the visibility to false

Need help with Angular PrimeNG megamenu visibility issue. <p-megaMenu [model]="menuItems"></p-megaMenu> this.menuItems = [ { label: 'Home', items: null, routerLink: [''] }, ...

angularprimengmegamenu

What is the best way to expand upon the declaration file of another module?

I have encountered a problem with declaration files in my AdonisJS project. The IoC container in Adonis utilizes ES6 import loader hooks to resolve dependencies. For instance, when importing the User model, it would appear as follows: import User from ...

typescriptadonis.js

Converting a string into a TypeScript class identifier

Currently, I am dynamically generating typescript code and facing an issue with quotes in my output: let data = { path: 'home', component: '${homeComponentName}', children:[] }; let homeComponentName = 'HomeComponent' ...

javascriptangularstringtypescript

The outcome of the .then function is not defined following another .then function

I am struggling with handling async requests in Angular within Ionic4. I have successfully loaded a .json file and saved it into an array, but when trying to edit the array within a loop, my promise resolves before the loop finishes. As a newcomer to Angul ...

angularionic-frameworkionic4

What is the best way to repurpose a variable in Angular's TypeScript?

I'm currently working on an application that utilizes the following technologies. In my Typescript file named "test.page.ts", there is a variable called "response: any" that I need to reuse in another Typescript file named "test2.page.html" by calling ...

angulartypescript

Encountering the issue of receiving an undefined value when attempting to define a {string} parameter within the "when" section of the step

As a novice in the world of protractor with cucumber, I am faced with the challenge of automating a process where inputting a first name, last name, and postcode creates a new user. In order to achieve this, I have attempted to define the data entry within ...

angularjsangularautomationprotractorcucumber

Checking a String for a Specific Pattern in Angular 6 using Regular Expressions

urn:epc:id:sgln:345344423.1345.143 I need to verify if the string above, entered into a text box, matches the specified format consisting of (urn:epc:id:sgln) followed by numbers separated by two dots. ...

angularregexvalidation