Test 4

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

forked from AlexanderDavidson's block: Test 3

<!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://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.hires.min.js"></script>
  <script src="https://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></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>

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-entity geometry="primitive:plane;height:9;width:16" position="0 5 -16" material="src: #container; side: double" draw-canvas="container">
        <a-entity id="container1" style="position: fixed; width: 80%; max-height: 450px;"></a-entity>
    	</a-entity>

<a-entity geometry="primitive:sphere; radius: 4" position="-6 90 -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-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      <a-light color="#fff" position="0 5 0" type="ambient"></a-light>
    	<a-entity camera look-controls wasd-controls>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
    	</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>

], {
       popupTemplate: function(geo, data) {
         return "<div class='hoverinfo'>It is " + data.name + "</div>";
       }
     });
     </script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://datamaps.github.io/scripts/datamaps.world.min.js?v=1 to a secure url

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://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

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

https://datamaps.github.io/scripts/datamaps.world.min.js?v=1

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

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