in modules/ui/preset_icon.js [213:391]
function render() {
var p = preset.apply(this, arguments);
var isFallback = isSmall() && p.isFallback && p.isFallback();
var geom = geometry ? geometry.apply(this, arguments) : null;
if (geom === 'relation' && p.tags && ((p.tags.type === 'route' && p.tags.route && routeSegements[p.tags.route]) || p.tags.type === 'waterway')) {
geom = 'route';
}
var imageURL = p.imageURL;
var picon = getIcon(p, geom);
var isMaki = picon && /^maki-/.test(picon);
var isTemaki = picon && /^temaki-/.test(picon);
var isFa = picon && /^fa[srb]-/.test(picon);
var isTnp = picon && /^tnp-/.test(picon);
var isiDIcon = picon && !(isMaki || isTemaki || isFa || isTnp);
var isCategory = !p.setTags;
var drawCategoryBorder = isCategory;
var drawPoint = geom === 'point' && (pointMarker || !picon) && !isFallback;
var drawVertex = picon !== null && geom === 'vertex' && (!isSmall() || !isFallback);
var drawLine = picon && geom === 'line' && !isFallback && !isCategory;
var drawArea = picon && geom === 'area' && !isFallback;
var drawRoute = picon && geom === 'route';
var isFramed = (drawCategoryBorder || drawPoint || drawVertex || drawArea || drawLine || drawRoute);
var tags = !isCategory ? p.setTags({}, geom) : {};
for (var k in tags) {
if (tags[k] === '*') {
tags[k] = 'yes';
}
}
var tagClasses = svgTagClasses().getClassesString(tags, '');
var selection = d3_select(this);
var container = selection.selectAll('.preset-icon-container')
.data([0]);
container = container.enter()
.append('div')
.attr('class', 'preset-icon-container ' + sizeClass)
.merge(container);
container.classed('fallback', isFallback);
var categoryBorder = container.selectAll('.preset-icon-category-border')
.data(drawCategoryBorder ? [0] : []);
categoryBorder.exit()
.remove();
var categoryBorderEnter = categoryBorder.enter();
renderCategoryBorder(categoryBorderEnter);
categoryBorder = categoryBorderEnter.merge(categoryBorder);
var pointBorder = container.selectAll('.preset-icon-point-border')
.data(drawPoint ? [0] : []);
pointBorder.exit()
.remove();
var pointBorderEnter = pointBorder.enter();
renderPointBorder(pointBorderEnter);
pointBorder = pointBorderEnter.merge(pointBorder);
var vertexFill = container.selectAll('.preset-icon-fill-vertex')
.data(drawVertex ? [0] : []);
vertexFill.exit()
.remove();
var vertexFillEnter = vertexFill.enter();
renderCircleFill(vertexFillEnter);
vertexFill = vertexFillEnter.merge(vertexFill);
var fill = container.selectAll('.preset-icon-fill-area')
.data(drawArea ? [0] : []);
fill.exit()
.remove();
var fillEnter = fill.enter();
renderSquareFill(fillEnter);
fill = fillEnter.merge(fill);
fill.selectAll('path.stroke')
.attr('class', 'area stroke ' + tagClasses);
fill.selectAll('path.fill')
.attr('class', 'area fill ' + tagClasses);
var line = container.selectAll('.preset-icon-line')
.data(drawLine ? [0] : []);
line.exit()
.remove();
var lineEnter = line.enter();
renderLine(lineEnter);
line = lineEnter.merge(line);
line.selectAll('path.stroke')
.attr('class', 'line stroke ' + tagClasses);
line.selectAll('path.casing')
.attr('class', 'line casing ' + tagClasses);
var route = container.selectAll('.preset-icon-route')
.data(drawRoute ? [0] : []);
route.exit()
.remove();
var routeEnter = route.enter();
renderRoute(routeEnter);
route = routeEnter.merge(route);
if (drawRoute) {
var routeType = p.tags.type === 'waterway' ? 'waterway' : p.tags.route;
var segmentPresetIDs = routeSegements[routeType];
for (var segmentIndex in segmentPresetIDs) {
var segmentPreset = context.presets().item(segmentPresetIDs[segmentIndex]);
var segmentTagClasses = svgTagClasses().getClassesString(segmentPreset.tags, '');
route.selectAll('path.stroke.segment' + segmentIndex)
.attr('class', 'segment' + segmentIndex + ' line stroke ' + segmentTagClasses);
route.selectAll('path.casing.segment' + segmentIndex)
.attr('class', 'segment' + segmentIndex + ' line casing ' + segmentTagClasses);
}
}
var icon = container.selectAll('.preset-icon')
.data(picon ? [0] : []);
icon.exit()
.remove();
icon = icon.enter()
.append('div')
.attr('class', 'preset-icon')
.call(svgIcon(''))
.merge(icon);
icon
.attr('class', 'preset-icon ' + (geom ? geom + '-geom ' : '') + (isCategory ? 'category' : ''))
.classed('framed', isFramed)
.classed('preset-icon-iD', isiDIcon);
icon.selectAll('svg')
.attr('class', function() {
return 'icon ' + picon + ' ' + (!isiDIcon && geom !== 'line' ? '' : tagClasses);
});
icon.selectAll('use')
.attr('href', '#' + picon + (isMaki ? (isSmall() && geom === 'point' ? '-11' : '-15') : ''));
var imageIcon = container.selectAll('img.image-icon')
.data(imageURL ? [0] : []);
imageIcon.exit()
.remove();
imageIcon = imageIcon.enter()
.append('img')
.attr('class', 'image-icon')
.on('load', function() {
container.classed('showing-img', true);
})
.on('error', function() {
container.classed('showing-img', false);
})
.merge(imageIcon);
imageIcon
.attr('src', imageURL);
}