<script src="/assets/world-projects/js/jquery-3.3.1.slim.min.js"></script> <script src="/assets/world-projects/js/d3-array.js"></script> <script src="/assets/world-projects/js/d3-scale.js"></script> <script src="/assets/world-projects/js/globe.gl.js"></script> <div id="globeViz"> <div> <div class="scene-container" style="position: relative; width: 1000px; height: 1030px;"> <div class="scene-nav-info" style="display: none;">Left-click: rotate, Mouse-wheel/middle-click: zoom, Right-click: pan</div> <div class="scene-tooltip" style="top: 638.8px; left: 1527.2px; transform: translate(-80%, 200px);"></div> <canvas data-engine="three.js r163" __spector_context_type="webgl2" width="100" height="500" style=" touch-action: none; width: 80%; height: 50%;" class=""></canvas> <div style="overflow: hidden; position: absolute; top: 0px; pointer-events: none; width: 80%; height: 50%;"> </div> </div> </div> </div> <div class="container-fluid container-padding" hidden> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators" id="carousel_indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox" id="carousel_inner_container"> <div class="item active"> <img src="ny.jpg" alt="New York" width="1200" height="700"> <div class="carousel-caption"> <h3>New York</h3> <p>The atmosphere in New York is lorem ipsum.</p> </div> </div> <div class="item"> <img src="chicago.jpg" alt="Chicago" width="1200" height="700"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago - A night we won't forget.</p> </div> </div> <div class="item"> <img src="la.jpg" alt="Los Angeles" width="1200" height="700"> <div class="carousel-caption"> <h3>LA</h3> <p>Even though the traffic was a mess, we had the best time playing at Venice Beach!</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script> const colorScale = d3.scaleOrdinal([0xffffff, 0xffffff,0xffffff,0xffffff,'mediumblue', 'darkgreen', 'yellow']); const labelsTopOrientation = new Set(['Apollo 12', 'Luna 2', 'Luna 20', 'Luna 21', 'Luna 24', 'LCROSS Probe']); // avoid label collisions const elem = document.getElementById('globeViz'); const world = Globe() .globeImageUrl('/assets/world-projects/textures/earth-blue-marble.jpg') .bumpImageUrl('/assets/world-projects/textures/earth-topology.png') .backgroundImageUrl('/assets/world-projects/textures/night-sky.png') .showGraticules(true) .showAtmosphere(true) .width(parent.innerWidth*0.95) .height(parent.innerHeight*0.8) .labelText('label') .labelSize(1.7) .labelDotRadius(0.95) .labelAltitude(0.005) .labelDotOrientation(d => labelsTopOrientation.has(d.label) ? 'top' : 'bottom') .labelColor(d => colorScale(d.agency)) .labelLabel(d => ` <div class="card flex-row flex-wrap " style=" transform: translate(60%, -50%)" > <div class="card-header border-0"> <img style="max-width:450px; max-height:450px" src=${d.url[0]} alt=""> </div> <div class="card-block px-2"> <p class="card-text">${d.agency} ${d.project} Project</p> <p class="card-text">Completed on ${d.date} </p> <p class="card-text">Description ${d.description} </p> <p class="card-text">Config ${d.power} ${d.energy}</p> </div> <div class="w-200"></div> </div> `) .onLabelHover(function(d){ if (d!=null) {world.controls().autoRotate = false;} if (d==null) {world.controls().autoRotate = true;} } ) .onLabelClick(function(d){ $('#project_name').html(d.label); var carousel_inner_container_html=""; var carousel_indicators_html=""; for (var i in d.url) { if (i==0) { carousel_indicators_html += '<li data-slide-to="0" data-bs-slide-to="0" class="active" data-target="#sNLtbrq2LA" data-bs-target="#sNLtbrq2LA"></li>'; carousel_inner_container_html += '<div class="carousel-item slider-image item active"><div class="item-wrapper"><img class="d-block w-100" src="'+d.url[i]+'" data-slide-to="'+Number(i+1)+'" data-bs-slide-to="'+Number(i+1)+'"><div class="carousel-caption d-none d-md-block"><h5 class="mbr-section-subtitle mbr-fonts-style display-5"><strong>'+ d.bigcaption[i] +'</strong></h5><p class="mbr-section-text mbr-fonts-style display-7">'+ d.smallcaption[i] +'</p></div></div></div>'; } else { carousel_indicators_html += '<li data-slide-to="' +i+ '" data-bs-slide-to="' +i+ '" data-target="#sNLtbrq2LA" data-bs-target="#sNLtbrq2LA"></li>'; carousel_inner_container_html += '<div class="carousel-item slider-image item"><div class="item-wrapper"><img class="d-block w-100" src="'+d.url[i]+'" data-slide-to="'+Number(i-1)+'" data-bs-slide-to="'+Number(i-1)+'"><div class="carousel-caption d-none d-md-block"><h5 class="mbr-section-subtitle mbr-fonts-style display-5"><strong>'+ d.bigcaption[i] +'</strong></h5><p class="mbr-section-text mbr-fonts-style display-7">'+ d.smallcaption[i] +'</p></div></div></div>'; } } console.log(carousel_inner_container_html) $("#carousel_indicators").html(carousel_indicators_html); $("#carousel_inner_container").html(carousel_inner_container_html); return d; }) (elem); // Auto-rotate world.controls().autoRotate = true; world.controls().autoRotateSpeed = 0.1; world.pointOfView({ lat:23, lng:114, altitude:2 }, 1500); fetch('/assets/world-projects/world_projects.json').then(r => r.json()).then(landingSites => { world.labelsData(landingSites); }); window.addEventListener('resize', (event) => { world.width([event.target.innerWidth*.95]); world.height([event.target.innerHeight*.8]) }); </script>