Minutely updated vector tiles demo

aselnigu · March 11, 2024, 9:45am

I’m taking my first steps with vector tiles. I have created a simple website and tested the style https://demo.tilekiln.xyz/shortbread_v1/tilejson.json in it.

Code:

github.com

astridx/vectortilestest/blob/main/indexdemo2.html

<html>

<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
    <style>
        #map {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>

This file has been truncated. show original

URL:
When I open the URL https://astridx.github.io/vectortilestest/indexdemo.html
I see errors

Error: missing required property "version"
    $n https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:42
    ne https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
    _load https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
    loadURL https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
maplibre-gl.js:42:9880
Error: missing required property "sources"
    $n https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:42
    ne https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
    _load https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
    loadURL https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
maplibre-gl.js:42:9880
Error: missing required property "layers"
    $n https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:42
    ne https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
    _load https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46
    loadURL https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js:46

What am I doing wrong? What do I have to do to view the tiles with a simple Maplibre setup?