geojson2svg

geojson2svg

Converts geojson to svg string given svg viewport size and maps extent.

Installation

Using in node.js or with browserify

npm install geojson2svg

For including in html page standard way, download file dist/geojson2svg.min.js

<script type="text/javascipt" src="path/to/geojson2svg.min.js"></script>

This creates a global variable 'geojson2svg'

Usage

Using in node.js or with browserify

var geojson2svg = require('geojson2svg');
var converter = geojson2svg(viewportSize,options);
var svgString = converter.convert(geojson,options);

Using in browser standard way

var converter = geojson2svg(viewportSize,options);
var svgString = converter.convert(geojson,options);

viewportSize is object containing width and height in pixels - {width: 200, height: 100}

convert function returns array of svg element string

Options

• mapExtent: {"left": coordinate, "bottom": coordinate, "right": coordinate, "top": coordinate}. Coordinates should be in same projection as of geojson. Default maps extent are of Web Mercator projection (EPSG:3857). Default extent values are:

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

• output: 'svg'|'path' default is 'svg'

  '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

• explode: true | false, default is false. Should multigeojson be exploded to many svg elements or not.

• attributes: json object containing attribute(key) and values(value) for all svg elements. These attributes would be added to svg string. If option is like

  {"attributes": {"class": "mapstyle"}}

  returned string would be

  '<path class="mapstyle" d="M0,0 20,10 106,40"/>'

• pointAsCircle: true | false, default is false. For point geojson return circle element for option: { "pointAsCircel": true } output svg string would be:

  '<cirlce cx="30" cy="40" r="1" />'

• r: radius of point svg element

• callback: function, accept function that will be called on every geojson conversion with output string as one input variable e.g:

  { "callback": function(svgString) {
    // do something with svgString
  }}
  

  Suitable callback function could be render svgString.

The options 'attributes', 'r' and 'callback' can also be given in convert function

var svgString = convertor.convert(geojson, 
  {
    "attributes": ...,
    "r": ...,
    "callback": function
  }

mapExtent is critical option default are the extents of Web Mercator projection ('EPSG:3857') or also known as Spherical Mercator. This projection is used by many web mapping sites (Google / Bing / OpenStreetMap). In case your source data is in geographic coordinates, it can be converted on the fly to Web Mercator Projection using reproject or proj4js. Check my world map example for detail.

Examples

Converts geojson LineString to svg element string:

var converter = geojson2svg({width: 200, height: 100},
  {
    mapExtent: {left: -180, bottom: -90, right: 180, top: 90},
    output: 'svg' 
  }
);
var svgString = converter.convert(
  {type:'LineString',coordinates:[[10,10],[15,20],[30,10]]}
);
//svgString: ['<path d="M105.55555555555556,44.44444444444444 108.33333333333333,38.888888888888886 116.66666666666666,44.44444444444444" />']

Converts geojson Polygon to svg path data 'd' string:

var converter = geojson2svg({width: 200, height: 100},
  {    
    mapExtent: {left: -180, bottom: -90, right: 180, top: 90},
    output: 'path'
  }
);
var pathData = converter.convert(
  {
    "type": "Polygon", 
    "coordinates": [
      [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]] 
    ]
  }
);
// pathData: ['M116.66666666666666,44.44444444444444 122.22222222222221,27.77777777777778 111.11111111111111,27.77777777777778 105.55555555555556,38.888888888888886 116.66666666666666,44.44444444444444Z']

Developing

Once you run

npm isntall

then for running test

npm run test

to create build

npm run build

##License This project is licensed under the terms of the MIT license.

Changelog

v0.1.0

28 April 2015

• Default viewport size option added close #9 #changelog #9
• data display at 180 deg resolved #6 #6
• demo map display in chrome resolved #7 #7
• default svg output and web mercator extent close #3, close #4 #changelog #3 #4
• initial prototype ready 4be51ee
• all test passed , remaining explode 00ef0bf
• small bugfix and README.md written 393dc33
• node-clone dependency removed 0f6d345
• return as path string 4fc5f33
• color coded map example added 9e07f97
• return as path string 2 632949d
• switch dependant from deep-extend to xtend, all dependants version upgraded 607ff99
• explode geojson test included 9e50c90
• fit to width/height option added 362f474
• before pushing to github 11c7927
• color coded map example added 55b4727
• created global variable for browser through browserify d1d9165
• world example cleaned 967a119
• MIT license added d838bc1
• starting the project d379d21
• cdnjs link added ce552fb
• examples linked to cdnjs geojson2svg 4fa0b51
• added map examples 78e3c75
• minified version added b078a6c
• Update README.md b5e1c38
• fitTo option added in README 6f6bc0c
• version number changed 9898b51
• package ver change 1ede8f6
• readme modified 0cf0ad0
• minified version added a4d6b58