Add another test

itsleeds · Nov 24, 2023 · bf7b0e7 · bf7b0e7
1 parent d01b0b4
commit bf7b0e7
Showing 1 changed file with 96 additions and 0 deletions.
diff --git a/pmtiles-test.html b/pmtiles-test.html
@@ -0,0 +1,96 @@
+<html>
+    <head>
+        <title>PMTiles MapLibre Example</title>
+        <meta charset="utf-8"/>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" crossorigin="anonymous">
+        <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" crossorigin="anonymous"></script>
+        <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
+        <style>
+            body {
+                margin: 0;
+            }
+            #map {
+                height:100%; width:100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="map"></div>
+        <script type="text/javascript">
+            // add the PMTiles plugin to the maplibregl global.
+            let protocol = new pmtiles.Protocol();
+            maplibregl.addProtocol("pmtiles",protocol.tile);
+
+            let PMTILES_URL = "https://protomaps.github.io/PMTiles/protomaps(vector)ODbL_firenze.pmtiles";
+            let PMTILES_URL2 = "rnet_limerick.pmtiles"
+
+            const p = new pmtiles.PMTiles(PMTILES_URL);
+
+            // this is so we share one instance across the JS code and the map renderer
+            protocol.add(p);
+
+            // we first fetch the header so we can get the center lon, lat of the map.
+            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>'
+                            },
+                            "example_source2": {
+                                type: "vector",
+                                url: "pmtiles://" + PMTILES_URL2,
+                                attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
+                            }
+                        },
+                        layers: [
+                            {
+                                "id":"buildings",
+                                "source": "example_source",
+                                "source-layer":"landuse",
+                                "type": "fill",
+                                "paint": {
+                                    "fill-color": "steelblue"
+                                }
+                            },
+                            {
+                                "id":"roads",
+                                "source": "example_source",
+                                "source-layer":"roads",
+                                "type": "line",
+                                "paint": {
+                                    "line-color": "black"
+                                }
+                            },
+                            {
+                                "id":"mask",
+                                "source": "example_source",
+                                "source-layer":"mask",
+                                "type": "fill",
+                                "paint": {
+                                    "fill-color": "white"
+                                }
+                            },
+                            {
+                                "id":"rnet_limerick",
+                                "source": "example_source2",
+                                "source-layer":"rnet_limerick",
+                                "type": "line",
+                                "paint": {
+                                    "line-color": "red"
+                                }
+                            }
+                        ]
+                    }
+                });
+                map.showTileBoundaries = true;
+            })
+        </script>
+    </body>
+</html>