Leaflet map: Rotated Marker for ionic2 (Typescript)

4
votes

I'm a typescript "newbie", currently working on an ionic2 project (Typescript) that use leaflet v1.1.0 as a map. I need to rotate a marker. In previous projects (JavaScript) I was using Leaflet.RotatedMarker. But this plugin isn't typed and It can't be used in my current project.

I need help either finding a way to use leaflet rotated marker plugin or to create the marker rotation behavior directly in my code.

2
angulartypescriptionic2leaflet
I am having this issue. is it possible to write a type definition file of it ? - Badis Merabet

2 Answers

5
votes

Since a few months TypeScript type definitions for Leaflet.RotatedMarker are provided here: https://github.com/DefinitelyTyped/DefinitelyTyped/commits/master/types/leaflet-rotatedmarker

You need to install them @types/leaflet-rotatedmarker in addition to leaflet-rotatedmarker

If you're using npm you just need to install both packages:

npm i -S @types/leaflet-rotatedmarker leaflet-rotatedmarker

Then you can set the rotationAngle on your marker.

import * as L from 'leaflet';
import 'leaflet-rotatedmarker';
...
 let marker = L.marker([47,18], {         
          rotationAngle: 180
          icon: ...,
        });
1
votes

As a temporary solution I've used L.divIcon and it work perfectly 

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