12

Is there a ready-to-use Javascript plugin that thansforms a GeoJSON string into a SVG string? A rendering engine, as Tempo, or the project JsonT would be useful, but I need the template to make them works.

camilokawerin
  • 401
  • 1
  • 3
  • 14

3 Answers3

8

You can use d3.js library. Following code snippet will do the job:

Include d3.js in your html file

<script src="files/d3.v3.min.js"></script>

Assuming, you have div with id map in your html file:

<div id="map"></div>

Following js code will add map to your div map. geoJsonObj is your geojson.

var svg = d3.select("#map").append("svg")
            .attr("width", width)
            .attr("height", height);

svg.append("g")
            .selectAll("path")
            .data(geoJsonObj.features)
            .enter().append("path")
            .attr("d", path);

To see a working example, go here. Note that the example uses topojson as input to the .data() attribute.

Mr.Hunt
  • 4,833
  • 2
  • 22
  • 28
  • 2
    Where is the variable `path` coming from in your code, on the last line? – user56reinstatemonica8 Jul 24 '16 at 12:42
  • Nevermind, I found (and updated) a complete example here: http://stackoverflow.com/questions/18425440/displaying-map-using-d3-js-and-geojson/38552478#38552478 – user56reinstatemonica8 Jul 24 '16 at 13:22
  • @user568458 path is not a variable, it is an svg element, like div in html. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths – Mr.Hunt Jul 26 '16 at 08:50
  • 2
    `.attr("d", path);` - that's a Javascript variable, named path, being used to apply the `d` attributes to the SVG paths that D3 draws. Looking at other D3 examples I'd guess it's [D3 geo path generator object](https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md) defined with something like `var path = d3.geo.path().projection( someProjectionObject );` – user56reinstatemonica8 Jul 26 '16 at 10:00
7

There is a basic tool available to convert GeoJSON to SVG geojson2svg and as an npm module also. As the output from geojson2svg is SVG string, this tool can be used in browser as well as with node.js.

Here is an example:

npm install geojson2svg --save

var geojson2svg = require('geojson2svg')

var converter = geojson2svg(
   {attributes: ['properties.foo', 'properties.bar', 'properties.baz']})
var svgStr = converter.convert({
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {type: 'LineString', coordinates: [[0,0], [1000,1000]]},
    properties: {foo: 'fooVal-1', bar: 'barVal-1', baz: 'bazVal-1'}
  }, {
    type: 'Feature',
    geometry: {type: 'LineString', coordinates: [[10,10], [100,100]]},
    properties: {foo: 'fooVal-2', bar: 'barVal-2'}
  }]  
})

console.log(svgStr) 
/* output
[
  '<path d="M128,128 128.00638801979818,127.99361198020182" foo="fooVal-1" bar="barVal-1" baz="bazVal-1"/>',
  '<path d="M128.00006388019798,127.99993611980202 128.00063880197982,127.99936119802018" foo="fooVal-2" bar="barVal-2"/>'
]

*/

It's very easy to covert a SVG string to DOM element. This has been explained by bobince here very nicely with JavaScript code. I have made an npm module for convenience.

Disclaimer: I am the author of geojson2svg.

Gagan
  • 1,267
  • 3
  • 18
  • 28
-2

You can look into GDAL, not sure if it fully supports SVG creation, but GDAL can generally convert all geo formats into other geoformats.

See: Link

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Arend
  • 3,741
  • 2
  • 27
  • 37