Usage with Typescript about leaflet.rotatedmarker HOT 10 CLOSED

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 :)

from leaflet.rotatedmarker.

same issue on ionic project with leaflet.

from leaflet.rotatedmarker.

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

from leaflet.rotatedmarker.

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?

from leaflet.rotatedmarker.

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().

from leaflet.rotatedmarker.

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.

from leaflet.rotatedmarker.

@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

from leaflet.rotatedmarker.

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

from leaflet.rotatedmarker.

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

from leaflet.rotatedmarker.

@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);" />'
});

from leaflet.rotatedmarker.