function render()

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);

    }