D3 Examples - Two vector tile layers (OSP)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  margin: 0;
}
​
path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  stroke-linecap: round;
}
​
.major_road { stroke: #776; }
.minor_road { stroke: #ccb; }
.highway { stroke: #f39; stroke-width: 1.5px; }
.rail { stroke: #7de; }
.buildings path { stroke: none; fill: black; }
​
#b64f7d7601a,
#bd3209ad51a,
#bff56a6b381,
#b4458cf32fe
  {
    fill: rgb(154, 150, 140);
}
​
​
​
#bca789516cf,
#be32d6d5c03,
#b8c94f28f5b,
#b9850d204b3,
#b8713e3cbb9    {
    fill: rgb(196, 17, 47);
}
​
#b6db2362cbd,
#b60a3ac9b29,
#b6db2362cbd,
#b2783b2ea95,
#b680b648540,
#b7297748f0a    {
    fill: rgb(250, 165, 24);
}
​
</style>
<body>
​
<div id="map"></div>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.geo.tile.v0.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([-95.781169, 34.954749])
    .scale((1 << 24) / 2 / Math.PI)
    .translate([width / 2, height / 2]);
​
var path = d3.geo.path()
    .projection(projection);
​
var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(renderTiles, "highroad")
    .call(renderTiles, "buildings");
    
    var x = 2 * width / 3,
        y = 3 * height / 4;
    
    svg.append("text").attr("class", "label").attr("x", x).attr("y", y).text("Level of damage to buildings").style("font-weight", "bold");
​
    //completely destroyed
    svg.append("rect").attr("x", x).attr("y", y + 15).attr("height", 12).attr("width", 12).style("fill", "rgb(196, 17, 47)").attr("stroke", "black");
    svg.append("text").attr("class", "label").attr("x", x + 15).attr("y", y + 25).style("text-anchor", "start").text("Complete Damage");
​
    //partially destroyed
    svg.append("rect").attr("x", x).attr("y",  y + 35).attr("height", 12).attr("width", 12).style("fill", "rgb(250, 165, 24)").attr("stroke", "black");
    svg.append("text").attr("class", "label").attr("x", x + 15).attr("y", y + 45).style("text-anchor", "start").text("Partial Damage");
            
    //minor damage
    svg.append("rect").attr("x", x).attr("y", y + 55).attr("height", 12).attr("width", 12).style("fill", "rgb(154, 150, 140)").attr("stroke", "black");
    svg.append("text").attr("class", "label").attr("x", x + 15).attr("y", y + 65).style("text-anchor", "start").text("Minor Damage");
​
function renderTiles(svg, type) {
  svg.append("g")
      .attr("class", type)
    .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://" + ["a", "b", "c"][(d[0] * 31 + d[1]) % 3] + ".tile.openstreetmap.us/vectiles-" + type + "/" + d[2] + "/" + d[0] + "/" + d[1] + ".json", function(error, json) {
          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("id", function(d){ return "b" + d.id; })
              .attr("d", path);
        });
      });
}
​
</script>
    