gs
geojson-svgify
npm i geojson-svgify
gs

geojson-svgify

Convert GeoJSON geometry paths to SVG polyline elements.

by Julius Tens

0.5.0 (see all)License:MITTypeScript:Not Found
npm i geojson-svgify
Readme

geojson-svgify

Convert GeoJSON to virtual-dom <polyline> nodes using the projection of your choice.

npm version build status dependency status dev dependency status license

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.

Downloads/wk

8

GitHub Stars

14

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

6

OPEN ISSUES

0

OPEN PRs

2
VersionTagPublished
0.5.0
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate