in modules/svg/areas.js [90:210]
function drawAreas(selection, graph, entities, filter) {
var path = svgPath(projection, graph, true);
var areas = {};
var multipolygon;
var base = context.history().base();
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
if (entity.geometry(graph) !== 'area') continue;
multipolygon = osmIsOldMultipolygonOuterMember(entity, graph);
if (multipolygon) {
areas[multipolygon.id] = {
entity: multipolygon.mergeTags(entity.tags),
area: Math.abs(entity.area(graph))
};
} else if (!areas[entity.id]) {
areas[entity.id] = {
entity: entity,
area: Math.abs(entity.area(graph))
};
}
}
var fills = Object.values(areas).filter(function hasPath(a) { return path(a.entity); });
fills.sort(function areaSort(a, b) { return b.area - a.area; });
fills = fills.map(function(a) { return a.entity; });
var strokes = fills.filter(function(area) { return area.type === 'way'; });
var data = {
clip: fills,
shadow: strokes,
stroke: strokes,
fill: fills
};
var clipPaths = context.surface().selectAll('defs').selectAll('.clipPath-osm')
.filter(filter)
.data(data.clip, osmEntity.key);
clipPaths.exit()
.remove();
var clipPathsEnter = clipPaths.enter()
.append('clipPath')
.attr('class', 'clipPath-osm')
.attr('id', function(entity) { return entity.id + '-clippath'; });
clipPathsEnter
.append('path');
clipPaths.merge(clipPathsEnter)
.selectAll('path')
.attr('d', path);
var drawLayer = selection.selectAll('.layer-osm.areas');
var touchLayer = selection.selectAll('.layer-touch.areas');
// Draw areas..
var areagroup = drawLayer
.selectAll('g.areagroup')
.data(['fill', 'shadow', 'stroke']);
areagroup = areagroup.enter()
.append('g')
.attr('class', function(d) { return 'areagroup area-' + d; })
.merge(areagroup);
var paths = areagroup
.selectAll('path')
.filter(filter)
.data(function(layer) { return data[layer]; }, osmEntity.key);
paths.exit()
.remove();
var fillpaths = selection.selectAll('.area-fill path.area').nodes();
var bisect = d3_bisector(function(node) { return -node.__data__.area(graph); }).left;
function sortedByArea(entity) {
if (this._parent.__data__ === 'fill') {
return fillpaths[bisect(fillpaths, -entity.area(graph))];
}
}
paths = paths.enter()
.insert('path', sortedByArea)
.merge(paths)
.each(function(entity) {
var layer = this.parentNode.__data__;
this.setAttribute('class', entity.type + ' area ' + layer + ' ' + entity.id);
if (layer === 'fill') {
this.setAttribute('clip-path', 'url(#' + entity.id + '-clippath)');
this.style.fill = this.style.stroke = getPatternStyle(entity.tags);
}
})
.classed('added', function(d) {
return !base.entities[d.id];
})
.classed('geometry-edited', function(d) {
return graph.entities[d.id] &&
base.entities[d.id] &&
!deepEqual(graph.entities[d.id].nodes, base.entities[d.id].nodes);
})
.classed('retagged', function(d) {
return graph.entities[d.id] &&
base.entities[d.id] &&
!deepEqual(graph.entities[d.id].tags, base.entities[d.id].tags);
})
.call(svgTagClasses())
.attr('d', path);
// Draw touch targets..
touchLayer
.call(drawTargets, graph, data.stroke, filter);
}