stg

svg-to-geojson

Convert SVG to GeoJSON

Showing:

Popularity

Downloads/wk

2

GitHub Stars

34

Maintenance

Last Commit

5yrs ago

Contributors

5

Package

Dependencies

0

Size (min+gzip)

20.0KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

SVG to GeoJson

Converts shapes from an SVG file present in the DOM, into a javascript GeoJSON Object.

Reference

svgtogeojson.svgToGeoJson(ArrayOfBounds, SVGNode, CurveComplexity)

ArrayOfBounds: An Array containing two items, each as Arrays of Lat/Lng points corresponding to North East and South West Lat/Lng points over which you want your SVG to be placed on a map. For example, [[51.60351870425863, 0.207366943359375], [51.342623007528246, -0.46829223632812494]] would be the (rough) bounds for projecting an SVG over Greater London. See on map

SVGNode: A DOM object for an SVG. This could be found somewhere on the page, or loaded via an async request, or raw SVG code e.g jQuery('<svg></svg>')[0]

CurveComplexity: An Integer corresponding to the number of straight-light segments a curve will be broken into. GeoJSON has no support for true circles, so svgToGeoJson converts curves into polygons with N straight sides. How many sides is controlled by CurveComplexity. Providing the value 3 would mean a curve is broken into 3 sections. Note that SVG Circles are defined as 4 joined curves, so a CurveComplexity of 3 would result in a circle that was in fact comprised of 12 facets.

Note that providing ArrayOfBounds with values that would change the native height/width of the SVG will result in the resulting GeoJSON points being stretched.

Usage

  1. Link svg-to-geojson.min.js as a <script> tag in your HTML
  2. Find the NE/SW points of your insertion area using a tool such as geojson.io
  3. Add an SVG from the DOM, or generate/insert one
  4. Run the following
var geoJson = svgtogeojson.svgToGeoJson(
  [[51.60351870425863, 0.207366943359375], [51.342623007528246, -0.46829223632812494]]
  document.getElementById('mysvg'),
  3
);

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial