example/world-cities/index.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/aframe"></script>
  <script src="//unpkg.com/@ar-js-org/ar.js"></script>

  <script src="//unpkg.com/globe-ar"></script>
  <!--<script src="../../dist/globe-ar.js"></script>-->
</head>

<body>
<div id="globeViz"></div>

<script>
  fetch('../datasets/ne_110m_populated_places_simple.geojson').then(res => res.json()).then(places => {
    new GlobeAR(document.getElementById('globeViz'))
      .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
      .labelsData(places.features)
      .labelLat(d => d.properties.latitude)
      .labelLng(d => d.properties.longitude)
      .labelText(d => d.properties.name)
      .labelSize(d => Math.sqrt(d.properties.pop_max) * 4e-4)
      .labelDotRadius(d => Math.sqrt(d.properties.pop_max) * 4e-4)
      .labelAltitude(0.01)
      .labelColor(() => 'rgba(255, 165, 0, 0.75)')
      .labelResolution(2);
  });
</script>
</body>