Combine the AnimatedMarker from leafletjs with typescript

After installing leaflet typescript, I encountered issues when trying to use leaflet non-typescript plugins.

For instance, I had no problem importing the leaflet-routing-machine plugin by following these steps:

installation:

npm install --save leaflet-routing-machine
npm install --save @types/leaflet-routing-machine

angular component:

import 'leaflet-routing-machine';
import { Routing } from 'leaflet';

By doing this, I was able to successfully utilize the leaflet-routing-machine plugin with leaflet.

However, when attempting to use the AnimatedMarker plugin, which does not have typescript support, I struggled to make it work.

I experimented with different approaches, but none of them were successful:

import 'leaflet.animatedmarker/src/AnimatedMarker';
import { AnimatedMarker, animatedMarker } from 'leaflet';
// Compilation will fail

or

 let AnimatedMarker = require('leaflet.animatedmarker/src/AnimatedMarker');
 console.log(AnimatedMarker);

or

import * as AnimatedMarker from 'leaflet.animatedmarker/src/AnimatedMarker';
   console.log(AnimatedMarker);

Despite the potential solution of using import * as L from 'leaflet' L.AnimatedMarker as discussed here, I preferred to find a different way to handle non-typescript plugins.

Answer №1

It appears that the plugin is simply a script designed to enhance certain L.* objects, such as L.Marker.

To implement this, adding

import 'leaflet.animatedmarker/src/AnimatedMarker';
to the main.ts file should suffice.

Check out this stackblitz example for reference.

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

How to access a variable from outside a promise block in Angular

Is there a way to access a variable declared outside of a promise block within an Angular 6 component? Consider the following scenario: items: string[] = []; ngOnInit() { const url='SOME URL'; const promise = this.apiService.post(url ...

What is the best way to update a deeply nested array of objects?

I have an array of objects with nested data that includes product, task, instrument details, and assets. I am attempting to locate a specific instrument by supplier ID and modify its asset values based on a given number. const data = [ { // Data for ...

The statement 'typeof import("...")' fails to meet the requirement of 'IEntry' constraint

When trying to run npm run build for my NextJS 13 app, I encountered the following type error: Type error: Type 'typeof import("E:/myapp/app/login/page")' does not satisfy the constraint 'IEntry'. Types of property 'def ...

Firebase login success callback not getting invoked

I have set up routes, the AuthGuard, and Firebase login in my project. I am using callbacks to handle the success and failure of the Firebase login process. successCallback(signInSuccessData) { console.log("Received with Success!"); } errorCallback(e ...

Exploring the process of connecting to an additional database with Angular Fire

I came across this code snippet: import { FirebaseApp } from "@angular/fire/compat"; import { AngularFirestore } from "@angular/fire/compat//firestore"; import { initializeFirestore } from "@angular/fire/firestore"; impo ...

Filter the array while maintaining its current structure

I'm struggling to create an array filter that can handle exact and partial data within a nested array structure. The challenge is maintaining the integrity of the top-level structure while filtering based on data in the second layer. Here's an ex ...

Is it possible to retrieve props in Vue without using methods?

<script lang='ts'> import GraphWorld from '@/components/GraphWorld.vue' // import { defineComponent } from "vue" export default { name: 'GraphView', props: ['people', 'prac'], compone ...

Issue with Props Type Check not functioning as expected in Typescript with React

I am utilizing Typescript within my React application. I aim to rigorously verify the type of props being passed to my components and trigger an error if it does not match. import React from "react"; import styles from "./ServiceDetailCard.css"; type Ser ...

Adding query parameters to links in Angular 10: A beginner's guide

I'm trying to update a link: <a class="contact-email" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117268737463656364727a51666370617c7065743f727e7c">[email protected]</a>" ...

Steps for attaching attributes to a displayed element in TileVectorLayer

As seen in the code below, I am creating a VectorTileLayer where the VectorTileSource is showing MVT geometry retrieved from a webservice specified in the url attribute. The database table includes columns as follows. The webservice will be called for each ...

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

I encountered an issue with Javascript where I'm receiving an error message stating "Cannot read property 'Items' of undefined". The this keyword is consistently showing as undefined in the Base class. How can this problem be resolved? Coul ...

Troubleshooting: Ngx-Echarts Animation Issue at Startup

I've been working on integrating ngx echarts into my Angular app, but I'm facing an issue with the animation during the initial load of the chart. Take a look at this Stackblitz example where you can see that the bars render quickly on initial lo ...

Setting a binary value for an angular checkbox through user input: a step-by-step guide

As a newcomer to Angular, I am currently in the process of creating a straightforward registration page by following this tutorial. The essential information I need to capture includes the user's email address, username, password, and a binary value i ...

The Angular Library seems to be malfunctioning as it does not execute the ngOnInit

I've been following the instructions from Angular CLI 6 to create a library, which can be found here. So far, I've successfully created and built my library. It includes a Component that I'm using for the UI and has an HTML selector. @Compo ...

How can we effectively display the cookie value within the template by utilizing observables and selectors in conjunction with the ngx-cookie-service library?

I'm wondering if there's a seamless approach to leverage observables for dynamically retrieving a cookie value, essentially creating a "reactive" cookie. Although typical solutions involve utilizing this.cookieService.get("cookieName") within ser ...

The Angular error TS2531 occurs when attempting to call scrollIntoView on an object that may be null

In my current Angular project, I am attempting to implement a scroll view using ViewChild by id. This is the method I have written: ngOnInit() { setTimeout(() => { if (this.router.url.includes('contact')) { ...

Contrasting the double dash without any arguments versus the double dash with a specific argument, such as "no-watch."

For instance, when attempting to run unit tests for an Angular app, the following command is used: npm run test -- --no-watch --browsers=ChromeHeadlessCI I know that two dashes (--) are required to pass arguments into the npm script. However, I'm con ...

Issue with the integration of Angular and Java Jersey API arises when attempting to encode utf-8 whitespaces at the end, resulting in invalid JSON

I'm facing an issue with Angular while making an HTTP GET request. It throws a "Http failure during parsing" error because the JSON response contains whitespace characters at the end. I find it puzzling why the server is returning them. Is there a wa ...

RTK Query - executing a query upon mounting with lazy loading enabled

Should rerendering be triggered by sending a request on mount? Or is the use of useEffect necessary? (Is lazy mode different from regular queries?) export const Catalog: React.FC<CatalogProps> = ({ object, category }) => { const [getCatalogPro ...

Preventing over-purchasing products by managing Knex.js inventory levels

Currently, I am in the process of developing an online store for my school's guild organization. I must admit that I lack experience working with databases and Knex.js is still a bit challenging for me. An issue arises when multiple users simultaneo ...