Databases
StackOverflow2013
Postsdbo
POCalculating an overlay of day/night for Google Maps
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCalculating an overlay of day/night for Google Maps
    primarykey
    data
    text
    <p>I am trying to find a way to create an overlay for Google Maps API V3 that shows the sunlit areas of the world. This is the basic result I am looking for:</p> <p><a href="http://www.daylightmap.com/index.php" rel="nofollow">http://www.daylightmap.com/index.php</a></p> <p>But want more control over the appearance (ideally just a 10% black overlay with no city lights). I can draw the shape in a canvas element but can not figure out how to calculate the shape based on earth's tilt and rotation etc.</p> <p>Any help would be appreciated.</p> <p><strong>EDIT: Javascript</strong></p> <p><em>I still don't know where to implement the y-offset variable below. I also need to figure out how to adjust/stretch the y-offset from this (equal distant latitudinal lines) to mercator (closer at poles).</em></p> <pre><code>// Get the canvas element var ctx = document.getElementById('canvas').getContext('2d'); ctx.clearRect( 0, 0, 800, 620 ); // Current time var map_width = $("#canvas").width(); var map_height = $("#canvas").height(); var now = new Date(); var cur_hour = now.getHours(); var cur_min = now.getMinutes(); var cur_sec = now.getSeconds(); var cur_jul = now.julianDate() - 1; var equinox_jul = new Date(now.getFullYear(),2,20,24,-now.getTimezoneOffset(),0,0).julianDate() - 1; var offset_x = Math.round(((cur_hour*3600 + cur_min*60 + cur_sec)/86400) * map_width); // Resulting offset X var offset_sin = ((365.25 - equinox_jul + cur_jul)%365.25)/365.25; // Day offset, mapped on the equinox offset var offset_sin_factor = Math.sin(offset_sin * 2 * Math.PI); // Sine wave offset var offset_y = offset_sin_factor * 23.44; // Map onto angle. Maximum angle is 23.44° in both directions var degrees_per_radian = 180.0 / Math.PI; var offset_y_mercator = Math.atan( offset_y.sinh() ) * degrees_per_radian; // Global wave variables var period = 1 / 6.28291; // Original value 2Pi: 6.28291 var amplitude = (map_height/2); // Draw vertical lines: One for each horizontal pixel on the map for( var x = 0; x &lt;= map_width; x++ ) { ctx.beginPath(); // Start at the bottom of the map ctx.moveTo(x,map_height); // Get the y value for the x pixel on the sine wave var y = (map_height/2) - (Math.sin( (offset_x / map_width) / period ) * amplitude); offset_x++; // Draw the line up to the point on the sine wave ctx.lineTo(x,y); ctx.stroke(); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJoe Doyle
    1. USRANGER
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCalculating an overlay of day/night for Google Maps
      1. USRANGER
      1. VTBountyStart
    2. VO
      singulars
      1. POCalculating an overlay of day/night for Google Maps
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCalculating an overlay of day/night for Google Maps
      1. UScevel
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload