hanbyul-here/gist:0607236c090d7b4bc623

## gistfile1.html
<!DOCTYPE html>
<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="styles.css" />
<body>
<script src="d3.v3.min.js"></script>
<script src="d3.geo.tile.v0.min.js"></script>
<script src='//s3.amazonaws.com/assets-staging.mapzen.com/ui/components/bug/bug.min.js'></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script>
var coordX = [];
var coordY = [];
Array.max = function( array ){
    return Math.max.apply( Math, array );
};
Array.min = function( array ){
    return Math.min.apply( Math, array );
};

// $(document).keydown(function(event) {

//   spitSVG();
// });

function spitSVG(){

  var lefts = [];
  var tops = [];
  $("svg").each(function(){
    tops.push(parseInt($(this).css('top').replace('px','')));
    lefts.push(parseInt($(this).css('left').replace('px','')));
  });
  var minTop = Array.min(tops);
  var maxTop = Array.max(tops);
  var minLeft = Array.min(lefts);
  var maxLeft = Array.max(lefts);
  var verTileNum = 0;
  var horTileNum = 0;
  var i;
  for(i = 0; i < lefts.length; i++){
    if(lefts[i] == minLeft) verTileNum++;
    if(tops[i] == minTop) horTileNum++;
  }
  var svgViewWidth = maxLeft - minLeft;
  var svgViewHeight = maxTop - minTop;
  var viewSVG = "<svg width = \"" + svgViewWidth + "px\" height = \"" + svgViewHeight +"px\">";
  var gWidth = svgViewWidth/horTileNum;
  var gHeight = svgViewHeight/verTileNum;
  var gs = [];
  $("svg").each(function(){
    var thisTop = parseInt($(this).css('top').replace('px',''));
    var thisLeft = parseInt($(this).css('left').replace('px',''));
    thisTop -= minTop;
    thisLeft -= minLeft;
    var gStart = "<g transform = \"translate(" + thisLeft + " " + thisTop+ ")\">";
    var thisHTML = this.innerHTML;
    var gEnd = "</g>";
    var group = gStart + thisHTML + gEnd;
    gs.push(group);
  });
  var finalSVG = viewSVG;
  gs.forEach(function(g){
    finalSVG += g;
  });
  finalSVG += "</svg>";
  showDownloadButton(finalSVG);
}

function showDownloadButton(svg){
  var divEL = document.createElement('div');
  divEL.setAttribute('id','download');
  var blob = new Blob([svg], {type: 'text/xml'});
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.download = svg;
  a.href = url;
  a.textContent = "Download SVG"
  divEL.appendChild(a);
  document.body.appendChild(divEL);
}
</script>

<script type='text/javascript'>

  window.bugTitle = 'Map using d3 and geojson';

  var layers = ['water', 'landuse', 'roads', 'buildings'];
  window.renderTiles = function(d) {
    var svg = d3.select(this);
    this._xhr = d3.json("https://vector.mapzen.com/osm/all/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
      var k = Math.pow(2, d[2]) * 256; // size of the world in pixels

      tilePath.projection()
          .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256]) // [0°,0°] in pixels
          .scale(k / 2 / Math.PI)
          .precision(0);

      layers.forEach(function(layer){
        var data = json[layer];
        if (data) {
          svg.selectAll("path")
            .data(data.features.sort(function(a, b) { return a.properties.sort_key ? a.properties.sort_key - b.properties.sort_key : 0 }))
            .enter().append("path")
                   .attr('stroke-width',function(d){
              switch(d.properties.kind){
                case "water-layer" :
                case "river" :
                case "stream" :
                case "canal" :
                  return "1.5";
                  break;
                case "major_road":
                  return "1";
                  break;
                case "minor_road":
                  return "0.5";
                  break;
                case "highway":
                  return "1.5";
                  break
                case "buildings-layer ":
                  return "0.15";
                  break;
                case "rail":
                  return "0.5";
                  break;
              }
            })
            .attr('stroke',function(d){
              switch(d.properties.kind){
                case "water-layer" :
                case "river" :
                case "stream" :
                case "canal" :
                case "water" :
                case "ocean" :
                  return "#d8acc4";
                  break;
                case "major_road":
                  return "#fb7b7a";
                  break;
                case "minor_road":
                  return "#999";
                  break;
                case "highway":
                  return "#FA4A48";
                  break
                case "buildings-layer ":
                  return "#987284";
                  break;
                case "rail":
                  return "#503D3F";
                  break;
                }
            })
            .attr('fill',function(d){
              //console.log(d.properties.kind);
              switch(d.properties.kind){
                case "water" :
                case "ocean" :
                case "river-bank" :
                  return "#d8acc4";
                  break;
                case "park":
                case "nature_reserve":
                case "wood":
                case "protected-land":
                  return "#88D18A";
                  break;
                default:
                  return "none";
              }
            })
            .attr("class", function(d) { var kind = d.properties.kind || ''; return layer + ' ' + kind; })
            .attr("d", tilePath);
        }
      });

      spitSVG();
    });
  };

</script>
<script src="scripts.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<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="styles.css" />
	<body>
	<script src="d3.v3.min.js"></script>
	<script src="d3.geo.tile.v0.min.js"></script>
	<script src='//s3.amazonaws.com/assets-staging.mapzen.com/ui/components/bug/bug.min.js'></script>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

	<script>
	var coordX = [];
	var coordY = [];
	Array.max = function( array ){
	return Math.max.apply( Math, array );
	};
	Array.min = function( array ){
	return Math.min.apply( Math, array );
	};

	// $(document).keydown(function(event) {

	// spitSVG();
	// });

	function spitSVG(){

	var lefts = [];
	var tops = [];
	$("svg").each(function(){
	tops.push(parseInt($(this).css('top').replace('px','')));
	lefts.push(parseInt($(this).css('left').replace('px','')));
	});
	var minTop = Array.min(tops);
	var maxTop = Array.max(tops);
	var minLeft = Array.min(lefts);
	var maxLeft = Array.max(lefts);
	var verTileNum = 0;
	var horTileNum = 0;
	var i;
	for(i = 0; i < lefts.length; i++){
	if(lefts[i] == minLeft) verTileNum++;
	if(tops[i] == minTop) horTileNum++;
	}
	var svgViewWidth = maxLeft - minLeft;
	var svgViewHeight = maxTop - minTop;
	var viewSVG = "<svg width = \"" + svgViewWidth + "px\" height = \"" + svgViewHeight +"px\">";
	var gWidth = svgViewWidth/horTileNum;
	var gHeight = svgViewHeight/verTileNum;
	var gs = [];
	$("svg").each(function(){
	var thisTop = parseInt($(this).css('top').replace('px',''));
	var thisLeft = parseInt($(this).css('left').replace('px',''));
	thisTop -= minTop;
	thisLeft -= minLeft;
	var gStart = "<g transform = \"translate(" + thisLeft + " " + thisTop+ ")\">";
	var thisHTML = this.innerHTML;
	var gEnd = "</g>";
	var group = gStart + thisHTML + gEnd;
	gs.push(group);
	});
	var finalSVG = viewSVG;
	gs.forEach(function(g){
	finalSVG += g;
	});
	finalSVG += "</svg>";
	showDownloadButton(finalSVG);
	}

	function showDownloadButton(svg){
	var divEL = document.createElement('div');
	divEL.setAttribute('id','download');
	var blob = new Blob([svg], {type: 'text/xml'});
	var url = URL.createObjectURL(blob);
	var a = document.createElement('a');
	a.download = svg;
	a.href = url;
	a.textContent = "Download SVG"
	divEL.appendChild(a);
	document.body.appendChild(divEL);
	}
	</script>

	<script type='text/javascript'>

	window.bugTitle = 'Map using d3 and geojson';

	var layers = ['water', 'landuse', 'roads', 'buildings'];
	window.renderTiles = function(d) {
	var svg = d3.select(this);
	this._xhr = d3.json("https://vector.mapzen.com/osm/all/" + d[2] + "/" + d[0] + "/" + d[1] + ".json?api_key=vector-tiles-LM25tq4", function(error, json) {
	var k = Math.pow(2, d[2]) * 256; // size of the world in pixels

	tilePath.projection()
	.translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256]) // [0°,0°] in pixels
	.scale(k / 2 / Math.PI)
	.precision(0);

	layers.forEach(function(layer){
	var data = json[layer];
	if (data) {
	svg.selectAll("path")
	.data(data.features.sort(function(a, b) { return a.properties.sort_key ? a.properties.sort_key - b.properties.sort_key : 0 }))
	.enter().append("path")
	.attr('stroke-width',function(d){
	switch(d.properties.kind){
	case "water-layer" :
	case "river" :
	case "stream" :
	case "canal" :
	return "1.5";
	break;
	case "major_road":
	return "1";
	break;
	case "minor_road":
	return "0.5";
	break;
	case "highway":
	return "1.5";
	break
	case "buildings-layer ":
	return "0.15";
	break;
	case "rail":
	return "0.5";
	break;
	}
	})
	.attr('stroke',function(d){
	switch(d.properties.kind){
	case "water-layer" :
	case "river" :
	case "stream" :
	case "canal" :
	case "water" :
	case "ocean" :
	return "#d8acc4";
	break;
	case "major_road":
	return "#fb7b7a";
	break;
	case "minor_road":
	return "#999";
	break;
	case "highway":
	return "#FA4A48";
	break
	case "buildings-layer ":
	return "#987284";
	break;
	case "rail":
	return "#503D3F";
	break;
	}
	})
	.attr('fill',function(d){
	//console.log(d.properties.kind);
	switch(d.properties.kind){
	case "water" :
	case "ocean" :
	case "river-bank" :
	return "#d8acc4";
	break;
	case "park":
	case "nature_reserve":
	case "wood":
	case "protected-land":
	return "#88D18A";
	break;
	default:
	return "none";
	}
	})
	.attr("class", function(d) { var kind = d.properties.kind \|\| ''; return layer + ' ' + kind; })
	.attr("d", tilePath);
	}
	});

	spitSVG();
	});
	};

	</script>
	<script src="scripts.js"></script>
	</body>
	</html>