d3noob/.block

## .block
license: mit

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

    <link
        rel="stylesheet"
        href="http://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="http://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="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{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

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              planes2.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

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

	<link
	rel="stylesheet"
	href="http://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="http://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="http://openstreetmap.org">OpenStreetMap</a>';
	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© ' + 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>