jhnklly/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
    <script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
    <link type="text/css"  href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>


<style>
    html, body, #myMap{
        height: 100%;
        width: 100%;
        margin: 0; padding: 0;
        font-family: sans-serif;
        overflow: hidden;
    }

    #myMap {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
    }

    path {
      vector-effect: non-scaling-stroke;
      stroke-linejoin: round;
      stroke-linecap: round;
      stroke: #777;
      fill: none;
    }
    circle {
        fill: rgba(68, 167, 228, 0.5);
        stroke: none;
    }

    .top-left {
        position: absolute;
        top: 5px;
        left: 5px;
    }
    .btn {
        background-color: rgba(255,255,255,0.8);
        outline: 1px solid rgba(0,0,0,0.3);
        min-width: 60px;
        padding: 2px 4px;
        margin: 2px;
        display: inline-block;
    }


.clipper {
    stroke: blue;
}

g { clip-path: none; }
</style>

</head>
<body>
    <div id="myMap"></div>


    <script src='http://d3js.org/queue.v1.min.js' type="text/javascript"></script>
    <script src='sphericalmercator.js' type="text/javascript"></script>

<script>


var width = 960,
    height = 600;

var dz = 2,
    z = 5 + dz,
    x = d3.range(4 << dz, 11 << dz),
    y = d3.range(10 << dz, 15 << dz);

var projection = d3.geo.albers()
    .scale(1250)
    .translate([width / 2, height / 2]);


var xy = projection([-122,33]);

var sph = new SphericalMercator();


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


var projpath = d3.geo.path()
    .projection(projection);
    //.context(context);

var q = queue(6);

x.forEach(function(x) {
  y.forEach(function(y) {
    q.defer(renderTile, x, y, z);
  });
});


var the_key = "key-2d5eacd8b924489c8ed5e8418bd883bc";
var demographics_url = "https://{S}-api.mapsense.co/universes/mapsense.demographics/{Z}/{X}/{Y}.topojson?api-key=" + the_key;
demographics_url += "&where=name!='Puerto Rico'";
demographics_url += "&select=name,population";
demographics_url += "&ringSpan=15";
demographics_url += "&lineSpan=15";
demographics_url += "&s=20";

function renderTile(x, y, z, callback) {
  //d3.json("http://www.somebits.com:8001/rivers/" + z + "/" + x + "/" + y + ".json", function(error, json) {
  d3.json("https://b-api.mapsense.co/universes/mapsense.demographics/" + z + "/" + x + "/" + y +".topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc&where=layer=='state'&s=15", function(error, tj) {

//var xy = projection([-122,33]);
bbox = sph.bbox(x,y,z);


bbox_json = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[bbox[0],bbox[1]],[bbox[0],bbox[3]],[bbox[2],bbox[3]],[bbox[2],bbox[1]],[bbox[0],bbox[1]]]]}}]};

//console.log(JSON.stringify(bbox_json));
    var tile_coords = "tile_" + x + "_" + y;

    svg.insert("clipPath")
    .data(bbox_json.features)
        .attr('id',tile_coords)
        .attr('class','clipper')
        .append('path')
            .attr('d',projpath) // run projpath function on the attached data element
        ;

    svg.insert("path")
      //.datum(topojson.object(world, world.objects.land))
      .datum(function(d){
          if ( tj.objects.state ) {
              return topojson.feature(tj, tj.objects.state);
          }
      })
      .attr("class", "land")
      .attr("d", projpath) // path is a the albers projection function above; it projects the path assigned via datum
      .attr("clip-path", "url(#" + tile_coords + ")")
      ;


    callback(null);
  });
}

// inverse(xy)
// Convert mercator x, y values to lon, lat


function merc2lonlat(x,y,z) {

}
/*
function renderTile(x, y, z, callback) {
  d3.json("https://b-api.mapsense.co/universes/mapsense.demographics/" + z + "/" + x + "/" + y +".topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc", function(error, json) {
    context.beginPath();
    path(topo2Geo(json));
    context.stroke();
    callback(null);
  });
}

d3.select(self.frameElement).style("height", height + "px");
*/

function topologyFeatures(topology) {
    function convert(topology, object, layer, features) {
        var featureOrCollection = topojson.feature(topology, object),
            layerFeatures;

        if (featureOrCollection.type === "FeatureCollection") {
            layerFeatures = featureOrCollection.features;
        } else {
            layerFeatures = [featureOrCollection];
        }
        layerFeatures.forEach(function(f) {
            f.properties.layer = layer;
        });
        features.push.apply(features, layerFeatures);
    }

    var features = [];
    for (var o in topology.objects) {
        convert(topology, topology.objects[o], o, features);
    }
    return features;
}

function topo2Geo(tj) {
    var gj = {
        type: "FeatureCollection",
        features: topologyFeatures(tj)
    };
    return gj;
}


</script>
</body>
</html>

## sphericalmercator.js
var SphericalMercator = (function(){

// Closures including constants and other precalculated values.
var cache = {},
    EPSLN = 1.0e-10,
    D2R = Math.PI / 180,
    R2D = 180 / Math.PI,
    // 900913 properties.
    A = 6378137,
    MAXEXTENT = 20037508.34;


// SphericalMercator constructor: precaches calculations
// for fast tile lookups.
function SphericalMercator(options) {
    options = options || {};
    this.size = options.size || 256;
    if (!cache[this.size]) {
        var size = this.size;
        var c = cache[this.size] = {};
        c.Bc = [];
        c.Cc = [];
        c.zc = [];
        c.Ac = [];
        for (var d = 0; d < 30; d++) {
            c.Bc.push(size / 360);
            c.Cc.push(size / (2 * Math.PI));
            c.zc.push(size / 2);
            c.Ac.push(size);
            size *= 2;
        }
    }
    this.Bc = cache[this.size].Bc;
    this.Cc = cache[this.size].Cc;
    this.zc = cache[this.size].zc;
    this.Ac = cache[this.size].Ac;
};

// Convert lon lat to screen pixel value
//
// - `ll` {Array} `[lon, lat]` array of geographic coordinates.
// - `zoom` {Number} zoom level.
SphericalMercator.prototype.px = function(ll, zoom) {
    var d = this.zc[zoom];
    var f = Math.min(Math.max(Math.sin(D2R * ll[1]), -0.9999), 0.9999);
    var x = Math.round(d + ll[0] * this.Bc[zoom]);
    var y = Math.round(d + 0.5 * Math.log((1 + f) / (1 - f)) * (-this.Cc[zoom]));
    (x > this.Ac[zoom]) && (x = this.Ac[zoom]);
    (y > this.Ac[zoom]) && (y = this.Ac[zoom]);
    //(x < 0) && (x = 0);
    //(y < 0) && (y = 0);
    return [x, y];
};

// Convert screen pixel value to lon lat
//
// - `px` {Array} `[x, y]` array of geographic coordinates.
// - `zoom` {Number} zoom level.
SphericalMercator.prototype.ll = function(px, zoom) {
    var g = (px[1] - this.zc[zoom]) / (-this.Cc[zoom]);
    var lon = (px[0] - this.zc[zoom]) / this.Bc[zoom];
    var lat = R2D * (2 * Math.atan(Math.exp(g)) - 0.5 * Math.PI);
    return [lon, lat];
};

// Convert tile xyz value to bbox of the form `[w, s, e, n]`
//
// - `x` {Number} x (longitude) number.
// - `y` {Number} y (latitude) number.
// - `zoom` {Number} zoom.
// - `tms_style` {Boolean} whether to compute using tms-style.
// - `srs` {String} projection for resulting bbox (WGS84|900913).
// - `return` {Array} bbox array of values in form `[w, s, e, n]`.
SphericalMercator.prototype.bbox = function(x, y, zoom, tms_style, srs) {
    // Convert xyz into bbox with srs WGS84
    if (tms_style) {
        y = (Math.pow(2, zoom) - 1) - y;
    }
    // Use +y to make sure it's a number to avoid inadvertent concatenation.
    var ll = [x * this.size, (+y + 1) * this.size]; // lower left
    // Use +x to make sure it's a number to avoid inadvertent concatenation.
    var ur = [(+x + 1) * this.size, y * this.size]; // upper right
    var bbox = this.ll(ll, zoom).concat(this.ll(ur, zoom));

    // If web mercator requested reproject to 900913.
    if (srs === '900913') {
        return this.convert(bbox, '900913');
    } else {
        return bbox;
    }
};

// Convert bbox to xyx bounds
//
// - `bbox` {Number} bbox in the form `[w, s, e, n]`.
// - `zoom` {Number} zoom.
// - `tms_style` {Boolean} whether to compute using tms-style.
// - `srs` {String} projection of input bbox (WGS84|900913).
// - `@return` {Object} XYZ bounds containing minX, maxX, minY, maxY properties.
SphericalMercator.prototype.xyz = function(bbox, zoom, tms_style, srs) {
    // If web mercator provided reproject to WGS84.
    if (srs === '900913') {
        bbox = this.convert(bbox, 'WGS84');
    }

    var ll = [bbox[0], bbox[1]]; // lower left
    var ur = [bbox[2], bbox[3]]; // upper right
    var px_ll = this.px(ll, zoom);
    var px_ur = this.px(ur, zoom);
    // Y = 0 for XYZ is the top hence minY uses px_ur[1].
    var bounds = {
        minX: Math.floor(px_ll[0] / this.size),
        minY: Math.floor(px_ur[1] / this.size),
        maxX: Math.floor((px_ur[0] - 1) / this.size),
        maxY: Math.floor((px_ll[1] - 1) / this.size)
    };
    if (tms_style) {
        var tms = {
            minY: (Math.pow(2, zoom) - 1) - bounds.maxY,
            maxY: (Math.pow(2, zoom) - 1) - bounds.minY
        };
        bounds.minY = tms.minY;
        bounds.maxY = tms.maxY;
    }
    return bounds;
};

// Convert projection of given bbox.
//
// - `bbox` {Number} bbox in the form `[w, s, e, n]`.
// - `to` {String} projection of output bbox (WGS84|900913). Input bbox
//   assumed to be the "other" projection.
// - `@return` {Object} bbox with reprojected coordinates.
SphericalMercator.prototype.convert = function(bbox, to) {
    if (to === '900913') {
        return this.forward(bbox.slice(0, 2)).concat(this.forward(bbox.slice(2,4)));
    } else {
        return this.inverse(bbox.slice(0, 2)).concat(this.inverse(bbox.slice(2,4)));
    }
};

// Convert lon/lat values to 900913 x/y.
SphericalMercator.prototype.forward = function(ll) {
    var xy = [
        A * ll[0] * D2R,
        A * Math.log(Math.tan((Math.PI*0.25) + (0.5 * ll[1] * D2R)))
    ];
    // if xy value is beyond maxextent (e.g. poles), return maxextent.
    (xy[0] > MAXEXTENT) && (xy[0] = MAXEXTENT);
    (xy[0] < -MAXEXTENT) && (xy[0] = -MAXEXTENT);
    (xy[1] > MAXEXTENT) && (xy[1] = MAXEXTENT);
    (xy[1] < -MAXEXTENT) && (xy[1] = -MAXEXTENT);
    return xy;
};

// Convert 900913 x/y values to lon/lat.
SphericalMercator.prototype.inverse = function(xy) {
    return [
        (xy[0] * R2D / A),
        ((Math.PI*0.5) - 2.0 * Math.atan(Math.exp(-xy[1] / A))) * R2D
    ];
};

return SphericalMercator;

})();

if (typeof module !== 'undefined' && typeof exports !== 'undefined') {
    module.exports = exports = SphericalMercator;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
	<script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
	<link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>



	<style>
	html, body, #myMap{
	height: 100%;
	width: 100%;
	margin: 0; padding: 0;
	font-family: sans-serif;
	overflow: hidden;
	}

	#myMap {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	}

	path {
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke: #777;
	fill: none;
	}
	circle {
	fill: rgba(68, 167, 228, 0.5);
	stroke: none;
	}

	.top-left {
	position: absolute;
	top: 5px;
	left: 5px;
	}
	.btn {
	background-color: rgba(255,255,255,0.8);
	outline: 1px solid rgba(0,0,0,0.3);
	min-width: 60px;
	padding: 2px 4px;
	margin: 2px;
	display: inline-block;
	}


	.clipper {
	stroke: blue;
	}

	g { clip-path: none; }
	</style>

	</head>
	<body>
	<div id="myMap"></div>



	<script src='http://d3js.org/queue.v1.min.js' type="text/javascript"></script>
	<script src='sphericalmercator.js' type="text/javascript"></script>

	<script>


	var width = 960,
	height = 600;

	var dz = 2,
	z = 5 + dz,
	x = d3.range(4 << dz, 11 << dz),
	y = d3.range(10 << dz, 15 << dz);

	var projection = d3.geo.albers()
	.scale(1250)
	.translate([width / 2, height / 2]);


	var xy = projection([-122,33]);

	var sph = new SphericalMercator();


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


	var projpath = d3.geo.path()
	.projection(projection);
	//.context(context);

	var q = queue(6);

	x.forEach(function(x) {
	y.forEach(function(y) {
	q.defer(renderTile, x, y, z);
	});
	});


	var the_key = "key-2d5eacd8b924489c8ed5e8418bd883bc";
	var demographics_url = "https://{S}-api.mapsense.co/universes/mapsense.demographics/{Z}/{X}/{Y}.topojson?api-key=" + the_key;
	demographics_url += "&where=name!='Puerto Rico'";
	demographics_url += "&select=name,population";
	demographics_url += "&ringSpan=15";
	demographics_url += "&lineSpan=15";
	demographics_url += "&s=20";

	function renderTile(x, y, z, callback) {
	//d3.json("http://www.somebits.com:8001/rivers/" + z + "/" + x + "/" + y + ".json", function(error, json) {
	d3.json("https://b-api.mapsense.co/universes/mapsense.demographics/" + z + "/" + x + "/" + y +".topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc&where=layer=='state'&s=15", function(error, tj) {

	//var xy = projection([-122,33]);
	bbox = sph.bbox(x,y,z);


	bbox_json = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[bbox[0],bbox[1]],[bbox[0],bbox[3]],[bbox[2],bbox[3]],[bbox[2],bbox[1]],[bbox[0],bbox[1]]]]}}]};

	//console.log(JSON.stringify(bbox_json));
	var tile_coords = "tile_" + x + "_" + y;

	svg.insert("clipPath")
	.data(bbox_json.features)
	.attr('id',tile_coords)
	.attr('class','clipper')
	.append('path')
	.attr('d',projpath) // run projpath function on the attached data element
	;

	svg.insert("path")
	//.datum(topojson.object(world, world.objects.land))
	.datum(function(d){
	if ( tj.objects.state ) {
	return topojson.feature(tj, tj.objects.state);
	}
	})
	.attr("class", "land")
	.attr("d", projpath) // path is a the albers projection function above; it projects the path assigned via datum
	.attr("clip-path", "url(#" + tile_coords + ")")
	;



	callback(null);
	});
	}

	// inverse(xy)
	// Convert mercator x, y values to lon, lat


	function merc2lonlat(x,y,z) {

	}
	/*
	function renderTile(x, y, z, callback) {
	d3.json("https://b-api.mapsense.co/universes/mapsense.demographics/" + z + "/" + x + "/" + y +".topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc", function(error, json) {
	context.beginPath();
	path(topo2Geo(json));
	context.stroke();
	callback(null);
	});
	}

	d3.select(self.frameElement).style("height", height + "px");
	*/

	function topologyFeatures(topology) {
	function convert(topology, object, layer, features) {
	var featureOrCollection = topojson.feature(topology, object),
	layerFeatures;

	if (featureOrCollection.type === "FeatureCollection") {
	layerFeatures = featureOrCollection.features;
	} else {
	layerFeatures = [featureOrCollection];
	}
	layerFeatures.forEach(function(f) {
	f.properties.layer = layer;
	});
	features.push.apply(features, layerFeatures);
	}

	var features = [];
	for (var o in topology.objects) {
	convert(topology, topology.objects[o], o, features);
	}
	return features;
	}

	function topo2Geo(tj) {
	var gj = {
	type: "FeatureCollection",
	features: topologyFeatures(tj)
	};
	return gj;
	}




	</script>
	</body>
	</html>
	var SphericalMercator = (function(){

	// Closures including constants and other precalculated values.
	var cache = {},
	EPSLN = 1.0e-10,
	D2R = Math.PI / 180,
	R2D = 180 / Math.PI,
	// 900913 properties.
	A = 6378137,
	MAXEXTENT = 20037508.34;


	// SphericalMercator constructor: precaches calculations
	// for fast tile lookups.
	function SphericalMercator(options) {
	options = options \|\| {};
	this.size = options.size \|\| 256;
	if (!cache[this.size]) {
	var size = this.size;
	var c = cache[this.size] = {};
	c.Bc = [];
	c.Cc = [];
	c.zc = [];
	c.Ac = [];
	for (var d = 0; d < 30; d++) {
	c.Bc.push(size / 360);
	c.Cc.push(size / (2 * Math.PI));
	c.zc.push(size / 2);
	c.Ac.push(size);
	size *= 2;
	}
	}
	this.Bc = cache[this.size].Bc;
	this.Cc = cache[this.size].Cc;
	this.zc = cache[this.size].zc;
	this.Ac = cache[this.size].Ac;
	};

	// Convert lon lat to screen pixel value
	//
	// - `ll` {Array} `[lon, lat]` array of geographic coordinates.
	// - `zoom` {Number} zoom level.
	SphericalMercator.prototype.px = function(ll, zoom) {
	var d = this.zc[zoom];
	var f = Math.min(Math.max(Math.sin(D2R * ll[1]), -0.9999), 0.9999);
	var x = Math.round(d + ll[0] * this.Bc[zoom]);
	var y = Math.round(d + 0.5 * Math.log((1 + f) / (1 - f)) * (-this.Cc[zoom]));
	(x > this.Ac[zoom]) && (x = this.Ac[zoom]);
	(y > this.Ac[zoom]) && (y = this.Ac[zoom]);
	//(x < 0) && (x = 0);
	//(y < 0) && (y = 0);
	return [x, y];
	};

	// Convert screen pixel value to lon lat
	//
	// - `px` {Array} `[x, y]` array of geographic coordinates.
	// - `zoom` {Number} zoom level.
	SphericalMercator.prototype.ll = function(px, zoom) {
	var g = (px[1] - this.zc[zoom]) / (-this.Cc[zoom]);
	var lon = (px[0] - this.zc[zoom]) / this.Bc[zoom];
	var lat = R2D * (2 * Math.atan(Math.exp(g)) - 0.5 * Math.PI);
	return [lon, lat];
	};

	// Convert tile xyz value to bbox of the form `[w, s, e, n]`
	//
	// - `x` {Number} x (longitude) number.
	// - `y` {Number} y (latitude) number.
	// - `zoom` {Number} zoom.
	// - `tms_style` {Boolean} whether to compute using tms-style.
	// - `srs` {String} projection for resulting bbox (WGS84\|900913).
	// - `return` {Array} bbox array of values in form `[w, s, e, n]`.
	SphericalMercator.prototype.bbox = function(x, y, zoom, tms_style, srs) {
	// Convert xyz into bbox with srs WGS84
	if (tms_style) {
	y = (Math.pow(2, zoom) - 1) - y;
	}
	// Use +y to make sure it's a number to avoid inadvertent concatenation.
	var ll = [x * this.size, (+y + 1) * this.size]; // lower left
	// Use +x to make sure it's a number to avoid inadvertent concatenation.
	var ur = [(+x + 1) * this.size, y * this.size]; // upper right
	var bbox = this.ll(ll, zoom).concat(this.ll(ur, zoom));

	// If web mercator requested reproject to 900913.
	if (srs === '900913') {
	return this.convert(bbox, '900913');
	} else {
	return bbox;
	}
	};

	// Convert bbox to xyx bounds
	//
	// - `bbox` {Number} bbox in the form `[w, s, e, n]`.
	// - `zoom` {Number} zoom.
	// - `tms_style` {Boolean} whether to compute using tms-style.
	// - `srs` {String} projection of input bbox (WGS84\|900913).
	// - `@return` {Object} XYZ bounds containing minX, maxX, minY, maxY properties.
	SphericalMercator.prototype.xyz = function(bbox, zoom, tms_style, srs) {
	// If web mercator provided reproject to WGS84.
	if (srs === '900913') {
	bbox = this.convert(bbox, 'WGS84');
	}

	var ll = [bbox[0], bbox[1]]; // lower left
	var ur = [bbox[2], bbox[3]]; // upper right
	var px_ll = this.px(ll, zoom);
	var px_ur = this.px(ur, zoom);
	// Y = 0 for XYZ is the top hence minY uses px_ur[1].
	var bounds = {
	minX: Math.floor(px_ll[0] / this.size),
	minY: Math.floor(px_ur[1] / this.size),
	maxX: Math.floor((px_ur[0] - 1) / this.size),
	maxY: Math.floor((px_ll[1] - 1) / this.size)
	};
	if (tms_style) {
	var tms = {
	minY: (Math.pow(2, zoom) - 1) - bounds.maxY,
	maxY: (Math.pow(2, zoom) - 1) - bounds.minY
	};
	bounds.minY = tms.minY;
	bounds.maxY = tms.maxY;
	}
	return bounds;
	};

	// Convert projection of given bbox.
	//
	// - `bbox` {Number} bbox in the form `[w, s, e, n]`.
	// - `to` {String} projection of output bbox (WGS84\|900913). Input bbox
	// assumed to be the "other" projection.
	// - `@return` {Object} bbox with reprojected coordinates.
	SphericalMercator.prototype.convert = function(bbox, to) {
	if (to === '900913') {
	return this.forward(bbox.slice(0, 2)).concat(this.forward(bbox.slice(2,4)));
	} else {
	return this.inverse(bbox.slice(0, 2)).concat(this.inverse(bbox.slice(2,4)));
	}
	};

	// Convert lon/lat values to 900913 x/y.
	SphericalMercator.prototype.forward = function(ll) {
	var xy = [
	A * ll[0] * D2R,
	A * Math.log(Math.tan((Math.PI0.25) + (0.5 ll[1] * D2R)))
	];
	// if xy value is beyond maxextent (e.g. poles), return maxextent.
	(xy[0] > MAXEXTENT) && (xy[0] = MAXEXTENT);
	(xy[0] < -MAXEXTENT) && (xy[0] = -MAXEXTENT);
	(xy[1] > MAXEXTENT) && (xy[1] = MAXEXTENT);
	(xy[1] < -MAXEXTENT) && (xy[1] = -MAXEXTENT);
	return xy;
	};

	// Convert 900913 x/y values to lon/lat.
	SphericalMercator.prototype.inverse = function(xy) {
	return [
	(xy[0] * R2D / A),
	((Math.PI0.5) - 2.0 Math.atan(Math.exp(-xy[1] / A))) * R2D
	];
	};

	return SphericalMercator;

	})();

	if (typeof module !== 'undefined' && typeof exports !== 'undefined') {
	module.exports = exports = SphericalMercator;
	}