I'm using the following npm module to convert to/from lat/lng and pixels:
https://www.npmjs.com/package/viewport-mercator-project
Here's the usage:
// Create a new viewport.
var ViewportMercator = require('viewport-mercator-project');
// NOTE: `ViewportMercator` objects are immutable by design.
var viewport = ViewportMercator({
center: [0, 0],
zoom: 0,
tileSize: 512,
dimensions: [600, 800]
});
var lnglat = [0, 0];
var pixels = viewport.project(lnglat); // returns [300, 400]
viewport.unproject(pixels); // returns [0, 0]
However, this always seems to fail in my use case, where my center is -122~:
ViewportMercator({
center: [37.7833, -122.4167],
zoom: 13,
tileSize: 512,
dimensions: [1000, 778]
});
> viewport.project([37.7833, -122.4167])
[ 500, NaN ] // should return (500, 389)
I know this has something to do with the fact that my lng value (in the center
) is outside of the range -90 < lng < 90, but how can I fix this? My attempted viewport conversion is definitely valid...