Skip to content

Instantly share code, notes, and snippets.

Dan Vanderkam danvk

Block or report user

Report or block danvk

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
@danvk
danvk / expression.test.ts
Created Oct 28, 2019
TypeScript API for Mapbox GL Style Expressions
View expression.test.ts
import {Expression} from './expression';
describe('Expression', () => {
it('should work with constants', () => {
expect(Expression.parse(0).evaluate(null!)).toEqual(0);
expect(Expression.parse(10).evaluate(null!)).toEqual(10);
});
it('should add', () => {
expect(Expression.parse(['+', 1, 2]).evaluate(null!)).toEqual(3);
});
@danvk
danvk / .gitignore
Last active Oct 4, 2019
Repro of texture issue for MapboxGL and THREE.js
@danvk
danvk / sprite-custom-layer.tsx
Created Oct 1, 2019
Mapbox custom layer which renders multiple models in a THREE.js scene
View sprite-custom-layer.tsx
import MapboxGL, {LngLatLike, MercatorCoordinate} from 'mapbox-gl';
import React, {useEffect, useState} from 'react';
import {withMap} from 'react-mapbox-gl/lib-esm/context';
import {FeatureCollection} from 'geojson';
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
export interface SpritePaint {
gltfPath: string;
@danvk
danvk / dom-errors.ts
Created Sep 25, 2019
Errors surfaced in DOM code (for Effective TypeScript)
View dom-errors.ts
function handleDrag(eDown: Event) {
const targetEl = eDown.currentTarget;
targetEl.classList.add('dragging');
// ~~~~~~~ Object is possibly 'null'.
// ~~~~~~~~~ Property 'classList' does not exist on type 'EventTarget'.
const dragStart = [
eDown.clientX, eDown.clientY
// ~~~~~~~ 'clientX' does not exist on 'Event'.
// ~~~~~~~ 'clientY' does not exist on 'Event'.
];
@danvk
danvk / gql.py
Created Feb 28, 2019
Pretty-print GeoJSON in a slightly more compact way by putting coordinates on one line.
View gql.py
#!/usr/bin/env python3
"""Pretty-print GeoJSON in a slightly more compact way by putting coordinates on one line.
Compare:
[
[
37.23423,
79.23423
],
View example5-inferkeys.tsx
const inferKeys = <V extends {}>() => <K extends string>(x: Record<K,V>): Record<K,V> => x;
const INIT_VIEW = inferKeys<Partial<MapProps>>()({
nyc: {
center: [-73.991284, 40.741263],
zoom: [14.5],
pitch: [45],
bearing: [-17.6],
},
sf: {
View example5-inferpick.ts
const inferPick = <V extends {}>() => <K extends keyof V>(x: Pick<V, K>): Pick<V, K> => x;
const INIT_VIEW = inferPick<MapProps>()({
center: [-73.991284, 40.741263],
zoom: [14.5],
pitch: [45],
bearing: [-17.6],
style: "mapbox://styles/mapbox/streets-v9"
});
View example5-pick.ts
const INIT_VIEW: Pick<MapProps, 'center'|'zoom'|'pitch'|'bearing'|'style'> = {
center: [-73.991284, 40.741263],
zoom: [14.5],
pitch: [45],
bearing: [-17.6],
style: "mapbox://styles/mapbox/streets-v9"
};
View example5-partial.tsx
const INIT_VIEW: Partial<Props> = {
center: [-73.991284, 40.741263],
zoom: [14.5],
pitch: [45],
bearing: [-17.6],
};
export function render(): JSX.Element {
return (
<Map
View example5-props.ts
export interface Props {
 style: string | MapboxGl.Style;
 center?: [number, number];
 zoom?: [number];
 maxBounds?: MapboxGl.LngLatBounds | FitBounds;
 fitBounds?: FitBounds;
 fitBoundsOptions?: FitBoundsOptions;
 bearing?: [number];
 pitch?: [number];
 containerStyle?: React.CSSProperties;
You can’t perform that action at this time.