why won't my map show up (but it shows in the dev tools )?

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

Solution

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.