LuisSevillano/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Most basic example to center and scale your map with d3.geoBounds(), d3.geoCentroid() and d3.geoDistance().

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="//d3js.org/d3.v4.js" charset="utf-8"></script>
    <script src="//d3js.org/topojson.v1.js"></script>
    <style>
        path {
            stroke-linejoin: round;
        }
        .city {
            fill: rgb(240, 240, 240);
            stroke: rgb(0, 0, 0);
            stroke-width: .2;
        }
        svg {
            background-color: #D0E4E7
        }
        .land {
            fill: rgb(245, 245, 245);
        }
        .coast {
            fill: none;
            stroke: #76aeb6;
            stroke-width: 1.5;
        }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      d3.queue()
          .defer(d3.json, 'map.json')
          .await(function(error, map) {
              if(error) throw error;

              var svg = d3.select("svg"),
                  width = +svg.attr("width"),
                  height = +svg.attr("height");

              var topology = topojson.feature(map, map.objects.coruna),
                  coast = topojson.feature(map, map.objects.border)

              var projection = d3.geoMercator()
                   .translate([width / 2, height / 2]);

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

              var bounds = d3.geoBounds(topology),
                  center = d3.geoCentroid(topology);

              // Compute the angular distance between bound corners
              var distance = d3.geoDistance(bounds[0], bounds[1]),
                  scale = height / distance / Math.sqrt(2);

              // Update the projection scale and centroid
              projection.scale(scale).center(center);

              svg.append("path")
                  .datum(coast)
                  .attr("class", "land")
                  .attr("d", path);

              svg.append("path")
                  .datum(topology)
                  .attr("class", "city")
                  .attr("d", path);

              svg.append("path")
                  .datum(coast)
                  .attr("class", "coast")
                  .attr("d", path);
          });
    </script>
  </body>
</html>

## map.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              map.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## preview.png

      
    Raw
  

              preview.png
            
          
## script.sh
#!/usr/bin/env bash

topojson \
  shp/border.shp shp/coruna.shp \
  -q 8000 \
  -o map.json \

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="//d3js.org/d3.v4.js" charset="utf-8"></script>
	<script src="//d3js.org/topojson.v1.js"></script>
	<style>
	path {
	stroke-linejoin: round;
	}
	.city {
	fill: rgb(240, 240, 240);
	stroke: rgb(0, 0, 0);
	stroke-width: .2;
	}
	svg {
	background-color: #D0E4E7
	}
	.land {
	fill: rgb(245, 245, 245);
	}
	.coast {
	fill: none;
	stroke: #76aeb6;
	stroke-width: 1.5;
	}
	</style>
	</head>
	<body>
	<svg width="960" height="500"></svg>
	<script>
	d3.queue()
	.defer(d3.json, 'map.json')
	.await(function(error, map) {
	if(error) throw error;

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height");

	var topology = topojson.feature(map, map.objects.coruna),
	coast = topojson.feature(map, map.objects.border)

	var projection = d3.geoMercator()
	.translate([width / 2, height / 2]);

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

	var bounds = d3.geoBounds(topology),
	center = d3.geoCentroid(topology);

	// Compute the angular distance between bound corners
	var distance = d3.geoDistance(bounds[0], bounds[1]),
	scale = height / distance / Math.sqrt(2);

	// Update the projection scale and centroid
	projection.scale(scale).center(center);

	svg.append("path")
	.datum(coast)
	.attr("class", "land")
	.attr("d", path);

	svg.append("path")
	.datum(topology)
	.attr("class", "city")
	.attr("d", path);

	svg.append("path")
	.datum(coast)
	.attr("class", "coast")
	.attr("d", path);
	});
	</script>
	</body>
	</html>
	#!/usr/bin/env bash

	topojson \
	shp/border.shp shp/coruna.shp \
	-q 8000 \
	-o map.json \