Skip to content

Instantly share code, notes, and snippets.

@kaezarrex

kaezarrex/index.html

Last active September 28, 2015 20:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaezarrex/11491535 to your computer and use it in GitHub Desktop.
Save kaezarrex/11491535 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet+D3 Route Shapes
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<style>
body { padding: 0; margin: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.4"></script>
<script src='main.js'></script>
</body>
</html>
Raw
main.js
var strokeWidth = 3;
var map = new L.Map("map", {center: [35.78, -78.68], zoom: 13})
var layer = new L.StamenTileLayer("toner-lite");
map.addLayer(layer);
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "leaflet-zoom-hide");
function projectPoint(point) {
return map.latLngToLayerPoint(new L.LatLng(point[0], point[1]));
}
var line = d3.svg.line()
.x(function(d) { return projectPoint(d).x; })
.y(function(d) { return projectPoint(d).y; });
var decoded;
var feature;
var minLat;
var maxLat;
var minLng;
var maxLng;
$.getJSON('http://tlapi.dhaz.in/segments.jsonp?agencies=ncsu&callback=?', function(res) {
decoded = _.map(d3.values(res.data), function(d) {
return L.PolylineUtil.decode(d);
});
var lats = _.reduce(decoded, function(memo, d) { return memo.concat(_.map(d, function(e) { return e[0]; }))}, []);
var lngs = _.reduce(decoded, function(memo, d) { return memo.concat(_.map(d, function(e) { return e[1]; }))}, []);
minLat = d3.min(lats);
maxLat = d3.max(lats);
minLng = d3.min(lngs);
maxLng = d3.max(lngs);
var topLeft = projectPoint([maxLat, minLng]);
var bottomRight = projectPoint([minLat, maxLng]);
topLeft.x = topLeft.x - strokeWidth;
topLeft.y = topLeft.y - strokeWidth;
bottomRight.x = bottomRight.x + strokeWidth;
bottomRight.y = bottomRight.y + strokeWidth;
svg .attr("width", bottomRight.x - topLeft.x)
.attr("height", bottomRight.y - topLeft.y)
.style("left", topLeft.x + "px")
.style("top", topLeft.y + "px");
g.attr("transform", "translate(" + -topLeft.x + "," + -topLeft.y + ")");
feature = g.selectAll('path')
.data(decoded)
.enter().append('path')
.attr('d', line)
.style({
fill: 'none',
stroke: '#f00',
'stroke-width': strokeWidth
});
map.on('viewreset', reset);
map.on('dragstart', function() { console.log('dragstart'); });
map.on('dragend', function() { console.log('dragend'); });
});
function reset() {
var topLeft = projectPoint([maxLat, minLng]);
var bottomRight = projectPoint([minLat, maxLng]);
topLeft.x = topLeft.x - strokeWidth;
topLeft.y = topLeft.y - strokeWidth;
bottomRight.x = bottomRight.x + strokeWidth;
bottomRight.y = bottomRight.y + strokeWidth;
svg .attr("width", bottomRight.x - topLeft.x)
.attr("height", bottomRight.y - topLeft.y)
.style("left", topLeft.x + "px")
.style("top", topLeft.y + "px");
g.attr("transform", "translate(" + -topLeft.x + "," + -topLeft.y + ")");
feature.attr('d', line);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment