Aircraft Icon Test by d3noob

index.html

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

    <link 
        rel="stylesheet" 
        href="//cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

    <script
        src="//cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>
    
    	<style type="text/css">

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="//openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            '//{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>

planes2.json

{"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"Point","coordinates":[-40.99497,174.50808]},"properties":{"track":286}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.30269,173.63696]},"properties":{"track":257}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.49413,173.5421]},"properties":{"track":148}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-40.98585,174.50659]},"properties":{"track":115}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.49202,174.63031]},"properties":{"track":107}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.49415,174.63209]},"properties":{"track":288}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.3172,174.80762]},"properties":{"track":355}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.44762,174.59853]},"properties":{"track":319}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.27454,174.80988]},"properties":{"track":317}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-40.93163,173.81726]},"properties":{"track":309}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.53768,174.48065]},"properties":{"track":304}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.30814,174.80817]},"properties":{"track":22}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-40.97438,174.4989]},"properties":{"track":21}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.5183,174.78081]},"properties":{"track":8}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.42079,173.5783]},"properties":{"track":4}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-42.08414,173.96632]},"properties":{"track":4}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[-41.51285,173.53274]},"properties":{"track":7}}

]}