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

Command	Description
npm run compile	Type check, lint, and build
npm run watch	Watch mode for development
npm run lint	Run ESLint
npm run check-types	Run TypeScript type checking
npm run package	Build for production

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