default svg id from feature's properties

README.md

@@ -93,6 +93,10 @@ var svgString = convertor.convert(geojson,
 
 **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-spherical-mercator](https://github.com/geosquare/reproject-spherical-mercator) or [reproject](https://github.com/perliedman/reproject) or [proj4js](https://github.com/proj4js/proj4js). Check my [world map](https://github.com/gagan-bansal/geojson2svg/blob/master/examples/world.html) example for detail.
 
+**Assigning id to SVG path**
+
+There are three ways for doing this. First and second, `.converter` reads it from `feature.properties.id` or `feature.id`. Third way, pass id along with attributes like `converter.convert(feature, {attributes: {id:'foo-1', class: 'bar'}})`. Preference order is first as id key in attributes then feature.id and last feature.properties.id.
+
 ### Examples
 Converts geojson LineString to svg element string:
 ```
@@ -128,7 +132,7 @@ var pathData = converter.convert(
 // pathData: ['M116.66666666666666,44.44444444444444 122.22222222222221,27.77777777777778 111.11111111111111,27.77777777777778 105.55555555555556,38.888888888888886 116.66666666666666,44.44444444444444Z']
 ```
 
-Check my blog [maps-on-blackboard](http://maps-on-blackboard.com/) for more detailed examples.
+Check my blog [maps-on-blackboard](http://maps-on-blackboard.com/tag/geojson2svg/) for more detailed examples.
 ## Developing
 Once you run
 

src/instance.js

@@ -60,7 +60,8 @@ g2svg.prototype.convertFeature = function(feature,options) {
   if(!feature && !feature.geometry) return;
   var opt = merge(merge({},this.options), options || {});
   opt.attributes = opt.attributes || {};
-  opt.attributes.id = opt.attributes.id || feature.id || null;
+  opt.attributes.id = opt.attributes.id || feature.id || 
+    (feature.properties && feature.properties.id ? feature.properties.id : null);
   return this.convertGeometry(feature.geometry,opt);
 };
 g2svg.prototype.convertGeometry = function(geom,options) {

test/test.js

@@ -10,21 +10,21 @@ var expect = require('chai').expect
 
 describe('geojson2svg', function() {
   var precision = testData.precision;
-	  describe(testData.desc+ ': .convert()', function() {
-	    var geojson2svg = require('../src/main.js');
-	    var converter = geojson2svg(testData.options);
-	    testData.geojsons.forEach(function(data) {
-	      it(data.type+ ' {output: "path",explode: false,r:2}',function() {
+    describe(testData.desc+ ': .convert()', function() {
+      var geojson2svg = require('../src/main.js');
+      var converter = geojson2svg(testData.options);
+      testData.geojsons.forEach(function(data) {
+        it(data.type+ ' {output: "path",explode: false,r:2}',function() {
         var options = {output:'path'};
         options = merge(options,testData.options);
-	        var actualPaths = converter.convert(data.geojson,options);
+          var actualPaths = converter.convert(data.geojson,options);
         testPath(actualPaths,data.path,data.geojson.type,precision);
-	      });
-      it(data.type + ' {output: "svg",explode: false,r:2}',function() {
-        var actualSVGs = converter.convert(data.geojson,testData.options);
-        testSVG(actualSVGs,data.svg,data.geojson.type,precision);
+        });
+        it(data.type + ' {output: "svg",explode: false,r:2}',function() {
+          var actualSVGs = converter.convert(data.geojson,testData.options);
+          testSVG(actualSVGs,data.svg,data.geojson.type,precision);
+        });
       });
-	    });
     it('Feature {output: "path",explode: false}', function() {
       var actualPaths = converter.convert(testData.feature.geojson,
         {output:'path',explode:false});
@@ -101,6 +101,49 @@ describe('geojson2svg', function() {
       testSVG(actualOutput, testData['Default values'].svg, 
         testData['Default values'].geojson.type, precision);
     });
+    it('add properties to svg: pass properties in constructor', function() {
+      var converter = geojson2svg({attributes: {class: 'foo'}});
+      var output = converter.convert(
+        {type:'LineString', coordinates: [[0,0], [1000,1000]]});
+      var outputEle = jsdom(output).firstChild.children[1].children[0];
+      expect(outputEle).to.respondTo('getAttribute');
+      expect(outputEle.getAttribute('class')).to.be.equal('foo');
+    });
+    it('add properties to svg: pass properties in .convert', function() {
+      var converter = geojson2svg({attributes: {class: 'foo',id: 'foo-1'}});
+      var output = converter.convert(
+        {type:'LineString', coordinates: [[0,0], [1000,1000]]},
+        {attributes: {class: 'foo',id: 'foo-1'}}
+      );
+      var outputEle = jsdom(output).firstChild.children[1].children[0];
+      expect(outputEle).to.respondTo('getAttribute');
+      expect(outputEle.getAttribute('class')).to.be.equal('foo');
+      expect(outputEle.getAttribute('id')).to.be.equal('foo-1');
+    });
+    it('add id to svg: as feature.id', function() {
+      var converter = geojson2svg({attributes: {class: 'foo'}});
+      var output = converter.convert({
+        type: 'Feature',
+        id: 'foo-1',
+        geometry: {type:'LineString', coordinates: [[0,0], [1000,1000]]}
+      });
+      var outputEle = jsdom(output).firstChild.children[1].children[0];
+      expect(outputEle).to.respondTo('getAttribute');
+      expect(outputEle.getAttribute('class')).to.be.equal('foo');
+      expect(outputEle.getAttribute('id')).to.be.equal('foo-1');
+    });
+    it('add id to svg: as feature.properties.id', function() {
+      var converter = geojson2svg({attributes: {class: 'foo'}});
+      var output = converter.convert({
+        type: 'Feature',
+        geometry: {type:'LineString', coordinates: [[0,0], [1000,1000]]},
+        properties: {id: 'foo-1', name: 'bar'}
+      });
+      var outputEle = jsdom(output).firstChild.children[1].children[0];
+      expect(outputEle).to.respondTo('getAttribute');
+      expect(outputEle.getAttribute('class')).to.be.equal('foo');
+      expect(outputEle.getAttribute('id')).to.be.equal('foo-1');
+    });
   });
 });