I’m trying to create some vector tiles on my own
and to publish them according to the idea of protomaps
I tried with this example and it worked
This is the map I produced (it’s a bit rough because the style is improvised but the stack did work)
THEN I tried to show the exact same map (the same PMTiles file) BUT locally, without resorting to on line libraries and stylesheet
And what happens is that my project doesn’t work
What is frustrating is that in the Firefox dev tools I hover on the div and a preview of my map DOES SHOW UP !!
As shown here !
But in the main Firefox window, there’s nothing
My project is here
Here's th erelevant code
my main.js file
import 'maplibre-gl/dist/maplibre-gl.css'
import maplibregl from 'maplibre-gl'
import * as pmtiles from 'pmtiles'
let protocol = new pmtiles.Protocol()
maplibregl.addProtocol("pmtiles",protocol.tile)
let PMTILES_URL = "http://localhost:80/taranto.pmtiles";
const p = new pmtiles.PMTiles(PMTILES_URL);
protocol.add(p);
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":"landuse",
"source": "example_source",
"source-layer":"landuse",
"type": "fill",
"paint": {
"fill-color": "steelblue"
}
},
{
"id":"transportation",
"source": "example_source",
"source-layer":"transportation",
"type": "line",
"paint": {
"line-color": "black"
}
},
{
"id":"mask",
"source": "example_source",
"source-layer":"mask",
"type": "fill",
"paint": {
"fill-color": "white"
}
}
]
}
});
map.showTileBoundaries = true;
})
and this is my index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Maplibre App</title>
</head>
<body>
<div id="map"></div>
<script type="module" src="/main.js"></script>
</body>
</html>
I’d be really grateful if some kind sould would troubleshoot this for me
Thanks in advance
In the working example, css style for the #map container is specified in the html head section:
<style>
body {
margin: 0;
}
#map {
height:100%; /*usually the map container needs a definite height to show up properly */
width:100%;
}
</style>
You will need to include this in your html file (or the style.css
file referenced in it). Just including dist/maplibre-gl.css
is not enough.