';
-
- // Show layer type
- html += `
Layer: ${layerType.toUpperCase()}
`;
-
- // Only show status for diff layer
- if (layerType === 'diff') {
- html += `
Status: ${isRemoved ? 'Removed' : 'Added/Modified'}
`;
- }
-
- // Display all non-null properties with custom ordering
- const displayProps = Object.entries(props)
- .filter(([key, value]) => value !== null && value !== undefined && key !== 'removed')
- .sort(([a], [b]) => {
- // Priority order: address fields first, then name/highway, then alphabetical
- const priorityOrder = {
- 'addr:housenumber': 0,
- 'addr:street': 1,
- 'addr:unit': 2,
- 'addr:city': 3,
- 'addr:postcode': 4,
- 'addr:state': 5,
- 'name': 10,
- 'highway': 11
- };
- const aPriority = priorityOrder[a] ?? 999;
- const bPriority = priorityOrder[b] ?? 999;
-
- if (aPriority !== bPriority) {
- return aPriority - bPriority;
+ // Restore original style
+ const isPoint = feature.geometry.type === 'Point';
+ if (isPoint) {
+ const markerStyleFunc = layerType === 'diff' ? diffMarkerStyle :
+ layerType === 'osm' ? osmMarkerStyle : countyMarkerStyle;
+ layer.setStyle(markerStyleFunc(feature));
+ } else {
+ const styleFunc = layerType === 'diff' ? diffStyle :
+ layerType === 'osm' ? osmStyle : countyStyle;
+ layer.setStyle(styleFunc(feature));
}
- return a.localeCompare(b);
- });
+ } else {
+ // Add to selection
+ selectedFeatures.push(feature);
+ selectedLayers.push({ layer: layer, type: layerType });
- if (displayProps.length > 0) {
- html += '
';
- for (const [key, value] of displayProps) {
- html += `
${key}: ${value}
`;
- }
- html += '
';
- }
-
- // Only show accept/reject for diff layer
- if (layerType === 'diff') {
- if (isAccepted) {
- html += '
✓ Accepted
';
- } else if (isRejected) {
- html += '
✗ Rejected
';
+ // Highlight
+ const isPoint = feature.geometry.type === 'Point';
+ if (isPoint) {
+ layer.setStyle({
+ radius: 9,
+ fillColor: '#ffc107',
+ color: '#ff9800',
+ weight: 2,
+ opacity: 1,
+ fillOpacity: 1
+ });
+ } else {
+ layer.setStyle({
+ weight: 6,
+ opacity: 1,
+ color: '#ffc107'
+ });
+ }
}
- html += '
';
- html += '';
- html += '';
- html += '
';
- }
+ // Update popup with current selection
+ if (selectedFeatures.length > 0) {
+ showMultiFeaturePopup(e.latlng);
+ } else {
+ clearSelection();
+ }
+ } else {
+ // Regular click - replace selection
+ clearSelection();
- html += '
';
+
+ // Show count
+ html += `
Selected: ${selectedFeatures.length} feature${selectedFeatures.length > 1 ? 's' : ''}
`;
+
+ // Aggregate properties JOSM-style
+ const allKeys = new Set();
+ selectedFeatures.forEach(feature => {
+ Object.keys(feature.properties || {}).forEach(key => {
+ if (key !== 'removed') allKeys.add(key);
+ });
+ });
+
+ // Priority order for display
+ const priorityOrder = {
+ 'addr:housenumber': 0,
+ 'addr:street': 1,
+ 'addr:unit': 2,
+ 'addr:city': 3,
+ 'addr:postcode': 4,
+ 'addr:state': 5,
+ 'name': 10,
+ 'highway': 11
+ };
+
+ const sortedKeys = Array.from(allKeys).sort((a, b) => {
+ const aPriority = priorityOrder[a] ?? 999;
+ const bPriority = priorityOrder[b] ?? 999;
+ if (aPriority !== bPriority) {
+ return aPriority - bPriority;
+ }
+ return a.localeCompare(b);
+ });
+
+ // For each property, check if all values are the same
+ html += '
';
+ for (const key of sortedKeys) {
+ const values = selectedFeatures
+ .map(f => f.properties[key])
+ .filter(v => v !== null && v !== undefined);
+
+ if (values.length === 0) continue;
+
+ const uniqueValues = [...new Set(values.map(v => String(v)))];
+
+ let displayValue;
+ if (uniqueValues.length === 1) {
+ // All values are the same
+ displayValue = uniqueValues[0];
+ } else {
+ // Different values
+ displayValue = `<${uniqueValues.length} different values>`;
+ }
+
+ html += `
${key}: ${displayValue}
`;
+ }
+ html += '
';
+
+ // Show layer types if mixed
+ const layerTypes = selectedLayers.map(l => l.type);
+ const uniqueLayerTypes = [...new Set(layerTypes)];
+ if (uniqueLayerTypes.length > 1) {
+ html += `
Layers: ${uniqueLayerTypes.join(', ')}
`;
+ } else {
+ html += `
Layer: ${uniqueLayerTypes[0].toUpperCase()}
`;
+ }
+
+ // Show status (Added/Removed) for diff layer features
+ const hasDiffFeatures = selectedLayers.some(l => l.type === 'diff');
+ if (hasDiffFeatures) {
+ const addedCount = selectedFeatures.filter(f => !f.properties || f.properties.removed !== true && f.properties.removed !== 'True').length;
+ const removedCount = selectedFeatures.filter(f => f.properties && (f.properties.removed === true || f.properties.removed === 'True')).length;
+
+ if (selectedFeatures.length === 1) {
+ // Single selection - show specific status
+ const isRemoved = selectedFeatures[0].properties && (selectedFeatures[0].properties.removed === true || selectedFeatures[0].properties.removed === 'True');
+ html += `
Status: ${isRemoved ? 'Removed (Red)' : 'Added (Green)'}
`;
+ } else if (addedCount > 0 && removedCount > 0) {
+ // Mixed selection
+ html += `
Status: ${addedCount} added, ${removedCount} removed
`;
+ } else if (addedCount > 0) {
+ html += `
Status: All Added (Green)
`;
+ } else if (removedCount > 0) {
+ html += `
Status: All Removed (Red)
`;
+ }
+ }
+
+ // Show accept/reject status if any are from diff layer
+ if (hasDiffFeatures) {
+ const acceptedCount = selectedFeatures.filter(f => acceptedFeatures.has(f)).length;
+ const rejectedCount = selectedFeatures.filter(f => rejectedFeatures.has(f)).length;
+
+ if (acceptedCount > 0 || rejectedCount > 0) {
+ html += '
';
+ if (acceptedCount > 0) html += `
✓ ${acceptedCount} accepted
`;
+ if (rejectedCount > 0) html += `
✗ ${rejectedCount} rejected
`;
+ html += '
';
+ }
+
+ // Show accept/reject buttons only if all selected features are from diff layer
+ const allDiff = selectedLayers.every(l => l.type === 'diff');
+ if (allDiff) {
+ const buttonText = selectedFeatures.length === 1 ? '' : ' All';
+ html += '
';
+ html += ``;
+ html += ``;
+ html += '
';
+ }
+ }
+
+ html += '