Usage with Typescript

[Ferouk]

I'm currently working on an ionic2 project (Typescript) that use leaflet v1.1.0 as a map. This plugin was very useful for me in previous projects (JavaScript). I'm asking how can I use it with my typescript code? Basically, How to define it in typescript? Thanks

[bbecquet]

Hi Ferouk,

Thanks for using this plugin, glad to know it's useful to you :)
I've never used TypeScript first-hand myself. But if I'm not mistaken, TypeScript is only a superset of Javascript which basically adds annotations, so any valid JS code is supposed to be valid TypeScript as well. So I guess it should work as-is. But I've not tested it so I may completely overlook some problems.

Can you describe the problems or incompatibilities you encounter?

[Ferouk]

Hi bbecquet,
Thanks for the quick reply.

In order to resolve leaflet rotateMarker in Typescript, a Typings definition is required otherwise it won't be imported to the project properly. I tried to create a typings definition but I failed mainly because of the L.Marker.include().

The issue is that the class Marker in The "official" Leaflet typings can't be extended, it has to be overriden.

I suggest a modular approach. I mean var L.RotatedMarker= L.Marker.extend().

[bbecquet]

Ok, this is exactly what was suggested in this previous issue #11.

I personally liked the way Leaflet classes can be dynamically extended without having to create a new class, but maybe it's not suited to big real-life projects. And I understand how it conflicts with the static typing approach.

I guess I'll do the shift to the modular approach when I have some time soon. After that, if you want to add a TypeScript def file to the project, I would be happy to accept a PR :)

[MaddyMastering]

I am trying to migrate from angular 1 to angular 2 and was successful in creating definitely typed files for other leaflet plugins. But this one seems to be very confusing. It would be very helpful if anyone has any of using this in typescript project.

[Ferouk]

@bbecquet I'll be glad to help

@MaddyMastering A temporary alternative to migrate is by using L.divIcon with inline css
https://stackoverflow.com/a/45506208/2897052

[blueromans]

same issue on ionic project with leaflet.

[badis]

How about writing a type definition file. this article looks interesting: https://peter.grman.at/how-to-write-typescript-definition-files/

[afeezaziz]

Hi @Ferouk , have you managed to get a workaround for this? I am using Typescript and Angular too.

[Ferouk]

@afeezaziz I've used L.divIcon instead with style attribute to control the icon rotation. This is an example:

L.divIcon({
  html: '<img class="leaflet-marker-icon leaflet-zoom-animated" src="[icon image URL]" style="width: [icon width]px; height: [icon height]px;transform: rotate([angle]deg);  -webkit-transform: rotate([angle]deg); -moz-transform:rotate([angle]deg);" />'
});

[f-loris]

I think this issue is already solved. Type defintions are provided here: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/leaflet-rotatedmarker

See my answer on stackoverflow: https://stackoverflow.com/questions/45479872/leaflet-map-rotated-marker-for-ionic2-typescript/51063718#51063718