Method render

modules/core/MapSystem.js:235–282

* render * Accepts a parent selection, and renders the content under it. * (The parent selection is required the first time, but can be inferred on subsequent renders) * @param {d3-selection} $parent - A d3-selection to a HTMLElement that this component should render itself into

($parent = this.$parent)

   * @param {d3-selection} $parent - A d3-selection to a HTMLElement that this component should render itself into
   */
  render($parent = this.$parent) {
    if ($parent instanceof selection) {
      this.$parent = $parent;
    } else {
      return;   // no parent - called too early?
    }

    const context = this.context;
    const gfx = context.systems.gfx;

    // Everything in here runs one time (on enter).
    // The 'main-map' is an absolutely positioned container that fills the space where the map will go.
    const $$mainmap = $parent.selectAll('.main-map')
      .data([0])
      .enter()
      .append('div')
      .attr('class', 'main-map')
      // Suppress the native right-click context menu
      .on('contextmenu', e => e.preventDefault())
      // Suppress swipe-to-navigate browser pages on trackpad/magic mouse – iD#5552
      .on('wheel.map mousewheel.map', e => e.preventDefault());

    // The `supersurface` is a wrapper div that we temporarily transform as the user zooms and pans.
    // This allows us to defer actual rendering until the browser has more time to do it.
    // At regular intervals we reset this root transform and actually redraw the map.
    const $$supersurface = $$mainmap
      .append(() => gfx.supersurface)
      .attr('class', 'supersurface');

    // Content beneath the supersurface may be transformed and will need to rerender sometimes.
    // This includes the Pixi WebGL canvas and the right-click edit menu

    // Historically `surface` was the root of the SVG DOM - Now it's the Pixi WebGL canvas.
    // Things that will not work anymore:
    //  - d3 selecting surface's child stuff
    //  - css classing surface's child stuff
    //  - listening to events on the surface
    $$supersurface
      .append(() => gfx.surface)
      .attr('class', 'surface');

    // The `overlay` is a div that is transformed to cancel out the supersurface.
    // This is a place to put things _not drawn by pixi_ that should stay positioned
    // with the map, like the editmenu.
    $$supersurface
      .append(() => gfx.overlay)
      .attr('class', 'overlay');
  }


  /**