maplibre-vscode-extension

Usage

1. Install the extension
2. open style.json in editor
3. open command palette and run MapLibre: Launch Viewer
   • 
4. Viewer will open in new tab. When edit style.json, the viewer will update automatically.
   • 

Validation

• style file named *style.json will be validated by @maplibre/maplibre-gl-style-spec.

Supported protocols

• https://path/to/file
• pmtiles://https://path/to/file.pmtiles

"sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "pmtiles://https://tile.openstreetmap.jp/static/planet-20240729.pmtiles"
      // "tiles": ["pmtiles://https://tile.openstreetmap.jp/static/planet-20240729.pmtiles/{z}/{x}/{y}"] is also okay
    },
    "takeshima": {
      "type": "vector",
      "url": "https://tile.openstreetmap.jp/data/takeshima.json"
    }
},

Development

Prerequisites

• Node.js 20.x or later
• npm
• Visual Studio Code

Setup

# Clone the repository
git clone https://github.com/Kanahiro/maplibre-vscode-extension.git
cd maplibre-vscode-extension

# Install dependencies
npm install

Running in Development Mode

1. Open the project in VSCode
2. Press F5 to launch the Extension Development Host
3. A new VSCode window will open with the extension loaded
4. Open a *style.json file and test the extension

Available Scripts

Testing

npm test

This runs the VSCode extension tests using @vscode/test-electron.

Building for Release

npm run package

This creates the production build in the dist/ directory.

Attribution

• icon: https://github.com/maplibre/maplibre.github.io/blob/main/static/img/maplibre%20old%20profile.png