Skip to content

Instantly share code, notes, and snippets.

View tristen's full-sized avatar

Tristen Brown tristen

323 followers · 28 following
View GitHub Profile
@tristen
tristen / index.html
Created April 15, 2016 20:45
Animate a marker along a route
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@tristen
tristen / index.html
Created April 15, 2016 19:01
Animate along a route
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@tristen
tristen / index.html
Created March 23, 2016 03:45
Swap baselayer with a persistent data layer on top
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
<script src='//d3js.org/d3.v3.min.js' charset='utf-8'></script>
</head>
@tristen
tristen / index.html
Created February 10, 2016 22:43
How many counties share the same name?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@tristen
tristen / index.html
Created February 8, 2016 16:55
Return features after `source.load`
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@tristen
tristen / index.html
Created February 3, 2016 04:35
property 'reload' of undefined
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@tristen
tristen / index.html
Created January 29, 2016 13:19
Filtering with setData (testing popover after filter)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@tristen
tristen / index.html
Created January 28, 2016 22:00
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.13.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v1.0.0/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v1.0.0/mapbox-gl-directions.css' type='text/css' />
<style>
@tristen
tristen / bundle.js
Created January 25, 2016 14:03
!function t(e,r,n){function i(u,s){if(!r[u]){if(!e[u]){var a="function"==typeof require&&require;if(!s&&a)return a(u,!0);if(o)return o(u,!0);var h=new Error("Cannot find module '"+u+"'");throw h.code="MODULE_NOT_FOUND",h}var c=r[u]={exports:{}};e[u][0].call(c.exports,function(t){var r=e[u][1][t];return i(r?r:t)},c,c.exports,t,e,r,n)}return r[u].exports}for(var o="function"==typeof require&&require,u=0;u<n.length;u++)i(n[u]);return i}({1:[function(t,e,r){"use strict";function n(t){_=_.slice(0,l+1);var e=t(_[l]);_.push(e),l++,o()}function i(){c.addSource("geojson",{type:"geojson",data:{type:"FeatureCollection",features:[]}}),c.addLayer({id:"polygon-query-fill",type:"fill",source:"geojson",paint:{"fill-color":"#027dbd","fill-opacity":.1}}),c.addLayer({id:"polygon-query-line",type:"line",source:"geojson",paint:{"line-color":"#027dbd","line-width":3}});var t=c.getCanvas().offsetWidth,e=c.getCanvas().offsetHeight,r=document.getElementById("canvas");r.setAttribute("width",t),r.setAttribute("height",e);var n=new a(r)
@tristen
tristen / bundle.js
Created January 25, 2016 14:01
!function t(e,r,n){function i(u,s){if(!r[u]){if(!e[u]){var a="function"==typeof require&&require;if(!s&&a)return a(u,!0);if(o)return o(u,!0);var h=new Error("Cannot find module '"+u+"'");throw h.code="MODULE_NOT_FOUND",h}var c=r[u]={exports:{}};e[u][0].call(c.exports,function(t){var r=e[u][1][t];return i(r?r:t)},c,c.exports,t,e,r,n)}return r[u].exports}for(var o="function"==typeof require&&require,u=0;u<n.length;u++)i(n[u]);return i}({1:[function(t,e,r){"use strict";function n(t){_=_.slice(0,l+1);var e=t(_[l]);_.push(e),l++,o()}function i(){c.addSource("geojson",{type:"geojson",data:{type:"FeatureCollection",features:[]}}),c.addLayer({id:"polygon-query-fill",type:"fill",source:"geojson",paint:{"fill-color":"#027dbd","fill-opacity":.1}}),c.addLayer({id:"polygon-query-line",type:"line",source:"geojson",paint:{"line-color":"#027dbd","line-width":3}});var t=c.getCanvas().offsetWidth,e=c.getCanvas().offsetHeight,r=document.getElementById("canvas");r.setAttribute("width",t),r.setAttribute("height",e);var n=new a(r)