Geographic Bounding Boxes

A geographic bounding box for each country from Natural Earth’s 1:110m Cultural Vectors (Admin 0 - Countries).

A minimum bounding box in geographic coordinates is an area defined by minimum and maximum longitudes and latitudes.

# d3.geo.bounds(feature) -- (source)

Returns the spherical bounding box for the specified feature. The bounding box is represented by a two-dimensional array: [[left, bottom], [right, top]], where left is the minimum longitude, bottom is the minimum latitude, right is maximum longitude, and top is the maximum latitude.

Data: see console of full windows view, with data such :
{"W":97.3717371737174; "S":5.688035433543348; "E":105.58055805580562; "N":20.414615115511538; "item":"Thailand"},

<!DOCTYPE html>
<meta charset="utf-8">
<title>Geographic Bounding Boxes</title>
<style>
/* #map svg {
  cursor: move;
} */
path {
  fill: none;
  stroke: #000;
}

.frame, .land {
  stroke-width: 1px;
}
.frame:hover {
  stroke-width: 2px;
}
.example path.Polygon {
  fill: url(#hatch);
}
.example text {
  font-size: 11px;
  font-family: sans-serif;
}
</style>

<p class="breadcrumbs">Forked from: <a href="https://www.jasondavies.com/">Jason Davies</a> → <a href="https://www.jasondavies.com/maps/">Maps</a> → <a href="https://www.jasondavies.com/maps/bounds/">Bounds</a></p>

<h1>Geographic Bounding Boxes</h1>
<div id="map"></div>

var width = 600,
    height = width;

var projection = d3.geo.orthographic()
    .translate([width / 2, height / 2])
    .scale(300)
    .clipAngle(90)
    .precision(.1)
    .rotate([0, -25]);
    // There is a clipping bug, fixed in branch geo-clip-good
    //.rotate([-103.5, -20, 0]);

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

/* ************************************************* */
/* Death code? ************************************* */
var hatch = svg.append("defs").append("pattern")
    .attr("id", "hatch")
    .attr("patternUnits", "userSpaceOnUse")
    .attr("width", 8)
    .attr("height", 8)
  .append("g");
hatch.append("path").attr("d", "M0,0L8,8");
hatch.append("path").attr("d", "M8,0L0,8");

/* ************************************************* */

// FUNCTION: Get data and process!
d3.json("world-110m-sp.06.json", function(error, json) {
var admin_0   = topojson.feature(json, json.objects.admin_0),
	L0_border = topojson.mesh(json, json.objects.admin_0, function(a,b) { return a!==b;}),
	admin_1   = topojson.feature(json, json.objects.admin_1),
	L1_border = topojson.mesh(json, json.objects.admin_1, function(a,b) { return a!==b;}),
	coast     = topojson.mesh(json, json.objects.admin_0, function(a,b) { return a===b;});

/* **************************************************************** */
var water = svg.append("path")
    .datum({type: "Sphere"})
    	.attr("class", "water")
		.style({'fill':'#C6ECFF'})
		.style({'stroke': '656565', 'stroke-width': 1.5})
		.attr("d", path);
var earthGradient = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("fx1", "30%")
    .attr("fy1", "30%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");
  earthGradient.append("svg:stop")
    .attr("offset", "50%")
    .attr("stop-color", "#FFF")
    .attr("stop-opacity", 0.3);
  earthGradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "#009")
    .attr("stop-opacity", 0.2);
 var earthShadow = svg.append('circle')	
	.attr('cx', width / 2)
	.attr('cy', height / 2)
	.attr('r', width/2 )
	.attr('fill', 'url(#gradient)');
	
/* **************************************************************** */
/* **************************************************************** */
var L0 = svg.append("path")
      .attr("class", "")
      .datum(admin_0)
	.style({'fill':'#FDFBEA','stroke':'none'})
      .attr("d", path);
	
var L1_border = svg.append("path")
		.datum(L1_border)
		.attr("class", "")
		.style({'fill':'none','stroke': '#999', 'stroke-width': .5})
		.attr("d", path);
var L0_border = svg.append("path")
		.datum(L0_border)
		.attr("class", "")
		.style({'fill':'none','stroke': '#666', 'stroke-width': 1})
		.attr("d", path);		
var grid = svg.append("path")
		.datum(d3.geo.graticule().step([20,20]))
		.attr("class", "")
		.style({'fill':'none', 'stroke':'#777', 'stroke-width': 0.5, 'stroke-opacity': 0.5})
		.attr("d", path);
	
var antimeridian = svg.append("path")
		.datum({type: "LineString", coordinates: [[180, -90], [180, 0], [180, 90]]})
		.attr("id", "")
		.style({'fill':'none','stroke': '#777', 'stroke-width': 1, 'stroke-dasharray': '5 5'})
		.attr("d", path);
	
var coast = svg.append("path")
        .datum( coast )
        .attr("d", path)
        .attr("class", "")
		.style({'fill': 'none', 'stroke': '#0978AB', 'stroke-linejoin': 'round'})
		.style({'stroke-width': 0.5 })

});

//Degree of precision to keep 4 meaningful digits, ie: 048⁰75 OR 0⁰05'44"6.
    var digits, geo_side_max = Math.abs( Math.max( WNES.geo_width, WNES.geo_height) );
    if      ( geo_side_max < 1000 && geo_side_max >= 100   ) { digits = 1; }
    else if ( geo_side_max < 100  && geo_side_max >= 10    ) { digits = 2; }
    else if ( geo_side_max < 10   && geo_side_max >= 1     ) { digits = 3; }
    else if ( geo_side_max < 1    && geo_side_max >= 0.1   ) { digits = 4; }
    else if ( geo_side_max < 0.1  && geo_side_max >= 0.01  ) { digits = 5; }
    else if ( geo_side_max < 0.01 && geo_side_max >= 0.001 ) { digits = 6; };

//PRINT RESULTS (4 meaningful digits): 
//  console.log('"WNES" : { "id":"'+ WNES.id +'", "name":"'+ WNES.name +'", "W":' +  WNES.W.toFixed(digits)    +',"N":' + WNES.N.toFixed(digits)     +',"E":' + WNES.E.toFixed(digits)     +',"S":' + WNES.S.toFixed(digits)     +'}');
//  console.log('"WNES+": { "id":"'+ WNES.id +'", "name":"'+ WNES.name +'", "W+":'+ WNESplus.W.toFixed(digits) +',"N+":'+ WNESplus.N.toFixed(digits) +',"E+":'+ WNESplus.E.toFixed(digits) +',"S+":'+ WNESplus.S.toFixed(digits) +'}');
    console.log('make -f master.makefile ISO2='+ WNES.iso2 +' SOV3='+ WNES.iso3 +' NAME='+ WNES.name.replace(/ /gi,"_") +' WEST='+ WNESplus.W.toFixed(digits) +' SOUTH='+ WNESplus.S.toFixed(digits) +' EAST='+ WNESplus.E.toFixed(digits) +' NORTH='+ WNESplus.N.toFixed(digits) + ' AREA_SIZE='+WNES.area.toFixed(4));
// END WNES JSON #########################################################################################################
	
	// For all Earth::
    if (bb[0][0] === -180 && bb[0][1] === -90 && bb[1][0] === 180 && bb[1][1] === 90) {
     return {type: "Sphere"};
    }
	// For
    if (bb[0][1] === -90) bb[0][1] += 1e-6;
    if (bb[1][1] === 90) bb[0][1] -= 1e-6;
    if (bb[0][1] === bb[1][1]) bb[1][1] += 1e-6; 
		  
    return {
      type: "Polygon",
      coordinates: [
        [bb[0]]
          .concat(parallel(bb[1][1], bb[0][0], bb[1][0]))
          .concat(parallel(bb[0][1], bb[0][0], bb[1][0]).reverse())
      ]
    };
  };
}

function parallel(φ, λ0, λ1) {
  if (λ0 > λ1) λ1 += 360;
  var dλ = λ1 - λ0,
      step = dλ / Math.ceil(dλ);
  return d3.range(λ0, λ1 + .5 * step, step).map(function(λ) { return [normalise(λ), φ]; });
}

function normalise(x) {
  return (x + 180) % 360 - 180;
}
</script>

Modified http://code.jquery.com/jquery-2.0.2.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://code.jquery.com/jquery-2.0.2.min.js

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js