Giter VIP home page Giter VIP logo

svg2geojson's Introduction

SVG 2 GeoJSON

Converts an SVG file with added geo-referencing tags into one or more GeoJSON files.

Installing

npm install svg2geojson

Geo-Referencing Tags

You must place two GeoItems inside a Prognoz MetaInfo element as a direct child of the <svg> element at the root of your document.

<MetaInfo xmlns="http://www.prognoz.ru"><Geo>
  <GeoItem X="-595.30" Y="-142.88" Latitude="37.375593" Longitude="-121.977795"/>
  <GeoItem X="1388.66" Y=" 622.34" Latitude="37.369930" Longitude="-121.959404"/>
</Geo></MetaInfo>

These map opposing X/Y corners in your SVG coordinate space to Longitude/Latitude coordinates on the world. Note that the SVG coordinate space has Y increasing down (toward the south), while Latitude increases upwards (towards the north).

Usage

Running the binary from the command line:

$ npm install -g svg2geojson
$ svg2geojson file.svg          # Writes file.geojson
$ svg2geojson file.svg --layers # Writes file.geojson, file-layer1Name.geojson, …
# See svg2geojson --help for more parameters

Running as a Node.js library:

const { geoFromSVGFile, geoFromSVGXML } = require('svg2geojson.js');

// …reading from file on disk
geoFromSVGFile( 'my.svg', layers => {
	layers.forEach( layer => {
		let json = JSON.stringify(layer.geo); // Turn JS object into JSON string
		console.log(`Layer Named: "${layer.name}"`);
		console.log(json);
	});
}, {layers:true, tolerance:0.5} );

// …processing SVG code as a string
const svg = `<svg xmlns="http://www.w3.org/2000/svg"><!-- ... --></svg>`;
geoFromSVGXML( svg, layer => {
	let json = JSON.stringify(layer.geo); // Turn JS object into JSON string
	console.log(json);
} );

See the output of svg2geojson --help for the options you can pass to the functions, and their default values.

Preparing Paths

SVG allows <path> elements with an arbitrary number of overlapping subpaths, with some of them being 'positive' space and some 'negative' space. In SVG these subpaths may be oriented clockwise or counter-clockwise, and added in any order.

GeoJSON only allows a Polygon to have a single 'positive' subpath (and an arbitrary number of additional 'hole' subpaths). To make it easier for the code to detect which subpath is the 'positive' subpath you must currently:

  1. Have only one positive subpath per <path>.
  2. Ensure that the positive subpath is the first subpath in a <path>.

TODO (AKA Known Limitations)

  • Support modes of projection unmapping
  • Support non-rectangular, inverse bilinear unmappings
  • Add more command-line options to control JSON formatting.
  • Treat <g> as MultiPolygon, GeometryCollection, or MultiLineString as appropriate. Currently items within a group are flattened as individual Feature items in the GeoJSON.
  • Treat <path> with multiple positive subpaths as a MultiPolygon. (This requires figuring out which holes apply to which positive subpaths.)

svg2geojson's People

Contributors

phrogz avatar col avatar marr avatar

Watchers

James Cloos avatar

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.