Need Prize Money

    geojson-svgify

    0.5.0 • Public • Published

    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.

    Install

    npm i geojson-svgify

    DownloadsWeekly Downloads

    7

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • juliuste