Convert WGS84 to Web Mercator Pixel

HTML

<script src="https://live.bridge.net/resources/js/bridge/bridge.js?v=1.13.0"></script>
<h2>Convert Lat/Lng to Pixel Coords</h2>
More Info: <a href="http://aaron-hoffman.blogspot.com/2016/05/convert-wgs84-to-web-mercator-pixel.html">http://aaron-hoffman.blogspot.com/2016/05/convert-wgs84-to-web-mercator-pixel.html</a><br /><br />
note: X=lng, Y=lat<br />
The larger the Y value, the further South.<br />
The larger the X value, the further East.<br /><br />
zoom level: <input id="zoomText" type="text" value="16" />[0, 21]<br /><br />
lat: <input id="latText" type="text" value="41.6017948" />[-90, +90]<br />
lng: <input id="lngText" type="text" value="-93.8035864" />[-180, +180]<br />
<button id="convertLatLngButton" type="button" >convert to pixels</button><br />
pixels: <span id="xyspan">x: 0, y: 0</span><br /><br />

X: <input id="xText" type="text" value="4017044" /><br />
Y: <input id="yText" type="text" value="6252883" /><br />
<button id="convertXyButton" type="button" >convert to lat/lng</button><br />
lat/lng: <span id="llspan">lat: 0, lng: 0</span><br /><br />
pixel coords at various zoom levels
<div id="pixels">
</div>
<br /><br />
Pixel Distances at various zoom levels<br />
Pixel Width: <input id="widthText" type="text" value="450" />pixels<br />
<button id="convertDistButton" type="button" >convert</button><br />
<div id="dists">
</div>

JavaScript

// code from: https://msdn.microsoft.com/en-us/library/bb259689.aspx
// converted using bridge.net http://live.bridge.net/#682af6d75bb04c42451835c920dae089
(function (globals) {
    "use strict";

    Bridge.define('Demo.TileSystem', {
        statics: {
            EarthRadius: 6378137,
            MinLatitude: -85.05112878,
            MaxLatitude: 85.05112878,
            MinLongitude: -180,
            MaxLongitude: 180,
            /**
             * Clips a number to the specified minimum and maximum values.
             *
             * @static
             * @private
             * @this Demo.TileSystem
             * @memberof Demo.TileSystem
             * @param   {number}    n           The number to clip.
             * @param   {number}    minValue    Minimum allowable value.
             * @param   {number}    maxValue    Maximum allowable value.
             * @return  {number}                The clipped value.
             */
            clip: function (n, minValue, maxValue) {
                return Math.min(Math.max(n, minValue), maxValue);
            },
            /**
             * Determines the map width and height (in pixels) at a specified level
             of detail.
             *
             * @static
             * @public
             * @this Demo.TileSystem
             * @memberof Demo.TileSystem
             * @param   {number}    levelOfDetail    Level of detail, from 1 (lowest detail)
             to 23 (highest detail).
             * @return  {number}                     The map width and height in pixels.
             */
            mapSize: function (levelOfDetail) {
                return ((256 << levelOfDetail) >>> 0);
            },
            /**
             * Determines the ground resolution (in meters per pixel) at a specified
             latitude and level of detail.
             *
             * @static
             * @public
             * @this Demo.TileSystem
             * @memberof Demo.TileSystem
       ...