D3 Examples - Mapping with canvas aframe test

xxxxxxxxxx
 
<!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/3.5.6/d3.min.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.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...
            
//             You are confusing SVG canvas with the new HTML5 Canvas.
​
// They are different animals. Please take a look at this article for the differences between Canvas and SVG (there is a "Differences between Canvas and SVG" section): https://www.w3schools.com/html/html5_svg.asp
​
// From your script tags, I can see you are using jQuery SVG:
​
//  <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>
// This page shows an example of using getting and manipulating the SVG Canvas: https://keith-wood.name/svg.html.
//           }
        });
    </script>
</head>
<body>
​
  <style>
  body {
    margin: 0;
  }
  </style>
​
<!--   <div id="map-container">
    <canvas id='container'></canvas>
  </div> -->
  <a-scene>
      <a-assets id="map-container">
        <canvas id="container" crossorigin="anonymous"></canvas>
      </a-assets>
​
      <a-entity geometry="primitive: plane" position="-5 5 -9" material="src: #container" draw-canvas="container"></a-entity>
​
      <a-box position="6 5 -15" depth="5" height="4" width="4" color="tomato"></a-box>
      <!-- Camera with customized cursor -->
      <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="#da47da" 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>
​
      <!-- Sky -->
      <a-sky color="#464b51"></a-sky>
    </a-scene>
​
  <script>
​
    // Set the dimensions of the map
    var width  = 960,
        height = 480,
        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)
      .attr('height', height);
​
    // Create and configure a geographic projection
    var projection = d3.geoMercator()// v3 === d3.geo.orthographic()
      .scale(height / 2)
      .clipAngle(90)
      .translate([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('land.geojson', function(err, data) {
​
      // Throw errors on getting or parsing the file
      if (err) { throw err; }
​
      // Background
      context.fillStyle = '#ddd';
      context.fillRect(0, 0, width, height);
​
      // Rotate the globe
      d3.timer(function(elapsed) {
​
//         projection.rotate([speed * elapsed, 30, 15]);
​
        // Canvas Drawing
        context.clearRect(0, 0, width, height);
​
        // Sphere
        context.beginPath();
        pathGenerator({type: 'Sphere'});
        context.strokeStyle = "#8c8c8c";
        context.stroke();
        context.fillStyle = '#000000';
        context.fill();
​
        // Graticule
        context.beginPath();
        pathGenerator(graticule());
        context.strokeStyle = "#515151";
        context.stroke();
​
        // Countries
        context.beginPath();
        pathGenerator(data);
        context.fillStyle = "#999";
        context.fill();
      });
​
    });
  </script>
​
</body>
</html>
​
    