I cannot get a PMTiles layer to display in leaflet.
I have a PM tiles layer of roads created with tippecanoe, which I think is fine. It is roads in Ireland. It shows fine in QGIS and the PMtiles viewer: https://pmtiles.io/#map
The data is here: https://maps.gisforthought.com/ireland_roads/data/road.pmtiles
Protomaps leaflet seems to be working fine as I can load the base map from api.protomaps.com.
I also see requests to the pmtiles file. I have tried hosting it locally and on cloudflair r2. I have also tried a variety of styles, and no luck. It does not show at all.
How can I get they layer to show, or am I missing something?
Hosted code: https://maps.gisforthought.com/ireland_roads/index3.html
And code:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/protomaps-leaflet.js"></script>
<style>
body, #map {
height:100vh;
margin:0px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map')
let road_style = [{
// landuse=forest areas exist in this layer in default .pmtiles format
dataLayer: "road",
symbolizer: new protomapsL.LineSymbolizer({
color:"#bd0000",
width: 1,
weight: 1,
fillColor: '#53e033',
})
}];
map.setView(new L.LatLng(53.328, -7.964),7)
var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=3e6e9f792c85d9c3',flavor:'light',lang:"en"})
layer.addTo(map)
var layer2 = protomapsL.leafletLayer({url:'https://pub-26fa7e41c61c4c2880519edb428093f2.r2.dev/ireland_local_road_rural_20250510.pmtiles',paint_rules:road_style})
layer2.addTo(map)
var layer3 = protomapsL.leafletLayer({url:'/ireland_roads/data/road.pmtiles',paint_rules:road_style})
layer3.addTo(map)
</script>
</body>
