jkeefe

// based on: https://stackoverflow.com/a/67136959

const niceRounder = (number) => {

    let near = 1
    if (number > 100) near = 10
    if (number > 1000) near = 100
    if (number > 10000) near = 1000

    if (number % near === 0) return number;

jkeefe

[{"name":"Alabama","nyt":"Ala.","postal":"AL"},
{"name":"Alaska","nyt":"Alaska","postal":"AK"},
{"name":"Arizona","nyt":"Ariz.","postal":"AZ"},
{"name":"Arkansas","nyt":"Ark.","postal":"AR"},
{"name":"California","nyt":"Calif.","postal":"CA"},
{"name":"Colorado","nyt":"Colo.","postal":"CO"},
{"name":"Connecticut","nyt":"Conn.","postal":"CT"},
{"name":"Delaware","nyt":"Del.","postal":"DE"},
{"name":"District of Columbia","nyt":"D.C.","postal":"DC"},
{"name":"Florida","nyt":"Fla.","postal":"FL"},

jkeefe

      // Force mapbox-gl to load raster tiles as PNGs to preserve transparency.
      // (Safari will use JPGs otherwise, and 'transparent' areas will show up black.) 
      // For more troubleshooting, see: https://docs.mapbox.com/help/troubleshooting/raster-transparency-issues/
      
      map.addSource('noaa_map', {
        type: 'raster',
        tiles: [
          `https://api.mapbox.com/v4/TILESET_ID.ABCDEFG/{z}/{x}/{y}.png?access_token=${mapboxgl.accessToken}`,
        ],
      });

jkeefe

const dayjs = require('dayjs')
const customParseFormat = require('dayjs/plugin/customParseFormat')
dayjs.extend(customParseFormat)



const reading_date = dayjs(reading.t, 'M/D/YYYY HH:mm:ss A')

// is the month of adding a day the same as the month of adding a month?
if ( reading_date.add(1, 'day').get('month') == reading_date.add(1, 'month').get('month') ){

jkeefe

// nifty trick to bring in json files using require in a module
import { createRequire } from "module"; // Bring in the ability to create the 'require' method
const require = createRequire(import.meta.url); // construct the require method
const trainData = require('./src/data/latest.json')

jkeefe

// update height, sending an extra 20 pixels to be safe
const mainElementHeight = (document.getElementsByTagName('body')[0].offsetHeight + 20).toString();
pymChild.sendMessage('height', mainElementHeight);

//// may need to add this:
// instantiate pym object
window.pymChild = new Child();

// or, for cnn rig, inside your draw function:
pymChild.sendMessage('height', initialHeight);

jkeefe

text-shadow: 2px 2px 4px #ffffff, -2px -2px 4px #fff, -2px 2px 4px #fff, 2px -2px 4px #fff

/* ai2html ... for gray backgrounds 
  1. In Illustrator move the "names" component to a new layer called "state-names"
  2. Add the below to the ai2html css block
*/

.g-state-names {
text-shadow: 2px 2px 4px #e6e6e6, -2px -2px 4px #e6e6e6, -2px 2px 4px #e6e6e6, 2px -2px 4px #e6e6e6
}

jkeefe

let dragged_once = false;

map.on('dragstart', () => {
  dragged_once = true;
});

map.on('zoomend', () => {
  if (!dragged_once) {
    map.easeTo({
      center: label_list[0].lngLat,

jkeefe

From https://stackoverflow.com/questions/64765846/mapbox-rectangle-line-from-bounds-from-two-points

jkeefe

# adds 2-second pause at end
# from https://stackoverflow.com/questions/43414641/repeat-last-frame-in-video-using-ffmpeg

ffmpeg -i in.mp4 -vf tpad=stop_mode=clone:stop_duration=2 out.mp4