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