https://github.com/randomfractals/vscode-leaflet
Leaflet 🌿 Map 🗺️ for Notebook 📓 cell ⌗ data outputs.
https://github.com/randomfractals/vscode-leaflet
cell data flat-data geo geo-location leaflet map notebook output renderer view vscode
Last synced: 6 months ago
JSON representation
Leaflet 🌿 Map 🗺️ for Notebook 📓 cell ⌗ data outputs.
- Host: GitHub
- URL: https://github.com/randomfractals/vscode-leaflet
- Owner: RandomFractals
- License: apache-2.0
- Created: 2021-05-11T12:17:16.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-04-16T15:54:17.000Z (over 2 years ago)
- Last Synced: 2025-03-25T18:08:41.788Z (7 months ago)
- Topics: cell, data, flat-data, geo, geo-location, leaflet, map, notebook, output, renderer, view, vscode
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet
- Size: 30.6 MB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vscode-leaflet
[](http://opensource.org/licenses/Apache-2.0)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet)
Leaflet Map 🗺️ for Notebook 📓 cell ⌗ data outputs
See [Geo Data Viewer](https://github.com/RandomFractals/geo-data-viewer) 🗺️ vscode extension for advanced [Geo Data Analytics](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.geo-data-viewer) with [kepler.gl](https://kepler.gl/)
## Leaflet Map 🗺️ Renderer
Leaflet Map 🗺️ Notebook 📓 cell ⌗ output renderer uses [Leaflet](https://leafletjs.com) 🌿 JavaScript library for interactive preview of Geo datasets loaded in [VSCode Notebooks](https://code.visualstudio.com/api/extension-guides/notebook) 📚
# Features
- View Location data from `CSV`, `XML`, `JSON`, and [`GeoJSON`](https://www.rfc-editor.org/rfc/rfc7946.html) Notebook 📓 cell ⌗ data output on the Leaflet 🌿 map 🗺️ with [clustered markers](https://github.com/RandomFractals/vscode-leaflet/issues/8#issuecomment-894707382), [location information popups](https://github.com/RandomFractals/vscode-leaflet/issues/28#issuecomment-894812944) and [hover tooltips](https://github.com/RandomFractals/vscode-leaflet/issues/30#issuecomment-894824576)
- View [Point](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.2), [LineString](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.4), [MultiLineString](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.5), [Polygon](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.6), and [MultiPolygon](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.7) `GeoJSON` features with interactive point, lines, regions, and `properties` info display on geometry hover and click
- [REST Book](https://github.com/RandomFractals/vscode-leaflet#rest-book-example) 📓 [TypeScript Notebook](https://github.com/RandomFractals/vscode-leaflet#typescript-notebook-example) 📓 [.NET Interactive Notebook](https://github.com/RandomFractals/vscode-leaflet#net-interactive-notebook-example) 📓 and [Pyolite](https://github.com/RandomFractals/vscode-leaflet#pyolite-notebook-example) 🐍 [Notebook Examples](https://github.com/RandomFractals/vscode-leaflet#%EF%B8%8F-examples) 📚
- View `JSON`, `CSV`, and `XML` data without Geo Location information in `JSON` format in a scrollable text container with [`code pre-wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) for a quick copy/paste to other places:
# Supported Data Formats
Leaflet 🌿 Map 🗺️ Notebook 📓 cell ⌗ data output Renderer supports loading Location data from the following output formats:
| Data Mime Type | Location Data | Geo Location Processing Description |
| --- | --- | --- |
| `application/geo+json` | [Point](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.2), [LineString](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.4), [MultiLineString](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.5), [Polygon](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.6), [MultiPolygon](https://www.rfc-editor.org/rfc/rfc7946.html#section-3.1.7) | `GeoJSON` Location `Point` coordinates are displyaed as clustered markers using [`leaflet.markercluster`](https://github.com/Leaflet/Leaflet.markercluster) JavaScript library with custom marker cluster icons and config. Lines and polygons are added to the map and displayed via Leaflet 🌿 [GeoJSON Layer](https://leafletjs.com/reference-1.7.1.html#geojson). See our [leafletMap.js](https://github.com/RandomFractals/vscode-leaflet/blob/main/src/renderer/leafletMap.js) for more info about that setup. |
| `application/json` | Objects that contain geo location property pairs ending with: `latitude`/`longitude`, `lat/lng`, or `lat/lng`| Flat `JSON` data objects and arrays are processed by our custom [`GeoConverter`](https://github.com/RandomFractals/vscode-leaflet/blob/main/src/renderer/geoConverter.ts) to extract Location information and covert loaded dataset to `GeoJSON` for display on the map. |
| `text/csv` | `CSV` data with column names in the 1st header row and columns ending with: `latitude`/`longitude`, `lat/lng`, or `lat/lng` | `CSV` data is parsed with [d3-dsv](https://github.com/d3/d3-dsv) JavaScript library and converted to flat `JSON` data array and then to `GeoJSON` with our [`GeoConverter`](https://github.com/RandomFractals/vscode-leaflet/blob/main/src/renderer/geoConverter.ts) to display locations on the map. |
| `application/xml` or `text/xml` | `XML` data with root node children that contain attributes ending with: `latitude`/`longitude`, `lat/lng`, or `lat/lng` | `XML` data is parsed with [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) to load it into `JSON` data objects array and then processed with our [`GeoConverter`](https://github.com/RandomFractals/vscode-leaflet/blob/main/src/renderer/geoConverter.ts) to display locations on the map. `XML` data support is very alpha and experimental at this point, and might be removed later. |
| `application/` `vnd.code.notebook.stdout` or `text/plain` | Location data as `string` in `CSV`, `XML`, `JSON` or `GeoJSON` data format as described above | Text data typically comes from display and [`console.log()`](https://developer.mozilla.org/en-US/docs/Web/API/console/log) instructions in vscode notebooks. We try to parse text as `JSON` with [`JSON.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse), as `CSV` with [d3-dsv.csvParse()](https://github.com/d3/d3-dsv#csvParse), and as `XML` with [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser). If those parse methods fail, or provided notebook cell text output contains no location data we can extract, we display text output in a custom scrollable text container with [`code pre-wrap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) for a quick copy/paste to other places. Otherwise, loaded data is converted to `GeoJSON` with our [`GeoConverter`](https://github.com/RandomFractals/vscode-leaflet/blob/main/src/renderer/geoConverter.ts) for locations display on the map. |
# 🗺️ Examples
Install and use [Data Table 🈸 for Notebooks 📚](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-table) built-in [Notebook 📓 Examples](https://github.com/RandomFractals/vscode-data-table#-examples) to view Leaflet Map 🗺️ with provided sample [Geo datasets](https://github.com/RandomFractals/vscode-data-table/tree/main/data). You can access built-in Data Table 🈸 Notebook 📓 Examples via `Data Table: Notebook Examples` command from `View -> Command Palette...`
## .NET Interactive Notebook Example
1. Install [.NET Install Tool for Extension Authors](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.vscode-dotnet-runtime) vscode extension
2. Install [.NET Interactive Notebooks](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.dotnet-interactive-vscode) 📚 vscode extension
3. Load [USA Airports](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/usa-airports-net.ipynb) .NET Interactive Notebook 📓
4. Run All cells ⌗:
## TypeScript Notebook Example
1. Install [TypeScript Notebooks](https://marketplace.visualstudio.com/items?itemName=donjayamanne.typescript-notebook) 📚 vscode extension
2. Download [USA State Capitals `GeoJSON`](https://github.com/RandomFractals/vscode-leaflet/tree/main/data/geojson/usa-state-capitals.geojson) data file
3. Load [USA State Capitals](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/usa-state-capitals-typescript.ipynb) TypeScript Notebook 📓
4. Run All cells ⌗ to view that `GeoJSON` data output in a Leaflet 🌿 Map 🗺️:
### REST Book Example
1. Install [REST Book](https://marketplace.visualstudio.com/items?itemName=tanhakabir.rest-book) 📓 vscode extension
2. Load [World Cities](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/world-cities.restbook) REST Book 📓
3. Run All cells ⌗
4. Click on `...` in the gutter of `GET` data output and change it to Leaflet Map 🗺️ renderer:
Also try [World Countries](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/world-countries.restbook) REST Book 📓 example:
Or [USA States](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/usa-states.restbook) REST Book 📓 example:
## Pyolite Notebook Example
1. Install [Pyolite](https://marketplace.visualstudio.com/items?itemName=joyceerhl.vscode-pyolite) 🐍 vscode extension
2. Load [Chicago Red Light Cameras](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/chicago-red-light-cameras-pyolite.ipynb) Pyolite Notebook 📓
3. Run Python code cell and click on `...` -> `Choose Output Mimetype` -> `text/plain` Leaflet Map to view red light camera locations on the map 🗺️:
# Recommended Extensions
Recommended extensions for working with Interactive Notebooks 📚 data 🈸 charts 📈 and geo 🗺️ data formats in [VSCode](https://code.visualstudio.com/):
| Extension | Description |
| --- | --- |
| [REST Book](https://marketplace.visualstudio.com/items?itemName=tanhakabir.rest-book) | Notebook extension for running REST queries |
| [TypeScript Notebooks](https://marketplace.visualstudio.com/items?itemName=donjayamanne.typescript-notebook) | TypeScript with [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) Notebooks 📚 |
| [.NET Interactive Notebooks](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.dotnet-interactive-vscode) | .NET Interactive [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) Notebooks 📚 |
| [Pyolite](https://marketplace.visualstudio.com/items?itemName=joyceerhl.vscode-pyolite) 🐍 | [Pyodide](https://pyodide.org) 🐍 kernel for [JupyterLite](https://github.com/jtpio/jupyterlite) Notebooks 📚 |
| [Observable JS](https://marketplace.visualstudio.com/items?itemName=GordonSmith.observable-js) | Observable JS compiler with [Observable](https://observablehq.com/@observablehq/observable-for-jupyter-users?collection=@observablehq/observable-for-jupyter-users) `js` and `md` code outline and previews. |
| [JS Notebook 📓 Inspector 🕵️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector) | Provides Interactive Preview of [Observable JS Notebooks](https://observablehq.com/documentation#notebook-fundamentals) 📚, Notebook 📓 nodes ⎇ & cells ⌗ source code |
| [Data Preivew 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview) | Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 & exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro & Excel data files |
| [Geo Data Viewer 🗺️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.geo-data-viewer) | [kepler.gl](https://kepler.gl) Geo Data Analytics tool to gen. some snazzy 🗺️s w/0 `Py` 🐍 `pyWidgets` ⚙️ `pandas` 🐼 or `react` ⚛️ |
| [Vega Viewer 📈](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) | Provides Interactive Preview of Vega & Vega-Lite maps 🗺️ & graphs 📈 |
| [DeltaXML XPath Notebook 📓](https://marketplace.visualstudio.com/items?itemName=deltaxml.xpath-notebook) | XPath 3.1 Notebook for Visual Studio Code |
| [GeoJSON Snippets](https://marketplace.visualstudio.com/items?itemName=analytic-signal.snippets-geojson) | Create geospatial objects using GeoJSON snippets |
| [Data Table 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-table)| Data Table 🈸 for Notebook 📓 cell ⌗ data outputs |
# Dev Log
See [#LeafletMapView 🗺️ tag on Twitter](https://twitter.com/hashtag/LeafletMapView?src=hashtag_click&f=live) for the latest and greatest updates on this vscode extension and what's in store next.
# Dev Build
```bash
$ git clone https://github.com/RandomFractals/vscode-leaflet
$ cd vscode-leaflet
$ npm install
$ npm run compile
$ code .
```
`F5` to launch Leaflet Map 🗺️ extension vscode debug session.
||
```bash
vscode-leaflet>vsce package
```
to generate `VSIX` Leaflet Map 🗺️ extension package with [vsce](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#vsce) from our latest for local dev install in vscode.
# Contributions
Any and all test, code or feedback contributions are welcome.
Open an [issue](https://github.com/RandomFractals/vscode-leaflet/issues) or create a pull request to make this Leaflet Map 🗺️ vscode extension work better for all.
# Backers