diff --git a/modules/svg/defs.js b/modules/svg/defs.js index 7d5df37bd..a13b139b5 100644 --- a/modules/svg/defs.js +++ b/modules/svg/defs.js @@ -8,21 +8,6 @@ import { select as d3_select } from 'd3-selection'; */ export function svgDefs(context) { - function SVGSpriteDefinition(id, href) { - return function(defs) { - d3_request(href) - .mimeType('image/svg+xml') - .response(function(xhr) { return xhr.responseXML; }) - .get(function(err, svg) { - if (err) return; - defs.node().appendChild( - d3_select(svg.documentElement).attr('id', id).node() - ); - }); - }; - } - - return function drawDefs(selection) { var defs = selection.append('defs'); @@ -132,9 +117,31 @@ export function svgDefs(context) { .attr('height', function (d) { return d; }); // symbol spritesheets - defs - .call(SVGSpriteDefinition('iD-sprite', context.imagePath('iD-sprite.svg'))) - .call(SVGSpriteDefinition('maki-sprite', context.imagePath('maki-sprite.svg'))) - .call(SVGSpriteDefinition('community-sprite', context.imagePath('community-sprite.svg'))); + defs.selectAll('.spritesheet') + .data([ + 'iD-sprite', + 'maki-sprite', + 'temaki-sprite', + 'community-sprite' + ]) + .enter() + .append('g') + .attr('class', function (d) { return 'spritesheet spritesheet-' + d; }) + .each(loadSprite); + + + function loadSprite(d) { + var url = context.imagePath(d + '.svg'); + var node = d3_select(this).node(); + d3_request(url) + .mimeType('image/svg+xml') + .response(function(xhr) { return xhr.responseXML; }) + .get(function(err, svg) { + if (err) return; + node.appendChild( + d3_select(svg.documentElement).attr('id', d).node() + ); + }); + } }; } diff --git a/package.json b/package.json index 70f6cdda3..07828584e 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dist:svg:id": "node svg/spriteify.js --svg svg/iD-sprite.src.svg --json svg/iD-sprite.json > dist/img/iD-sprite.svg", "dist:svg:community": "svg-sprite --symbol --symbol-dest . --shape-id-generator \"community-%s\" --symbol-sprite dist/img/community-sprite.svg node_modules/osm-community-index/dist/img/*.svg", "dist:svg:maki": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/maki-sprite.svg node_modules/@mapbox/maki/icons/*.svg", + "dist:svg:temaki": "svg-sprite --symbol --symbol-dest . --shape-id-generator \"temaki-%s\" --symbol-sprite dist/img/temaki-sprite.svg node_modules/temaki/icons/*.svg", "imagery": "node data/update_imagery", "lint": "eslint *.js js/id test/spec modules", "start": "node development_server.js develop", @@ -73,6 +74,7 @@ "sinon-chai": "^3.1.0", "smash": "0.0", "svg-sprite": "1.4.0", + "temaki": "1.0.0", "uglify-js": "~3.4.0", "xml2js": "^0.4.17", "xmlbuilder": "^10.0.0"