Skip to content

Instantly share code, notes, and snippets.

Chris Whong chriswhong

Block or report user

Report or block chriswhong

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
chriswhong / index.html
Last active Sep 9, 2019
Qri blob loading spinner prototype
View index.html
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>Qri Loading Spinner Prototype</title>
<script src=""></script>
<!-- jQuery -->
<script src=""></script>
<!-- Bootstrap 3 -->

Keybase proof

I hereby claim:

  • I am chriswhong on github.
  • I am cwhong ( on keybase.
  • I have a public key ASCScIKKKJdJewGrjgHOzYmnx7P7j7d2Bxdxs4E3qVopBQo

To claim this, I am signing this object:

chriswhong /
Last active May 30, 2019
Clickable Markers in MapboxGL

This example shows how to extend mapboxGL's Marker class to add custom functionality on click.


MapboxGL has a very convenient Marker class that can be used to quickly get markers on the map with a few lines of code (versus the more complex method of adding sources and layers). They behave a bit differently from the rest of the map features because they are actually HTML elements overlaid on the map canvas.

The stock markers are great, and they are SVG so you can color them by passing in a color option! However, the only interactivity you can easily set up is a popup. When you google 'clickable markers', the examples you find are all using symbol layers with queryRenderedFeatures.

I wanted to trigger navigation in a single page app using the stock Markers and determined a simple extension of the class would help me accomplish this. You can also see these markers in action at

chriswhong / scrape.js
Created Apr 22, 2019
Decrypting Amtrak's real-time train location geoJSON feed
View scrape.js
// decrypting Amtrak's real-time train location geoJSON feed
// based on
const fetch = require('node-fetch');
const CryptoJS = require('crypto-js');
// this is the xhr call done by containing encrypted train location data
const dataUrl = '';
// these constants are pulled from RoutesList.v.json, which is an object with keys 'arr', 's', and 'v'
const sValue = '9a3686ac'; // found at s[8]
chriswhong / Maputnik.png
Last active Feb 7, 2019
Custom buffersize param on carto maps api tile instantiation
chriswhong / sparklines.js
Last active Dec 3, 2018
Creating weekly commit sparklines using JQuery and D3.js
View sparklines.js
$.getJSON('', (labsData) => {
const yMax = d3.max(labsData, d => d3.max(, e =>;
.sort(function(a, b) {
if ( < {
return -1;
if ( > {
return 1;
chriswhong / maputnik-push.js
Last active Feb 13, 2019
Push any mapboxGL map style to maputnik using planning labs' maputnik-push service
View maputnik-push.js
// this will only work if === your mapboxgl map instance
// we usually set = map in the callback using map.on('style.load', function () { ... })
fetch('', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
body: JSON.stringify(,
chriswhong / chart.js
Last active Jul 27, 2018
A D3 Stacked Bar Chart showing NYC Planning Labs' Weekly Commits on Major Projects between July 2017 and July 2018
View chart.js
// based on
const svg ='svg');
const margin = {
top: 20, right: 20, bottom: 100, left: 40,
chriswhong / gist:11e2b2d68505e239f89f46e36aaa03d2
Created Jul 20, 2018
Convenience Redirect in express.js. Build URLs using a known unique id
View gist:11e2b2d68505e239f89f46e36aaa03d2
const express = require('express');
const router = express.Router();
router.get('/:ulurpnumber', async (req, res) => {
const { app, params } = req;
const { ulurpnumber } = params;
// find projectid for this ceqrnumber
// http://localhost:3000/projects/ulurp/170358ZMM
chriswhong / downloadroute.js
Created Jul 10, 2018
Streaming from ps-promise to json2csv to express response
View downloadroute.js
// This code queries postgresql and streams the results into a csv
// Works like a charm for a download button, no hangup for large files!
const Json2csvTransform = require('json2csv').Transform;
const QueryStream = require('pg-query-stream');
const JSONStream = require('JSONStream');
router.get('/download.csv', async (req, res) => {
const { query } = req;
You can’t perform that action at this time.