leaflet.js でマーカを角度(回転)をつけて表示したい

Question

Javascript で　Leaflet.js を利用して
地図にマーカを表示させています。
マーカの画像は、自作のjpg(またはpng)ファイルです。
この画像を条件によって角度をつけて表示させたいのですが、方法を教えてください。
右に30°回転させてという様にです。
今は、下記のように記述しているだけです。

var marker = L.marker( [ lat0, lng0 ] )
	.setIcon( L.icon( {
		iconUrl: "../images/myicon.png",
		iconSize: [ 8, 8],
		iconAnchor: [0, 0],
		})
	)
	.bindPopup( "テスト")
	.addTo( mapID );

Answer 1

30度回転した画像を用意して、iconAnchorの位置を調整すれば回転できます。

【Documentation - Leaflet - a JavaScript library for interactive maps】
https://leafletjs.com/reference-1.4.0.html#icon-iconanchor

【Explanation of Leaflet Custom Icon LatLng vs XY Coordinates - Stack Overflow】
https://stackoverflow.com/questions/46101450/explanation-of-leaflet-custom-icon-latlng-vs-xy-coordinates

---

もしくはマーカーが描画された後で .leaflet-marker-icon を探し、rotateを追加するという荒業もあります。

// transform: translate3d(273px, 274px, 0px);
//                                           ↓ ※ transform自体を上書きせず、rotateを追加する
   transform: translate3d(273px, 274px, 0px) rotate(30deg);

Comments

[runa]

御返答　ありがとうございます。
最終的には、それしかないかと思ってはいますが、
5度ごとに表示をしたいので、画像データ(ファイル)の数が多くなりますので、ひとつの画像データで回転角度を指定してマーキングしたいです。

[kei344]

2つ目の回答がその回答になります。