geojson-svgify v0.5.0
geojson-svgify
Convert GeoJSON to virtual-dom <polyline>
nodes using the projection of your choice.
Installation
npm install geojson-svgify
API
svgify(geojson, [options])
geojson
must be an object in the GeoJSON format. options
may have the following keys:
projection
– A function with the signature([longitude, latitude]) => [x, y]
. Default:mercator-projection
computeProps
– A function that will compute the attributes of the<polyline>
element, given the GeoJSON feature. By default, it will add ashape
class
.
Guide
Let's assume you have GeoJSON data.
const geoJSON = require('path/to/geojson-file.json')
svgify
lets you pass in any projection; The default projection is mercator-projection
. For demonstration purposes, we are not going to project our coordinates:
const myProjection = ([lon, lat]) => [lon, lat]
The GeoJSON you pass in will be flattened using geojson-flatten
.
const svgify = require('geojson-svgify')
const polylines = svgify(geoJSON, {projection: myProjection})
polylines
will be an array of virtual-dom <polyline>
nodes. You may want to wrap them in an <svg>
that fits their size:
const bbox = require('@turf/bbox')
const h = require('virtual-hyperscript-svg')
const [west, south, east, north] = bbox(geojson)
const [left, top] = myProjection([west, north])
const [right, bottom] = myProjection([east, south])
const width = right - left
const height = bottom - top
const styles = h('style', {}, `
.shape {
stroke: #f60;
stroke-width: .05;
fill: none;
}
`)
const svg = h('svg', {
width: Math.abs(width) * 100,
height: Math.abs(height) * 100,
viewBox: [left, top, width, height].join(',')
}, [].concat(styles, polylines)))
If you want to convert the virtual DOM tree to HTML, use virtual-dom-stringify
:
const toHTML = require('virtual-dom-stringify')
const html = toHTML(svg)
Contributing
If you found a bug, want to propose a feature or feel the urge to complain about your life, feel free to visit the issues page.