From 63993595c51f717200b1d587bf5f75478cf1dc01 Mon Sep 17 00:00:00 2001 From: Gagan Bansal Date: Wed, 12 Aug 2015 05:39:24 -0400 Subject: [PATCH] default svg id from feature's properties --- README.md | 6 ++++- src/instance.js | 3 ++- test/test.js | 65 ++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 61 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 10a459b..c7477ec 100644 --- a/README.md +++ b/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 diff --git a/src/instance.js b/src/instance.js index 42bbbb6..575359e 100644 --- a/src/instance.js +++ b/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) { diff --git a/test/test.js b/test/test.js index 24668cc..d21d732 100644 --- a/test/test.js +++ b/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'); + }); }); });