🌍 🗺️ Create, Preview and Edit Your GeoJSON Data in VSCode！
4 |
7 | 
8 | 
9 | 
10 | 
11 | 
12 |
13 |
16 |
17 | ## Description
18 |
19 | `GeoJSON.IO for VSCode` is an open-source VSCode extension that allows users to easily create, preview, and edit GeoJSON data with VSCode.
20 |
21 | This extension is heavily inspired by [geojson.io](https://geojson.io).
22 |
23 | ## How to use
24 |
25 | 1. Install the extension (obviously 😂).
26 |
27 | 2. Open your GeoJSON file (or a new file) in VSCode. The file extension should be one of these: `.json`, `.txt`, `.geojson`.
28 |
29 | 3. There are two ways to open the map view:
30 |
31 | Press `ctrl + shift + p` (or `cmd + shift + p` on Mac) to open the command palette, type `Preview Geojson`, and hit Enter.
32 |
33 | Alternatively, just right-click in the editor window and select the `🌍 Preview Geojson` option.
34 |
35 | 4. You’re all set to explore!
36 |
37 | 
38 |
39 | 
40 |
41 | ## Features
42 |
43 | - 🖊️ Real-time editing of collections and properties;
44 |
45 | - 💅 Customizable style rendering
46 |
47 | - 🌍 Supports two projection modes: 3D and Mercator projection
48 |
49 | - 🗺️ Multiple map layers switching
50 |
51 | ## To-Do
52 |
53 | - Custom base map layers
54 |
55 | - More editing modes: snapping, freehand drawing, etc.
56 |
57 | - Label display
58 |
59 | - More...
60 |
61 | ## Other
62 |
63 | If you encounter any issues or have some suggestions, please open an [Issue](https://github.com/42arch/geojson.io-for-vscode/issues/new) on GitHub.
64 |
65 | If the extension has been helpful to you, don’t forget to leave us a [positive review](<(https://marketplace.visualstudio.com/items?itemName=swallow.geojson-io-for-vscode&ssr=false#review-details)>), or leave a 🌟 on [Github](https://github.com/42arch/geojson.io-for-vscode) . Thank you for your support 🙏!
66 |
67 | ## License
68 |
69 | [MIT License](https://github.com/42arch/geojson.io-for-vscode/blob/main/LICENSE)
70 |
--------------------------------------------------------------------------------
/README.zh.md:
--------------------------------------------------------------------------------
1 | 🌍 🗺️ 在 VSCode 中创建，预览和编辑您的 GeoJSON 数据
4 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 | ## 说明
18 |
19 | `GeoJSON.IO for VSCode` 是一个开源的 VSCode 插件, 可以让使用者在 VSCode 中便捷地创建，预览和编辑 GeoJSON 数据。
20 |
21 | 该插件很大程度上启发自[geojson.io](https://geojson.io)，谢谢！。
22 |
23 | ## 如何使用
24 |
25 | 1. 安装这个插件，当然了😂。
26 |
27 | 2. 在VSCode 中打开您的GeoJSON文件（或者空文件），文件的后缀名应该是这些其中之一：`.json`, `.txt`, `.geojson`。
28 |
29 | 3. 有两种方式打开地图窗口：
30 |
31 | 按住 `ctrl + shift + p` (Mac 上为 `cmd + shift + p`) 组合键打开命令面板，输入`Preview Geojson`并回车；
32 |
33 | 或者只要在编辑器窗口右键，选择 `🌍 Preview Geojson` 选项即可；
34 |
35 | 4. 现在可以自由探索了!
36 |
37 | 
38 |
39 | 
40 |
41 | ## 特性
42 |
43 | - 🖊️ 支持实时编辑集合和属性信息
44 |
45 | - 💅 支持自定义样式渲染
46 |
47 | - 🌍 支持两种投影模式：3D 和 墨卡托投影
48 |
49 | - 🗺️ 支持多底图切换
50 |
51 | ## 待办
52 |
53 | - 自定义底图
54 |
55 | - 支持更多编辑模式：吸附，自由绘制等
56 |
57 | - 支持自定义标签展示
58 |
59 | - 更多...
60 |
61 | ## 其他
62 |
63 | 如果您在使用中遇到问题或者有好的建议，请在GitHub上给我们提 [Issue](https://github.com/42arch/geojson.io-for-vscode/issues/new)。
64 |
65 | 或者这款插件帮助到了您，请不要忘记给我们 [好评](https://marketplace.visualstudio.com/items?itemName=swallow.geojson-io-for-vscode&ssr=false#review-details)，或者在 [Github](https://github.com/42arch/geojson.io-for-vscode) 上点个🌟，感谢您的支持🙏！
66 |
67 | ## 许可
68 |
69 | [MIT License](https://github.com/42arch/geojson.io-for-vscode/blob/main/LICENSE)
70 |
--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/42arch/geojson.io-for-vscode/bd458b05cd447bbb7590ac256b650e52c5789ba6/icon.png
--------------------------------------------------------------------------------
/media/demo1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/42arch/geojson.io-for-vscode/bd458b05cd447bbb7590ac256b650e52c5789ba6/media/demo1.gif
--------------------------------------------------------------------------------
/media/demo2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/42arch/geojson.io-for-vscode/bd458b05cd447bbb7590ac256b650e52c5789ba6/media/demo2.gif
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "geojson-io-for-vscode",
3 | "displayName": "GeoJSON.IO for VSCode",
4 | "publisher": "swallow",
5 | "author": {
6 | "name": "Ren Dan",
7 | "email": "rend42@163.com",
8 | "url": "https://github.com/42arch"
9 | },
10 | "description": "Create, Preview and Edit Your GeoJSON Data in VSCode",
11 | "private": true,
12 | "version": "1.0.4",
13 | "icon": "icon.png",
14 | "repository": "https://github.com/42arch/geojson.io-for-vscode",
15 | "homepage": "https://github.com/42arch/geojson.io-for-vscode",
16 | "bugs": {
17 | "url": "https://github.com/42arch/geojson.io-for-vscode/issues/new"
18 | },
19 | "categories": [
20 | "Other",
21 | "Visualization",
22 | "Data Science"
23 | ],
24 | "activationEvents": [
25 | "onStartupFinished",
26 | "onDidChangeTextDocument",
27 | "onDidOpenTextDocument"
28 | ],
29 | "engines": {
30 | "vscode": "^1.96.0"
31 | },
32 | "main": "./out/extension.js",
33 | "contributes": {
34 | "capabilities": {
35 | "hoverProvider": true
36 | },
37 | "commands": [
38 | {
39 | "command": "geojson-io.preview-geojson",
40 | "title": "🌏 Preview GeoJSON"
41 | }
42 | ],
43 | "menus": {
44 | "editor/context": [
45 | {
46 | "when": "editorFocus && resourceExtname== '.json'",
47 | "command": "geojson-io.preview-geojson",
48 | "group": "navigation"
49 | },
50 | {
51 | "when": "editorFocus && resourceExtname== '.txt'",
52 | "command": "geojson-io.preview-geojson",
53 | "group": "navigation"
54 | },
55 | {
56 | "when": "editorFocus && resourceExtname== '.geojson'",
57 | "command": "geojson-io.preview-geojson",
58 | "group": "navigation"
59 | }
60 | ]
61 | }
62 | },
63 | "scripts": {
64 | "package": "pnpm vsce package --no-dependencies",
65 | "publish": "pnpm vsce publish --no-dependencies",
66 | "vscode:prepublish": "pnpm run compile",
67 | "compile:app": "vite build",
68 | "compile:extension": "vite build --config vite.config.ext.js",
69 | "compile": "npm-run-all -p compile:*",
70 | "watch:app": "vite build --watch",
71 | "watch:extension": "vite build --config vite.config.ext.js --watch",
72 | "watch": "npm-run-all -p watch:*",
73 | "pretest": "pnpm run compile && pnpm run lint",
74 | "lint": "eslint src",
75 | "changeset": "changeset",
76 | "version-pkg": "changeset version"
77 | },
78 | "devDependencies": {
79 | "@changesets/cli": "^2.27.12",
80 | "@types/geojson": "^7946.0.15",
81 | "@types/geojson-validation": "^1.0.3",
82 | "@types/mapbox-gl": "^3.4.1",
83 | "@types/mapbox__mapbox-gl-draw": "^1.4.8",
84 | "@types/mocha": "^10.0.10",
85 | "@types/node": "20.x",
86 | "@types/vscode": "^1.96.0",
87 | "@typescript-eslint/eslint-plugin": "^8.17.0",
88 | "@typescript-eslint/parser": "^8.17.0",
89 | "@vitejs/plugin-react": "^4.3.4",
90 | "@vscode/test-cli": "^0.0.10",
91 | "@vscode/test-electron": "^2.4.1",
92 | "eslint": "^8.57.1",
93 | "eslint-config-prettier": "^10.0.1",
94 | "eslint-plugin-prettier": "^5.2.2",
95 | "eslint-plugin-react": "^7.37.4",
96 | "eslint-plugin-react-hooks": "^5.1.0",
97 | "less": "^4.2.1",
98 | "npm-run-all": "^4.1.5",
99 | "prettier": "^3.4.2",
100 | "typescript": "^5.7.2",
101 | "vite": "^6.0.7"
102 | },
103 | "dependencies": {
104 | "@mapbox/mapbox-gl-draw": "^1.5.0",
105 | "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
106 | "@turf/turf": "^7.2.0",
107 | "@types/react": "18",
108 | "@types/react-dom": "18",
109 | "geojson-validation": "^1.0.2",
110 | "mapbox-gl": "^3.9.3",
111 | "nanoid": "^5.0.9",
112 | "react": "18",
113 | "react-dom": "18"
114 | }
115 | }
--------------------------------------------------------------------------------
/src/extension.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ExtensionContext,
3 | TextDocument,
4 | commands,
5 | window,
6 | workspace
7 | } from 'vscode'
8 | import gjv from 'geojson-validation'
9 | import ViewPanel from './view-panel'
10 |
11 | function isValidGeojsonText(text: string) {
12 | try {
13 | const parsed = JSON.parse(text)
14 | return gjv.valid(parsed)
15 | } catch {
16 | return false
17 | }
18 | }
19 |
20 | export function activate(context: ExtensionContext) {
21 | const openMapView = commands.registerCommand(
22 | 'geojson-io.preview-geojson',
23 | () => {
24 | try {
25 | const editor = window.activeTextEditor
26 | if (editor) {
27 | const text = editor.document.getText()
28 |
29 | if (!text || isValidGeojsonText(text)) {
30 | ViewPanel.open(context)
31 | ViewPanel.postMessageToWebview(text)
32 | } else {
33 | window.showWarningMessage(
34 | "🌏 The data you're trying to preview is not a valid GeoJSON."
35 | )
36 | }
37 | } else {
38 | window.showWarningMessage(
39 | '🌏 You should open your geojson file in the editor!'
40 | )
41 | }
42 | } catch (error) {
43 | window.showErrorMessage('🌏 Failed to preview this file! ' + error)
44 | }
45 | }
46 | )
47 |
48 | const saveGeojson = workspace.onDidSaveTextDocument(
49 | (document: TextDocument) => {
50 | const text = document.getText()
51 | ViewPanel.postMessageToWebview(text)
52 | }
53 | )
54 |
55 | context.subscriptions.push(openMapView)
56 | context.subscriptions.push(saveGeojson)
57 | }
58 |
59 | export function deactivate() {}
60 |
--------------------------------------------------------------------------------
/src/view-panel.ts:
--------------------------------------------------------------------------------
1 | import * as path from 'path'
2 | import {
3 | ExtensionContext,
4 | Uri,
5 | ViewColumn,
6 | WebviewPanel,
7 | window,
8 | Disposable,
9 | Range,
10 | workspace
11 | } from 'vscode'
12 |
13 | type Message = {
14 | type: 'error' | 'info' | 'warning' | 'data'
15 | data: string
16 | }
17 |
18 | export default class ViewPanel {
19 | private static instance: ViewPanel | undefined
20 | public panel: WebviewPanel
21 | private context: ExtensionContext
22 | private disposables: Disposable[]
23 |
24 | private constructor(context: ExtensionContext) {
25 | this.context = context
26 | this.disposables = []
27 | this.panel = window.createWebviewPanel(
28 | 'map-view',
29 | 'Map View',
30 | ViewColumn.Beside,
31 | {
32 | enableScripts: true,
33 | retainContextWhenHidden: true,
34 | localResourceRoots: [
35 | Uri.file(path.join(this.context.extensionPath, 'out', 'view'))
36 | ]
37 | }
38 | )
39 |
40 | this.render()
41 |
42 | this.panel.webview.onDidReceiveMessage(
43 | (message: Message) => {
44 | switch (message.type) {
45 | case 'data':
46 | this.replaceTextContent(message.data)
47 | break
48 | case 'error':
49 | window.showErrorMessage(message.data)
50 | break
51 | case 'warning':
52 | window.showWarningMessage(message.data)
53 | break
54 | default:
55 | break
56 | }
57 | },
58 | null,
59 | this.disposables
60 | )
61 |
62 | this.panel.onDidDispose(
63 | () => {
64 | this.dispose()
65 | },
66 | null,
67 | this.disposables
68 | )
69 | }
70 |
71 | public dispose() {
72 | ViewPanel.instance = undefined
73 | while (this.disposables.length) {
74 | const x = this.disposables.pop()
75 | if (x) {
76 | x.dispose()
77 | }
78 | }
79 | }
80 |
81 | public static getInstance(context: ExtensionContext) {
82 | if (!ViewPanel.instance) {
83 | ViewPanel.instance = new ViewPanel(context)
84 | }
85 |
86 | return ViewPanel.instance
87 | }
88 |
89 | public static open(context: ExtensionContext) {
90 | const instance = ViewPanel.getInstance(context)
91 |
92 | // const column = window.activeTextEditor
93 | // ? window.activeTextEditor.viewColumn
94 | // : undefined
95 | if (instance.panel) {
96 | instance.panel.reveal()
97 | }
98 | }
99 |
100 | static postMessageToWebview(message: string) {
101 | const instance = ViewPanel.instance
102 | if (instance) {
103 | instance.panel.webview.postMessage(message)
104 | }
105 | }
106 |
107 | private render() {
108 | const bundleScriptPath = this.panel.webview.asWebviewUri(
109 | Uri.file(
110 | path.join(this.context.extensionPath, 'out', 'view', 'bundle.js')
111 | )
112 | )
113 | const stylePath = this.panel.webview.asWebviewUri(
114 | Uri.file(
115 | path.join(
116 | this.context.extensionPath,
117 | 'out',
118 | 'view',
119 | 'assets',
120 | 'style.css'
121 | )
122 | )
123 | )
124 |
125 | const html = `
126 |
127 |
128 |
129 |
130 |
131 | | 143 | 147 | (rowRefs.current[index] = { 148 | ...rowRefs.current[index], 149 | key: el 150 | }) 151 | } 152 | onChange={(e) => { 153 | handleChange(index, 'field', e.target.value) 154 | }} 155 | /> 156 | | 157 |
158 | |
172 |
| 206 | 207 | | 208 |209 | 210 | | 211 |