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 a shape 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.