0.5.0 • Published 3 years ago

@mapbox/geo-viewport v0.5.0

Weekly downloads
30,650
License
BSD-2-Clause
Repository
github
Last release
3 years ago

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.

mmi-mapsmmimapsmmi-react@chargetrip/javascript-sdk@everything-registry/sub-chunk-578labmob-react-native-map-clusteringkepler.gl-forked-ismakutlkepler.gl.geoiqkepler.gl.sh.custommappls-map-react-nativemjolnir-design-systemmrgl-renderermymap.glmapir-mapboxmapmyindia-map-react-native-beta@hortau/mapsmbgl-renderererasme-kepler.glfengsheng-rnmapsramesh-paul-kepler.glreact-native-cluster-mapreact-native-cluster-map-hwanreact-native-cluster-map-optimusreact-native-clusterersagan.glservisofts-component@dterekhova/deckgl-layers@dterekhova/utils@goongmaps/goong-map-react-native@ethubert/kepler.gl@eqworks/kepler.gl@gustavoisensee/react-native-map-clustering@gon-dev/react-native-map-clustering@flightmap-react-native-android/maps@flowmap.gl/react@flowmap.blue/core@idjokic-spiria/react-native-cluster-map@infinitebrahmanuniverse/nolb-_mapvibemap-constants@intcount/intcount-clustering@meri-imperiumi/signalk-logbook@khang00/kepler.gl@kepler.gl/deckgl-layers@kepler.gl/utils@jbcampbell/react-native-maps-super-clustertruekepler.glshot-on-targetrg-npmrg-npm-corerg-npm-prodrs-react-native-map-clusteringrescape-placereact-native-map-clusteringreact-native-map-clustering-custom-fontreact-native-map-clustering-fhreact-native-map-clustering-flexreact-native-map-clusterreact-native-maps-markerclusterreact-native-maps-super-clusterreact-native-maps-super-cluster-dongkreact-native-maps-super-cluster-fhreact-native-maps-super-multi-clusterreact-native-maps-clusteringreact-native-maps-clusterizereact-native-maps-use-cluster@mpvite/maps@mpvite/react-native-map-clustering@manivannan372/reactnative-maps-cluster@phanisai4u/react-native-maps-super-cluster@phila/mapboard@opendatasoft/visualizations@portalbeanzvn/cluster@track-asia/trackasia-react-native@react-native-flightmap-gl/android@react-native-flightmap-gl/flightmap@react-native-flightmap-gl/maps@react-native-mapbox-gl/maps@tommy2gis/swsk.kepler.gl@shitao1988/swsk-kepler-gl@shitao1988/swsk.kepler.gl@maplibre/maplibre-react-native@mapxus/react-native-mapxus-sdk@revenue-guard/rg-npm-core@svizzle/mapbox@tamagui/maps@sebf/kepler.gl@vtmap/vtmap-react-native-sdkbaba-js@alminde/react-native-maps-superclusterbraheboide-kepler-gl@carto/kepler.gl@davisg123/mbgl-renderer@cirrusct/geo
0.5.0-dev

3 years ago

0.5.0

3 years ago

0.4.1

4 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.2

7 years ago