Skip to content

Instantly share code, notes, and snippets.

@mtaptich

mtaptich/README.md

Last active May 28, 2019 05:09
Show Gist options
  • Save mtaptich/182f63d3aef39bc96e59 to your computer and use it in GitHub Desktop.
Save mtaptich/182f63d3aef39bc96e59 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Traveler
Raw
README.md

Simple example of displaying a route in Leaflet using d3.js.

Raw
index.html
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
svg {
position: relative;
}
path {
fill: none;
stroke-width: 8px;
stroke-dasharray: 8px, 8px;
stroke: #e74c3c;
stroke-opacity: 0.99;
}
.traveler{
fill: #3498db;
stroke: #2980b9;
stroke-width: 3px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var padding = 50, loc = 0, transition_speed = 750;
// (1) Initiate the map, including proper tiles, attribution, and map view.
var mapboxTiles = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([38.865, -122.26], 13);
// (2) Add an svg to the the overlayPane
var svg = d3.select(map.getPanes().overlayPane).append("svg");
var g = svg.append("g")
.attr("class", "leaflet-zoom-hide");
// (3) Load the geojson data
d3.json("polyline.json", function(rt) {
var transform = d3.geo.transform({point: projectPoint}),
cors = rt.features[0].geometry.coordinates,
path = d3.geo.path().projection(transform),
center = map.containerPointToLatLng(path.centroid(rt))
// Center map about route cetroid
map.setView(center, 14);
route = g.selectAll("path")
.data(rt.features)
.enter().append("path");
od = g.append("circle")
.attr("r", 8*1.61803398875)
.attr("id", "marker")
.attr("class", "traveler")
.attr('transform', function(){
var c = cors[0],
b = map.latLngToLayerPoint(new L.LatLng(c[1], c[0]))
return "translate("+[b.x,b.y]+")"
});
map.on("viewreset", reset);
//(4) Update the path based on the updated map projection using projectPoint
reset();
progress();
function reset() {
var bounds = path.bounds(rt);
svg.attr("width", bounds[1][0] - bounds[0][0] + padding*3)
.attr("height", bounds[1][1] - bounds[0][1] + padding*3)
.style("left", bounds[0][0] - padding + "px")
.style("top", bounds[0][1] - padding + "px");
g.attr("transform", "translate(" + (-bounds[0][0] + padding) + "," + (-bounds[0][1] + padding) + ")");
route.attr("d", path);
}
function progress(){
loc = loc < cors.length-1 ? loc+1 : 0;
var c = cors[loc],
b = map.latLngToLayerPoint(new L.LatLng(c[1], c[0]))
od.transition()
.duration(transition_speed* Math.random() + 400) // You could calibrate this to speed if you had the data
.ease('quad')
.attr("transform",function(d,i){
return "translate("+[b.x,b.y]+")"
})
.each('end', progress)
}
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
});
</script>
</html>
Display the source blob
Display the rendered blob
Raw
polyline.json
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"LineString","coordinates":[[-122.26027,37.87568],[-122.26016000000001,37.87511000000001],[-122.26214000000002,37.87485],[-122.26385,37.87464000000001],[-122.26397000000001,37.874610000000004],[-122.26410000000001,37.87454],[-122.26462000000001,37.87435],[-122.26579000000001,37.8742],[-122.26646000000001,37.87413],[-122.26904,37.87382],[-122.26920000000001,37.873810000000006],[-122.27090000000001,37.873610000000006],[-122.27208000000002,37.87346],[-122.27285,37.873400000000004],[-122.27300000000001,37.873380000000004],[-122.27332000000001,37.8733],[-122.27538000000001,37.873020000000004],[-122.28222000000001,37.87214],[-122.28208000000001,37.87089],[-122.28201000000001,37.87035],[-122.28183000000001,37.86802],[-122.28172,37.8669],[-122.28160000000001,37.86581],[-122.28142000000001,37.86399],[-122.28137000000001,37.863760000000006],[-122.28119000000001,37.862190000000005],[-122.28110000000001,37.861880000000006],[-122.28101000000001,37.86164],[-122.28089000000001,37.8614],[-122.28078000000001,37.861160000000005],[-122.28071000000001,37.86097],[-122.2806,37.86047000000001],[-122.28032,37.85909],[-122.27967000000001,37.85602],[-122.27945000000001,37.8549],[-122.27918000000001,37.8537],[-122.27907,37.85327],[-122.27963000000001,37.85325],[-122.28047000000001,37.85323],[-122.2814,37.853210000000004],[-122.28513000000001,37.852450000000005],[-122.28684000000001,37.852120000000006],[-122.28937,37.85161],[-122.28986,37.851490000000005],[-122.29046000000001,37.85128],[-122.29109000000001,37.851020000000005],[-122.29111,37.851130000000005],[-122.29123000000001,37.851510000000005],[-122.29157000000001,37.851440000000004],[-122.29259,37.851240000000004]]},"properties":{}}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment