How to use @mapbox/sphericalmercator - 5 common examples

To help you get started, we’ve selected a few @mapbox/sphericalmercator examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github w3reality / three-geo / src / index.js View on Github external
let rows = 512;
    let scaleFactor = 4;
    let ranges = [];
    for (let c = 0; c < scaleFactor; c++) {
        for (let r = 0; r < scaleFactor; r++) {
            ranges.push([
                [r*(rows/scaleFactor-1)+r, (r+1)*rows/scaleFactor],
                [c*(cols/scaleFactor-1)+c, (c+1)*cols/scaleFactor]
            ]);
        }
    };
    return ranges;
})();

const constVertices = 128;
const constTilePixels = new SphericalMercator({size: 128});
// console.log('constTilePixels:', constTilePixels);

// const constBasePlaneDimension = 65024; // 2**16 - 1
// const getTileSize = (zoom) => {
//     return constBasePlaneDimension / Math.pow(2, zoom);
// };
// const getMetersPerPixel = (latitude, tileSize, zoom) => {
//     // 40,075,000 = circumference of the Earth in meters
//     return Math.abs(
//         40075000 * Math.cos(latitude*Math.PI/180) /
//         (Math.pow(2,zoom) * tileSize));
// };

// use shift = 0 when array's format is [x0, z0, y0, x1, z1, y1, ... x127, z127, y127]
// 0: Array(128) [1, 4, 7, 10, 13, 16, 19, 22, ... 379, 382]
// 1: Array(128) [1, 385, 769, 1153, 1537, 1921, 2305, 2689, ... 48385, 48769]
github kalisio / krawler / src / hooks / hooks.grid.js View on Github external
import _ from 'lodash'
import makeDebug from 'debug'
import SphericalMercator from '@mapbox/sphericalmercator'
import { Grid } from '../grid'
import { templateObject, transformJsonObject } from '../utils'

const debug = makeDebug('krawler:hooks:grid')

const sphericalMercator = new SphericalMercator({
  size: 256
})

// Generate grid spec from location/width/resolution spec
export function generateGrid (options = {}) {
  return function (hook) {
    if (hook.type !== 'before') {
      throw new Error('The \'generateGrid\' hook should only be used as a \'before\' hook.')
    }

    if (_.isNumber(hook.data.resolution) && _.isNumber(hook.data.halfWidth) && _.isNumber(hook.data.longitude) && _.isNumber(hook.data.latitude)) {
      const resolution = hook.data.resolution
      // Convert resolution/width from meters to degrees and
      // compute corresponding delta latitude/longitude at given latitude
      const earthRadius = 6356752.31424518
      // This will ensure that at any latitude the width/height are the same in meters (but not in degrees)
github tomalrussell / colouring-london / app / src / tiles / tile.ts View on Github external
geometries as g,
            buildings as b
        WHERE
            g.geometry_id = b.geometry_id
            AND b.planning_in_conservation_area = true
    ) as conservation_area`
}

// register datasource adapters for mapnik database connection
if (mapnik.register_default_input_plugins) {
    mapnik.register_default_input_plugins();
}
// register fonts for text rendering
mapnik.register_default_fonts();

const mercator = new SphericalMercator({
    size: TILE_SIZE
});

function getBbox(z, x, y) {
    return mercator.bbox(x, y, z, false, '900913');
}

function getXYZ(bbox, z) {
    return mercator.xyz(bbox, z, false, '900913')
}

function renderTile(tileset, z, x, y, geometryId, cb) {
    const bbox = getBbox(z, x, y)

    const map = new mapnik.Map(TILE_SIZE, TILE_SIZE, PROJ4_STRING);
    map.bufferSize = TILE_BUFFER_SIZE;
github areknawo / ThreeMap / src / utils.ts View on Github external
/**
 * X and y size of Mercator map.
 */
const mercatorExtend: number = 20037510;
/**
 * X and y size of tile.
 */
const tileExtend: number = 2048;
/**
 * Pre-calculated scale (tile to mercator size).
 */
const scale: number = mercatorExtend / tileExtend;
/**
 * SphericalMercator library instance for latLng to mercator coordinates conversion.
 */
const merc: SphericalMercator = new SphericalMercator({
  size: 2048,
});
/**
 * Regular expression for matching tile properties in url.
 */
const tileRegex: RegExp = /{([zxy])}/g;

/**
 * Get url for tile object.
 *
 * @param tileObject - Tile primitive represented as object of x, y, z values.
 * @example `getURLForTile({x: 1, y: 3, z: 7);`
 */
export function getURLForTile(tileObject: ITileObject): string {
  tileRegex.lastIndex = 0;
github tomalrussell / colouring-london / app / src / tiles / util.ts View on Github external
import SphericalMercator from '@mapbox/sphericalmercator';

import { TileParams } from './types';

const TILE_SIZE = 256;

const mercator = new SphericalMercator({
    size: TILE_SIZE
});

function getBbox(z, x, y) {
    return mercator.bbox(x, y, z, false, '900913');
}

function getXYZ(bbox, z) {
    return mercator.xyz(bbox, z, false, '900913')
}

function formatParams({ tileset, z, x, y, scale }: TileParams): string {
    return `${tileset}/${z}/${x}/${y}@${scale}x`;
}

export {

@mapbox/sphericalmercator

Transformations between the Web Mercator projection and Latitude Longitude coordinates

BSD-3-Clause
Latest version published 3 years ago

Package Health Score

59 / 100
Full package analysis

Popular @mapbox/sphericalmercator functions