Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/.block

Last active November 30, 2019 18:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d3noob/9167301 to your computer and use it in GitHub Desktop.
Save d3noob/9167301 to your computer and use it in GitHub Desktop.
Download ZIP
Aircraft Icon Test
Raw
.block
license: mit
Raw
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>
Display the source blob
Display the rendered blob
Raw
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}}
]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment