davecranwell / svg-to-geojson Goto Github PK
View Code? Open in Web Editor NEWConvert SVG to GeoJSON
License: MIT License
Convert SVG to GeoJSON
License: MIT License
I hope that you tolerate asking a specific question!
I've tried to extract the jQuery SVG map (eia930map.js) from EIA Realtime Grid by injecting your script and running the following command (bbox = continental US):
var geoJson = svgtogeojson.svgToGeoJson(
[[-124.78, 24.74], [-66.95, 49.35]],
document.getElementById('mysvg'),
3
);
but it returned an empty SVG. May you please tell me, whether my process is generally the right?
When using multiple Moveto commands per path, the line doesn't seem to stop but instead it seems that it moves on to the very first point of the path (the Moveto point you always start with), and only then goes to create the rest of the following shape. The result is a hotspot of (in my case) hundreds of lines at [0, 0], pointing to every shape on the map.
Looking it up, it seems that the problem has to do with the way svg-to-geojson differentiates exterior and interior rings.
Is this a bug or simply not a feature?
Hi !
when I run the index.html then js has a error alert-- Uncaught TypeError: f.forEach is not a function.How to fix it?
I'm trying to use svg-to-geojson as an npm dependency for a rest application, I'm able to install it using npm install
, but when I try to use it using this require:
var svgtogeojson = require('svg-to-geojson');
I get the following error when I try to run the server:
ReferenceError: SVGPathElement is not defined at e.svgtogeojson (path/to/geojson-rest/node_modules/svg-to-geojson/dist/svg-to-geojson.min.js:1:23679) at Object. (path/to/geojson-rest/node_modules/svg-to-geojson/dist/svg-to-geojson.min.js:2:22430) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19)
It seems to be an issue related to path-to-polyfill, but I can't figure out how to resolve this.
SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="396" height="72"><path fill="red" stroke="black" d="M4.39 59.70L4.39 9.28L10.16 9.28L10.16 30.73L25.84 30.73L25.84 9.28L31.61 9.28L31.61 59.70L25.84 59.70L25.84 36.21L10.16 36.21L10.16 59.70L4.39 59.70ZM62.05 49.08L67.68 49.08Q64.55 61.10 54.07 61.10L54.07 61.10Q47.57 61.10 43.77 55.69L43.77 55.69Q40.32 50.73 40.32 42.61L40.32 42.61Q40.32 34.84 43.56 29.88L43.56 29.88Q47.36 24.12 54 24.12L54 24.12Q66.97 24.12 67.82 43.70L67.82 43.70L45.74 43.70Q46.16 56.29 54.14 56.29L54.14 56.29Q60.47 56.29 62.05 49.08L62.05 49.08ZM45.95 39.09L62.05 39.09Q60.89 28.93 54 28.93L54 28.93Q47.36 28.93 45.95 39.09L45.95 39.09ZM92.81 9.28L92.81 51.82Q92.81 54.91 95.77 54.91L95.77 54.91Q98.19 54.91 101.07 54.35L101.07 54.35L101.07 59.73Q96.82 60.33 94.82 60.33L94.82 60.33Q87.19 60.33 87.19 52.84L87.19 52.84L87.19 9.28L92.81 9.28ZM128.81 9.28L128.81 51.82Q128.81 54.91 131.77 54.91L131.77 54.91Q134.19 54.91 137.07 54.35L137.07 54.35L137.07 59.73Q132.82 60.33 130.82 60.33L130.82 60.33Q123.19 60.33 123.19 52.84L123.19 52.84L123.19 9.28L128.81 9.28ZM162.07 24.12L162.07 24.12Q168.68 24.12 172.44 29.95L172.44 29.95Q175.68 34.80 175.68 42.61L175.68 42.61Q175.68 48.48 173.74 52.91L173.74 52.91Q170.16 61.14 161.93 61.14L161.93 61.14Q155.57 61.14 151.77 55.72L151.77 55.72Q148.32 50.77 148.32 42.61L148.32 42.61Q148.32 33.82 152.30 28.79L152.30 28.79Q156.09 24.12 162.07 24.12ZM161.93 29.14L161.93 29.14Q158.06 29.14 155.88 33.19L155.88 33.19Q153.95 36.74 153.95 42.61L153.95 42.61Q153.95 48.02 155.53 51.43L155.53 51.43Q157.71 56.11 162 56.11L162 56.11Q165.94 56.11 168.12 52.07L168.12 52.07Q170.05 48.52 170.05 42.68L170.05 42.68Q170.05 36.60 168.05 33.12L168.05 33.12Q165.90 29.14 161.93 29.14ZM223.28 59.70L217.72 9.28L223.42 9.28L226.37 47.85L231.33 9.28L236.67 9.28L241.63 47.85L244.58 9.28L250.28 9.28L244.72 59.70L239.03 59.70L234 19.65L228.94 59.70L223.28 59.70ZM270.07 24.12L270.07 24.12Q276.68 24.12 280.44 29.95L280.44 29.95Q283.68 34.80 283.68 42.61L283.68 42.61Q283.68 48.48 281.74 52.91L281.74 52.91Q278.16 61.14 269.93 61.14L269.93 61.14Q263.57 61.14 259.77 55.72L259.77 55.72Q256.32 50.77 256.32 42.61L256.32 42.61Q256.32 33.82 260.30 28.79L260.30 28.79Q264.09 24.12 270.07 24.12ZM269.93 29.14L269.93 29.14Q266.06 29.14 263.88 33.19L263.88 33.19Q261.95 36.74 261.95 42.61L261.95 42.61Q261.95 48.02 263.53 51.43L263.53 51.43Q265.71 56.11 270 56.11L270 56.11Q273.94 56.11 276.12 52.07L276.12 52.07Q278.05 48.52 278.05 42.68L278.05 42.68Q278.05 36.60 276.05 33.12L276.05 33.12Q273.90 29.14 269.93 29.14ZM298.51 25.49L304.00 25.49L304.00 32.70Q310.22 26.12 317.32 24.12L317.32 24.12L317.32 30.38Q309.16 32.34 304.00 39.23L304.00 39.23L304.00 59.70L298.51 59.70L298.51 25.49ZM344.81 9.28L344.81 51.82Q344.81 54.91 347.77 54.91L347.77 54.91Q350.19 54.91 353.07 54.35L353.07 54.35L353.07 59.73Q348.82 60.33 346.82 60.33L346.82 60.33Q339.19 60.33 339.19 52.84L339.19 52.84L339.19 9.28L344.81 9.28ZM385.31 29.36L385.31 9.28L390.66 9.28L390.66 59.70L386.75 59.70L385.38 55.23Q381.73 61.14 375.82 61.14L375.82 61.14Q370.37 61.14 367.03 55.86L367.03 55.86Q363.66 50.73 363.66 42.19L363.66 42.19Q363.66 35.19 366.19 30.38L366.19 30.38Q369.53 24.12 375.75 24.12L375.75 24.12Q380.92 24.12 385.31 29.36L385.31 29.36ZM377.05 29.21L377.05 29.21Q373.32 29.21 371.14 33.26L371.14 33.26Q369.28 36.91 369.28 42.26L369.28 42.26Q369.28 48.06 371.00 51.64L371.00 51.64Q373.04 56.04 377.05 56.04L377.05 56.04Q380.67 56.04 383.06 52.42L383.06 52.42Q385.52 48.80 385.52 42.26L385.52 42.26Q385.52 36.95 383.66 33.54L383.66 33.54Q381.38 29.21 377.05 29.21Z"/></svg>
Update: The issue seems to be invalid geojson -- correcting with turf.buffer(0) fixes the features.
I couldn't run npm install svg-to-geojson
without having napa
installed, either globally or local to the directory I was installing to. I think this would be nice to mention in the README?
Dear contributors,
Dear Dave Cranwell,
I hope you are doing well and staying safe during these uncertain times.
Thanks for your tool, it works great. However, I would like to display the values of the Feature object's properties member: "id": "fill": but the properties of the objects appears empty.
Here the head of the output geojson file: {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
2.281433197792447,
48.87961458157741
],
...
See the zip file: and especially "test3_Paris_Arrdts_C3".geojson and "test3_Paris_Arrdts_C3".html
The file Paris_Arrdts_C1".geojson is the result of what i would like to reach with your tool.
{
"type": "FeatureCollection",
"features": [
{
"id": "bafc27b7a7593ac21c4ddfe747a57d71",
"type": "Feature",
"properties": {
"id": "SVG_75116 [SM/10000= 4]",
"fill": "#ffe600"
},
"geometry": {
"coordinates": [
[
[
2.2795830944743614,
48.888115101002256
],
...
Could you help me to add modify some lines of code, so that I can get in the output geojson file a file with all the attributes/values of the Feature object and member of properties?
For the best, I will be able to display like in the svg file, the text of legend beside the polygones of legend and not inside of the legend polygon as we can see .
Thank you very much for your time and help.
Best Regards,
Anne Quesnel
files here:
test3-to-contributors.zip
https://www.dropbox.com/sh/d79ixrt4vph0ud8/AAABEds7scm5MjVWnJt0peGXa?dl=0
see title
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.