diff --git a/README.md b/README.md index 3b9a640..54eeb0a 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,10 @@ See also: ## How To Use +### JavaScript + +See [js/README.md](js/README.md) for usage in Leaflet or MapLibre GL JS. + ### Go See https://github.com/protomaps/go-pmtiles @@ -33,28 +37,6 @@ See https://github.com/protomaps/go-pmtiles See https://github.com/protomaps/PMTiles/tree/master/python/bin for library usage -### JavaScript - - - -Example of a raster PMTiles archive displayed in Leaflet: - - const p = new pmtiles.PMTiles('example.pmtiles') - pmtiles.leafletLayer(p,{attribution:'© OpenStreetMap contributors'}).addTo(map) - -Example of a vector PMTiles archive displayed in MapLibre GL JS: - - let cache = new pmtiles.ProtocolCache(); - maplibregl.addProtocol("pmtiles",cache.protocol); - var style = { - "version": 8, - "sources": { - "example_source": { - "type": "vector", - "tiles": ["pmtiles://example.pmtiles/{z}/{x}/{y}"], - ... - - ## Specification ![layout](layout.png) diff --git a/js/README.md b/js/README.md new file mode 100644 index 0000000..919b732 --- /dev/null +++ b/js/README.md @@ -0,0 +1,36 @@ +# PMTiles + +```js + + ``` + + ## Leaflet + + ### Raster tileset + +Example of a raster PMTiles archive displayed in Leaflet: + +```js +const p = new pmtiles.PMTiles('example.pmtiles') +pmtiles.leafletLayer(p,{attribution:'© OpenStreetMap contributors'}).addTo(map) +```` + + ### Vector tileset + + See [protomaps.js](https://github.com/protomaps/protomaps.js) + + ## MapLibre GL JS + +Example of a vector PMTiles archive displayed in MapLibre GL JS: + +```js +let cache = new pmtiles.ProtocolCache(); +maplibregl.addProtocol("pmtiles",cache.protocol); +var style = { +"version": 8, +"sources": { + "example_source": { + "type": "vector", + "tiles": ["pmtiles://example.pmtiles/{z}/{x}/{y}"], + ... +``` \ No newline at end of file