slippy-tile

Slippy Tile

Slippy Tile helps parse a Tile scheme URL from a given Tile [x, y, zoom].

Install

npm

$ npm install --save slippy-tile

web browser (ES6)

<script src="https://unpkg.com/slippy-tile/slippy-tile.min.js"></script>

Quickstart

const slippyTile = require('slippy-tile')

const tile = [10, 15, 8] // x, y, zoom
const url = slippyTile(tile, 'osm')
//= https://b.tile.openstreetmap.org/8/10/15.png

Supports

• Webpack
• Browserify
• ES6 (ES2015)

Providers

Name	Unique Key
OpenStreetMap Standard	openstreetmap.standard
OpenStreetMap Cycle Map	openstreetmap.cycle
OpenStreetMap Humanitarian	openstreetmap.hot
OpenStreetMap Transport	openstreetmap.transport
OpenStreetMap Wikimedia	openstreetmap.wikimedia
OpenStreetMap Lyrk	openstreetmap.lyrk
Bing Imagery	bing.imagery
Strava Cycling & Running	strava.both
National Geographic World Map	esri.natgeo
ESRI Imagery	esri.imagery
ESRI Ocean Basemap	esri.ocean
ESRI USA Topo Maps	esri.usatopo
ESRI World Street Map	esri.street
ESRI World Topographic Map	esri.topo
DigitalGlobe Imagery	digitalglobe.imagery
DigitalGlobe Hybrid	digitalglobe.hybrid
Mapbox Imagery	mapbox.imagery
Mapbox Outdoors	mapbox.outdoors

Scheme

You can provide your own scheme by following the same syntax as JOSM.

const scheme = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'
const url = slippyTile.parse([10, 15, 8], scheme)
//= https://b.tile.openstreetmap.org/8/10/15.png

Options

• {x} or {TileColumn}: Tile Column
• {y} or {TileRow}: Tile Row for Google Maps Compatible scheme
• {-y}: Tile Row for TMS scheme
• {zoom} or {z} or {TileMatrix}: Zoom Level
• {bbox}: GeoJSON Bounding Box
• {quadkey} or {q}: Microsoft's Quadkey
• {switch:1,2,3}: Selects a random sample
• {height} default = 256
• {width}: default = 256
• {proj}: default = EPSG:3857

API

parse

Substitutes the given tile information [x, y, z] to the URL tile scheme.

Parameters

• tile Tile Tile [x, y, z]
• url string URL Tile scheme or provider unique key

Examples

const tile = [10, 15, 8]
const url = 'https://{s}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'
parse(tile, url)
//='https://c.tile.openstreetmap.org/8/10/15.png'

Returns string

wms

Parse WMS URL to friendly SlippyTile format

Parameters

• tile Tile Tile [x, y, z]
• url string WMTS URL scheme

Examples

const tile = [10, 15, 8]
const url = 'https://<Tile Server>/?layers=imagery&SRS={proj}&WIDTH={width}&HEIGHT={height}&BBOX={bbox}'
wms(tile, url)
//='https://<Tile Server>/?layers=imagery&SRS=EPSG:3857&WIDTH=256&HEIGHT=256&BBOX=-165.9375,82.676285,-164.53125,82.853382'

Returns string

wmts

Parse WMTS URL to friendly SlippyTile URL format

Parameters

• url string WMTS URL scheme

Examples

wmts('https://<Tile Server>/WMTS/tile/1.0.0/Imagery/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpg')
//='https://<Tile Server>/WMTS/tile/1.0.0/Imagery/default/GoogleMapsCompatible/{z}/{y}/{x}.jpg'

Returns string

parseSwitch

Replaces {switch:a,b,c} with a random sample.

Parameters

• url string URL Scheme

Examples

parseSwitch('http://tile-{switch:a,b,c}.openstreetmap.fr/hot/{zoom}/{x}/{y}.png')
//='http://tile-b.openstreetmap.fr/hot/{zoom}/{x}/{y}.png'

Returns string Parsed URL with switch replaced

sample

Sample an item from a given list

Parameters

• collection Array<any> List of items

Examples

sample(['a', 'b', 'c'])
//='b'

Returns any Single item from the list