-
|
maplibre-gl-js version: 4.5.0 (csp-worker) browser: chromium Steps to Trigger Behavior
Link to Demonstrationhttps://luks.srht.site/geohealth-gl-style/ Expected BehaviorNo error should be printed in the console. Actual BehaviorA |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
|
It looks like you included the wrong version of maplibre from initial inspection, but I have no clue how you actually created this site. |
Beta Was this translation helpful? Give feedback.
-
|
Oh yes excuse me (late issue), the original repo is here : https://git.sr.ht/~luks/geohealth-gl-style/tree I tried using the example in the documentation, with csp-worker like this too: <!DOCTYPE html>
<html lang="en">
<head>
<title>PMTiles source and protocol</title>
<meta property="og:description" content="Uses the PMTiles plugin and protocol to present a map." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl-csp-worker.js'></script>
<script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// add the PMTiles plugin to the maplibregl global.
const protocol = new pmtiles.Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);
const PMTILES_URL = 'https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles';
const p = new pmtiles.PMTiles(PMTILES_URL);
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);
// we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then(h => {
const map = new maplibregl.Map({
container: 'map',
zoom: h.maxZoom - 2,
center: [h.centerLon, h.centerLat],
style: {
version: 8,
sources: {
'example_source': {
type: 'vector',
url: `pmtiles://${PMTILES_URL}`,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [
{
'id': 'buildings',
'source': 'example_source',
'source-layer': 'landuse',
'type': 'fill',
'paint': {
'fill-color': 'steelblue'
}
},
{
'id': 'roads',
'source': 'example_source',
'source-layer': 'roads',
'type': 'line',
'paint': {
'line-color': 'black'
}
},
{
'id': 'mask',
'source': 'example_source',
'source-layer': 'mask',
'type': 'fill',
'paint': {
'fill-color': 'white'
}
}
]
}
});
});
</script>
</body>
</html>But i have If i call csp-dev instead :
And same error for csp I also saw that the |
Beta Was this translation helpful? Give feedback.
-
|
You are not using this correctly... <!DOCTYPE html>
<html lang="en">
<head>
<title>PMTiles source and protocol</title>
<meta property="og:description" content="Uses the PMTiles plugin and protocol to present a map." />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl-csp.js'></script>
<script src="https://unpkg.com/[email protected]/dist/pmtiles.js"></script>
<!--<meta http-equiv="Content-Security-Policy" content="worker-src blob: ;child-src blob: ;img-src data: blob: ;" />-->
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
maplibregl.setWorkerUrl('worker.js')
// add the PMTiles plugin to the maplibregl global.
const protocol = new pmtiles.Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);
const PMTILES_URL = 'https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles';
const p = new pmtiles.PMTiles(PMTILES_URL);
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);
// we first fetch the header so we can get the center lon, lat of the map.
p.getHeader().then(h => {
const map = new maplibregl.Map({
container: 'map',
zoom: h.maxZoom - 2,
center: [h.centerLon, h.centerLat],
style: {
version: 8,
sources: {
'example_source': {
type: 'vector',
url: `pmtiles://${PMTILES_URL}`,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [
{
'id': 'buildings',
'source': 'example_source',
'source-layer': 'landuse',
'type': 'fill',
'paint': {
'fill-color': 'steelblue'
}
},
{
'id': 'roads',
'source': 'example_source',
'source-layer': 'roads',
'type': 'line',
'paint': {
'line-color': 'black'
}
},
{
'id': 'mask',
'source': 'example_source',
'source-layer': 'mask',
'type': 'fill',
'paint': {
'fill-color': 'white'
}
}
]
}
});
});
</script>
</body>
</html>I got the following image: |
Beta Was this translation helpful? Give feedback.
You are not using this correctly...
I downloaded the content of
https://[unpkg.com/[email protected]/dist/maplibre-gl-csp-worker.js](https://unpkg.com/[email protected]/dist/maplibre-gl-csp-worker.js)into a file calledworker.js.I have created a local file and called it
1.html.In this file I wrote the following code and served it locally using
npx st