I hereby claim:
- I am chriswhong on github.
- I am cwhong (https://keybase.io/cwhong) on keybase.
- I have a public key ASCScIKKKJdJewGrjgHOzYmnx7P7j7d2Bxdxs4E3qVopBQo
To claim this, I am signing this object:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ > | |
<title>Qri Loading Spinner Prototype</title> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<!-- jQuery --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
<!-- Bootstrap 3 --> |
I hereby claim:
To claim this, I am signing this object:
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 https://paintthetown.chriswhong.com
// decrypting Amtrak's real-time train location geoJSON feed | |
// based on https://github.com/Vivalize/Amtrak-Train-Stats | |
const fetch = require('node-fetch'); | |
const CryptoJS = require('crypto-js'); | |
// this is the xhr call done by https://www.amtrak.com/track-your-train.html containing encrypted train location data | |
const dataUrl = 'https://maps.amtrak.com/services/MapDataService/trains/getTrainsData'; | |
// 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] |
$.getJSON('https://home-api.planninglabs.nyc/github/repo-activity', (labsData) => { | |
const yMax = d3.max(labsData, d => d3.max(d.data, e => e.total)); | |
labsData | |
.sort(function(a, b) { | |
if (a.name < b.name) { | |
return -1; | |
} | |
if (a.name > b.name) { | |
return 1; |
// this will only work if window.map === your mapboxgl map instance | |
// we usually set window.map = map in the callback using map.on('style.load', function () { ... }) | |
fetch('https://maputnik-push.planninglabs.nyc/style', { | |
method: 'POST', | |
headers: { | |
Accept: 'application/json', | |
'Content-Type': 'application/json', | |
}, | |
body: JSON.stringify(window.map.getStyle()), |
// based on https://bl.ocks.org/mbostock/3886208 | |
const svg = d3.select('svg'); | |
const margin = { | |
top: 20, right: 20, bottom: 100, left: 40, | |
}; | |
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 |
// 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; |