Convert map surface and supersurface from ids to classes

css/80_app.css

@@ -3918,7 +3918,7 @@ img.tile-debug {
     user-select: none;
 }
 
-#supersurface {
+.supersurface {
     transform-origin: 0 0;
     -ms-transform-origin: 0 0;
     -webkit-transform-origin: 0 0;
@@ -3926,7 +3926,7 @@ img.tile-debug {
     -o-transform-origin: 0 0;
 }
 
-#supersurface, .layer {
+.supersurface, .layer {
     position: absolute;
     top: 0;
     left: 0;

modules/behavior/select.js

@@ -111,7 +111,7 @@ export function behaviorSelect(context) {
         if (dist > tolerance) return;
 
         var datum = d3_event.target.__data__ || (_lastMouse && _lastMouse.target.__data__);
-        var isMultiselect = d3_event.shiftKey || d3_select('#surface .lasso').node();
+        var isMultiselect = d3_event.shiftKey || d3_select('.surface .lasso').node();
 
         processClick(datum, isMultiselect);
     }

modules/renderer/map.js

@@ -158,7 +158,7 @@ export function rendererMap(context) {
             .on('dblclick.zoom', null); // override d3-zoom dblclick handling
 
         supersurface = selection.append('div')
-            .attr('id', 'supersurface')
+            .attr('class', 'supersurface')
             .call(utilSetTransform, 0, 0);
 
         // Need a wrapper div because Opera can't cope with an absolutely positioned
@@ -169,8 +169,7 @@ export function rendererMap(context) {
 
         map.surface = surface = wrapper
             .call(drawLayers)
-            .selectAll('.surface')
-            .attr('id', 'surface');
+            .selectAll('.surface');
 
         surface
             .call(drawLabels.observe)

modules/ui/intro/line.js

@@ -217,7 +217,7 @@ export function uiIntroLine(context, reveal) {
 
         context.map().centerEase(tulipRoadIntersection, 500);
 
-        reveal('#surface', t('intro.lines.continue_line'));
+        reveal('.surface', t('intro.lines.continue_line'));
 
         context.on('enter.intro', function(mode) {
             if (mode.id === 'draw-line')
@@ -362,7 +362,7 @@ export function uiIntroLine(context, reveal) {
         context.history().checkpoint('doneAddLine');
 
         timeout(function() {
-            reveal('#surface', t('intro.lines.did_name_road'), {
+            reveal('.surface', t('intro.lines.did_name_road'), {
                 buttonText: t('intro.ok'),
                 buttonCallback: function() { continueTo(updateLine); }
             });

modules/ui/intro/navigation.js

@@ -57,9 +57,9 @@ export function uiIntroNavigation(context, reveal) {
         timeout(function() {
             var centerStart = context.map().center();
 
-            reveal('#surface', t('intro.navigation.drag'));
+            reveal('.surface', t('intro.navigation.drag'));
             context.map().on('drawn.intro', function() {
-                reveal('#surface', t('intro.navigation.drag'), { duration: 0 });
+                reveal('.surface', t('intro.navigation.drag'), { duration: 0 });
             });
 
             context.map().on('move.intro', function() {
@@ -82,7 +82,7 @@ export function uiIntroNavigation(context, reveal) {
     function zoomMap() {
         var zoomStart = context.map().zoom();
 
-        reveal('#surface',
+        reveal('.surface',
             t('intro.navigation.zoom', {
                 plus: icon('#iD-icon-plus', 'pre-text'),
                 minus: icon('#iD-icon-minus', 'pre-text')
@@ -90,7 +90,7 @@ export function uiIntroNavigation(context, reveal) {
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('#surface',
+            reveal('.surface',
                 t('intro.navigation.zoom', {
                     plus: icon('#iD-icon-plus', 'pre-text'),
                     minus: icon('#iD-icon-minus', 'pre-text')
@@ -115,12 +115,12 @@ export function uiIntroNavigation(context, reveal) {
     function features() {
         var onClick = function() { continueTo(pointsLinesAreas); };
 
-        reveal('#surface', t('intro.navigation.features'),
+        reveal('.surface', t('intro.navigation.features'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('#surface', t('intro.navigation.features'),
+            reveal('.surface', t('intro.navigation.features'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });
@@ -134,12 +134,12 @@ export function uiIntroNavigation(context, reveal) {
     function pointsLinesAreas() {
         var onClick = function() { continueTo(nodesWays); };
 
-        reveal('#surface', t('intro.navigation.points_lines_areas'),
+        reveal('.surface', t('intro.navigation.points_lines_areas'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('#surface', t('intro.navigation.points_lines_areas'),
+            reveal('.surface', t('intro.navigation.points_lines_areas'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });
@@ -153,12 +153,12 @@ export function uiIntroNavigation(context, reveal) {
     function nodesWays() {
         var onClick = function() { continueTo(clickTownHall); };
 
-        reveal('#surface', t('intro.navigation.nodes_ways'),
+        reveal('.surface', t('intro.navigation.nodes_ways'),
             { buttonText: t('intro.ok'), buttonCallback: onClick }
         );
 
         context.map().on('drawn.intro', function() {
-            reveal('#surface', t('intro.navigation.nodes_ways'),
+            reveal('.surface', t('intro.navigation.nodes_ways'),
                 { duration: 0, buttonText: t('intro.ok'), buttonCallback: onClick }
             );
         });