Skip to content

Instantly share code, notes, and snippets.

View ajzeigert's full-sized avatar
💀
Literally dead

Andy Zeigert ajzeigert

💀
Literally dead
16 followers · 49 following
View GitHub Profile
@ajzeigert
ajzeigert / index.html
Created November 12, 2015 21:21
Data-driven wind bouy markers in Mapbox GL JS
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>METAR stations</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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
@ajzeigert
ajzeigert / index.html
Last active November 5, 2015 21:30
METARmap
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>METAR map</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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
@ajzeigert
ajzeigert / index.html
Created November 5, 2015 20:56
Same as before, but loads a LOT more features
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>GAS PIRATE</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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
@ajzeigert
ajzeigert / index.html
Created November 5, 2015 19:29
Data-driven styling example in Mapbox GL JS
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>GAS PIRATE</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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn-geoweb.s3.amazonaws.com/terraformer/1.0.4/terraformer.min.js"></script>
@ajzeigert
ajzeigert / index.html
Created November 3, 2015 21:28
Basic mapbox gl js map with sorta data-drive styling and interactivity
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>GAS PIRATE</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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- <script src='colorbrewer.js'></script>-->
@ajzeigert
ajzeigert / index.html
Created October 29, 2015 22:56
Mapbox GL map that displays a vector tile layer of taxlots, then queries a REST api to return sales info when a taxlot is clicked
<!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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@ajzeigert
ajzeigert / index.html
Created October 29, 2015 04:27
Simple Mapbox GL example with a custom vector tile
<!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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@ajzeigert
ajzeigert / index.html
Created October 25, 2015 18:41
Basic example of loading geojson using leaflet
<!DOCTYPE html>
<html>
<head>
<title>Pipeline test</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
@ajzeigert
ajzeigert / index.html
Created October 23, 2015 22:52
Experimenting with d3.geo layer on a leaflet map
<!DOCTYPE html>
<html>
<head>
<title>Pipeline test</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
@ajzeigert
ajzeigert / index.html
Created October 23, 2015 21:56
Simple demo of d3 ability to display geojson
<!DOCTYPE html>
<html>
<head>
<title>Pipeline test</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
.pipes {