# geojson-svgify

> Convert GeoJSON geometry paths to SVG polyline elements

Latest version **0.5.0** (published 2017-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install geojson-svgify
pnpm add geojson-svgify
yarn add geojson-svgify
bun add geojson-svgify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2017-05-12 |
| First published | 2016-09-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Julius Tens |
| Maintainers | juliuste |
| Keywords | geojson, svg, coordinates, paths, virtual-dom |

## Links

- npm: https://www.npmjs.com/package/geojson-svgify
- Repository: https://github.com/juliuste/geojson-svgify
- Issues: https://github.com/juliuste/geojson-svgify/issues
- npm.io page: https://npm.io/package/geojson-svgify

## Dependencies (3)

- [projections](https://npm.io/package/projections.md) ^1.0.0
- [geojson-flatten](https://npm.io/package/geojson-flatten.md) ^0.2.0
- [virtual-hyperscript-svg](https://npm.io/package/virtual-hyperscript-svg.md) ^2.0.0

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 0.5.0 (latest) — 2017-05-12
- 0.4.0 — 2016-11-03
- 0.3.1 — 2016-09-15
- 0.2.0 — 2016-09-12
- 0.1.0 — 2016-09-11

## README

# geojson-svgify

**Convert [GeoJSON](http://geojson.org/) to [virtual-dom](https://github.com/Matt-Esch/virtual-dom#virtual-dom) `<polyline>` nodes** using the projection of your choice.

[![npm version](https://img.shields.io/npm/v/geojson-svgify.svg)](https://www.npmjs.com/package/geojson-svgify)
[![build status](https://img.shields.io/travis/juliuste/geojson-svgify.svg)](https://travis-ci.org/juliuste/geojson-svgify)
[![dependency status](https://img.shields.io/david/juliuste/geojson-svgify.svg)](https://david-dm.org/juliuste/geojson-svgify)
[![dev dependency status](https://img.shields.io/david/dev/juliuste/geojson-svgify.svg)](https://david-dm.org/juliuste/geojson-svgify#info=devDependencies)
[![license](https://img.shields.io/github/license/juliuste/geojson-svgify.svg?style=flat)](LICENSE)

## Installation

```shell
npm install geojson-svgify
```

## API

```
svgify(geojson, [options])
```

`geojson` must be an object in the [GeoJSON format](http://geojson.org/). `options` may have the following keys:

- `projection` – A function with the signature `([longitude, latitude]) => [x, y]`. Default: [`mercator-projection`](https://github.com/zacbarton/node-mercator-projection#readme)
- `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.

```js
const geoJSON = require('path/to/geojson-file.json')
```

`svgify` lets you pass in any [projection](https://en.wikipedia.org/wiki/Map_projection); **The default projection is [`mercator-projection`](https://github.com/zacbarton/node-mercator-projection#readme)**. For demonstration purposes, we are *not* going to project our coordinates:

```js
const myProjection = ([lon, lat]) => [lon, lat]
```

The GeoJSON you pass in will be flattened using [`geojson-flatten`](https://github.com/mapbox/geojson-flatten#geojson-flatten).

```js
const svgify = require('geojson-svgify')

const polylines = svgify(geoJSON, {projection: myProjection})
```

**`polylines` will be an array of [virtual-dom](https://github.com/Matt-Esch/virtual-dom#virtual-dom) `<polyline>` nodes.** You may want to wrap them in an `<svg>` that fits their size:

```js
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`]:

```js
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](https://github.com/juliuste/geojson-svgify/issues).

---
_Source: https://npm.io/package/geojson-svgify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._