{"id":16960532,"url":"https://github.com/randomfractals/vscode-leaflet","last_synced_at":"2025-04-11T22:11:01.551Z","repository":{"id":101632660,"uuid":"366370900","full_name":"RandomFractals/vscode-leaflet","owner":"RandomFractals","description":"Leaflet 🌿 Map 🗺️ for Notebook 📓 cell ⌗ data outputs.","archived":false,"fork":false,"pushed_at":"2023-04-16T15:54:17.000Z","size":32117,"stargazers_count":4,"open_issues_count":4,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-25T18:08:41.788Z","etag":null,"topics":["cell","data","flat-data","geo","geo-location","leaflet","map","notebook","output","renderer","view","vscode"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RandomFractals.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["RandomFractals"],"ko_fi":"dataPixy"}},"created_at":"2021-05-11T12:17:16.000Z","updated_at":"2024-10-31T15:24:43.000Z","dependencies_parsed_at":"2023-06-07T00:45:24.814Z","dependency_job_id":null,"html_url":"https://github.com/RandomFractals/vscode-leaflet","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RandomFractals","download_url":"https://codeload.github.com/RandomFractals/vscode-leaflet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487695,"owners_count":21112191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cell","data","flat-data","geo","geo-location","leaflet","map","notebook","output","renderer","view","vscode"],"created_at":"2024-10-13T22:49:07.622Z","updated_at":"2025-04-11T22:11:01.540Z","avatar_url":"https://github.com/RandomFractals.png","language":"TypeScript","readme":"# vscode-leaflet\n\n[![Apache-2.0 License](https://img.shields.io/badge/license-Apache2-brightgreen.svg)](http://opensource.org/licenses/Apache-2.0)\n[![Version](https://img.shields.io/visual-studio-marketplace/v/RandomFractalsInc.vscode-leaflet.svg?color=orange\u0026style=?style=for-the-badge\u0026logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet)\n[![Installs](https://img.shields.io/visual-studio-marketplace/i/RandomFractalsInc.vscode-leaflet.svg?color=orange)](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet)\n[![Downloads](https://img.shields.io/visual-studio-marketplace/d/RandomFractalsInc.vscode-leaflet.svg?color=orange)](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-leaflet)\n\u003ca href='https://ko-fi.com/dataPixy' target='_blank' title='support: https://ko-fi.com/dataPixy'\u003e\n  \u003cimg height='24' style='border:0px;height:20px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=2' alt='https://ko-fi.com/dataPixy' /\u003e\n\u003c/a\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"600\" height=\"159\" src=\"docs/images/leaflet-logo.png\" /\u003e\n  \u003cimg width=\"128\" height=\"128\" src=\"resources/icons/map.png\" /\u003e\n  \u003cbr /\u003e\n  Leaflet Map 🗺️ for Notebook 📓 cell ⌗ data outputs\n\u003c/h1\u003e\n\nSee [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/)\n\n## Leaflet Map 🗺️ Renderer\n\nLeaflet 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) 📚\n\n![Leaflet Map 🗺️ Renderer](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-renderer.png?raw=true\n \"Leaflet Map 🗺️ Renderer\")\n\n![World Countries in Leaflet Map 🗺️ Renderer](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-world-countries-restbook.png?raw=true\n \"World Countries in Leaflet Map 🗺️ Renderer\")\n\n![World Rivers in Leaflet Map 🗺️ Renderer](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-world-rivers-restbook.png?raw=true\n \"World Rivers in Leaflet Map 🗺️ Renderer\")\n\n# Features\n\n- 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)\n- 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\n- [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) 📚\n- 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:\n\n![Leaflet Map 🗺️ Text Output](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-text-output.png?raw=true\n \"Leaflet Map 🗺️ Text Output\")\n\n# Supported Data Formats\n\nLeaflet 🌿 Map 🗺️ Notebook 📓 cell ⌗ data output Renderer supports loading Location data from the following output formats:\n\n| Data Mime Type | Location Data | Geo Location Processing Description |\n| --- | --- | --- |\n| `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. |\n| `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. |\n| `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. |\n| `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. |\n| `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. |\n\n# 🗺️ Examples\n\nInstall 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 -\u003e Command Palette...`\n\n![Data Table 🈸 Notebook Examples](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/data-table-notebook-examples.png?raw=true\n \"Data Table 🈸 Notebook Examples\")\n\n## .NET Interactive Notebook Example\n\n1. Install [.NET Install Tool for Extension Authors](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.vscode-dotnet-runtime) vscode extension\n\n2. Install [.NET Interactive Notebooks](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.dotnet-interactive-vscode) 📚 vscode extension\n\n3. Load [USA Airports](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/usa-airports-net.ipynb) .NET Interactive Notebook 📓\n\n4. Run All cells ⌗:\n\n![USA Airports .NET Interactive Notebook 📓](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-net-notebook.png?raw=true\n \"USA Airports .NET Interactive Notebook 📓\")\n\n## TypeScript Notebook Example\n\n1. Install [TypeScript Notebooks](https://marketplace.visualstudio.com/items?itemName=donjayamanne.typescript-notebook) 📚 vscode extension\n\n2. Download [USA State Capitals `GeoJSON`](https://github.com/RandomFractals/vscode-leaflet/tree/main/data/geojson/usa-state-capitals.geojson) data file\n\n3. Load [USA State Capitals](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/usa-state-capitals-typescript.ipynb) TypeScript Notebook 📓\n\n4. Run All cells ⌗ to view that `GeoJSON` data output in a Leaflet 🌿 Map 🗺️:\n\n![USA State Capitals TypeScript Notebook 📓](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-typescript-notebook.png?raw=true\n \"USA State Capitals TypeScript Notebook 📓\")\n\n### REST Book Example\n\n1. Install [REST Book](https://marketplace.visualstudio.com/items?itemName=tanhakabir.rest-book) 📓 vscode extension\n\n2. Load [World Cities](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/world-cities.restbook) REST Book 📓\n\n3. Run All cells ⌗\n\n4. Click on `...` in the gutter of `GET` data output and change it to Leaflet Map 🗺️ renderer:\n\n![World Cities REST Book 📓](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-renderer.png?raw=true\n \"World Cities REST Book 📓\")\n\nAlso try [World Countries](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/world-countries.restbook) REST Book 📓 example:\n\n![World Countries REST Book 📓](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-world-countries.png?raw=true\n \"World Countries REST Book 📓\")\n\nOr [USA States](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/usa-states.restbook) REST Book 📓 example:\n\n![USA States REST Book 📓](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-usa-states-restbook.png?raw=true\n \"USA States REST Book 📓\")\n\n## Pyolite Notebook Example\n\n1. Install [Pyolite](https://marketplace.visualstudio.com/items?itemName=joyceerhl.vscode-pyolite) 🐍 vscode extension\n\n2. Load [Chicago Red Light Cameras](https://github.com/RandomFractals/vscode-leaflet/blob/main/notebooks/chicago-red-light-cameras-pyolite.ipynb) Pyolite Notebook 📓\n\n3. Run Python code cell and click on `...` -\u003e `Choose Output Mimetype` -\u003e `text/plain` Leaflet Map to view red light camera locations on the map 🗺️:\n\n![Chicago Red Light Cameras Pyolite Notebook 📓](https://github.com/RandomFractals/vscode-leaflet/blob/main/docs/images/leaflet-map-pyolite-notebook.png?raw=true\n \"Chicago Red Light Cameras Pyolite Notebook 📓\")\n\n# Recommended Extensions\n\nRecommended extensions for working with Interactive Notebooks 📚 data 🈸 charts 📈 and geo 🗺️ data formats in [VSCode](https://code.visualstudio.com/):\n\n| Extension | Description |\n| --- | --- |\n| [REST Book](https://marketplace.visualstudio.com/items?itemName=tanhakabir.rest-book) | Notebook extension for running REST queries |\n| [TypeScript Notebooks](https://marketplace.visualstudio.com/items?itemName=donjayamanne.typescript-notebook) | TypeScript with [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) Notebooks 📚 |\n| [.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 📚 |\n| [Pyolite](https://marketplace.visualstudio.com/items?itemName=joyceerhl.vscode-pyolite) 🐍 | [Pyodide](https://pyodide.org) 🐍 kernel for [JupyterLite](https://github.com/jtpio/jupyterlite) Notebooks 📚 |\n| [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. |\n| [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 ⎇ \u0026 cells ⌗ source code |\n| [Data Preivew 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview) | Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 \u0026 exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro \u0026 Excel data files |\n| [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` ⚛️ |\n| [Vega Viewer 📈](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) | Provides Interactive Preview of Vega \u0026 Vega-Lite maps 🗺️ \u0026 graphs 📈 |\n| [DeltaXML XPath Notebook 📓](https://marketplace.visualstudio.com/items?itemName=deltaxml.xpath-notebook) | XPath 3.1 Notebook for Visual Studio Code |\n| [GeoJSON Snippets](https://marketplace.visualstudio.com/items?itemName=analytic-signal.snippets-geojson) | Create geospatial objects using GeoJSON snippets |\n| [Data Table 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-table)| Data Table 🈸 for Notebook 📓 cell ⌗ data outputs |\n\n# Dev Log\n\nSee [#LeafletMapView 🗺️ tag on Twitter](https://twitter.com/hashtag/LeafletMapView?src=hashtag_click\u0026f=live) for the latest and greatest updates on this vscode extension and what's in store next.\n\n# Dev Build\n\n```bash\n$ git clone https://github.com/RandomFractals/vscode-leaflet\n$ cd vscode-leaflet\n$ npm install\n$ npm run compile\n$ code .\n```\n`F5` to launch Leaflet Map 🗺️ extension vscode debug session.\n\n||\n\n```bash\nvscode-leaflet\u003evsce package\n```\nto 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.\n\n# Contributions\n\nAny and all test, code or feedback contributions are welcome.\n\nOpen 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.\n\n# Backers\n\n\u003ca href='https://ko-fi.com/dataPixy' target='_blank'\u003e\n  \u003cimg height='36' style='border:0px;height:36px;' border='0'\n    src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=2'\n    alt='support me on ko-fi.com' /\u003e\n\u003c/a\u003e\n","funding_links":["https://github.com/sponsors/RandomFractals","https://ko-fi.com/dataPixy","https://ko-fi.com/dataPixy'"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomfractals%2Fvscode-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frandomfractals%2Fvscode-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomfractals%2Fvscode-leaflet/lists"}