Giter VIP home page Giter VIP logo

geo2svg's Introduction

geo2svg

Simplified Chinese (简体中文) README

geo2svg is a tiny JavaScript library for converting geojson object to svg string or svg element given your options including size, padding, style etc. Generally, the geojson object can be any one of the nice objects defined in RFC7946: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, GeometryCollection, Feature and FeatureCollection.

To examine the demo online, please visit this demo.

Installation

In a browser:

<script src="geo2svg.js"></script>

In Node.js:

$ npm install --save geo2svg
// Load the geo2svg
var geo2json = require('geo2svg');

Use geo2svg

var option = {
    size: [512, 512],           // size[0] is svg width, size[1] is svg height
    padding: [10, 10, 10, 10],  // paddingTop, paddingRight, paddingBottom, paddingLeft, respectively
    output: 'string',           // output type: 'string' | 'element'(only supported in browser)
    precision: 3,               // svg coordinates precision
    stroke: 'red',              // stroke color
    strokeWidth: '2px',         // stroke width
    background: '#ccc',         // svg background color, and as the fill color of polygon hole
    fill: 'green',              // fill color
    fillOpacity: 0.5,           // fill opacity
    radius: 5                   // only for `Point`, `MultiPoint`
};
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [120.12159347534178, 30.260105112263386],
                        [120.12639999389648, 30.23178108955747],
                        [120.15111923217772, 30.231632774762375],
                        [120.16056060791016, 30.25194981710498],
                        [120.14373779296875, 30.266480598629396],
                        [120.12159347534178, 30.260105112263386]
                    ]
                ]
            }
        }
    ]
};
var svgStr = geo2svg(geojson, option);
console.log(svgStr);
// Then you will get this:
// <svg xmlns="http://www.w3.org/2000/svg" style="background:#ccc" width="512" height="512" ><path d="M10.000 116.502,L70.687 474.122,L382.793 475.995,L502.000 219.471,L289.595 36.005,L10.000 116.502"  fill="green" fill-opacity="0.5" stroke="red" stroke-width="2px" /></svg>

Bugs

Please use the GitHub issue tracker for all bugs and feature requests.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.