part2/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Utah Map</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js'></script>
    <script src="https://unpkg.com/pmtiles@3.0.6/dist/pmtiles.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    let protocol = new pmtiles.Protocol();
    maplibregl.addProtocol("pmtiles",protocol.tile);

    const style = {
        version: 8,
        glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
        sources: {
            trails: {
                type: "vector",
                url: "pmtiles://../utah_highway_path.pmtiles",
                attribution: '© <a href="https://openstreetmap.org">OpenStreetMap contributors</a>'
            },
            terrain: {
                type: "raster-dem",
                url: "pmtiles://../utah_terrarium.pmtiles",
                attribution: '© Joerd',
                encoding: 'terrarium'
            }
        },
        layers: [
            {
                id: "hillshade",
                type: "hillshade",
                source: "terrain",
                paint: {
                    'hillshade-shadow-color':"#B3A47B"
                } 
            },
            {
                id: "trails",
                source: "trails",
                'source-layer': 'utah_highway_path',
                type: 'line',
                paint: {
                    'line-color': 'black'
                }

            },
            {
                id: "trails_labels",
                source: "trails",
                'source-layer': 'utah_highway_path',
                type: 'symbol',
                layout: {
                    "symbol-placement": "point",
                    "text-font": ["Noto Sans Regular"],
                    "text-field": ["get", "name"],
                    "text-size": 10
                },
                paint: {
                    "text-halo-color": "white",
                    "text-halo-width": 2
                },
                minzoom: 10
            }
        ]
    };

    const map = new maplibregl.Map({
        container: 'map',
        style: style,
        center: [-112.181,39.377],
        zoom: 6,
        hash: true
    });
</script>
</body>
</html>