thematic-earth
Version:
HTML-based, whole-Earth thematic maps using locally hosted data layers
2 lines • 32.5 kB
JavaScript
/* Copyright (c) 2023 Read Write Tools. Legal use subject to the Thematic Earth Software License Agreement. */
import*as CB from'../menu/menu-callbacks.js';import*as MapScale from'../projection/map-scale.js';export default{toolbar:{titlebar:'<span style=\'font-weight: 900\'>THEMATIC</span> <span style=\'font-weight: 300\'>EARTH</span>'},panels:[{options:{id:'interaction',titlebar:'Pointer interaction',tooltip:'Mouse gestures for manipulation and interaction'},panelLines:[{lineType:'table',id:'interaction-table',innerHTML:'\n\t\t\t\t<tr><th class=\'chef-center\'>Cursor</th><th class=\'chef-center\'>Keyboard</th><th class=\'chef-center\'>Action</th></tr>\t \n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAYElEQVRYw+2WQQrAIBADk/7/z/HQWy1UsbAsTM5BBzSblTorSU7PuP7gqAYQAAC0BlB1DFHzx7+7oPco9kqr2fZXC6543vzeiNPkTaLHvd6MqMv/AIMIsZSykAAAAF0wAKyaKQpq4jOcAAAAAElFTkSuQmCC\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'>- none -</td>\n\t\t\t\t\t<td class=\'chef-center\'>Hover to discover features and location</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAnUlEQVRYw+2VwQ6AIAxDV8P//3I9GIkSkIGwXdaz0LfROZFQKBQKDYokRYSr7ju8C8Jg5e/DAMwA7raTlMIXte+0nmkClh/wGbJ6wQXO59nZFrJVecu8gMjeWDUcGvMCAkunoGYOQHo53TaG2gFJ1oa7ADCbi11PwK9cmGSgYw7zXVAz91hG+LMLhjOgAXBfx8kqhK3/hHsHAsB9Ck7xMjAzGwQtsgAAAABJRU5ErkJggg==\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Shift</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Identify underlying<br>feature details</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAe0lEQVRYw+1WQQ7AIAiThf9/ubvMi0M3RSXL2qNJa2kATYn4O8Q4wyDvDffGU1MFbR0R+/4Wr8ap6AAzY770TM0jugdogAbCDSwbr88kII7Ky00n2wzk2AGUK7ZbT53JwVnInF5c0dx8jGiABrZBe9bt09odGd/wbzlBnBGZNQ4RBhTBAAAAAElFTkSuQmCC\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Ctrl</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Select underlying<br>features</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFUlEQVRYw91W0RKDMAgznv//y9mD9sbYSlOo5936ZrUlhhDAllt0zxjsd9exZRHwHQsAW7C2D0C6Z9/WLWYOLQFg2XgEQAVEGYDNdQbESg08lwJV8f/LQIWFVQBQOajYKgZmg6wR4aweeiphN9ue/dbsDeyBYdr2CVsNL7teTrNwNCQVOy2IFHtEYzvkwTn3Y6OGZEyT0o4nzsODNMDof+zXvQAozwMBMF8hSDGg6qBnODhfMKOBTdGBaDxIVcENUxCUFH5pwKbBmk8UvFMhVNmAMO0yMwGpzekQcoiIeh/IAcMsAxNVyaxQ17TRqDcYQPcxMNKE2C3zA8nl+x8BM1NReSKqdtFSCp7UQFeIau6XAaje+wLo8I5BQUpGKwAAAABJRU5ErkJggg==\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Reorient point of observation</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACsUlEQVRYw+2XQWsTQRTH/7vT7KyBapOSQHYLpQXrpYHetiS72SB4tbdKD/UD1JNID6aUBRFEv4AehKIg6Em/QUKlIIIiBa2gveihUMk2NjWJcZPnZVs36bZp6W5O/mEOA8O8H+//5s0M8F//RD3G85mZmetEJAcZVOwgIPIdpmkCwLW9vb0GACe0DPioTUQ0MTHxLRqNvgEQC9UCP83Pz78VRXEVQD6MoGKvBYqiXEomk3HG2I/Qi9DVHyJqerOQzWabiqJ8YoxF+mLB3Nzc2tLSUsMLkclkfo+MjHwGEBoELS8vO6qqbjDG7oyOjn4xDKPVDaEoygqAc6EATE1NlQcHB++58wtjY2MPdV2vddthmubjMIpQYIxdrFarD9z5T9u2b21tbb02DKMFAKVSCY7jOPV6nQcFIHgKQALQFgSho9HE4/FoLBZ7qarqlUajUdvc3PxaqVRutlqtIhGRIAgd+5xWAwckgtD0W2Dbdo0xdnV8fPzF7u6uXS6XnwIoBZ6B0x6XQxu5qegLgHs5gYjQFVcIvBMeAy74zPOc84LX2n5d4wCQHxoaegeAUqnUq7B6xVHKJxKJdV3XHcuyKJfLtROJxOoxECLnXDyDA53BVVXdyOVy7WKxeNCwXIj1IyBE1ybpzNE553cBkGVZh65ywzBaw8PDH7oDJZPJJ56X1pk1wDlf0TTtl997wgMRASBJknQ7k8lUTdMMDAAAIpzzBU3TdvwgdF13YrHYewCldDq9vW9VkAAAIMqy/EzTtJofRKFQqM/Ozq566yRogH2IG5qmVegECgNgH+LRUZnoBwAASLIs319cXLR7AYghAbSJ6HytVtvp9++KAVhIpVIfs9ls01tw/bBAkCRpLZ1Ob1uWRb2CBw4wOTkZBbA9PT39nU6ooDMQAXD5BJ/cjvEXdZyYDo2qEJUAAAAASUVORK5CYII=\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Z</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Zoom in / Zoom out</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA7UlEQVRYw9VXWxLFEBTD2BaLZ2G5P3VH9Xi/z1dbIwmpgLGbSykFpRS2kbtaLsInXy6CIl8mIkU+XUQJeYsIWSNCa/16N8aQ369aBWJ3lojZIdOE46Z3lIAUlqA6uJ9rZBljGCVC9JADAGMMPSJkjtzvYK3lpdOeEqG1xgurNGT8kcfaYu2xsJItfnLOHdH/+bGCV2OlLAgTLrQAAB4BPGUBhUvaGVpRuAxRs4eEmCIcYUOuF087NfJPDjSKaCLvitDSzSiHE10FVWoTlcPZvhvKGktq2kfN4PQj2T2H0iOO5UdcTI64mh1xOR1VP15vH3cdOtO+AAAAAElFTkSuQmCC\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>X</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Earth\'s position in space (km)</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA2UlEQVRYw+1XQRLEIAgjTP//5exhOztqW1HB6mE5YxJQiUJEKHZAxsLEPkREyOc8YJT7VGBga7XsL7lHAawCdCJ5kwiVxaHG3jGAg7VzoGXb03YFiMjIS/xMQLLnCBJxIb/DRwKORgAP+WVGIADItQZB1UR0zRTBxrPQkxs71wdz3XeMUwbRW4Go0YZB23T5PMlysnXjHc7O0VnI67djv2uoneeOwbnrR/EWZrTUjvXh0eF1NetR88PXm6QoS30SkePXHo1Bfl7F//8L9voXTBBRJS/nwJLv+QdJO7cIafBehwAAAABJRU5ErkJggg==\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>C</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'> Earth\'s position on viewport (px)</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkElEQVRYw+1VWw7AIAwqxvtfmX3NuEbNtKlmWfm3DygoEggEAoHAl0GSIkJLjXR6CRg2fxYCsG2Am3aSovpO18tG5mhcZP2hYgMtht70gq9Byn10+6VNdt1qQx7PgcHG3CpBbdHeUMmb/kY+0dMFHB1cNRA8GFj6lLLX8WnqFTMlvLxzAFpmLRGcJcBsNP8PF3m/Mg840tlhAAAAAElFTkSuQmCC\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>A</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Set great circle<br>embarkation point</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAeUlEQVRYw+2USw6AQAhDYTL3v3JdmShxiMoIUfv2/JpSEUIIIeTNAICIINKjVR+hgcv3jVQ1bYFVdgBi5l7u14PKIXjI/UKjhp40oz6xgGeNrUcOZ7bEl53qAV9n8xCeMuU50LPkHsUEPfAfD5QrMDLh1CRMiv6PsQCxoCcckE3CggAAAABJRU5ErkJggg==\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>B</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Set great circle<br>destination point</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZUlEQVRYw+2TUQqAMAxDU/F6ntYDvn0JmyA4OjaUvO+RLm0iGWOMMV8GQBIZjW21iUg4b4UiYtoHrrUDus3t1tuTmyNpZEwWXcfpLXjbjMehVXJHh+fseHv4/r/MACvMOwPOQIoCmqgeCqlMOhcAAAAASUVORK5CYII=\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>S</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Inspect thematic earth symbol specifiers</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr><td class=\'chef-center\' style=\'padding-top:4px\'><img src=\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABAElEQVRYw+1Wuw7CMAyMoy4sLVQq6sKAYABV/P93wQ8cS4EQ5WG76VApJ3Wq7bMvjmNjKiq2BACDMQapD8C0BvHNIwnCs+lLkXc54lgiAPZLyXcx8oBtLIlRSz6FyBl+oSQOMXtKxZoD/oyJiJk8HJ8kl40EeGjJfdtPjLmX2Ar8VS8hDymRUsEmnLkEnL6I/rMSOaXg+DZLpHWqgzbRRlnZl9ztt8ytKpeAQwTGdU7CSuSWnjFncNmczAI1jCZWbBCN0kpy1QM4b2cUz0GOvnzcxyhwW07aF7Et8BwPixoIQEtET+549irviOhVYivqFSvZZY3d8M5YSq91fa/YFN4zXXhLKb8COQAAAABJRU5ErkJggg==\' /></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>D</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'>Set place of interest</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd><kbd class=\'chef-kbd\'>X</kbd><kbd class=\'chef-kbd\'>C</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>⬆</kbd><br>North</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd><kbd class=\'chef-kbd\'>X</kbd><kbd class=\'chef-kbd\'>C</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>⬇</kbd><br>South</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd><kbd class=\'chef-kbd\'>X</kbd><kbd class=\'chef-kbd\'>C</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>➡</kbd><br>East</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd><kbd class=\'chef-kbd\'>X</kbd><kbd class=\'chef-kbd\'>C</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>⬅</kbd><br>West</td>\n\t\t\t\t</tr>\n\t\t\t\t\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Z</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>⬆</kbd><br>Zoom in</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Z</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>⬇</kbd><br>Zoom out</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Z</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>0</kbd> - <kbd class=\'chef-kbd\'>9</kbd><br>Zoom presets</td>\n\t\t\t\t</tr>\n\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Z</kbd><kbd class=\'chef-kbd\'>X</kbd><kbd class=\'chef-kbd\'>C</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Home</kbd><br>Reset position</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Page Up</kbd><br>North Pole</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Page Down</kbd><br>South Pole</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>End</kbd><br>Dateline</td>\n\t\t\t\t</tr>\n\t\t\t\t<tr>\n\t\t\t\t\t<td colspan=2 class=\'chef-center\'><kbd class=\'chef-kbd\'>Alt</kbd></td>\n\t\t\t\t\t<td class=\'chef-center\'><kbd class=\'chef-kbd\'>Home</kbd><br>Prime Meridian</td>\n\t\t\t\t</tr>\n\t\t\t\t'}]},{options:{id:'legend',titlebar:'Legend',tooltip:'Key to map symbology'},panelLines:[{lineType:'custom',id:'legend-line',overflowX:'clip',innerHTML:'<canvas id=\'legend-canvas\' width=\'250px\' style=\'margin:0\'></canvas>'}]},{options:{id:'season',titlebar:'Season',tooltip:'Change the reference date'},panelLines:[{lineType:'input',id:'season-dmy-utc',labelText:'Day Month Year',widthInPx:'105px',textAfter:'',tooltip:'Specify a date AD or BC'},{lineType:'dropdown',id:'season-special-day',labelText:'Special days',tooltip:'Equinox and solstice for the year',selections:[{v:'',t:' '},{v:'MarchEquinox',t:'Mar Equinox'},{v:'JuneSolstice',t:'Jun Solstice'},{v:'SeptemberEquinox',t:'Sep Equinox'},{v:'DecemberSolstice',t:'Dec Solstice'}]},{lineType:'slider+input',id:'season-day-of-year',labelText:'Day of year',textAfter:'',minPosition:'1',maxPosition:'366',stepPosition:'1',minValue:'1',maxValue:'366',curve:'linear',tooltip:'Day number, counting from January 1'}]},{options:{id:'time-of-day',titlebar:'Time of day',tooltip:'Change the time of day'},panelLines:[{lineType:'slider+input',id:'time-of-day-hms',widthInPx:'60px',labelText:'HH:MM:SS',textAfter:'UTC',minPosition:'0',maxPosition:'96',stepPosition:'1',minValue:'0',maxValue:'96',curve:'callback',fromUser:CB.fromUserTimeOfDay,toUser:CB.toUserTimeOfDay,fromSlider:CB.fromSliderTimeOfDay,toSlider:CB.toSliderTimeOfDay,tooltip:'UTC time of day (00:00:00 to 23:59:59)'},{lineType:'generic',id:'season-civil-date',innerHTML:'<p style=\'text-align:center\'></p>',heightInPx:'40px'},{lineType:'generic',id:'season-hr',innerHTML:'<hr>',heightInPx:'30px'},{lineType:'dropdown',id:'timezone-offset',labelText:'Timezone',tooltip:'Timezone offsets',selections:[{v:'-12',t:'UTC -12:00'},{v:'-11',t:'UTC -11:00'},{v:'-10',t:'UTC -10:00'},{v:'-9.5',t:'UTC -9:30'},{v:'-9',t:'UTC -9:00'},{v:'-8',t:'UTC -8:00'},{v:'-7',t:'UTC -7:00'},{v:'-6',t:'UTC -6:00'},{v:'-5',t:'UTC -5:00'},{v:'-4',t:'UTC -4:00'},{v:'-3.5',t:'UTC -3:30'},{v:'-3',t:'UTC -3:00'},{v:'-2',t:'UTC -2:00'},{v:'-1',t:'UTC -1:00'},{v:'0',t:'UTC +0:00'},{v:'1',t:'UTC +1:00'},{v:'2',t:'UTC +2:00'},{v:'3',t:'UTC +3:00'},{v:'3.5',t:'UTC +3:30'},{v:'4',t:'UTC +4:00'},{v:'4.5',t:'UTC +4:30'},{v:'5',t:'UTC +5:00'},{v:'5.5',t:'UTC +5:30'},{v:'5.75',t:'UTC +5:45'},{v:'6',t:'UTC +6:00'},{v:'6.5',t:'UTC +6:30'},{v:'7',t:'UTC +7:00'},{v:'8',t:'UTC +8:00'},{v:'8.75',t:'UTC +8:45'},{v:'9',t:'UTC +9:00'},{v:'9.5',t:'UTC +9:30'},{v:'10',t:'UTC +10:00'},{v:'10.5',t:'UTC +10:30'},{v:'11',t:'UTC +11:00'},{v:'12',t:'UTC +12:00'},{v:'13',t:'UTC +13:00'},{v:'13.75',t:'UTC +13:45'},{v:'14',t:'UTC +14:00'}]},{lineType:'generic',id:'timezone-local-time',innerHTML:'<p style=\'text-align:center\'></p>',heightInPx:'60px'}]},{options:{id:'point-of-reference',titlebar:'Point of observation',tooltip:'<Alt> \'n Drag pointer —➤ Reorient point of observation'},panelLines:[{lineType:'dropdown',id:'named-longitude',labelText:'Fixed Longitudes',tooltip:'Fixed longitudes',selections:[{v:'0',t:'Prime Meridian'},{v:'180',t:'Dateline'}]},{lineType:'slider+input',id:'longitude-pov',widthInPx:'60px',labelText:'Degrees',textAfter:'(E / W)',minPosition:'-179',maxPosition:'180',stepPosition:'1',minValue:'-179',maxValue:'180',curve:'callback',toUser:CB.toUserLongitude,fromUser:CB.fromUserLongitude,tooltip:'Angular distance from the Prime Meridian (180.00 E to 179.99 W)'},{lineType:'dropdown',id:'named-latitude',labelText:'Named Latitudes',tooltip:'Named Earth latitudes',selections:[{v:90,t:'North Pole'},{v:66.56,t:'Arctic Circle'},{v:23.44,t:'Tropic of Cancer'},{v:0,t:'Equator'},{v:-23.44,t:'Tropic of Capricorn'},{v:-66.56,t:'Antarctic Circle'},{v:-90,t:'South Pole'}]},{lineType:'slider+input',id:'latitude-pov',widthInPx:'60px',labelText:'Degrees',textAfter:'(N / S)',minPosition:'-90',maxPosition:'90',stepPosition:'1',minValue:'-90',maxValue:'90',curve:'callback',toUser:CB.toUserLatitude,fromUser:CB.fromUserLatitude,tooltip:'Angular distance from the Equator (90.0 N to 90.0 S)'}]},{options:{id:'equation-of-time',titlebar:'Equation of time',tooltip:'The variance between mean solar noon and actual solar noon'},panelLines:[{lineType:'generic',id:'equation-of-time-sunrise-notes',innerHTML:'Angular offset of the Sun, on <b id=equation-of-time-civil-date></b>, from its mean noontime position.',heightInPx:'60px'},{lineType:'generic',id:'equation-of-time-sundial-correction',innerHTML:'Sundial correction: xxx',heightInPx:'40px'}]},{options:{id:'solar-events',titlebar:'Solar events',tooltip:'The time of sunrise, solar noon, and sunset'},panelLines:[{lineType:'generic',id:'solar-events-notes',innerHTML:'Solar events for the selected place of interest [<b id=solar-events-latitude></b>, <b id=solar-events-longitude></b>]',heightInPx:'60px'},{lineType:'generic',id:'solar-events-sunrise',innerHTML:'Sunrise: xxx',heightInPx:'40px'},{lineType:'generic',id:'solar-events-solar-noon',innerHTML:'Solar noon: xxx',heightInPx:'40px'},{lineType:'generic',id:'solar-events-sunset',innerHTML:'Sunset: xxx',heightInPx:'40px'},{lineType:'generic',id:'solar-events-notes2',innerHTML:'* Times shown using <b id=solar-events-timezone></b>',heightInPx:'40px'}]},{options:{id:'geocentric-coords',titlebar:'Geocentric coords',tooltip:'The Earth\'s declination and right ascension for the current date and time'},panelLines:[{lineType:'generic',id:'geocentric-notes',innerHTML:'Position of the Earth in its orbit around the Sun on <b id=geocentric-civil-date></b>.',heightInPx:'60px'},{lineType:'generic',id:'geocentric-declination',innerHTML:'Declination: xxx',heightInPx:'40px'},{lineType:'generic',id:'geocentric-right-ascension',innerHTML:'Right ascension: xxx',heightInPx:'40px'},{lineType:'generic',id:'geocentric-hr',innerHTML:'<hr>',heightInPx:'30px'},{lineType:'generic',id:'geocentric-perihelion',innerHTML:'Perihelion yyyy: xxx',heightInPx:'40px'},{lineType:'generic',id:'geocentric-aphelion',innerHTML:'Aphelion yyyy: xxx',heightInPx:'40px'}]},{options:{id:'topocentric-coords',titlebar:'Topocentric coords',tooltip:'The position of the sun for the current location and time'},panelLines:[{lineType:'generic',id:'topocentric-notes',innerHTML:'Apparent position of the Sun <br>at location [<b id=topocentric-latitude></b>, <b id=topocentric-longitude></b>]<br>local time <b id=topocentric-local-time></b>.',heightInPx:'60px'},{lineType:'generic',id:'topocentric-altitude',innerHTML:'Altitude: xxx',heightInPx:'40px'},{lineType:'generic',id:'topocentric-azimuth',innerHTML:'Azimuth: xxx',heightInPx:'40px'},{lineType:'generic',id:'topocentric-sunrise-hour-angle',innerHTML:'Hour angle: xxx',heightInPx:'40px'},{lineType:'generic',id:'topocentric-solar-phase',innerHTML:'Visibility: xxx',heightInPx:'40px'}]},{options:{id:'map-scale',titlebar:'Map scale',tooltip:'"Z" \'n Drag pointer —➤ Zoom in / Zoom out'},panelLines:[{lineType:'slider+input',id:'meters-per-pixel',widthInPx:'60px',labelText:'Map Scale',textAfter:'meters/px',minPosition:0,maxPosition:MapScale.numStops-1,stepPosition:1,curve:'callback',toUser:MapScale.sliderToMapScale,fromUser:MapScale.mapScaleToSlider,tooltip:'Map scale (in meters per pixel)'}]},{options:{id:'space',titlebar:'Space',tooltip:'"X" \'n Drag pointer —➤ Earth\'s position in space (km)'},panelLines:[{lineType:'slider+input',id:'adjust-km-y',labelText:'Pan South / North',textAfter:'kilometers',minPosition:'-384000',maxPosition:'384000',stepPosition:'1000',minValue:'-384000',maxValue:'384000',curve:'linear',tooltip:'Shift space north or south (km)'},{lineType:'slider+input',id:'adjust-km-x',labelText:'Pan West / East',textAfter:'kilometers',minPosition:'-384000',maxPosition:'384000',stepPosition:'1000',minValue:'-384000',maxValue:'384000',curve:'linear',tooltip:'Shift space east or west (km)'}]},{options:{id:'canvas',titlebar:'Canvas',tooltip:'"C" \'n Drag pointer —➤ Earth\'s position on viewport (px)'},panelLines:[{lineType:'slider+input',id:'adjust-px-y',labelText:'Pan down / up',textAfter:'pixels',minPosition:'-500',maxPosition:'500',stepPosition:'1',minValue:'-500',maxValue:'500',curve:'linear',tooltip:'Shift the canvas origin up or down (px)'},{lineType:'slider+input',id:'adjust-px-x',labelText:'Pan left / right',textAfter:'pixels',minPosition:'-500',maxPosition:'500',stepPosition:'1',minValue:'-500',maxValue:'500',curve:'linear',tooltip:'Shift the canvas origin left or right (px)'}]},{options:{id:'layers',titlebar:'Layers',tooltip:'Choose which layers to display'},panelLines:[{lineType:'table',id:'layers-table',innerHTML:'<style>\n\t\t\t\t\t\t.vertical-cell {\n\t\t\t\t\t\t\tvertical-align: bottom;\n\t\t\t\t\t\t\ttext-align: start;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t.vertical-span {\n\t\t\t\t\t\t\twriting-mode: vertical-lr;\n\t\t\t\t\t\t\ttransform: rotate(180deg);\n\t\t\t\t\t\t\tletter-spacing: 2px;\n\t\t\t\t\t\t\tpadding: 10px 0 10px 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th class=\'vertical-cell\'><span class=\'vertical-span\'>SHOW</span></th>\n\t\t\t\t\t\t\t<th class=\'vertical-cell\'><span class=\'vertical-span\'>LAYER</span></th>\n\t\t\t\t\t\t\t<th class=\'vertical-cell\'><span class=\'vertical-span\'>IDENTIFY</span></th>\n\t\t\t\t\t\t\t<th class=\'vertical-cell\'><span class=\'vertical-span\'>SELECT</span></th>\n\t\t\t\t\t\t\t<th class=\'vertical-cell\'><span class=\'vertical-span\'>LABELS</span></th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody id=\'layers-table-body\'>\n\t\t\t\t\t</tbody>'}]},{options:{id:'locate',titlebar:'Location',tooltip:'Hover pointer —➤ Locate longitude and latitude at pointer position'},panelLines:[{lineType:'generic',id:'locate-position',heightInPx:'52px',overflowY:'hidden'}]},{options:{id:'discover',titlebar:'Feature discovery',tooltip:'Hover pointer —➤ Discover features under pointer position'},panelLines:[{lineType:'table',id:'discover-table',heightInPx:'200px',overflowY:'auto'}]},{options:{id:'identify',titlebar:'Feature identification',tooltip:'<Shift> \'n Click —➤ Identify underlying feature details'},panelLines:[{lineType:'table',id:'identify-table',minHeightInPx:'300px',innerHTML:'<tr><th class=\'chef-center\'><Shift> \'n Click —➤ Identify underlying feature details</th></tr>'}]},{options:{id:'select',titlebar:'Feature selection',tooltip:'<Ctrl> \'n Click —➤ Select underlying features'},panelLines:[{lineType:'table',id:'select-table',minHeightInPx:'300px',innerHTML:'<tbody><tr data-instructions=true><th class=\'chef-center\'><Ctrl> \'n Click —➤ Select underlying features</th></tr></tbody>'}]},{options:{id:'distance',titlebar:'Measure distance',tooltip:'"A" \'n Click —➤ Embarkation "B" \'n Click —➤ Destination'},panelLines:[{lineType:'table',id:'distance-table',minHeightInPx:'200px',innerHTML:'<tbody><tr data-instructions=true><th class=\'chef-center\'>"A" \'n Click —➤ Set embarkation point <br>"B" \'n Click —➤ Set destination point</th></tr></tbody>'}]},{options:{id:'time-lapse',titlebar:'Time lapse',tooltip:'Rotate the Earth'},panelLines:[{lineType:'dropdown',id:'rotation-time-lapse',labelText:'Time lapse',tooltip:'Time lapse between each step',selections:[{v:0,t:'off'},{v:1,t:'every second'},{v:2,t:'every 2 seconds'},{v:5,t:'every 5 seconds'},{v:15,t:'every 15 seconds'},{v:60,t:'every minute'}]},{lineType:'dropdown',id:'rotation-increment',labelText:'Rotation',tooltip:'Longitudinal increment about the Earth\'s axis',selections:[{v:-.25,t:'1/4 degree'},{v:-.5,t:'1/2 degree'},{v:-1,t:'1 degree'},{v:-2,t:'2 degrees'},{v:-5,t:'5 degrees'},{v:-10,t:'10 degrees'},{v:-22.5,t:'22.5 degrees'},{v:-45,t:'45 degrees'},{v:-90,t:'90 degrees'},{v:-180,t:'180 degrees'}]}]},{options:{id:'snapshot',titlebar:'Snapshot',tooltip:'Download map image'},panelLines:[{lineType:'custom',innerHTML:'\n\t\t\t\t\t<div style=\'margin-top:20px\'>\n\t\t\t\t\t\t<label class=\'chef-label\' style=\'width:62px;\'>Filename</label>\n\t\t\t\t\t\t<input id=snapshot-filename type=text class=\'chef-input\' style=\'width:149px; margin-left: 71px;\'/>\n\t\t\t\t\t</div>\n\t\t\t\t',heightInPx:'55px'},{lineType:'custom',innerHTML:'\n\t\t\t\t\t<div style=\'display:flex; justify-content:center; align-items:center;\'>\n\t\t\t\t\t\t<label style=\'padding: 10px;\'>Width</label>\n\t\t\t\t\t\t<input id=snapshot-width type=text style=\'width:44px; padding:2px; line-height: 26px; height: 20px;\'/>\n\t\t\t\t\t\t<label style=\'padding: 10px;\'>Height</label>\n\t\t\t\t\t\t<input id=snapshot-height type=text style=\'width:44px; padding:2px; line-height: 26px; height: 20px;\'/>\n\t\t\t\t\t</div>\n\t\t\t\t',heightInPx:'55px'},{lineType:'custom',innerHTML:'\n\t\t\t\t\t<label class=\'chef-label\'>File type</label>\n\t\t\t\t\t<label for=\'snapshot-png\' style=\'margin-left:120px\'><input type=\'radio\' id=\'snapshot-png\' name=\'snapshop-type\' checked> PNG</label><br>\n\t\t\t\t\t<label for=\'snapshot-jpg\' style=\'margin-left:120px\'><input type=\'radio\' id=\'snapshot-jpg\' name=\'snapshop-type\'> JPG</label>\n\t\t\t\t\t<label for=\'snapshot-webp\' style=\'margin-left:120px\'><input type=\'radio\' id=\'snapshot-webp\' name=\'snapshop-type\'> WEBP</label>\n\t\t\t\t\t',heightInPx:'80px'},{lineType:'button',id:'snapshot-download',buttonText:'Download'}]},{options:{id:'metadata',titlebar:'Metadata',tooltip:'Citation, data sources, software version, and licensing'},panelLines:[{lineType:'generic',id:'metadata-holder',innerHTML:'\n\t\t\t\t\t<div id=\'metadata-map-citation\'></div>\n\t\t\t\t\t<div id=\'metadata-data-sources\'></div>\n\t\t\t\t\t<div id=\'metadata-software\'>\n\t\t\t\t\t\t<h3 class=\'chef-h3\'>Software</h3><p>Thematic Earth, version <span id=\'metadata-software-version\'></span>, Copyright © 2023 Read Write Tools.</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div id=\'metadata-licensing\'>\n\t\t\t\t\t\t<h3 class=\'chef-h3\'>Licensing</h3>\n\t\t\t\t\t\t<p>You must obtain a <a target=\'_blank\' href=\'https://readwritetools.com/licensing.blue\'>Read Write Tools</a> license to use this web component in any eBook, mobile app, desktop application or website.</p><p>Read the full text of the <a target=\'_blank\' href=\'https://hub.readwritetools.com/license/thematic-earth.blue\'>Thematic Earth Software License Agreement</a> for terms and conditions.</p>\n\t\t\t\t\t</div>'}]},{options:{id:'symbol-specifier',titlebar:'Symbol specifiers',tooltip:'"S" \'n Click —➤ Inspect thematic earth symbol specifiers'},panelLines:[{lineType:'custom',id:'ss-style-section',cssText:'display: none;',innerHTML:'\n\t\t\t\t\t<style>\n\t\t\t\t\t\t#ss-id-section,\n\t\t\t\t\t\t#ss-attribute-section,\n\t\t\t\t\t\t#ss-command-section,\n\t\t\t\t\t\t#ss-add-section,\n\t\t\t\t\t\t#ss-export-section,\n\t\t\t\t\t\t#ss-bottom-section { border-bottom: 3px var(--background-color3) solid; }\n\t\t\t\t\t\t\n\t\t\t\t\t\t#ss-id-section p { line-height: 1.4; font-weight: bold; }\n\t\t\t\t\t\t\n\t\t\t\t\t\t#ss-command-section { display:flex; justify-content: center; padding: 10px 5px; }\n\t\t\t\t\t\t#ss-command-section button { height: 24px; width: 24px; margin-left: 10px; }\n\t\t\t\t\t\t#ss-command-section label { display: inline; padding-left: 12px; }\n\n\t\t\t\t\t\t#ss-add-section,\n\t\t\t\t\t\t#ss-export-section { padding: 0 5px; }\n\t\t\t\t\t\t#ss-add-section button { height: 24px; width: 24px; margin-left: 10px; }\n\n\t\t\t\t\t\t#ss-export-section .wrapper{ display: flex; justify-content: start; box-sizing: border-box; width: calc(100% - 20px); max-width: 250px; margin: 0px auto 10px auto; }\n\t\t\t\t\t\t#ss-add-section .wrapper { display: flex; justify-content: space-around; box-sizing: border-box; width: calc(100% - 20px); max-width: 250px; margin: 0px auto 10px auto; }\n\n\t\t\t\t\t\t#ss-add-section label,\n\t\t\t\t\t\t#ss-add-section select,\n\t\t\t\t\t\t#ss-add-section input,\n\t\t\t\t\t\t#ss-export-section select,\n\t\t\t\t\t\t#ss-export-section input { display: block; box-sizing: border-box; width: calc(100% - 20px); max-width: 250px; margin: 0px auto 10px auto; }\n\n\t\t\t\t\t\t#ss-new-attribute-table-wrapper { display: block; max-height: 300px; overflow-y: auto; width: calc(100% - 20px); max-width: 250px; margin: 0 auto 10px auto; border: 1px solid var(--border-color);}\n\t\t\t\t\t\t#ss-new-attribute-table { display: table; table-layout: fixed; box-sizing: border-box; line-height: 26px; background-color: var(--eden); color: var(--pure-white); }\n\n\t\t\t\t\t\t#ss-export-section input[type=radio],\n\t\t\t\t\t\t#ss-export-section input[type=checkbox] { display: inline; width: 16px; margin: 0 10px; }\n\n\t\t\t\t\t\t#ss-add-section label { margin-bottom: 4px; }\n\t\t\t\t\t\t#ss-export-section label { padding-left: 12px; }\n\n\t\t\t\t\t\t#ss-add-section select,\n\t\t\t\t\t\t#ss-add-section input,\n\t\t\t\t\t\t#ss-export-section select,\n\t\t\t\t\t\t#ss-export-section input { background-color: var(--eden); color: var(--pure-white); min-height: 24px; padding: 4px 8px; line-height: 1.8; border: 1px solid var(--border-color); }\n\t\t\t\t\t\t\n\t\t\t\t\t\t#ss-add-section select:focus,\n\t\t\t\t\t\t#ss-add-section input:focus,\n\t\t\t\t\t\t#ss-add-section button:focus,\n\t\t\t\t\t\t#ss-export-section select:focus,\n\t\t\t\t\t\t#ss-export-section input:focus,\n\t\t\t\t\t\t#ss-export-section button:focus,\n\t\t\t\t\t\t#ss-bottom-section select:focus,\n\t\t\t\t\t\t#ss-bottom-section input:focus,\n\t\t\t\t\t\t#ss-bottom-section button:focus { outline-color: #F9E9AE; outline-style: auto; outline-offset: 4px; outline-width: 1px; }\n\t\t\t\t\t\t\n\t\t\t\t\t\t.ss-button {padding: 2px 4px; margin: 0 0 0 30px; height: 24px; width: 28px; color: var(--color); background-color: var(--background-color1); border: 1px solid var(--background-color1); border-radius: 3px; cursor: pointer; }\n\t\t\t\t\t\t.ss-button:hover { background-color: var(--background-color2); border: 1px solid var(--border-color); }\n\t\t\t\t\t\t.ss-button[disabled] { opacity: 0.3; }\n\t\t\t\t\t\t.ss-button:hover[disabled] { border: 1px solid var(--background-color1); }\n\t\t\t\t\t\t.ss-h3 { font-family: var(--font-family); font-weight: 900; font-size: 14px; letter-spacing: 1px; text-align: center; line-height: 24px; margin: 0; padding: 10px; color: var(--color); background-color: var(--background-color3); width: 100%; border-top: 1px dotted var(--pure-white)}\n\t\t\t\t\t\t.exclamation { margin-bottom: -1px; margin-left: 8px; height: 13px; }\n\n\t\t\t\t\t\t#ss-overrides-div { min-height: 300px; }\n\t\t\t\t\t\t.symbol-override hr { border: 2px solid var(--background-color3); margin: 0; width: 100%; }\n\t\t\t\t\t\t.symbol-override dl { margin: 8px; }\n\t\t\t\t\t\t.symbol-override dt { display: table; line-height: 1.4; margin-top: 20px; max-width: 200px; }\n\t\t\t\t\t\t.symbol-override dd { display: flex; align-items: flex-start; margin-left: 0px; margin-bottom: 20px; padding-top: 20px; }\n\t\t\t\t\t\t.symbol-override span { display: inline-block; min-width: 65px; }\n\t\t\t\t\t\t.symbol-override-value { box-sizing: border-box; background-color: var(--eden); color: var(--pure-white); width: 119px; min-height: 24px; padding: 0 4px; line-height: 1.8; margin-left: 20px; border: 1px solid var(--border-color); }\n\t\t\t\t\t\t.symbol-override-value::selection { color: #333; background-color: #F9E9AE; }\n\t\t\t\t\t\t.symbol-override-value option:checked { color: #333; background-color: #F9E9AE; }\n\t\t\t\t\t</style>'},{lineType:'custom',id:'ss-id-section'},{lineType:'custom',id:'ss-attribute-section'},{lineType:'custom',id:'ss-command-section'},{lineType:'custom',id:'ss-add-section'},{lineType:'custom',id:'ss-export-section'},{lineType:'custom',id:'ss-bottom-section',innerHTML:'\n\t\t\t\t\t<div id=\'ss-feature-property-names\' style=\'display:none\'></div>\n\t\t\t\t\t<div id=\'ss-type\' style=\'display:none\'></div>\n\t\t\t\t\t<div id=\'ss-overrides-div\' class=\'symbol-override\'></div>\n\t \t'}]},{options:{id:'signals',titlebar:'Signals',tooltip:'Monitor broadcast and receive software signals'},panelLines:[{lineType:'table',id:'signals-table',innerHTML:'\n\t\t\t\t\t<style>\n\t\t\t\t\t\ttd.column4 {\n\t\t\t\t\t\t\ttext-align: left;\n\t\t\t\t\t\t padding-left: 0.5rem;\n\t\t\t\t\t\t line-height: 1.3;\n\t\t\t\t\t }\n\t\t\t\t </style>\t\t\n\t\t <thead>\n\t\t \t<tr>\n\t\t \t\t<th class=\'chef-center\'>counter</th>\n\t\t \t\t<th class=\'chef-center\'>origin</th>\n\t\t \t\t<th class=\'chef-center\'>request</th>\n\t\t \t\t<th class=\'chef-center\'>broadcaster / payload / receiver</th>\n\t\t \t</tr>\n\t\t <thead>\n\t\t <tbody>\n\t\t </tbody>'},{lineType:'generic',id:'signals-buttons',heightInPx:'150px',innerHTML:'\n\t\t\t\t\t<style>\n\t\t\t\t\t\t.signals-label {\n\t\t\t\t\t\t margin: 0.5rem 1rem;\n\t\t\t\t\t\t display: flex;\n\t\t\t\t\t\t align-items: center;\n\t\t\t\t\t }\n\t\t\t\t </style>\t\t\n\t\t\t\t\t<div style=\'display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;\'>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-menu type=checkbox>menu</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-user type=checkbox>user</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-keyboard type=checkbox>keyboard</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-mouse type=checkbox>mouse</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-gesture type=checkbox>gesture</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-projection type=checkbox>projection</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-earth-position type=checkbox checked>earthPosition</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-layers type=checkbox checked>layers</label>\n\t\t\t\t\t\t<label class=\'signals-label\'><input id=signals-wants-others type=checkbox checked>others</label>\n\t\t\t\t\t</div>'}]}]};