We have a use-case for assigning custom properties to SVGs based off GeoJSON properties. I've quickly pulled together this which might need some tweaking and happy to take some feedback. Couple of points up for discussion:

1. I chose properties.data of geojson feature as a namespace for any custom props. That key name might need to be more explicit (maybe customData)
2. I didn't include any validation for SVG foreign namespace spec https://www.w3.org/TR/SVG/extend.html#ForeignNamespaces. Is it ok to put that responsibility on the user?

Hello,

Can we add some attributes from Geojson to SVG, with providing which properties or geometries in Geojson we need to add in SVG, with "geojson2svg"?

hi @gagan-bansal,

Thanks a lot for the merge. I have one question, currently you allow either attributes by properties or by passing a json object, which mean I can't use both (in my case I need both), could this behavior change to something like

{
    "attributes": {
        static: {"class": "mapstyle"},
        dynamic: ["properties.foo", "properties.bar"]
    }
}

I'm sorry if I didn't mention this earlier, but the other branch used to read the property data and add its content as attributes, which allowed me to use both. I didn't read your source code yet, so I could be missing something.

Thanks!

Hi,

I have a small route around a town that I am trying to convert to an SVG. How would I expand this to fix the viewport. It is currently a tiny spec.

Thanks, Rob

It seems like the only coordinate dimensions that work are XY (not e.g. XYZ, XYM). Not sure this that is a bug or a feature not yet implemented. For XYZ- coordinates the script fails with the error TypeError: coordinates.map is not a function at /reproject/index.js:13:22

Thanks for a handy lib! It would be really nice id it was possible to assign attributes depending on some geojson data, either by mapping json attrubites to SVG attributes, or by passing the relevant json attribute to the callback function, so that something like the following was possible:

{"type":"Feature","properties":{"ID":"foo"},"geometry":{"type":"MultiPolygon","coordinates":...

=>

<path data-id="foo" d="...

I have a geojson file, and I used fs.read() to get the contents. When I'd like to call the convert function, it showed me that it is undefined, so I wondering how should I the input file correctly. (geojsonContent is the content of geojson file, it has no problem)

const converter = geojson2svg({
    width: 256,
    height: 256
})

const svgStrings = converter.convert(geojsonContent, {})
console.log(svgStrings);

It seems there is bug and even pointAsCircle: true returns always path instead of circle.

Problem is in instance.js in convertGeometry line 82 (return jsonToSvgElement(json,geom.type); doesnt call "opt" parameter, so in function jsonToSvgElement variable forcePath is always true.

Now converted result looks like: <path cx="M611.5267122181064" cy="562.2759809701495 m-5" r="5" />

Expected result: <circle cx="611.5267122181064" cy="562.2759809701495" r="5" />

Attributes of an svg element can be given at two place, one in constructor and other in .convert function. If given at both places, attributes should be merged at .convert function and output svg string should contain attributes from both. There is issue only attributes from .convert function are being considered.

Need to be resolved.

Example usage (for GlobalMercator, see https://gist.github.com/tadiraman/12f850ad5a6bdcdc59fb):

var mercator = new GlobalMercator();
var converter = geojson2svg(viewportSize,
   {coordinateConversion: mercator.LatLonToMeters});

This can be used to generate SVG with correct projection to match web maps.

I'm trying to covert "Null Island.geo.json" to SVG using this tool. The conversion appears to go well but the svgString is a javascript array. [ 'M99.99268888888889,49.98556111111111 ...

It is possible to get this output in XML/SVG, especially such that Inkscape can open it?

Fantastic library!

Any chance you can add a Typescript definition file to the package? I can submit a PR for the following if it looks good to you:

/***
 * https://github.com/gagan-bansal/geojson2svg
 */
declare module 'geojson2svg' {
  import { GeoJSON } from 'geojson'

  export interface ScreenDims {
    width: number
    height: number
  }

  export interface Origin {
    x: number
    y: number
  }

  export interface Extent {
    left: number
    right: number
    bottom: number
    top: number
  }

  export interface StaticAttribute {
    type: 'static'

    /** The output attribute name */
    property: string

    /** The output attribute value */
    value: string
  }

  export interface DynamicAttribute {
    type: 'dynamic'

    /** The geojson source property name holding the output attribute value
     * ... also used as the output attribute name
     */
    property: string

    /** Override the output attribute name */
    key?: string
  }

  export interface ObjectAttributes {
    [key: string]: string
  }

  export interface Options {
    /** viewportSize is object containing width and height in pixels */
    viewportSize?: ScreenDims

    /** Coordinates should be in same projection as of geojson. Default maps extent are of Web Mercator projection (EPSG:3857). */
    mapExtent?: Extent

    /** Output format
     * 'svg' - svg element string is returned like '<path d="M0,0 20,10 106,40"/>'
     * 'path' - path 'd' value is returned 'M0,0 20,10 106,40' a linestring
     */
    output?: 'svg' | 'path'

    /** Fit ouput svg map to width or height. */
    fitTo?: 'width' | 'height'

    /** a number, precision of output svg coordinates. */
    precision?: number

    /** Should multigeojson be exploded to many svg elements or not. default is false. */
    explode?: boolean

    /** Attributes which are required to attach as SVG attributes from features can be passed here as list of path in feature or json object for static attributes */
    attributes?: (StaticAttribute | DynamicAttribute | ObjectAttributes)[] | ObjectAttributes

    /** Return geojson point objects as SVG circle elements. default is false. */
    pointAsCircle?: boolean

    /** radius of point svg element */
    r?: number

    /** function that will be called on every geojson conversion with output string as one input variable */
    callback?: (svgString: string) => void
  }

  export default class g2svg {
    public constructor(options?: Options)
    public convert(geojson: GeoJSON | any, options?: Options): string
  }
}