update JS README about CORS

This commit is contained in:
Brandon Liu
2022-10-24 22:42:31 +08:00
committed by GitHub
parent 95b376fcf3
commit 9e45a810a2

View File

@@ -1,5 +1,3 @@
# PMTiles
the [PMTiles](https://www.npmjs.com/package/pmtiles) package can be included via script tag or ES6 module. the [PMTiles](https://www.npmjs.com/package/pmtiles) package can be included via script tag or ES6 module.
## Leaflet ## Leaflet
@@ -13,6 +11,9 @@ const p = new pmtiles.PMTiles('example.pmtiles')
pmtiles.leafletRasterLayer(p,{attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a>'}).addTo(map) pmtiles.leafletRasterLayer(p,{attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a>'}).addTo(map)
```` ````
[Live example](https://protomaps.github.io/PMTiles/examples/leaflet.html) | [Code](https://github.com/protomaps/PMTiles/blob/master/js/examples/leaflet.html)
### Vector tileset ### Vector tileset
See [protomaps.js](https://github.com/protomaps/protomaps.js) See [protomaps.js](https://github.com/protomaps/protomaps.js)
@@ -33,3 +34,36 @@ var style = {
"attribution": '© <a href="https://openstreetmap.org">OpenStreetMap</a>' "attribution": '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
... ...
``` ```
[Live example](https://protomaps.github.io/PMTiles/examples/maplibre.html) | [Code](https://github.com/protomaps/PMTiles/blob/master/js/examples/maplibre.html)
# CORS
Reading a PMTiles archive from cloud storage requires [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) configuration if your web page is hosted on a different domain than your storage bucket.
## Amazon S3 and S3-Compatible Storage
```json
[
{
"AllowedHeaders": ["Range"],
"AllowedMethods": ["GET","HEAD"],
"AllowedOrigins": ["*","example.com"],
"ExposeHeaders": ["ETag"],
"MaxAgeSeconds": 3000
}
]
```
## Google Cloud Storage
```json
[
{
"origin": ["*","example.com"],
"method": ["GET","HEAD"],
"responseHeader": ["range","etag"],
"maxAgeSeconds": 3000
}
]
```