
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
viewport-mercator-project
Advanced tools
Utilities for perspective-enabled Web Mercator projections
The viewport-mercator-project npm package is a utility library for performing viewport-related calculations in web mapping applications. It is particularly useful for converting between geographic coordinates and screen coordinates, handling zoom levels, and managing map projections.
Project geographic coordinates to screen coordinates
This feature allows you to project geographic coordinates (longitude, latitude) to screen coordinates (x, y) based on the current viewport settings.
const { WebMercatorViewport } = require('viewport-mercator-project');
const viewport = new WebMercatorViewport({
width: 800,
height: 600,
longitude: -122.45,
latitude: 37.78,
zoom: 12
});
const screenCoords = viewport.project([-122.45, 37.78]);
console.log(screenCoords); // [400, 300]
Unproject screen coordinates to geographic coordinates
This feature allows you to convert screen coordinates (x, y) back to geographic coordinates (longitude, latitude) based on the current viewport settings.
const { WebMercatorViewport } = require('viewport-mercator-project');
const viewport = new WebMercatorViewport({
width: 800,
height: 600,
longitude: -122.45,
latitude: 37.78,
zoom: 12
});
const geoCoords = viewport.unproject([400, 300]);
console.log(geoCoords); // [-122.45, 37.78]
Get bounding box of the viewport
This feature allows you to get the geographic bounding box of the current viewport, which can be useful for determining the area currently visible on the map.
const { WebMercatorViewport } = require('viewport-mercator-project');
const viewport = new WebMercatorViewport({
width: 800,
height: 600,
longitude: -122.45,
latitude: 37.78,
zoom: 12
});
const bounds = viewport.getBounds();
console.log(bounds); // [[-122.519, 37.704], [-122.381, 37.856]]
Mapbox GL JS is a powerful library for interactive, customizable vector maps on the web. It provides similar functionalities for projecting and unprojecting coordinates, but also includes a full-featured map rendering engine and extensive styling options.
Leaflet is a popular open-source JavaScript library for mobile-friendly interactive maps. It offers similar coordinate transformation functionalities, but is more focused on ease of use and simplicity, making it a good choice for basic mapping applications.
Proj4 is a library for performing cartographic transformations, including coordinate projections. It is more specialized in handling various map projections and transformations, making it a good complement to viewport-mercator-project for advanced geospatial applications.
The viewport-mercator-project module was moved to
@math.gl/web-mercator
on October 1, 2019.
math.gl is a suite of math modules for 3D and geospatial applications.
This module contains utilities for perspective-enabled Web Mercator projections.
For documentation please visit the website.
FAQs
Utilities for perspective-enabled Web Mercator projections
The npm package viewport-mercator-project receives a total of 426,807 weekly downloads. As such, viewport-mercator-project popularity was classified as popular.
We found that viewport-mercator-project demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.