D3 Examples - Solar Terminator with layers clipping

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8 />
    <title>Solar Terminator with layers clipping</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="L.Terminator.js"></script>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width: 960px; height: 500px; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            stamenUrl = 'https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
            attrib = '&copy; Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            main = L.tileLayer(osmUrl, {maxZoom: 18, attribution: attrib}),
            map = new L.Map('map', {
                layers: [main],
                center: new L.LatLng(0, 0),
                zoom: 1,
                minZoom: 1
            }),
            terminator = L.terminator({
                color: '#666666',
                resolution: 5
            }),
            overlay = L.tileLayer(stamenUrl).addTo(map);
      overlay.getContainer().style.filter = "url(#luminance_mask)";
      overlay.getContainer().style.WebkitFilter = "url(#luminance_mask)";
​
      terminator.addTo(map);
​
      var myIcon = L.icon({
        iconUrl: 'star.svg',
            iconSize: [20, 20],
            iconAnchor: [10, 10],
            popupAnchor: [-3, -76]
        });
​
      map.locate();
      map.on("locationfound", function(e) {
        L.marker(e.latlng, {icon: myIcon}).addTo(map);
      });
​
            setInterval(function() {updateTerminator(terminator)}, 500);
​
            function updateTerminator(t) {
                var t2 = L.terminator({resolution: 5});
                t.setLatLngs(t2.getLatLngs());
                t.redraw();
                clip();
            };     
​
        var svg = d3.select(".leaflet-overlay-pane").select("svg"),
        defs = svg.append("defs"),
        clipMask = defs.append("clipPath").attr("id", "clipMask");
        clipPath = clipMask.append("path")
          .attr("id", "clipPath")
          .attr("d", d3.select(terminator._path).attr("d"))
          .attr('fill', 'white')
          .attr('opacity', 1);
​
        function clip() {
            setTimeout(function() {
                //Get path from Solar terminator plugin
                var pathData = d3.select(terminator._path).attr("d");
              clipPath.attr("d", pathData);
              overlay.getContainer().style.clipPath = 'url(#clipMask)';
            overlay.getContainer().style['-webkit-clip-path'] = 'url(#clipMask)';
            }, 100);
        };
​
    clip();
    map.on('moveend', clip);
    map.on('zoomend', clip);
    </script>
    <svg>
        <defs>
            <filter id="grayscale">
                <feColorMatrix type="saturate" values="0"/>
            </filter>
            <filter id="luminance_mask">
                <feColorMatrix type="luminanceToAlpha"/>
            </filter>
        </defs>
    </svg>
  </body>
  </html>
    