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 (ES5)

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

Quickstart

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

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

Table of Contents

• parse
• wms
• wmts
• parseSwitch
• sample

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

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

Returns string parsed URL

wms

Parse WMS URL to friendly SlippyTile format

Parameters

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

Examples

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

Returns string parsed URL

wmts

Parse WMTS URL to friendly SlippyTile URL format

Parameters

• url string WMTS URL scheme

Examples

slippyTile.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 parsed URL

parseSwitch

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

Parameters

• url string URL Scheme

Examples

slippyTile.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

• array Array List of items

Examples

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

Returns any Single item from the list