protomaps
Cannot render with magic number error
I'm not even sure if this is the repo to solve this issue, but I figured I would start here.
I am using open layers and ol-pmtiles like this:
const layers = {}
layers.base = new ol.layer.VectorTile({
declutter: true,
source: new olpmtiles.PMTilesVectorSource({
url: 'https://d1b2p6fo2pi78e.cloudfront.net/us-northeast/{z}/{x}/{-y}.mvt',
attributions: ['© OSM, MTA, & others']
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 1,
}),
fill: new ol.style.Fill({
color: 'rgba(20,20,20,0.9)',
})
})
})
const view = new ol.View({ // eslint-disable-line
center: [-8235252, 4969073],
minZoom: 10,
maxZoom: 17,
zoom: 14,
constrainResolution: true,
extent: [-8375000, 4795000, -8000000, 5125000]
})
map = new ol.Map({ // eslint-disable-line
target: 'map',
view,
layers: [
layers.base,
],
interactions: ol.interaction.defaults.defaults({ zoomDuration: 0 }) // eslint-disable-line
})
I've pulled ol 9.2.4 and olpmtiles 0.4.0 locally.
my html is simple:
<html>
<head>
<link rel="stylesheet" href="/ol.css">
<script src="/ol.js"></script>
<script src="/olpmtiles.js"></script>
</head>
<body>
<div id="map" tabindex="0"></div>
</body>
</html>
I used serverlessmaps to generate us-northeast and upload to S3 + CloudFront
It works here: https://d3gsiaxhde69bo.cloudfront.net/basemap.html#15.49/40.721384/-73.843143 and here: https://d3gsiaxhde69bo.cloudfront.net/#16/40.7206/-73.8382
I would like it to render with open layers since my existing application uses that and not, for example, maplibregl or leaflet. When I try it like this, it talks about a failed magic number, probably because it's always a bad URL
When I use the sample website, it makes calls to the tile cloud front like this: https://d1b2p6fo2pi78e.cloudfront.net/us-northeast/14/4831/6159.mvt
This uses a lambda defined here: https://github.com/serverlessmaps/serverlessmaps/blob/main/iac/functions/pmTilesProxy.ts to do a range request in the zip archive in the S3 bucket and return it.
Is there a way to set this up so that it renders with Open Layers using the same URL scheme? I'm obviously missing something, but I'm not sure how to make it call for the URLs properly.
If you are using the lambda you do not need anything PMTiles related on the client side, just use normal {z}/{x}/{y} URLs in OpenLayers.
Could you explain a bit more?
Do I:
- remove the olpmtiles.js file?
- change the definition of the base layer in my JS?
- if so, what should I change it to? do I use the MVT() setup?
remove the olpmtiles.js file.
https://openlayers.org/en/latest/examples/webgl-vector-tiles.html
Ok, so I have this as my base layer:
layers.base = new ol.layer.VectorTile({
declutter: true,
source: new ol.source.VectorTile({
attributions:
'© <a href="https://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>',
format: new ol.format.MVT(),
url: 'https://d1b2p6fo2pi78e.cloudfront.net/us-northeast/{z}/{x}/{y}.mvt',
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 1,
}),
fill: new ol.style.Fill({
color: 'rgba(20,20,20,0.9)',
})
})
})
Thank you, I am much closer. Here is where I am at now.
On the sample basemap (you can click this), https://d3gsiaxhde69bo.cloudfront.net/#18/40.71993/-73.83873 you get this:
But when I use the code above, I get this:
So it is trying to load a lot more files, and unfortunately, all the street labels (and basically everything!) is missing.
Can you point me in the right direction? Is this because I'm using raster vs vector?
there isn't a labeled basemap implementation for OpenLayers. You can try to use ol-mapbox-style to load a MapLibre JSON but the performance isn't great generally. Your demo page is using Leaflet, not OpenLayers, and it's also using an older major version of protomaps-leaflet.