jumpinjackie / vscode-map-preview Goto Github PK
View Code? Open in Web Editor NEWVSCode map preview extension
License: MIT License
VSCode map preview extension
License: MIT License
VSCode supports an extension point for contributing JSON validation with json schemas
We should provide one for GeoJSON
No point having support for something that will be going away
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)
}),
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]);
}
})
];
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)
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.
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
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>
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"
}
}
]
}
That will be really cool, so no need to reopen preview on each edit. Just as example: Graphviz Preview.
If previewing point-heavy data, it would be nice to apply clustering to such data through configuration options.
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 )
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.
Currently there's formatting issues with this error and it doesn't show the full list of formats attempted
Provide configuration properties for configuring the line/point/polygon style of features in the preview layer
stroke-opacity and fill-opacity are ignored and always shown as 1 (fully opaque)
⌘\
to split the view⌘⇧P Map Preview
to open the map previewError preparing preview
Cannot resolve document for virtual document URI: map-preview://map-preview/map-preview%3A%20/Users/xxx/Downloads/output/foo.json
Sateliite maps like google map, bing maps, Esri World Imagery, any one would be ok. THX!
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).
I guess the preview pane introduces some new CSS or something.
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.
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)
Make the selection style configurable as well
Provide a configuration point to allow additional base layers to be added to the preview map
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
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.
Spec: https://github.com/mapbox/simplestyle-spec
The most popular feature marker-color
is the easiest to implement.
If you preview a document after the first time, it still shows the content from the first preview
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
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.
Add new configuration property to expose the vector layer decluttering flag.
The mouse position control in the map is currently hardcoded for EPSG:4326 (Lat/Lng).
Like many other things, this should be configurable.
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
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
Currently the implemented Map preview (with projection)
command only realistically supports 2 projections:
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.
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).
Tweak the display condition of the preview buttons to only show these buttons if the file extension is:
.csv
.geojson
.kml
.gml
.gpx
.igc
Some KML fragments are failing to preview due to presence of JavaScript within CDATA blocks
Such content should be scrubbed out
Visual regressions probably due to the same reasons as #23
VSCode supports menu contribution points, meaning we can add actual UI buttons to the editor "toolbar" to invoke our commands
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.
I've figured out how to seamlessly load CSV layers in mapguide-react-layout, so let's do the same thing here.
I Want to updata this project, but i can't run it.
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)
Hi, I maintain VS Code's Webview API
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.
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
Allow the default base layer to be configurable
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.
Add support for Cesium CZML
The default CSS for:
Doesn't mesh well with the default VSCode color scheme
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.