Merge pull request #6 from Kanahiro/pmtiles

Pmtiles
Kanahiro · Aug 6, 2024 · 0e12eed · 0e12eed
2 parents 7fb3bd9 + 104fb86
commit 0e12eed
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -6,11 +6,30 @@
 
 1. Install the extension
 2. open `style.json` in editor
-3. open command palette and run `Maplibre: Viewer`
+3. open command palette and run `MapLibre: Viewer`
     - ![](https://github.com/Kanahiro/maplibre-vscode-extension/blob/main/doc/palette.png?raw=true)
 4. Viewer will open in new tab. When edit `style.json`, the viewer will update automatically.
     - ![](https://github.com/Kanahiro/maplibre-vscode-extension/blob/main/doc/viewer.png?raw=true)
 
+### Available protocols
+
+- `http://path/to/file`
+- `https://path/to/file`
+- `pmtiles://path/to/file.pmtiles`
+
+```json
+"sources": {
+    "openmaptiles": {
+      "type": "vector",
+      "url": "pmtiles://https://tile.openstreetmap.jp/static/planet-20240729.pmtiles"
+    },
+    "takeshima": {
+      "type": "vector",
+      "url": "https://tile.openstreetmap.jp/data/takeshima.json"
+    }
+},
+```
+
 ## attribution
 
 - icon: <https://github.com/maplibre/maplibre.github.io/blob/main/static/img/maplibre%20old%20profile.png>
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "displayName": "MapLibre",
   "description": "",
   "publisher": "kiguchi",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "engines": {
     "vscode": "^1.92.0"
   },

diff --git a/sample/bright.json b/sample/bright.json
@@ -10,7 +10,7 @@
   "sources": {
     "openmaptiles": {
       "type": "vector",
-      "url": "https://tile.openstreetmap.jp/data/planet.json"
+      "url": "pmtiles://https://tile.openstreetmap.jp/static/planet-20240729.pmtiles"
     },
     "takeshima": {
       "type": "vector",
@@ -48,7 +48,7 @@
         "visibility": "visible"
       },
       "paint": {
-        "fill-color": "#fff",
+        "fill-color": "#ffff00",
         "fill-opacity": {
           "base": 1,
           "stops": [

diff --git a/src/viewer.ts b/src/viewer.ts
@@ -19,12 +19,16 @@ const createWebview = () => {
               href="https://unpkg.com/[email protected]/dist/maplibre-gl.css"
               rel="stylesheet"
           />
+          <script src="https://unpkg.com/pmtiles@^3.0.0/dist/pmtiles.js"></script>
       </head>
       <body>
         <div id="map" style="height: 100vh">
           <div id="error"></div>
         </div>
         <script>
+            const protocol = new pmtiles.Protocol();
+            maplibregl.addProtocol("pmtiles", protocol.tile);
+
             const map = new maplibregl.Map({
                 container: 'map',
                 style: {