Open Street Map Tiles

.block

license: gpl-3.0

README.md

You can display map tiles with d3-tile, and then overlay them with TopoJSON vectors.

Tiles copyright OpenStreetMap contributors.

delhi_ward_outline.json

{"type":"Topology","arcs":[[[2874,6797],[-9,-15],[53,-38],[87,-43],[99,-86],[198,-57],[18,-27],[61,-10],[115,-11],[39,-65],[56,-43],[86,-64],[5,-19],[146,0],[10,99],[51,68],[28,-3],[51,-46],[64,84],[33,48],[41,86],[31,73],[35,51],[31,65],[38,78],[10,51],[77,-21],[99,2],[123,-8],[209,-91],[191,-143],[136,132],[66,29],[94,52],[3,-68],[64,-13],[0,-22],[33,0],[2,-16],[31,-16],[0,-24],[-13,-11],[-15,-14],[0,-18],[43,0],[26,16],[53,-46],[21,-24],[-21,-8],[-61,-108],[-2,-100],[-49,-5],[0,-59],[59,-22],[33,-27],[46,-51],[31,-56],[7,-142],[10,-14],[34,6],[56,43],[61,56],[100,77],[81,68],[112,107],[34,46],[63,33],[79,32],[57,-22],[99,-13],[64,5],[56,22],[46,32],[59,59],[33,41],[138,5],[173,-3],[74,11],[77,41],[0,37],[-36,0],[0,33],[-84,2],[46,294],[104,-5],[559,-60],[-38,-89],[-59,-53],[20,-22],[-173,-167],[51,-40],[-3,-41],[13,-5],[31,0],[0,56],[28,-18],[66,-27],[-71,-122],[-72,-8],[-15,-13],[-74,-14],[-79,-59],[196,-489],[-260,-315],[-235,-294],[-209,-274],[-214,-253],[-212,-270],[-265,-312],[145,-38],[0,-48],[31,0],[25,-35],[21,-35],[-39,-27],[59,-54],[79,-19],[18,5],[38,6],[62,0],[433,-108],[31,16],[56,-29],[84,0],[82,-19],[13,70],[84,-30],[-13,-83],[51,-52],[31,30],[94,70],[25,51],[42,2],[10,20],[75,-13],[-6,-101],[15,-4],[2,-106],[18,1],[0,-19],[30,-8],[45,-9],[32,-63],[20,-8],[12,21],[45,-19],[36,-5],[-12,141],[53,-1],[16,22],[-20,17],[7,25],[8,12],[27,10],[0,43],[22,36],[-16,30],[-16,22],[-107,35],[118,187],[29,-4],[13,12],[-1,62],[30,48],[146,242],[-1,61],[56,118],[-8,25],[11,124],[91,-11],[48,80],[-4,8],[36,5],[78,-117],[72,-107],[43,-79],[56,-86],[51,-81],[74,-75],[59,-24],[66,-11],[79,0],[3,-35],[36,0],[38,-21],[31,5],[43,11],[41,19],[12,26],[44,11],[0,-46],[13,-35],[15,-59],[18,-62],[69,6],[43,32],[100,-73],[38,22],[10,43],[13,19],[30,27],[54,29],[46,49],[20,24],[3,57],[25,88],[-15,46],[-18,-8],[-64,-59],[-61,-6],[-76,9],[15,59],[38,99],[252,-16],[28,11],[64,8],[-41,286],[120,13],[130,27],[107,16],[56,0],[84,24],[-63,104],[-18,99],[-4,4],[-3,169],[3,326],[0,130],[4,19],[15,31],[-4,76],[-4,108],[0,80],[-18,119],[-32,210],[152,19],[414,19],[7,-8],[26,-73],[3,-57],[-11,-46],[-32,-102],[-22,-58],[-40,-57],[-47,-69],[-55,-77],[-7,-35],[-15,-69],[-29,-53],[0,-35],[19,-57],[29,-38],[14,-115],[18,-100],[58,-138],[48,-84],[145,-157],[120,-112],[116,-53],[123,-73],[156,-149],[22,-81],[54,-107],[26,-16],[51,-65],[65,-80],[44,19],[36,-50],[69,-107],[98,-192],[127,-165],[83,-69],[66,-53],[76,-27],[200,-226],[54,-35],[98,-118],[113,-96],[76,-84],[196,-207],[-189,-207],[-32,-39],[-37,-80],[-25,-54],[-51,-69],[-44,-34],[-10,-39],[-26,-42],[-29,-42],[-69,-34],[-109,-31],[-76,-31],[0,-42],[-65,-38],[-193,149],[-156,8],[0,123],[-131,11],[-69,31],[-58,4],[-54,0],[-55,-16],[-36,-23],[-83,-34],[-69,0],[-87,-39],[-62,-46],[-11,-88],[-36,-19],[-146,-27],[-76,-7],[-112,-39],[-135,-53],[-130,-62],[-51,-26],[-80,-58],[-80,-54],[-58,-65],[-62,-42],[-18,-54],[-14,-69],[11,-88],[0,-76],[0,-62],[25,-23],[22,-61],[47,0],[43,-19],[59,0],[47,-65],[43,-4],[62,-19],[18,-39],[44,-42],[36,-46],[4,-57],[14,-46],[-3,-27],[-22,-73],[-4,-61],[15,-100],[80,-4],[-33,-80],[-58,-100],[-76,-30],[-91,-50],[-98,-23],[-47,-27],[-40,-31],[-22,-30],[-18,-27],[-18,-8],[-59,-27],[-90,-23],[-33,-26],[-22,-4],[-123,-12],[-65,-19],[0,-31],[-26,0],[-29,-3],[-50,-16],[-51,-23],[-98,4],[-76,-8],[-51,-26],[-11,3],[-76,16],[-76,4],[-33,-16],[-47,0],[-43,-19],[-8,-31],[-120,27],[-43,39],[-65,3],[-26,-15],[-43,-19],[-66,-35],[-65,-57],[-69,42],[-15,77],[-47,57],[-105,77],[-15,57],[22,73],[4,173],[-31,3],[-24,50],[-50,19],[-106,50],[-87,31],[-62,65],[-69,46],[-50,19],[-77,0],[-87,-19],[-22,27],[-43,15],[-65,0],[-109,50],[0,15],[-98,58],[-142,15],[-25,387],[-124,111],[-22,46],[-138,169],[55,0],[11,19],[3,27],[4,73],[15,57],[21,108],[15,49],[58,85],[22,57],[11,73],[18,107],[-73,8],[-58,23],[-109,50],[-105,42],[-91,42],[-54,23],[-87,38],[-29,19],[-19,54],[55,100],[-145,73],[-73,15],[-109,27],[-145,61],[-62,8],[-76,-4],[-76,42],[-4,-57],[-33,-50],[-36,-54],[-43,-46],[-26,8],[-65,0],[-58,-8],[-76,12],[-69,23],[-91,30],[-95,16],[-54,30],[40,108],[-120,65],[-7,34],[-240,130],[-65,39],[-73,11],[-58,8],[-58,11],[-29,35],[-44,31],[-79,46],[-15,23],[-22,19],[-43,27],[-33,3],[-22,8],[-51,-11],[-39,-4],[-33,30],[-26,-7],[-61,-39],[-26,-46],[-43,-65],[-18,-99],[87,-62],[105,-57],[25,-8],[15,-19],[58,-23],[69,-34],[44,-58],[0,-27],[-33,-15],[-33,-23],[-29,-23],[-40,-54],[-29,-27],[-83,20],[-124,46],[-40,3],[-94,46],[-36,-61],[-26,8],[-36,-50],[-51,-46],[-189,80],[-47,43],[-91,65],[-50,-58],[-11,0],[-44,-30],[-69,-43],[-76,-53],[-101,-42],[-69,-46],[-98,-77],[-76,-65],[-51,-19],[-116,-4],[-131,-11],[-72,44],[-85,51],[-76,48],[-162,0],[-56,-44],[-45,-26],[-70,-20],[-7,15],[-54,43],[-41,22],[-40,27],[-50,11],[-55,16],[-37,6],[-50,19],[-52,-32],[-42,-39],[-26,-27],[-11,-4],[-43,8],[-47,0],[-48,-42],[-29,-54],[-43,-57],[-47,-89],[-167,10],[0,18],[-11,26],[-29,12],[-37,15],[-18,27],[-34,-11],[-10,42],[11,72],[44,69],[33,69],[32,66],[22,49],[15,50],[-44,16],[-80,38],[-69,31],[-73,34],[-21,42],[-25,39],[-22,34],[0,34],[-33,16],[0,7],[11,27],[-29,19],[-76,22],[-12,31],[-38,19],[-19,93],[-38,85],[-100,55],[-66,27],[-123,36],[-91,21],[-85,21],[-50,23],[-6,62],[-33,53],[-36,39],[-11,99],[14,66],[-50,164],[0,46],[-40,73],[-7,123],[7,119],[14,3],[29,0],[47,8],[64,43],[96,-1],[91,12],[69,4],[65,0],[95,0],[79,19],[15,50],[51,45],[36,104],[33,103],[25,131],[33,38],[91,88],[76,119],[64,182],[43,118],[11,82],[37,91],[46,54],[75,7],[86,-17],[62,-39],[27,-24],[82,-56],[80,-42],[89,-38],[0,55],[78,82],[60,55],[42,32],[70,-5],[87,-9],[69,-55],[60,-82],[69,-82],[112,-63],[68,-64],[44,91],[70,62],[67,84],[26,91],[23,63],[-22,10],[-138,82],[-94,89],[-80,72],[-78,100],[-94,79],[208,369],[0,73],[69,54],[190,0],[33,29],[88,26],[52,-9],[69,-9],[8,-37]],[[10028,8319],[-81,-257],[5,-292],[-7,-372],[14,-32],[42,-179],[65,-186],[25,-81],[100,-108],[30,-10],[9,-7],[112,-15],[109,-27],[146,-59],[44,-46],[93,-101],[19,-58],[-413,-18],[-161,-29],[33,-51],[0,-116],[23,-138],[-2,-155],[9,-17],[-2,-39],[4,-12],[0,-25],[7,-19],[0,-37],[-16,-15],[-65,39],[-21,20],[-67,29],[-79,39],[-91,45],[-72,24],[-30,20],[-39,36],[-21,57],[0,73],[-35,93],[-62,-10],[10,-65],[-112,-150],[-241,130],[-28,37],[-165,58],[-30,-80],[-149,-204],[-14,-10],[-28,-80],[-81,-121],[-84,-63],[-72,-39],[-58,-82],[-6,-73],[-28,-61],[-9,-78],[-82,-99],[-18,-83],[-35,-42],[-65,20],[-56,-10],[-16,133],[-16,83],[-26,108],[-125,68],[-35,27],[23,32],[-100,96],[-69,2],[-40,-56],[-77,34],[19,12],[-28,13],[-39,-15],[-10,-74],[-32,-44],[-37,-34],[2,-27],[-35,-5],[-18,-15],[-5,18],[-16,0],[-19,-18],[-28,0],[3,113],[-323,764],[84,56],[102,34],[48,5],[84,113],[-74,44],[-26,10],[0,-49],[-44,-12],[0,49],[-46,32],[0,9],[181,165],[-28,27],[51,49],[37,88],[-552,61],[-112,7],[-39,-294],[81,-7],[7,-34],[28,-3],[0,-37],[-10,-14],[-88,-27],[-327,-5],[-40,-5],[-46,-59],[-105,-88],[-113,-12],[-75,22],[-23,0],[-30,17],[-21,-3],[-111,-41],[-79,-74],[-33,-36],[-42,-40],[-123,-111],[-199,-162],[-40,15],[-4,134],[-14,41],[-19,27],[-70,66],[-65,25],[-4,12],[0,51],[51,0],[2,111],[33,68],[21,27],[27,12],[-6,25],[-61,49],[-16,0],[-16,-17],[-19,-8],[-21,0],[-4,32],[16,20],[9,0],[0,24],[-23,8],[-2,27],[-19,-5],[-21,7],[-7,20],[-60,2],[-3,64],[-123,-54],[-162,-140],[-35,13],[-153,110],[-142,71],[-86,29],[-42,5],[-155,0],[-98,27],[-2,-54],[-49,-103],[0,-22],[-28,-17],[-20,-32],[-40,-95],[-28,-49],[-28,-59],[-27,-47],[-42,-61],[-26,3],[-16,19],[-12,25],[-39,7],[-21,-29],[-28,-37],[-5,-108],[-155,5],[0,12],[-67,49],[-28,34],[-47,23],[-37,66],[-30,17],[-84,-7],[-65,19],[-18,22],[-197,54],[-92,86],[-70,29],[-65,54],[2,39],[37,27],[12,52],[-5,100],[17,57],[0,73],[21,81],[41,79],[109,139],[33,96],[39,56],[47,39],[-509,353],[72,145],[63,78],[51,81],[49,66],[44,86],[-12,101],[-27,54],[-56,41],[-3,15],[65,140],[-227,198],[-142,74],[33,98],[118,142],[14,5],[105,105],[11,22],[-46,88],[-112,118],[10,189],[41,122],[59,71],[-7,13],[-58,76],[-98,58],[-49,49],[-81,18],[7,63],[60,84],[10,51],[-12,29],[0,103],[35,25],[0,29],[32,15],[0,37],[24,17],[41,54],[202,-64],[77,3],[67,127],[-11,49],[11,47],[26,46],[2,54],[23,17],[89,-14],[54,-5],[44,-49],[35,-54],[7,-25],[109,-12],[116,137],[47,125],[4,59],[59,37],[32,81],[56,9],[46,32],[107,-49],[216,76],[128,-5],[139,8],[70,32],[20,-74],[68,-2],[81,-62],[67,-2],[54,-17],[44,-32],[44,-8],[146,-58],[51,61],[10,37],[-19,22],[0,44],[72,59],[12,90],[-14,42],[16,59],[30,22],[-2,24],[102,135],[23,59],[-7,66],[33,49],[14,25],[95,142],[86,95],[190,-85],[30,0],[35,29],[23,0],[75,-32],[27,57],[68,63],[-7,96],[-70,5],[0,12],[37,5],[-2,17],[28,0],[0,15],[63,59],[41,61],[5,44],[46,-39],[47,0],[35,-52],[18,-83],[-11,-32],[53,-42],[135,-68],[141,-20],[86,0],[54,-14],[95,4],[30,-51],[26,-17],[27,-32],[24,0],[7,-20],[41,-9],[-2,-25],[28,-32],[28,-12],[32,-25],[19,-31],[25,-13],[7,-36],[98,2],[-2,54],[55,12],[51,0],[31,22],[16,32],[239,-22],[2,-22],[23,-51],[33,-27],[2,-37],[19,-39],[49,-13],[0,-49],[-68,-127],[-11,-150],[25,-24],[-11,-57],[65,-31],[72,-10],[102,2],[69,-10],[105,-7],[-26,39],[10,44],[44,25],[167,216],[30,5],[40,26],[97,-4],[19,201],[39,34],[7,-25],[51,3],[28,22],[79,-30],[306,27],[19,32],[125,3],[198,-15],[2,-51],[30,4],[7,13],[35,22],[32,-8],[26,-24],[0,-69],[30,-56],[0,-66],[26,-64],[14,-96],[93,-191],[85,-71],[76,-130],[-11,-83],[9,-7],[0,-32],[-29,-32],[-3,-32],[-14,-37],[-39,-41],[-5,-35],[-30,-2],[-12,-39],[-7,-62],[24,-112],[-47,-15],[-25,-29],[-47,46],[-192,37],[-105,37],[-72,0],[2,-47],[-34,-86],[-3,-81],[-16,-12],[5,-49],[-28,-19],[9,-84],[60,-12],[140,-44],[-5,-130],[7,-110],[33,-49],[11,-69],[121,-113],[114,-73],[53,-17],[28,-25],[18,0],[33,-24],[55,-18],[44,3],[44,-22],[-7,-27],[58,-7],[21,-40],[49,-17],[7,-27],[21,-32],[-12,-17],[-12,-7],[-35,-64],[-6,-27],[-17,-46],[14,-101],[12,-12],[-21,-235],[-16,-45],[-21,-63],[2,-54],[14,-15],[21,-5],[30,-19],[9,-32],[12,-37],[35,-56],[44,-42],[21,-74],[14,-68],[0,-32],[-10,-12],[0,-66],[14,-13]],[[10028,8319],[-23,23],[0,61],[16,7],[0,47],[-9,54],[-35,81],[-35,41],[-36,50],[-3,41],[-13,30],[-32,17],[-25,0],[-16,27],[0,51],[22,61],[19,37],[23,243],[-16,10],[-10,98],[7,44],[3,33],[54,71],[70,-98],[112,-57],[13,7],[183,-85],[41,-3],[160,27],[13,-68],[35,-27],[13,-104],[-32,-47],[-26,-71],[-29,0],[13,-125],[87,-64],[3,-27],[32,-7],[0,-17],[54,3],[35,0],[90,-3],[67,17],[26,10],[32,0],[3,17],[35,3],[38,-27],[87,-37],[-3,-37],[44,-44],[0,-7],[26,-13],[13,-17],[22,-31],[23,-3],[3,-10],[-10,-7],[29,-34],[0,-20],[9,-3],[16,-4],[39,-37],[38,-13],[7,-24],[-13,-7],[0,-16],[-16,-17],[9,-24],[0,-68],[-28,-20],[9,-20],[-16,-3],[7,-38],[0,-10],[12,0],[-6,-27],[-35,4],[16,-17],[6,-61],[19,0],[32,-61],[55,-33],[38,-4],[19,-17],[23,10],[22,0],[42,71],[16,17],[-26,31],[7,16],[44,7],[36,17],[6,24],[29,-17],[28,47],[42,27],[42,-20],[12,10],[20,-7],[16,14],[25,-10],[7,3],[25,-10],[13,30],[42,14],[16,13],[22,-17],[10,-3],[9,-7],[64,-30],[16,0],[19,-10],[26,30],[29,-20],[51,10],[9,17],[29,-14],[77,0],[-58,-40],[-54,-44],[-35,-64],[3,-17],[-10,-17],[16,-30],[16,-7],[7,-68],[-16,-23],[16,-7],[-48,-71],[38,-67],[-6,-14],[19,-3],[42,-44],[-10,-20],[77,-98],[9,-34],[26,-51],[0,-20],[35,-84],[-61,-92],[-89,-3],[-26,-14],[-9,7],[-20,-7],[7,-104],[-23,-7],[-3,-71],[-19,-27],[10,-40],[-45,-132],[-7,-294],[-86,-287],[90,-66],[22,-4],[45,-54],[32,-17],[54,-57],[19,-13],[29,0],[58,-31],[13,7],[41,-44],[45,-27],[-6,-24],[131,-84],[19,-41],[0,-37],[25,-17],[16,-30],[-9,-27],[13,-13],[-4,-129],[13,0],[0,-155],[-13,-61],[-16,0],[-35,-50],[-22,-4],[-23,-37],[-51,0],[-32,-7],[-54,-40],[-16,17],[-70,-21],[-26,-27],[10,-13],[-16,-17],[-71,-17],[-38,10],[-96,-30],[-45,7],[-45,-11],[-28,-84],[-20,-17],[0,-23],[-41,-65],[-55,-57],[-108,-108],[-29,-14],[9,-33],[-44,-27],[0,-31],[12,-27],[10,-81],[-29,-81],[7,-17],[-26,-108],[-35,-20],[-134,149],[-90,209],[-102,111],[-93,64],[-35,24],[-74,20],[-86,54],[-154,169],[-115,105],[-38,81],[-39,84],[-9,78],[-35,78],[0,94],[-7,34],[-38,24],[-10,37],[0,57],[45,101],[6,58],[55,88],[73,94],[26,71],[32,100],[26,129],[-48,57],[-23,74],[-83,98],[-51,44],[-147,64],[-103,24],[-118,17],[-38,13],[-103,108],[-25,91],[-61,183],[-38,169],[-20,47],[4,348],[0,300],[86,257]]],"transform":{"scale":[0.00003978126319957917,0.00003768330056148134],"translate":[76.8382645070388,28.411533328925405]},"objects":{"polygons":{"type":"GeometryCollection","geometries":[{"arcs":[[0]],"type":"Polygon","properties":{"id":3}},{"arcs":[[1]],"type":"Polygon","properties":{"id":1}},{"arcs":[[2]],"type":"Polygon","properties":{"id":2}}]}}}

index.html

<!DOCTYPE html>
<html>
<head>
    <style>
      body {
        margin: 0;
      }

      .subunit {
        fill: none;
        stroke: steelblue;
        stroke-width: 3px;
      }
    </style>
</head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    <script src="https://unpkg.com/d3-marcon@2.0.1/build/d3-marcon.min.js"></script>
    <script src="https://d3js.org/d3-tile.v0.0.min.js"></script> 

    <script>
    var m = d3.marcon().width(window.innerWidth).height(window.innerHeight);
    m.render();
    var width = m.innerWidth(), height = m.innerHeight(), svg = m.svg();

    var projection = d3.geoMercator();

    var path = d3.geoPath()
        .projection(projection);

    d3.queue()
      .defer(d3.json, "delhi_ward_outline.json")
      .await(ready)

    function ready(error, map){

      centerZoom(map);
      tiles();
      drawSubUnits(map);
      

    }

    // This function "centers" and "zooms" a map by setting its projection's scale and translate according to its outer boundary
    // It also returns the boundary itself in case you want to draw it to the map
    function centerZoom(data){
      var o = topojson.mesh(data, data.objects.polygons, function(a, b) { return a === b; });

      projection
          .scale(1)
          .translate([0, 0]);

      var b = path.bounds(o),
          s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
          t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

      projection
          .scale(s)
          .translate(t);

      return o;
    }

    function drawSubUnits(data){
      svg.selectAll(".subunit")
          .data(topojson.feature(data, data.objects.polygons).features)
        .enter().append("path")
          .attr("class", "subunit")
          .attr("d", path);
    }

    function tiles(){
      var pi = Math.PI,
        tau = 2 * pi;
    
      var tiles = d3.tile()
          .size([width, height])
          .scale(projection.scale() * tau)
          .translate(projection([0, 0]))
          ();

      svg.selectAll("image")
          .data(tiles)
        .enter().append("image")
          .attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
          .attr("x", function(d) { return (d[0] + tiles.translate[0]) * tiles.scale; })
          .attr("y", function(d) { return (d[1] + tiles.translate[1]) * tiles.scale; })
          .attr("width", tiles.scale)
          .attr("height", tiles.scale); 
    }
    </script>

  </body>
</html>

thumbnail.png