Skip to main content
SimilarExport ZIP
100%

lat/lon to tile number from http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29

✓ Published0🌍 Public
CCaged
Last edited Jul 4, 2014
Created on Jul 4, 2014

This example demonstrates how to convert geographic coordinates (latitude and longitude) into slippy-map tile numbers, and vice versa, for a given zoom level. It shows the mathematical relationships between raw coordinate pairs and the tile grid system used by web maps like OpenStreetMap. The code defines pure JavaScript functions—`long2tile`, `lat2tile`, `tile2long`, and `tile2lat`—using the `Math` object’s trigonometric and logarithmic methods to perform the projection. No external libraries are used; the logic directly implements the Web Mercator projection formulas, enabling both forward and inverse tile-number calculations. The functions are standalone and ready for integration into tile-based map renderers.

AI-generated description

Similar vizzes

Loading thumbnail…

Mercator Map Tile functions for Ruby

This example demonstrates how to convert between geographic coordinates, Mercator projections, and map tile coordinates in Ruby. It defines a module with functions for transforming latitude/longitude pairs to and from Mercator-projected coordinates, as well as scaling those coordinates to specific zoom levels. The code also includes utility methods for calculating an optimal zoom level and center point that fits a set of locations within a given viewport, optionally accounting for padding. The implementation relies on the Ruby Math library for trigonometric and logarithmic operations, with no external dependencies.

RRandomEtc
70% match
Loading thumbnail…

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Mmbostock
64% match
Loading thumbnail…

Tile by Bounding Box

This example demonstrates how to automatically position map tiles from OpenStreetMap to fit a specified geographic bounding box, using a Mercator projection. The code calculates the necessary scale and translation to center the bounding box, adjusts the projection with `d3.geoMercator()`, and generates the appropriate tile URLs via `d3.tile()`. A vector outline of US states, rendered with `d3.geoPath()`, is overlaid on the raster tiles to show the projection's alignment.

CCurran Kelleher
62% match
Loading thumbnail…

Node.js server for composing map tiles using modestmaps.js

This example demonstrates a Node.js server that dynamically composes map tiles into a single static image. The HTTP endpoint `/map` accepts zoom, latitude, longitude, width, and height parameters, then uses the modestmaps.js library to calculate which tiles are needed, fetches them via the `get` library, and draws them onto a Canvas using the `canvas` package. The OpenStreetMap tile provider is referenced directly, and the final composite is returned as a PNG.

RRandomEtc
61% match
Loading thumbnail…

Modest Maps JS

Modest Maps JS demonstrates a slippy-map interface using the Modest Maps library, showing how a map canvas can be panned and zoomed by manipulating a `Coordinate` system with `row`, `column`, and `zoom` properties. The code defines core map classes and event handling for mouse interactions, using utility functions like `MM.Point.interpolate` and `MM.Coordinate.toKey` to manage tile positioning. It renders map tiles by computing coordinate containers, relying on the library’s own math for projection and viewport updates, with no external data source beyond the bundled mapping logic.

RRandomEtc
60% match
Loading thumbnail…

Map Tiles in D3

This interactive map demo, animated with D3, shows map tiles being loaded and positioned as users progressively zoom and pan. It provides a proof-of-concept for tile-based mapping using only D3, avoiding dedicated map libraries. The visualization fetches OpenStreetMap tiles from MapQuest’s tile server, addressing them by column, row, and zoom level. The animation uses D3's selection and transition methods, applying CSS 3D transforms via `matrixString` for smooth scaling, and manages a request queue for efficient image loading. The code demonstrates DOM manipulation and coordinate logic borrowed from Modest Maps, with a fallback to standard CSS transforms.

RRandomEtc
60% match
Loading thumbnail…

Simple Leaflet Map

This simple Leaflet map displays a geographic area centered on coordinates [-41.2858, 174.78682] at zoom level 14. It uses Leaflet 1.6.0 to create a map object via `L.map` and renders OpenStreetMap tile imagery from `http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`. The map includes an attribution link to OpenStreetMap contributors, with a maximum zoom of 18. The example demonstrates basic map initialization and tile layer addition using Leaflet’s `tileLayer` API.

Dd3noob
59% match
Loading thumbnail…

Zoomable Map Tiles

This interactive map shows a zoomable view of OpenStreetMap tiles that smoothly pans and zooms across geographic regions. It uses the `d3.geo.tile` plugin to calculate which 256x256 tile images are visible in the viewport based on current scale and translate values, while `d3.behavior.zoom` handles user panning and zooming interactions. The tiles are rendered as `img` elements positioned absolutely, and a `d3.geo.mercator` projection inverts mouse coordinates to display the latitude and longitude at the cursor.

Mmbostock
59% match