Rectangular Map

<jscript>

var RectangularMap = NewGraph2D( {
  Id: 'RectMapCanvas',
  Width: '100%',
  Height: '50%',
  DrawFunc: DrawGlobeModel,
  AutoReset: true,
  AutoClear: true,
  AutoScalePix: true
} );

var SplineTension = 0.2;

function DrawGlobeModel( g ) {

  //g.Reset();
  g.SetAngleMeasure( 'deg' );

  var VpScaleArgs = true;
  var VpClip      = false;
  var VpLeft      = 8;
  var VpTop       = 8;
  var VpRight     = -8;
  var VpBottom    = -8;
  g.SetViewport( VpLeft, VpTop, VpRight, VpBottom, VpScaleArgs, VpClip );

  var WinXmin = 0;
  var WinXmax = 360;
  var WinYmin = 180;
  var WinYmax = 0;
  var WinWidth = 360;
  var WinHeight = -180;
  //g.SetWindow( WinXmin, WinYmin, WinXmax, WinYmax );
  g.SetWindowWH( WinXmin, WinYmin, WinWidth, WinHeight );

  var GDeltaX = 15;
  var GDeltaY = 15;
  var GSkipZero = true;
  var GSkipLimit = false;
  g.SetLineAttr( '#ddd', 1 );
  g.Grid( GDeltaX, GDeltaY, GSkipZero, GSkipLimit );

  var Mode = 1;
  g.SetLineAttr( '#ddd', 2 );
  g.Frame( Mode );

  var colors = [ 'red', 'green', 'blue', 'yellow', 'orange', 'magenta' ];
  for (var c = 0; c < EarthMap.ContinentList.length; c++) {
    var continent = EarthMap.ContinentList[c];
    g.SetAreaAttr( colors[c], 'black', 1 );
    for (var l = 0; l < continent.LandList.length; l++) {
      var land = continent.LandList[l];
      g.OpenPath();
      var lmode = 2; // fill
      if (land.SpanPole == '') lmode += 1; // border
      if (land.ClosePath) lmode += 4; // close
      //g.Polygon( land.PolyX, land.PolyY, lmode );
      g.SplineCurve( land.PolyX, land.PolyY, SplineTension, lmode );
      for (var s = 0; s < land.LakeList.length; s++) {
        var lake = land.LakeList[s];
        var mode = 3;
        if (lake.ClosePath) mode += 4;
        //g.Polygon( lake.PolyX, lake.PolyY, mode );
        g.SplineCurve( lake.PolyX, lake.PolyY, SplineTension, mode );
      }
      // handle pole areas 
      if (land.SpanPole == 'S') {
        var last = land.PolyX.length-1;
        g.Line( land.PolyX[last], 180, land.PolyX[0], 180, true );
        g.Path( lmode ); // fill with pole area
        g.OpenPath();
        lmode = 1; // border
        if (land.ClosePath) lmode += 4; // close
        //g.Polygon( land.PolyX, land.PolyY, lmode );
        g.SplineCurve( land.PolyX, land.PolyY, SplineTension, lmode );
      }
      g.Path( lmode );
    }
  }

}
</jscript>

Globe Map

<jscript>

var GlobeModel = {
  HAng: 0,
  VAng: 0,
  Dist: 100,
  Scale: 5,
  Rot: 0,
};

function UpdateAllGlobe() {
  GlobePanels.Update();
  GlobeMap.Redraw();
}

var GlobeMap = NewGraphX3D( {
  Id: 'GlobeMapCanvas',
  Width: '100%',
  Height: '66%',
  DrawFunc: DrawGlobeModel,
  AutoReset: true,
  AutoClear: true,
  AutoScalePix: true
} );

var SplineTension = 0.33;

function DrawGlobeModel( g ) {

  g.SetAngleMeasure( 'deg' );

  var alpha = Math.acos( EarthMap.Radius / GlobeModel.Dist );
  var scale = GlobeModel.Scale * EarthMap.Radius / Math.cos( Math.PI/2 - alpha );
  g.SetCameraScale( scale );
  g.SetCameraView( [0,0,0], GlobeModel.HAng, GlobeModel.VAng, GlobeModel.Dist );

  var VpScaleArgs = true;
  var VpClip      = false;
  var VpLeft      = 8;
  var VpTop       = 8;
  var VpRight     = -8;
  var VpBottom    = -8;
  g.SetViewport( VpLeft, VpTop, VpRight, VpBottom, VpScaleArgs, VpClip );
  g.SetWindowToCameraScreen();
  g.SetCameraClipping( 0.001 );

  EarthMap.SetLandColor( 'Antarctica', '#ddd', '#bbb' );

  g.TransRotateVect3D( [0,0,1], GlobeModel.Rot );
  g.TransRotateVect3D( [1,-1,0], -23.4 );
  g.TransMove3D( -1, -1, 1 );
  EarthMap.Trans = g.Trans3D;
  g.ResetTrans3D();

  var colors = [ 'red', 'green', 'blue', 'yellow', 'orange', 'magenta' ];
  //EarthMap.SetContinentColor( null, colors, 'black' );
  EarthMap.DrawGlobe( g );
  g.SetAreaAttr( 'black', 'black' );
  g.SetAlpha( 0.5 );
  EarthMap.DrawGlobeShadow( g, [1,-1,0], 0 );
  EarthMap.DrawGlobeGrid( g );
  g.SetAlpha( 1 );

  g.TransRotateVect3D( [0,0,1], GlobeModel.Rot + 180 );
  g.TransRotateVect3D( [1,-1,0], 23.4 );
  g.TransMove3D( -1, 1, -1 );
  EarthMap.Trans = g.Trans3D;
  g.ResetTrans3D();

  EarthMap.DrawGlobe( g );
  g.SetAreaAttr( 'black', 'black' );
  g.SetAlpha( 0.5 );
  EarthMap.DrawGlobeShadow( g, [1,-1,0], 0 );
  EarthMap.DrawGlobeGrid( g );
  g.SetAlpha( 1 );
}

var GlobePanels = ControlPanels.NewSliderPanel( { 
  ModelRef: 'GlobeModel',
  NCols: 2, 
  ValuePos: 'left',
  OnModelChange: UpdateAllGlobe, 
  Format: 'fix0', 
  Digits: 1,
  ReadOnly: false, 
  PanelFormat: 'InputShortWidth'
} );

GlobePanels.AddValueSliderField( {
  Name: 'HAng',
  Min: -180,
  Max: 360+180
} );

GlobePanels.AddValueSliderField( {
  Name: 'VAng',
  Min: -89.9,
  Max: 89.9
} );

GlobePanels.AddValueSliderField( {
  Name: 'Dist',
  Digits: 0,
  Min: 1.5,
  Max: 100
} );

GlobePanels.AddValueSliderField( {
  Name: 'Scale',
  Digits: 0,
  Min: 2.2,
  Max: 10
} );

GlobePanels.AddValueSliderField( {
  Name: 'Rot',
  Digits: 0,
  Min: -180,
  Max: 360+180
} );

GlobePanels.Render();

</jscript>

Flat Earth Map

<jscript>

var FlatEarthMap = NewGraph2D( {
  Id: 'FlatEarthCanvas',
  Width: '100%',
  Height: '100%',
  DrawFunc: DrawFlatEarthModel,
  AutoReset: false,
  AutoClear: false,
  AutoScalePix: true
} );

function DrawFlatEarthModel( g ) {

  g.Reset();

  var VpScaleArgs = true;
  var VpClip      = false;
  var VpLeft      = 8;
  var VpTop       = 8;
  var VpRight     = -8;
  var VpBottom    = -8;
  g.SetViewport( VpLeft, VpTop, VpRight, VpBottom, VpScaleArgs, VpClip );

  var WinXmin = -1;
  var WinXmax = 1;
  var WinYmin = -1;
  var WinYmax = 1;
  g.SetWindow( WinXmin, WinYmin, WinXmax, WinYmax );

  EarthMap.Radius = 1;
  EarthMap.SetWaterColor( '#d3e2f5' );
  EarthMap.SetLakeColor( '#d3e2f5', '#8cbe5d' );
  EarthMap.SetContinentColor( null, '#c6dfaf', '#8cbe5d' );
  EarthMap.SetLandColor( 'Antarctica', '#eee', '#ccc' );
  EarthMap.DrawFlatEarth( g );

  g.SetAlpha( 0.3 );
  g.SetLineAttr( 'gray', 1 );
  EarthMap.DrawFlatEarthGrid( g, 15, 15 );
  g.SetLineAttr( 'black', 1 );
  EarthMap.DrawFlatEarthEquator( g );
  EarthMap.DrawFlatEarthBorder( g );
  EarthMap.DrawFlatEarthMeridian( g );
  g.SetAlpha( 1 );

}

</jscript>