geojson2svg

When initializing new GeoJSON2SVG(options), you can provide several configuration keys to control the output:

• viewportSize: Object {width: number, height: number} in pixels. Default: {width: 256, height: 256}.
• mapExtent: Object {left: coord, bottom: coord, right: coord, top: coord}. Coordinates must match the GeoJSON projection.
• mapExtentFromGeojson: Boolean. If true, mapExtent is calculated from the input data. (Note: If mapExtent is omitted, this defaults to true).
• fitTo: 'width' | 'height'. Fits the output SVG to the specified dimension.
• coordinateConverter: A function ( [x, y] ) => [x, y] used to transform coordinates during conversion.
• pointAsCircle: Boolean. If true, points are rendered as <circle> elements instead of paths.
• r: Number. The radius for point SVG elements.
• attributes: Configuration for attaching GeoJSON properties to SVG elements (see Attributes Reference).
• explode: Boolean. Whether to explode multi-GeoJSON into many SVG elements. Default: false.
• precision: Number. Precision of output SVG coordinates. Default: false.
• output: 'svg' | 'path'. 'svg' returns the full element string; 'path' returns only the 'd' attribute value. Default: 'svg'.
• callback: Function. Called for every conversion, receiving the output string as an argument.

You can control which GeoJSON properties are attached to the resulting SVG elements using the attributes option. This can be passed to the constructor or the .convert() method.

1. Simple Property Mapping

Pass an array of strings representing property paths. The last part of the path is used as the SVG attribute name.

// If feature.properties.name = 'Park'
attributes: ['properties.name'] 
// Result: <path name="Park" ... />

2. Advanced Mapping (Static and Dynamic)

Pass an array of objects to define complex rules:

• type: 'static': Always uses the provided value.
• type: 'dynamic': Extracts a value from the feature using a property path.

attributes: [
  { type: 'static', property: 'class', value: 'land-mass' },
  { type: 'dynamic', property: 'properties.pop_density', key: 'density' }
]
// Result: <path class="land-mass" density="[value]" ... />

The Options object allows fine-grained control over how GeoJSON is rendered to SVG. Key configuration properties include:

• viewportSize: An object { width: number, height: number } defining the pixel dimensions.
• mapExtent: An object { left: number, right: number, bottom: number, top: number } defining the coordinate bounds.
• mapExtentFromGeojson: If true, the mapExtent is automatically calculated from the provided GeoJSON data.
• output: Determines the return format: 'svg' (returns full <path d="..."/> strings) or 'path' (returns only the d attribute value).
• fitTo: Either 'width' or 'height' to scale the output map.
• coordinateConverter: A function (point: [number, number]) => [number, number] to transform coordinates during conversion.
• precision: A number defining the decimal precision of the output coordinates.
• explode: A boolean; if true, MultiGeoJSON features are split into multiple SVG elements.
• pointAsCircle: If true, GeoJSON points are rendered as SVG <circle> elements instead of paths.
• r: The radius for point SVG elements when pointAsCircle is enabled.
• callback: A function (svgString: string) => void called for every converted element.

The attributes option allows you to map GeoJSON properties to SVG attributes. It supports three modes:

1. Dynamic (List of paths): Maps property paths to attribute keys of the same name. { "attributes": ["properties.foo", "properties.bar"] } Result: <path foo="val" bar="val" ... />

2. Static (Object): Applies the same value to all elements. { "attributes": {"class": "mapstyle"} } Result: <path class="mapstyle" ... />

3. Mixed (List of objects): Provides fine-grained control over dynamic and static attributes.

   {
     "attributes": [
       { "property": "properties.foo", "type": "dynamic", "key": "id" },
       { "property": "properties.baz", "type": "dynamic" },
       { "property": "bar", "value": "barStatic", "type": "static" }
     ]
   }

   Result: <path id="fooVal" baz="bazVal" bar="barStatic" ... />

Note: If a feature lacks the specified property path, the attribute is simply omitted without error.

// Example of mixed dynamic and static attributes
const options = {
  attributes: [
    { property: 'properties.foo', type: 'dynamic', key: 'id' },
    { property: 'properties.baz', type: 'dynamic' },
    { property: 'bar', value: 'barStatic', type: 'static' }
  ]
};

Use the .convert(geojson, options) method to transform GeoJSON data into an array of SVG strings (e.g., <path ... /> or <circle ... />).

Behavior

• Input Types: Supports FeatureCollection, Feature, GeometryCollection, and individual Geometry objects.
• Extent Calculation: If mapExtent was not provided during initialization, the converter calculates the bounding box of the input GeoJSON using geojson-bbox and resets the internal state after conversion.
• Output: Returns an array of SVG element strings. If options.output is set to something other than 'svg', it returns the raw path data.
• Callback: If options.callback is provided, it is called with the resulting array of SVG elements.

const { GeoJSON2SVG } = require('geojson2svg');
const converter = new GeoJSON2SVG({ viewportSize: { width: 500, height: 500 } });

const geojson = {
  type: 'Feature',
  geometry: { type: 'Point', coordinates: [0, 0] },
  properties: { id: 'my-point' }
};

const svgElements = converter.convert(geojson);
// Returns: ['<path d="..." id="my-point" />']