@mapbox/geo-viewport
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/mapbox__geo-viewport package

    0.5.0 • Public • Published

    Build Status codecov

    geo-viewport

    Turns bounding boxes / extents into centerpoint & zoom combos for static maps.

    Works in node.js and browsers, via browserify or a script tag.

    Install

    npm install --save @mapbox/geo-viewport
    

    Or use a plugin:

    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/geo-viewport/v0.2.1/geo-viewport.js'></script>

    The script-tag include exports an object called geoViewport, with methods bounds and viewport documented below.

    Example

    Live example with Mapbox Static Map API

    With Node

    var geoViewport = require('@mapbox/geo-viewport');
    
    geoViewport.viewport([
        5.668343999999995,
        45.111511000000014,
        5.852471999999996,
        45.26800200000002
    ], [640, 480])
    
    // yields
    // {
    //     center: [
    //         5.7604079999999955,
    //         45.189756500000016
    //     ],
    //     zoom: 11
    // }

    In a browser:

    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/geo-viewport/v0.1.1/geo-viewport.js'></script>
    <script>
    var bounds = geoViewport.viewport([
        5.668343999999995,
        45.111511000000014,
        5.852471999999996,
        45.26800200000002
    ], [640, 480]);
    
    var center = geoViewport.bounds(
      [-75.03,
      35.25],
      14,
      [600, 400]);
    
    console.log(bounds);
    console.log(center);
    </script>

    api

    viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat, allowAntiMeridian)

    Given a WSEN array of bounds and a [x, y] array of pixel dimensions, return a { center: [lon, lat], zoom: zoom } viewport. Use allowFloat to retain float values in the output.

    Example:

    // first argument is the bounds, and the image is 640x480
    geoViewport.viewport([
        5.6683, 45.111, 5.8524, 45.268
    ], [640, 480])

    bounds(viewport, zoom, dimensions, tileSize)

    Given a centerpoint as [lon, lat] or { lon, lat }, a zoom, and dimensions as [x, y], return a bounding box.

    Example:

    geoViewport.bounds([-75.03, 35.25], 14, [600, 400])

    tile sizes

    Be aware that these calculations are sensitive to tile size. The default size assumed by this library is 256x256px; however, Mapbox Vector Tiles are 512x512px.

    For example, to calculating a bounding box for a classic raster-based 256x256 tile:

    geoViewport.bounds([-75.03, 35.25], 14, [600, 400], 256)
    
    // since 256 is default, you can omit the tileSize param
    geoViewport.bounds([-75.03, 35.25], 14, [600, 400])

    To calculate a bounding box for a Mapbox vector tile source, such as an image from the Mapbox Static Image API:

    geoViewport.bounds([-75.03, 35.25], 14, [600, 400], 512)

    There's a handy blog post discussing the issue here.

    Install

    npm i @mapbox/geo-viewport

    DownloadsWeekly Downloads

    53,956

    Version

    0.5.0

    License

    BSD-2-Clause

    Unpacked Size

    23.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • mapbox-npm-01
    • mapbox-npm-02
    • mapbox-npm-07
    • mapbox-npm-03
    • mapbox-npm-04
    • mapbox-npm-09
    • mapbox-npm-05
    • mapbox-npm-06
    • mapbox-npm-08
    • mapbox-npm-advanced-actions
    • mapbox-npm-ci
    • mapbox-npm
    • mapbox-admin
    • mapbox-machine-user