jumpinjackie/vscode-map-preview

VSCode map preview extension

VSCode Map Preview

This extension provides the ability to preview spatial data files and snippets on a map

Supported Formats

Support for various formats is available through the format drivers provided by the OpenLayers library

• CSV files (as of 0.5.0)
• GPX
• GeoJSON
• IGC
• KML
• TopoJSON
• WFS
• GML
• GML2
• GML3
• WKT

How to use this extension

Open any plain text file (or active open document) and run the Map Preview command (default keybinding: ALT+M) from the command palette. If the text content checks out as any of the above supported formats, it will be parsed into vector feature data to be shown on an interactive map in the HTML preview pane.

See attached gif for an example:

Partially supports simplestyle-spec for visualization:

• for lines: "stroke", "stroke-width"

• for polygons: "fill", "stroke", "stroke-width"

• for points: "marker-color"

Any content not recognized by the preview command (ie. Doesn't check out as any of the above formats) will cause the following error to be shown

If you believe this to be incorrect (ie. You have legitimate content that should be one of the above formats), please report an issue on this

Configuration

Many aspects of this extension can be configurable. See the configuration reference

Release Notes

See the release notes document

Caveats/Limitations

• The data you are previewing must be transformable to EPSG:3857 (Web Mercator) coordinates, in order to properly overlay against any of the provided base map layers. If that previous sentence didn't make much sense, the data you are previewing should be in latitude/longitude (known as EPSG:4326) or some other coordinate system that has an EPSG code representation
• Will probably choke on really large data files (this extension is really meant for quick-and-dirty previews of small files and snippets)

License

MIT

vscode-map-preview's Issues

Porjection incorrect in EPSG:32735

In EPSG:32735 WGS 84 / UTM zone 35S:
(x, y) : (415000, 6450000) (in South Africa) shall be transformed to (long, lat): (26°5'57.505", -32°4'59.107").

While in map-view, it is transformed to around (long, lat): (57.9413, 3.7245).

Update to use VS Code's webview API

Extension 'jumpinjackie.vscode-map-preview' uses the 'vscode.previewHtml' command which is deprecated and will be removed soon. Please file an issue against this extension to update to use VS Code's webview API.

Remove MapQuest base layers / configuration options

No point having support for something that will be going away

openlayers/openlayers#5484

Garmin Etrex format support

---

De-cluttering support

Add new configuration property to expose the vector layer decluttering flag.

Scrub out CDATA blocks

Some KML fragments are failing to preview due to presence of JavaScript within CDATA blocks

Such content should be scrubbed out

See if we can request and load preview content instead of embedding it directly to the preview map HTML

Currently the raw text buffer of the active document is embedded into the HTML for making the preview map. I'm expecting a whole class of problems with this approach due to various characters in the active document that would need proper escaping before being embedded.

Instead, we should see if we can leverage this virtual document API to provide a second custom URI for the actual document content and see if we can use fetch() to retrieve said content (assuming it can support whatever custom URI schemes registered by VSCode)

Add editor toolbar icons

VSCode supports menu contribution points, meaning we can add actual UI buttons to the editor "toolbar" to invoke our commands

Adopt VS Code's 'asWebviewUri' API

Hi, I maintain VS Code's Webview API

Issue

Our telemetry suggests that your extension uses webviews and may be loading resources in these webviews using hardcoded vscode-resource: URIs. These URIs have some important limitations and don't work properly when VS Code is run in a browser. We are also making changes in the desktop version of VS Code that may cause these URIs to not work properly in future versions of VS Code.

While we are making our best effort to continue support existing webview extensions that use vscode-resource: URIs on desktop versions of VS Code, we will not able to fully support all uses cases.

Fix

To ensure that your extension continues to work in as many environments as possible—including on web and remotely—please:

• Switch to use the Webview.asWebviewUri function for loading resources.

• Switch to use the Webview.cspSource property in content security policies.

These APIs shipped around 2 years ago so they should be available in all modern versions of VS Code. You can find additional information about the issue here: microsoft/vscode#97962

Let me know if you have any questions about this change

Opacity is ignored

stroke-opacity and fill-opacity are ignored and always shown as 1 (fully opaque)

Make vertex style configurable

The vertex style introduced with #33 appears a bit sluggish on heavier datasets so we should provide a configuration option to turn vertex styles off if required.

Preview of downloaded kml file from google maps shows error "An error occurred rendering preview"

I created a map and a layer in google maps and exported the whole map to a kmz-file (see attached zip).
Then I opened the contained doc.kml in code und ran the command "map preview". It shows me an error:
at createPreviewSource (vscode-resource:/Users/klausjerwan/.vscode/extensions/jumpinjackie.vscode-map-preview-0.4.8/static/preview.js:75:15)
at data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%20style%3D%22width%3A%20100%25%3B%20height%3A%20100%25%22%3E%0D%0A%3Chead%3E%0D%0A%09%3Ctitle%3EVirtual%20Document%3C%2Ftitle%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%20style%3D%22margin%3A%200%3B%20overflow%3A%20hidden%3B%20width%3A%20100%25%3B%20height%3A%20100%25%22%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E:95:21
Bergsträsser Solar Challenge.kmz.zip

Refine CDATA cleaning regex

The current CDATA cleaning regex just completely scrubs out such instances. This is a bit overkill, when what we really want is simply to scrub out any script tags inside such instances (which might be present in some KML documents).

CSV preview

Being able to preview CSV data as points would be extremely valuable.

Support is not built-in to OpenLayers, so it would most likely be its own specialized command that does the necessary setup work (prompting for X/Y columns, projection, etc)

local image preview in frame ?

Hi friend,
I'm desperately looking for a plugin, which will allow me to simply visualize a reference to an image.

I have to build a huge database.
Similar to Json, but in JS.
Do you have an idea if a plugin that would allow me to visualize a local image in a frames exists?

I took the time to make a small image to show my need.
I will be really happy if, through your experience, you will have a small plugin that will allow this feature.
I would like to see a local image when my mouse passes over a link that references a local image.

Preview
http://imgbox.com/sHLBF4kF

Do you have an idea if your plugin can do something similar, or know you a plugin that could have this feature?

Thank you very much for your help.

Configurable selection style

Make the selection style configurable as well

Use previously selected base layer

While I know you can change the default layer in the config, I think it would be more user-friendly if the preview just defaulted to whatever the user last used. Then if someone wished for the extension to always open on a specific layer regardless of last use, they could do so in the config.

Maybe a stupid question but should this handle KML Style IconStyle Icon attributes?

I am trying like heck to change the marker icon -- and nothing I am doing seems to make any difference -- it always show the Yellow Pin thing. Is this supposed to work?

Here is the KML I am trying...
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <name>KmlFile</name> <Style id="west_campus_style"> <IconStyle> <Icon> <href>http://maps.google.com/mapfiles/kml/paddle/red-stars.png </href> </Icon> </IconStyle> <BalloonStyle> <text>$[video]</text> </BalloonStyle> </Style> <Placemark> <name>Google West Campus 1</name> <styleUrl>#west_campus_style</styleUrl> <ExtendedData> <Data name="video"> <value><![CDATA[<iframe width="480" height="360" src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0" allowfullscreen></iframe><br><br>]]></value> </Data> </ExtendedData> <Point> <coordinates>-122.0914977709329,37.42390182131783,0</coordinates> </Point> </Placemark> <Placemark> <name>Google West Campus 2</name> <styleUrl>#west_campus_style</styleUrl> <ExtendedData> <Data name="video"> <value><![CDATA[<iframe width="480" height="360" src="https://www.youtube.com/embed/nb4gvrNrDWw" frameborder="0" allowfullscreen></iframe><br><br>]]></value> </Data> </ExtendedData> <Point> <coordinates>-122.0926995893311,37.42419403634421,0</coordinates> </Point> </Placemark> <Placemark> <name>Google West Campus 3</name> <styleUrl>#west_campus_style</styleUrl> <ExtendedData> <Data name="video"> <value><![CDATA[<iframe width="480" height="360" src="https://www.youtube.com/embed/0hhiEjf7_NA" frameborder="0" allowfullscreen></iframe><br><br>]]></value> </Data> </ExtendedData> <Point> <coordinates>-122.0922532985281,37.42301710721216,0</coordinates> </Point> </Placemark> </Document> </kml>

When previewing with projection, pick from list of known projections

Now that we support custom projections (#16), it makes sense to change the input UI for this particular command to let the user pick from a list of custom projections instead of having them enter the EPSG code manually

CSV support

I've figured out how to seamlessly load CSV layers in mapguide-react-layout, so let's do the same thing here.

backslashes in geojson properties cause parsing to fail

If there are backslashes in a geojson feature's properties, such as a linked filepath, it will cause parsing to fail. Escaping the backslash does not fix the issue either.

Causes Error:
{
"type" : "FeatureCollection",
"features" : [
{
"type" : "Feature",
"id" : 570,
"geometry" : {
"type" : "Point",
"coordinates" : [
-73.828791392048288,
42.675982296298386,
22.675982296298386
]
},
"properties" : {
"OBJECTID" : 570,
"Image_Number" : 1332,
"Image_Path" : "q:/maindir/subdir\photo_1332.jpg"
}
}
]
}

Works:
{
"type" : "FeatureCollection",
"features" : [
{
"type" : "Feature",
"id" : 570,
"geometry" : {
"type" : "Point",
"coordinates" : [
-73.828791392048288,
42.675982296298386,
22.675982296298386
]
},
"properties" : {
"OBJECTID" : 570,
"Image_Number" : 1332,
"Image_Path" : "q:/maindir/subdir/photo_1332.jpg"
}
}
]
}

Configurable default base layer

Allow the default base layer to be configurable

Provide GeoJSON validation

VSCode supports an extension point for contributing JSON validation with json schemas

We should provide one for GeoJSON

Can't preview JSON open on right hand side

• Open a file that isn't GeoJSON
• ⌘\ to split the view
• Open a file that is GeoJSON on the right hand side
• ⌘⇧P Map Preview to open the map preview

Error preparing preview
Cannot resolve document for virtual document URI: map-preview://map-preview/map-preview%3A%20/Users/xxx/Downloads/output/foo.json

Add support for Mapbox SimpleStyle

Spec: https://github.com/mapbox/simplestyle-spec

The most popular feature marker-color is the easiest to implement.

Configurable coordinate display

The mouse position control in the map is currently hardcoded for EPSG:4326 (Lat/Lng).

Like many other things, this should be configurable.

Running the contributed command:'map.preview' failed.

Opening a GeoJSON file then selecting map preview causes the following error to display

Running the contributed command:'map.preview' failed.

The GeoJSON file is 103.5 MB and was exported from mapshaper.org

Steve

Preview with specific projection

Currently there's no way to specify what the projection of the data being previewed is. For formats like KML, this is not a problem (as it will generally be inferred as EPSG:4326).

But for formats like WKT, we need the ability to provide the specific EPSG code so that the previewed data will have the proper projection to line up against the other layers.

Update to OpenLayers 6.1.1

Map Preview not full height on VSCode 1.3.x

I guess the preview pane introduces some new CSS or something.

Need to escape backticks in previewed document content

As the document content to be previewed is inserted in an ES6 template string with backticks in the preview HTML, the content itself needs to have any backticks within escaped as well (in addition to CDATA scrubbing that's already done in #5 )

Map doesn't properly update on subsequent previews of same document

If you preview a document after the first time, it still shows the content from the first preview

FR: live preview

That will be really cool, so no need to reopen preview on each edit. Just as example: Graphviz Preview.

Support configuration path for debug content path

Currently when we encounter problematic content (that should be legitimate), we have to dump out the whole preview content (using fs.writeFileSync) to an external file and open it in Chrome to see what it was complaining about.

We should make this toggleable through a configuration property allowing for end users to easily report any data previewing issues (by sending the dumped content document).

By default, this property should be null (so nothing is dumped out)

Ability to preview arbitrary JSON structures with X/Y point properties

Similar to CSV export, we should be able to preview arbitrary JSON structures if they contain point data. We just need to be able to prompt for this information and ensure that the previewer can extract this point data when setting up the OL vector layer.

Cesium CZML support

Add support for Cesium CZML

• Contribute a JSON file association (.czml)
• Contribute a JSON validation for CZML (using the JSON schema at https://github.com/AnalyticalGraphicsInc/czml-writer/tree/master/Schema)
• Contribute a dedicated command for previewing CZML documents
  • For this command, use a Cesium.js based viewer instead of a OpenLayers-based one

Configurable point clustering

If previewing point-heavy data, it would be nice to apply clustering to such data through configuration options.

CSS doesn't mesh well with default color scheme

The default CSS for:

• Mouse position
• Layer Switcher
• Popup content

Doesn't mesh well with the default VSCode color scheme

I Want to updata this project, but i can't run it

I Want to updata this project, but i can't run it.

Improve error message when content can't be previewed.

Currently there's formatting issues with this error and it doesn't show the full list of formats attempted

Configurable style for preview layer

Provide configuration properties for configuring the line/point/polygon style of features in the preview layer

Restrict display of preview buttons by known extensions

Tweak the display condition of the preview buttons to only show these buttons if the file extension is:

• .csv
• .geojson
• .kml
• .gml
• .gpx
• .igc

GeoJSON GeometryCollection not working / missing

Hello,

in my tests in looks like the GeometryCollection with the example is not rendering at all. The problem also appears in combination features collection

Best wishes
Gerhard

Specification:
https://tools.ietf.org/html/rfc7946#appendix-A.7

Minimal JSON Test code:

{
    "type": "GeometryCollection",
    "geometries": [
        {
            "type": "LineString",
            "coordinates": [
                [
                    101.0,
                    0.0
                ],
                [
                    102.0,
                    10.0
                ]
            ]
        }
    ]
}

Expected Result (Without Colleciton):

Geometrie & Features collection test file:
geometrie_feature_collection.txt

Custom projection support

Currently the implemented Map preview (with projection) command only realistically supports 2 projections:

• EPSG:4326
• EPSG:3857

Anything else and the current preview won't recognize the supplied projection.

For custom projections to work, it means we have to introduce proj4js into the mix.

• Add an configuration section where additional projections can be registered. Direct users (via docs or other means) to grabe proj4js strings from epsg.io
• Inject these additional projections into the preview HTML after proj4js has been bootstrapped and connected to OpenLayers

LatLonBox

Hi, there
I have an example from
https://developers.google.com/kml/documentation/kml_tut
as attached
LatLonBox.txt

My guess is the map preview doesn't support LatLonBox tag?

Cheers,
Ying

Configurable base layers

Provide a configuration point to allow additional base layers to be added to the preview map

Add support for satellite maps in preview?

Sateliite maps like google map, bing maps, Esri World Imagery, any one would be ok. THX!

https://gisgeography.com/satellite-maps/

Configurable line/polygon vertices display

That is really useful feature I miss now.

Just as quick prototype, I've modified the style a bit:

vscode-map-preview/static/preview.js

Lines 126 to 131 in e5d36f4

	var lineStyle = new ol.style.Style({
	fill: new ol.style.Stroke({
	color: previewSettings.style.line.stroke.color
	}),
	stroke: new ol.style.Stroke(previewSettings.style.line.stroke)
	});

    var lineStyle = [
        new ol.style.Style({
            fill: new ol.style.Stroke({
                color: previewSettings.style.line.stroke.color
            }),
            stroke: new ol.style.Stroke(previewSettings.style.line.stroke)
        }),
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: 3,
                fill: new ol.style.Fill({
                    color: 'black'
                })
            }),
            geometry: function(feature) {
                return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);
            }
        })
    ];

Result:

Zoom control cut off by format driver label (VSCode 1.4.x)

Visual regressions probably due to the same reasons as #23

Add dev tools link to the preview

It turns out the HTML preview supports a command: pseudo-URI, with this we can provide the means of launching the dev tools by inserting a command link that runs the _webview.openDevTools command.