Let's introduce the other major player

My plans for the VSCode map extension now extend beyond just OpenLayers

At this point there are some small oddities:

• The timeline button SVG has broken hrefs. You can see it from the missing play/pause/rewind graphics.
• The Cesium InfoBox doesn't work.

This is probably due to a combination of:

• Running cesium from the local file system
• The VSCode/Electron webview or Cesium itself imposing sandboxing restrictions that breaks the InfoBox

Still, for the purposes of being able to quick and easily preview CZML content, this is a very nice starting point.

Announcing: vscode-map-preview 0.4.0

Today I pushed out a new version (0.4.0) of the vscode-map-preview extension. You might have already gotten a prompt from Visual Studio Code to auto-update to this version.

Here's some new features in this version.

Configuration Options

This version adds a bucket-load of configuration options around:

• Controlling the style of vector features in your preview layer
• Controlling the style of selected features in your preview layer
• Controlling the display of the mouse coordinate tracker
• Controlling the default base layer to use

Once saved to your user settings, these updated settings take effect on the next preview

Preview (with specific projection)

When previewing a file format, the source project can generally be inferred. For example, KML will always be EPSG:4326, for GeoJSON it should figure it out if you have a crs property on there.

But then you have formats like Well-Known Text (WKT), which we can render a preview of, but without proper contextual information such as projection, the data may not be placed where you expect it to be.

For example if we preview WKT as-is:

Because there is no projection context in the data itself, the coordinates are assumed to already be in EPSG:3857, and means the point lies just off the shores of Null Island, which in actuality, the above coordinates are actually supposed to be EPSG:4326 and is supposed to be the central business district of Melbourne, Australia.

To fix this, we need a way to declare that the data we're previewing is actually of a specific projection, which is what the new Map Preview (with projection) command gives us. It's just like the regular Map Preview command, but provides an input prompt for entering the proper EPSG code for this data.

Which will then be used as the projection of the data about to be previewed, ensuring the data is placed at the right location.

As an aside, you can put away that SQL Server Management Studio. VSCode with this extension is way more quicker and lightweight way for easy WKT visualization.

One caveat is that for this new command the only supported projections are:

• EPSG:4326
• EPSG:3857

I'll need to add custom projection support in order to be able to add support for more projections beyond the above two projections.

Other Changes

This version includes fixes to allow for subsequent map previews to work better and fixes various CSS issue with the map preview.

If you haven't already, check out and install the extension on the Visual Studio marketplace.

Introducing: Map Preview extension for Visual Studio Code

From an idea, to an MVP, to now a published extension on the Visual Studio Marketplace

I am proud to announce the availability of the Map Preview extension for Visual Studio Code

Just to recap for those who don't know, this extension allows you to view any plain-text based geospatial data file or content as vector features on an interactive map (powered by OpenLayers), allowing for quick and easy visualization of plain-text geographic content without firing up a dedicated GIS application to view it or pasting the content into a GitHub gist.

All rendered features are selectable on the map and any useful attribute information is displayed as a popup. The map also provides plenty of available base layers for giving your preview data a real-world contextual backdrop.

The initial release supports formats that are supported by OpenLayers, which is currently:

• GPX
• GeoJSON
• IGC
• KML
• TopoJSON
• WFS
• GML
• GML2
• GML3
• WKT

If your document content checks out as any of the above formats, it can be previewed on a map with this extension.

You can install this extension with the following command:

ext install vscode-map-preview

The source code for this extension is available on my GitHub repo. 

Feel free to send feedback, pull requests, etc, etc.

Because sometimes making a gist on github is just too tedious

It started from a conversation today at work.

"You know how you can preview markdown files as HTML in Visual Studio Code?"

"Yeah"

"What if there was an extension that could do this previewing as well, but with non-binary geospatial data files like GeoJSON? So you don't have to ... you know ... go to github, make a gist, paste your GeoJSON and preview?"

"That would be awesome!"

So once I got home, I did some research to answer some questions that will test whether this idea is feasible:

• Does VSCode provide an extension point for previewing editor content? Yes
• Can the HTML preview result run JavaScript? Yes, but it currently looks like a PITA to debug if there is scripting errors in the preview content. Hey I could be wrong!

That confidence boosting set of findings gave me enough motivation to fire up VSCode, yo generate a new TypeScript VSCode extension project, wait for npm to install 50 bajillion packages and set out to hack out an MVP extension for VSCode.

2 and a half hours later ...

I love it when you have an idea, the idea shows feasibility after some encouraging results from research and after some hacking around, you reach a point like the above gif that tells you ... yes this idea definitely has some legs and you should keep on going!