D3 Examples - Earth at Night

Earth at Night

This is a browsable map of NASA's "Earth at Night" data, showing the human-generated light emanating from Earth at night. This is a nice approximation of population density.

Draws from:

Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (ESDIS). Map drawn with Leaflet.js.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Earth at Night</title>
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" /> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.min.js"></script>
    <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map { width: 100%; height: 100%; }
  </style>
</head> 
<body>
  <div id="map"></div>
  <script>
    var map = L.map('map', {attributionControl: false})
      .setView([45.27, 26.98], 4);
​
    // Load the NASA "Earth at Night" tiles.
    // This code is copied from https://leaflet-extras.github.io/leaflet-providers/preview/
    var NASAGIBS_ViirsEarthAtNight2012 = L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}', {
      minZoom: 1,
      maxZoom: 8,
      format: 'jpg',
      time: '',
      tilematrixset: 'GoogleMapsCompatible_Level'
    }); 
    NASAGIBS_ViirsEarthAtNight2012.addTo(map);
    
    map.on("move", function(){
      console.log(map.getCenter());
    });
  </script>
</body>
</html>
    