xxxxxxxxxx
<meta charset="utf-8">
<style>
body {
margin: 0;
}
path {
fill: none;
stroke: #FEFAEC;
stroke-linejoin: round;
stroke-linecap: round;
}
#neighborhoodPopover {
position: absolute;
text-align: center;
padding: 2px;
font-family: futura;
font-size: 12px;
background: #fff;
border: 0px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
}
.major_road { stroke: #00B8A9; }
.minor_road { stroke: #FFDE7D; }
.highway { stroke: #FFC057; stroke-width: 1.5px; }
.rail { stroke: #F8F3D4; }
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.geo.tile.min.js"></script>
<script>
var width = Math.max(960, window.innerWidth),
height = Math.max(500, window.innerHeight);
var tiler = d3.geo.tile()
.size([width, height]);
var projection = d3.geo.mercator()
.center([-122.4183, 37.7750])
.scale((1 << 21) / 2 / Math.PI)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("g")
.data(tiler
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0])))
.enter().append("g")
.each(function(d) {
var g = d3.select(this);
d3.json("https://vector.mapzen.com/osm/roads/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
if (error) throw error;
g.selectAll("path")
.data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
.enter().append("path")
.attr("class", function(d) { return d.properties.kind; })
.attr("d", path)
.on("mouseenter", function(d) {
console.log(d);
d3.select(this)
.style("stroke-width", 1.5)
.style("stroke-dasharray", 0)
d3.select("#neighborhoodPopover")
.transition()
.style("opacity", 1)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px")
.text(rateById.get(d.id))
})
.on("mouseleave", function(d) {
d3.select(this)
.style("stroke-width", .25)
.style("stroke-dasharray", 1)
d3.select("#neighborhoodPopovercountyText")
.transition()
.style("opacity", 0);
});
});
});
</script>
https://d3js.org/d3.v3.min.js