We have been using KML to allow clients to upload Layers to a Google Maps based App. We are trying to replace KML with geoJSON, and all is fine with the exception of styles.
The style definitions in the KML files do not get included in the conveted geoJSON file (we have used a number of converters, but the one we are working with mainly is http://converter.mygeodata.eu/)
As you can see in the KML below, there is a style block there (purple box), but this just gets excluded from any generated geoJSON.
Does anyone know of a converter, or way of converting KML to geoJSON, that retains the style?
Thanks
Jason
In the end, I found that toGeoJson (http://mapbox.github.io/togeojson/) actually does convert the KML <style> node contents into the resulting geoJSON.
All the online tools seem to use ogr2ogr on the server side, which ignores the <style> as it isn't semantic, but toGeoJson has a go at it and so far does a good job.
I could then just access those properties, after the geoJSON was loaded, to apply the styles.
Related
I'm using mapbox-gl-js library (soon maplibre-gls-js) to render Maps from HERE Vector Tiles API using the styles from https://github.com/apollo-mapping/ap-tilezen-mapbox-styles
I saw and tried this example from HERE: https://developer.here.com/documentation/examples/vector-tiles
where they offer their own style that can be used with the mapbox library:
https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey=
But I have not found any documentation on the styles endpoint.
Are there more styles available I can choose from? This "berlin" style is a bit too dark for my taste.
No, we don't have more styles for Mapbox render engine therefore you need to create/rework you own.
The defined style on https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey= should be compatible with Mapbox Style Specification https://docs.mapbox.com/mapbox-gl-js/style-spec/
If you open this https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey= directly then you can see 'layers' property that compatible with the description on https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/
E.g. each layer object has property 'id' that is mapped to Mapbox layer id and layer object has a property 'source-layer' layer id to use from a HERE Vector tile source (description on https://developer.here.com/documentation/vector-tiles-api/dev_guide/topics/layers.html and https://developer.here.com/documentation/vector-tiles-api/dev_guide/topics/layers.html#tile-layers).
To find layer ids of Mapbox use this description https://docs.mapbox.com/help/glossary/layer/#finding-layer-ids
To find layer ids of HERE Tiles use it https://enterprise.here.com/map-style-editor/
Using 'filter' property https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#filter for define an expression specifying conditions on source (HERE Vector Tile) features.
Basically you need to rework color styles in the https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey= and save it to your's internet resources
Assume a network graph generated via the R library networkD3. Assume further that you can save that network graph as an external stand alone HTML file (see section Output) or, alternatively, render it via the R library htmlwidgets.
Do you see any way to export a network so generated as a vector graphic (pdf or svg), irrespective of whether inside or outside of R?
Note: I understand that the primary purpose of the D3.js library is not to generate static data visualizations, but surely there is a way to use/convert D3 network graphs for print publication.
Edit 1:
Following the suggestion by CJ Yetman, I inspected the DOM properties of the HTML file via Firefox Developer Edition. Using this method, it is possible to specifically see SVG properties (see this example), but they are mostly empty. However, how do I 'extract the SVG from the DOM', as CJ Yetman indicated?
Since you do mention htmlwidgets, I can share how I managed..
I have my NetworkD3 app as a webpage (easiest you can just create an account with shinyapps.io and plug your code into their server for free through RStudio using a NetworkD3 shiny app template)
And then open your plot using Opera browser (did not work with Chrome) and right click on your plot and Save as PDF... this will give you vectorized figures that you can zoom in endlessly without losing resolution.
Here is a bit of code... Let's assume that you have a chart rendered into a div with id="watcher".
<button onClick={() => alert(document.getElementById('watcher').innerHTML)} style={{ padding: '10px' }}>
Show generated html/svg
</button>
The above is code for React, but can be adapted for any environment.
You can therefore grab the rendered HTML into a variable with a line like this:
svgMarkup = document.getElementById('watcher').innerHTML
Basically it's a string, which you can then send to a backend for saving, or to file.
Another approach is to server side render the SVG and save it directly to the file without the need to display it. D3 should be able to handle that.
View it in a browser and then use the browser’s developer tools to extract the SVG from the DOM... some browsers (I think Chrome) will even let you right click on an SVG to save it to your local drive. It has to be rendered in a browser first though, because the underlying JavaScript is what ultimately generates the SVG.
Using something like SVG Crowbar might make it even easier to save the SVG from a webpage.
I am trying to understand a KML Ground Overlay Tutorial, which has the following code as an example:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Folder>
<name>Ground Overlays</name>
<description>Examples of ground overlays</description>
<GroundOverlay>
<name>Large-scale overlay on terrain</name>
<description>Overlay shows Mount Etna erupting
on July 13th, 2001.</description>
<Icon>
<href>https://developers.google.com/kml/documentation/images/etna.jpg</href>
</Icon>
<LatLonBox>
<north>37.91904192681665</north>
<south>37.46543388598137</south>
<east>15.35832653742206</east>
<west>14.60128369746704</west>
<rotation>-0.1556640799496235</rotation>
</LatLonBox>
</GroundOverlay>
</Folder>
</kml>
There is no API key number, so I assume this KML is intended to be combined with a map of some sort.
I saved the kml to a publicly accessable file:
https://drive.google.com/file/d/0Bx17tEcqrzavTlc4ZHVmNFgyM1k/view?usp=sharing
Surely I must make an embedded map with some reference to this kml file.
https://developers.google.com/maps/documentation/embed/guide
The first example here uses iframe, it uses Place Mode, which I don't want.
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
View mode seems most appropriate of the above link options.
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
Oviously this needs to be recentered to Mt Etna,and my API key:
ttps://www.google.com/maps/embed/v1/view
?key=AIzaSyCrzeJMzJcHGCZj26Y9tHhmkSQ1zzJi8o0
¢er=37.91904192681665,15.35832653742206
&zoom=14
&maptype=satellite
Does it need to be put in iframe?
How can I combine these two chunks of code to create a kml map overlay embedded in my website?
Is there a way of doing this without using Java?
A KML file will not render directly on the web... it needs to be rendered on some map. The easiest way to view a KML file yourself is to open it with Google Earth. If you want to put it on the web, one easy way is to use the Google Maps JavaScript API to embed a map on your site, and then use the KmlLayer function to add the KML file to the map. Details and sample code are in the documentation here:
https://developers.google.com/maps/documentation/javascript/kml
Note that the copy of the KML file which you have on Google Drive will not open directly in Earth or anywhere else with the URL you provided, since it takes you to the Google Drive page for that file. Instead, you want to generate the direct download URL for that file on Drive, or put it online somewhere else.
I am using kml file to draw polygons in google map. I am setting click events for those polygon which is working. Now I want the clicked polygon to be highlighted. I had tried the setOption() method, but it didn't work. Is it possible to change the color of polygon on clicking it?
If you are using KmlLayer (a guess), you can't change the properties of the Polygons. If you use a third party KML parser like geoxml3 or geoxml-v3 to render the polygons as native Google Maps API v3 objects you can change their properties (but whether the performance is acceptable will depend on how complex your KML is). You can also dynamically change Polygons in tiles rendered using FusionTablesLayer (import your KML into a Fusion Tabel).
Example changing the color of Polygons from KML rendered using geoxml3 on mouseover
If you are using KmlLayer (a guess), you can't change the properties of the Polygons. If you use a third party KML parser like geoxml3. Here is a link to that.. http://developers.cloudmade.com/projects/web-maps-api/examples/kml-and-geo-rss
I am trying to make a map that shows several information of a project. I have like 1000 points in Arcgis, each point have a html code that shows specific info of the points (names, location, 1 picture etc..). I export these points to a kml file, so I have the 1000 in a one kml file with all the info.
What I want to do is format all the markers of the kml file with api Google maps, (size, color etc...), so when I load the map in the web page I can play with size or color of the markers of the kml file. I haven’t found the procedure yet. I don’t know if I the issue well explained.
I mean which is the code to change the size and color of all markers of a kml file with API Google maps. Thanks.
You can't do that with the native Google Maps API v3 KmlLayer class. You could import your KML into FusionTables, overlay a FusionTablesLayer and style that dynamically or use a third party KML parser like geoxml3 or geoxml-v3 which parse the KML and render it using native Google Maps API v3 objects.