Convert some element ids to classes to avoid collisions when embedding iD

css/20_map.css

@@ -38,7 +38,7 @@
     pointer-events: none;
 }
 
-.lasso #map {
+.lasso .main-map {
     pointer-events: visibleStroke;
 }
 
@@ -430,4 +430,4 @@ g.vertex.highlighted .shadow {
 .highlight-edited path.line.shadow.geometry-edited,
 .highlight-edited path.area.shadow.geometry-edited {
     stroke: rgb(255, 126, 46);
-}
+}

css/55_cursors.css

@@ -6,7 +6,7 @@
 }
 
 .map-in-map,
-#map {
+.main-map {
     cursor: auto; /* Opera */
     cursor: url(img/cursor-grab.png) 9 9, auto; /* FF */
 }
@@ -54,13 +54,13 @@
     cursor: url(img/cursor-select-remove.png), pointer; /* FF */
 }
 
-.mode-add-preset #map,
-.mode-draw-line #map,
-.mode-draw-area #map,
-.mode-add-line  #map,
-.mode-add-area  #map,
-.mode-drag-node #map,
-.mode-drag-note #map {
+.mode-add-preset .main-map,
+.mode-draw-line .main-map,
+.mode-draw-area .main-map,
+.mode-add-line  .main-map,
+.mode-add-area  .main-map,
+.mode-drag-node .main-map,
+.mode-drag-note .main-map {
     cursor: crosshair; /* Opera */
     cursor: url(img/cursor-draw.png) 9 9, crosshair; /* FF */
 }
@@ -83,13 +83,13 @@
     cursor: url(img/cursor-draw-connect-vertex.png) 9 9, crosshair; /* FF */
 }
 
-.mode-add-point #map,
-.mode-add-note #map,
-.mode-browse.lasso #map,
+.mode-add-point .main-map,
+.mode-add-note .main-map,
+.mode-browse.lasso .main-map,
 .mode-browse.lasso .way,
 .mode-browse.lasso .vertex,
 .mode-browse.lasso .midpoint,
-.mode-select.lasso #map,
+.mode-select.lasso .main-map,
 .mode-select.lasso .way,
 .mode-select.lasso .vertex,
 .mode-select.lasso .midpoint {
@@ -104,4 +104,4 @@
 .turn rect,
 .turn circle {
     cursor: pointer;
-}
+}

css/80_app.css

@@ -3907,7 +3907,7 @@ img.tile-debug {
 
 /* Map
 ------------------------------------------------------- */
-#map {
+.main-map {
     position: relative;
     overflow: hidden;
     height: 100%;

modules/modes/drag_node.js

@@ -445,7 +445,7 @@ export function modeDragNode(context) {
 
     var drag = behaviorDrag()
         .selector('.layer-touch.points .target')
-        .surface(d3_select('#map').node())
+        .surface(d3_select('.main-map').node())
         .origin(origin)
         .on('start', start)
         .on('move', move)

modules/modes/drag_note.js

@@ -107,7 +107,7 @@ export function modeDragNote(context) {
 
     var drag = behaviorDrag()
         .selector('.layer-touch.markers .target.note.new')
-        .surface(d3_select('#map').node())
+        .surface(d3_select('.main-map').node())
         .origin(origin)
         .on('start', start)
         .on('move', move)

modules/svg/geolocate.js

@@ -69,7 +69,7 @@ export function svgGeolocate(projection) {
 
         pointsEnter
             .append('circle')
-            .attr('id', 'geolocate-radius')
+            .attr('class', 'geolocate-radius')
             .attr('dx', '0')
             .attr('dy', '0')
             .attr('fill', 'rgb(15,128,225)')
@@ -88,7 +88,7 @@ export function svgGeolocate(projection) {
         groups.merge(pointsEnter)
             .attr('transform', transform);
 
-        d3_select('#geolocate-radius').attr('r', accuracy(_position.coords.accuracy, geolocation.loc));
+        layer.select('.geolocate-radius').attr('r', accuracy(_position.coords.accuracy, geolocation.loc));
     }
 
     function drawLocation(selection) {

modules/ui/init.js

@@ -115,7 +115,7 @@ export function uiInit(context) {
 
         content
             .append('div')
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .attr('dir', 'ltr')
             .call(map);
 

modules/ui/intro/intro.js

@@ -72,7 +72,7 @@ export function uiIntro(context) {
     let zoom = context.map().zoom();
     let background = context.background().baseLayerSource();
     let overlays = context.background().overlayLayerSources();
-    let opacity = d3_selectAll('#map .layer-background').style('opacity');
+    let opacity = d3_selectAll('.main-map .layer-background').style('opacity');
     let caches = osm && osm.caches();
     let baseEntities = context.history().graph().base().entities;
 
@@ -109,7 +109,7 @@ export function uiIntro(context) {
     });
 
 
-    d3_selectAll('#map .layer-background').style('opacity', 1);
+    d3_selectAll('.main-map .layer-background').style('opacity', 1);
 
     let curtain = uiCurtain();
     selection.call(curtain);
@@ -156,7 +156,7 @@ export function uiIntro(context) {
 
       curtain.remove();
       navwrap.remove();
-      d3_selectAll('#map .layer-background').style('opacity', opacity);
+      d3_selectAll('.main-map .layer-background').style('opacity', opacity);
       d3_selectAll('button.sidebar-toggle').classed('disabled', false);
       if (osm) { osm.toggle(true).reset().caches(caches); }
       context.history().reset().merge(Object.values(baseEntities));

test/spec/behavior/lasso.js

@@ -4,7 +4,7 @@ describe('iD.behaviorLasso', function () {
     beforeEach(function () {
         context = iD.coreContext().init();
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map());
         lasso = iD.behaviorLasso(context);
     });

test/spec/renderer/features.js

@@ -5,7 +5,7 @@ describe('iD.rendererFeatures', function() {
     beforeEach(function() {
         context = iD.coreContext().init();
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map());
         context.map().zoom(16);
         features = iD.rendererFeatures(context);

test/spec/svg/areas.js

@@ -12,7 +12,7 @@ describe('iD.svgAreas', function () {
     beforeEach(function () {
         context = iD.coreContext().init();
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map().centerZoom([0, 0], 17));
         _surface = context.surface();
 

test/spec/svg/data.js

@@ -83,7 +83,7 @@ describe('iD.svgData', function () {
     beforeEach(function () {
         context = iD.coreContext().init();
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map().centerZoom([-74.389286, 40.1502754], 17));
 
         surface = context.surface();

test/spec/svg/lines.js

@@ -11,7 +11,7 @@ describe('iD.svgLines', function () {
     beforeEach(function () {
         context = iD.coreContext().init();
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map().centerZoom([0, 0], 17));
         surface = context.surface();
     });

test/spec/svg/midpoints.js

@@ -18,7 +18,7 @@ describe('iD.svgMidpoints', function () {
         });
 
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map().centerZoom([0, 0], 17));
 
         surface = context.surface();

test/spec/svg/points.js

@@ -8,7 +8,7 @@ describe('iD.svgPoints', function () {
     beforeEach(function () {
         context = iD.coreContext().init();
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map().centerZoom([0, 0], 17));
         surface = context.surface();
     });

test/spec/svg/vertices.js

@@ -10,7 +10,7 @@ describe('iD.svgVertices', function () {
     beforeEach(function () {
         context = iD.coreContext().init();
         d3.select(document.createElement('div'))
-            .attr('id', 'map')
+            .attr('class', 'main-map')
             .call(context.map().centerZoom([0, 0], 17));
         surface = context.surface();
     });