geojson2svg

Converts GeoJSON to an SVG string, given the SVG viewport size and map extent. geojson2svg can be used on the client side (in the browser) or server side (with Node.js).

Check world map, SVG scaled map and color coded map examples to demonstrate that its very easy to convert GeoJSON into map.

🛠 Installation
🚗 Usage
🍿 Basic Example
🔌 API
✈️ Migration from 1.x to 2.x
📌 Important points
📋 Changelog
🪪 License
🔗 Related useful articles

🛠 Installation

• Using in node.js

  npm install geojson2svg
  

• For including in html page, download the build file ./dist/geojson2svg.min.js

  This creates a global variable 'GeoJSON2SVG' as a Class.

• geojson2svg is also available on cdnjs and can be included like:

🚗 Usage

• Using with node.js

  With ES6

  import {GeoJSON2SVG} from 'geojson2svg';
  const converter = new GeoJSON2SVG(options);
  const svgStrings = converter.convert(geojson, options);
  

  With CommonJS

  const {GeoJSON2SVG} = require('geojson2svg');
  const converter = new GeoJSON2SVG(options);
  const svgStrings = converter.convert(geojson, options);
  

• Usage in browser:

  const converter = new GeoJSON2SVG(options);
  const svgStrings = converter.convert(geojson,options);
  

🍿 Basic Example

const {GeoJSON2SVG} = require('geojson2svg');

const converter = new GeoJSON2SVG({
  mapExtent: {left: -180, bottom: -90, right: 180, top: 90},
  viewportSize: {width: 200, height: 100},
  attributes: ['properties.class' , 'properties.foo'],
  r: 2
});
const geojsonData = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    id: 'pt-1',
    geometry: {type:'Point',coordinates:[50, 50]},
    properties: {foo: 'val-1', class: 'point-tree'}
  }, {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [[10, 10],[15, 20],[30, 10]]
    },
    properties: {id: 'ln-1', foo: 'val-2', class: 'line-road', bar: 'val'}
  }, {
    type: 'Feature',
    id: 'pg-1',
    geometry: {
      type: 'LineString',
      coordinates: [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
    },
    properties: {id: 'not-used', foo: 'val-3', class: 'polygon-pond'}
  }]
});

const svgStr = converter.convert(geojsonData);
console.log(svgStr);

// output
// [
//   '