Aircraft Icon Test

<!DOCTYPE html>
<html>
<head>
	<title>Testing d3.js in Leaflet.js</title>

circle
{
fill-opacity: 0.6;
}

body {
		padding: 0;
		margin: 0;
	}
	html, body, #map {
		height: 100%;
		width: 100%;
	}

</style>
</head>
<body>

<div id="map"></div>
		
	
<script type="text/javascript">
	
        var map = L.map('map').setView([-41.3058, 174.82082], 8);
        mapLink = 
            '<a href="https://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);
	
				
	/* Initialize the SVG layer */
	map._initPathRoot()

/* We simply pick up the SVG from the map object */
	var svg = d3.select("#map").select("svg"),
	g = svg.append("g");
	
	d3.json("planes2.json", function(collection) {
		/* Add a LatLng object to each item in the dataset */
		collection.features.forEach(function(d) {
			d.LatLng = new L.LatLng(d.geometry.coordinates[0],d.geometry.coordinates[1])
		})
		
		var feature = g.selectAll("path")
			.data(collection.features)
			.enter().append("path")
			.style("stroke", "black")  
			.style("stroke-width", 1) 
			.style("fill", "yellow")
			.attr("d", "M 0,-20 L 2,-19 L 3,-13 L 3,-8 L 4,-7 L 19,-7 L 20,-6 L 20,-2 L 19,-1 L 3,2 L 2,14 L 9,15 L 10,16 L 10,19 L 9,20 L 2,20 L 0,19 L -2,20 L -9,20 L -10,19 L -10,16 L -9,15 L -2,14 L -3,2 L -19,-1 L -20,-2 L -20,-6 L -19,-7 L -4,-7 L -3,-8 L -3,-13 L -2,-19 z");

function update() {
			feature.attr("transform", 
			function(d) { 
				return "translate("+ map.latLngToLayerPoint(d.LatLng).x +
				","+ map.latLngToLayerPoint(d.LatLng).y +
				"), rotate("+ d.properties.track +"),scale(1)";})

}
		map.on("viewreset", update);
		update();
	})			 
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js