Test 3

forked from pnavarrc's block: Mapping with canvas

forked from anonymous's block: Mapping with canvas

forked from AlexanderDavidson's block: Mapping with canvas v3 -> v4

forked from AlexanderDavidson's block: Mapping with canvas aframe test

forked from AlexanderDavidson's block: Mapping with canvas aframe test 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Zoom and Rotating (Reprojecting)</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.hires.min.js"></script>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script type="text/javascript">
      AFRAME.registerComponent('draw-canvas', {
          schema: {default: ''},
          init: function () {
            var canvas = document.getElementById("map-container");
            var context = canvas.getContext('2d');
//             this.canvas = document.getElementById(this.data);
//             this.ctx = this.canvas.getContext("2d");
            // Draw on canvas...

//  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//  <script type="text/javascript" src="jquery.svg.js"></script>

        });
    </script>
</head>
<body style="background-color:black">

svg {
    background-color: #A7DBD8;
  }

.sphere {
    fill: #A7DBD8;
    stroke: #79A09E;
  }

.land {
    fill: #E0E4CC;
    stroke: #ACAF9F;
    stroke-width: 1;
  }

.graticule {
    fill: none;
    stroke: #79A09E;
    stroke-width: 1;
    stroke-dasharray: 1,2;
  }

.label {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 11px;
    fill: #777;
  }
  </style>

<a-scene>
      <a-assets id="map-container" >
        <canvas id="container" crossorigin="anonymous"></canvas>
      </a-assets>

<a-entity geometry="primitive:plane;height:9;width:16" position="0 5 -16" material="src: #container; side: double" draw-canvas="container"></a-entity>

<a-entity geometry="primitive:sphere; radius: 4" position="-6 0 -14" rotation="0 0 20" material="src: #container; transparent: true" draw-canvas="container"></a-entity>

<a-box position="6 5 -15" depth="5" height="4" width="4" color="tomato"></a-box>
    
      
      <a-camera position="0 1.8 0" cursor-visible="true" cursor-scale="2" cursor-color="#4CC3D9" cursor-offset="2" cursor-maxdistance="100" cursor-opacity="0.5" cursor-fuse="true"></a-camera>
      <a-light color="#fff" position="0 5 0" type="ambient"></a-light>
    	<a-entity camera look-controls wasd-controls></a-entity>
    	<a-entity light="type: point; color: #EEE; intensity: 0.5" position="0 3 0"></a-entity>

<a-sky color="#464b51"></a-sky>
    </a-scene>

// Set the dimensions of the map
    var width  = 1920, // original === 960 x480
        height = 1080,
        speed = 1e-2;

// Create a selection for the container div and append the svg element
    var div = d3.select('#map-container'),
        canvas = div.select('canvas#container'),
        context = canvas.node().getContext("2d");

canvas
      .attr('width', width / 2)
      .attr('height', height / 2.2);

// Create and configure a geographic projection
    var projection = d3.geoEquirectangular()// v3 === d3.geo.orthographic()
//       .scale(height / 2)  // old === .scale(height / 2)
//       .clipAngle(90)
//       .translate([width, height]) // old === ([width / 2, height / 2])
      .precision(0.1);

// Create and configure a path generator
    var pathGenerator = d3.geoPath() // v3 === d3.geo.path()
      .projection(projection)
      .context(context);

// Create and configure the graticule generator (one line every 20 degrees)
    var graticule = d3.geoGraticule();  // v3 === d3.geo.graticule()

// Retrieve the geographic data asynchronously
    d3.json('ne_110m_admin_0_sovereignty.geojson', function(err, data) {

// Throw errors on getting or parsing the file
      if (err) { throw err; }

// Background
      context.fillStyle = '#EF8354';
      context.fillRect(0, 0, 960, 480);

// Rotate the globe
      d3.timer(function(elapsed) {

//         projection.rotate([speed * elapsed, 0, 0]);

// Canvas Drawing
        context.clearRect(0, 0, width, height);

// Sphere
        context.beginPath();
//         pathGenerator({type: 'Plane'});
//         context.strokeStyle = "#EF8354";
//         context.stroke();
//         context.fillStyle = '#BFC0C0';
//         context.fill();

// Graticule
        context.beginPath();
        pathGenerator(graticule());
        context.strokeStyle = "#2D2F31";
        context.stroke();

// Countries
        context.beginPath();
        pathGenerator(data);
        context.fillStyle = "#46494C";
        context.fill();
        context.strokeStyle = "#EF8354";
        context.stroke();
      });
      
      svg

});
  </script>

</body>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.hires.min.js

https://aframe.io/releases/0.5.0/aframe.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js