Skip to content

Instantly share code, notes, and snippets.

View jkeefe's full-sized avatar

John Keefe jkeefe

222 followers · 12 following
View GitHub Profile
@jkeefe
jkeefe / zoom_fix.js
Last active January 19, 2022 21:50
When a marker is not the center of the map, first zoom in without panning zooms to marker (Mapbox)
let dragged_once = false;
map.on('dragstart', () => {
dragged_once = true;
});
map.on('zoomend', () => {
if (!dragged_once) {
map.easeTo({
center: label_list[0].lngLat,
@jkeefe
jkeefe / note.md
Created January 18, 2022 13:27
Most basic geojson file, plotting a rectangle
@jkeefe
jkeefe / example.js
Last active January 25, 2024 23:12
Adding text to images in Node
const fs = require('fs')
const gm = require('gm').subClass({ imageMagick: '7+' });
WIDTH = 1138
HEIGHT = 50
X = 0
Y = 0
gm('./images/us_at_bottom.png')
.region(WIDTH, HEIGHT, X, Y)
@jkeefe
jkeefe / ffmpeg_pause.sh
Created January 17, 2022 15:57
Add a 2-second stop frame at the end of an animation
# 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
@jkeefe
jkeefe / missing_data.js
Created January 7, 2022 17:00
Have D3 not draw missing data in line charts using line.defined
// rig example, in config.js
const path = line()
.curve(curveMonotoneX)
.x(d => x(d.date))
.y(d => y(d.value))
.defined(d => (d.value !== null) && (d.value !== -999));
// d3 generic example, from: https://bl.ocks.org/EmbraceLife/b8dda609b87a3bab7e952769fd028f53
var line = d3.line()
@jkeefe
jkeefe / raster.js
Created December 23, 2021 19:16
Force raster maps to load as PNGs to preserve transparency
// Force load raster as PNG (Safari will use JPG otherwise) to preserve transparency
map.addSource('noaa_map', {
type: 'raster',
tiles: [
`https://api.mapbox.com/v4/cnndigital.7d5hl52y/{z}/{x}/{y}.png?access_token=${mapboxgl.accessToken}`,
],
});
map.addLayer({
id: 'raster-layer',
@jkeefe
jkeefe / send_height.js
Created December 22, 2021 22:37
Send pym height to pymParent a second later for confidence
// a second later send a confidence height ... just to be sure
setTimeout(() => { pymChild.sendHeight(); }, 1000);
@jkeefe
jkeefe / gist:3344844b4b5dc4db1829149b550cbb54
Last active May 10, 2022 17:27
Add raster layer in Mapbox maps - and preserve transparency in Safari
// 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
jkeefe / names.css
Last active February 16, 2022 19:44
State name text shadows, also in ai2html
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
jkeefe / clear_tiles.js
Created December 6, 2021 20:40
Clear Mapbox tiles from browser storage
// clear tile storage to ensure latest data is shown
// (failure to do this could leave old data in browser for up to 12 hours)
mapboxgl.clearStorage();