gagan-bansal / geojson2svg Goto Github PK

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.

There should be option to set the precision after decimal place for numbers in SVG path.

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?

At dateline i.e. at 180 degree data is not displayed properly. So in example I modified 180 to 179.999999. This need be fixed.

Should have option to specify the id key in feature properties.postcode as

var converter = geojson2svg({attributes: {id: 'properties.postcode'}});

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
  }
}

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

Set default viewportSize as 256x256.
This will help in aligning the svg map with tile maps that generally have the tile size 256.
Right now viewportSize is must parameter, after setting viewportSize's default value this parameter should move to options. Like shown here
old

var converter = geojson2svg(viewportSize,options)

new

var converter = geojson2svg({
   viewportSize: {width: 256, height: 256},    // this is default
   otherOption: 'value'
});

Use deepcopy instead of deepmerge as here requirement is cloning of the object and deepmerge does not clone the data.

It seems the script just returns an array of SVG paths.
How to get the viewPort of the result SVG? (taken from geoJSON)?

http://maps-on-blackboard.com/tag/geojson2svg/ appears to be down

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"?

The output i.e. svg path coordinates can also be easily rendered on HTML5 canvas. Add an example for this also.

In demo example map is not displayed in Chrome while in Firefox its displayed properly.

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="...

Default output should be svg string not path value of 'd'.
As I came to know expectation from this tool is to return SVG string.

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!

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

Fix Typo in GeometryCollection and test also.

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" />

Change default map extent (mapExtent) to Web Mercator EPSG:3857. As this projection is used most.
mapExtent for this projection.

   {
      left: -20037508.342789244,
      right: 20037508.342789244,
      bottom: -20037508.342789244,
      top: 20037508.342789244
    }

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);