Skip to content

Instantly share code, notes, and snippets.

💭
A gentle lentil

Tristen Brown tristen

💭
A gentle lentil
Block or report user

Report or block tristen

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
View map.js
class Map extends React.Component {
componentDidMount() {
this.map = new mapboxgl.Map({
container: this.mapContainer,
style: 'mapbox://styles/mapbox/streets-v9'
});
}
componentWillUnmount() {
this.map.remove();
View cool-modal.js
import Modal from 'some-react-modal'
export class CoolModal extends React.Component {
render() {
const { title, size, onExit, children } = this.props;
const width = size === 'small' ? '360px' : '600px';
<Modal
onExit={onExit}
enableKeys={true}
closeOnOutsideClick={true}>
@tristen
tristen / index.html
Created Feb 24, 2017
Marker hover style
View index.html
<!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.32.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@tristen
tristen / index.html
Created Feb 7, 2017
Remove a marker
View index.html
<!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.32.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox-assembly/v0.6.0/assembly.min.css' rel='stylesheet'>
<script async defer src='https://api.mapbox.com/mapbox-assembly/v0.6.0/assembly.js'></script>
@tristen
tristen / index.html
Created Dec 22, 2016
Attach Mapbox GL JS controls to arbitrary DOM nodes
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body {
font: 16px sans-serif;
margin: 0;
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Brochure page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href='/dist/assembly.css' rel='stylesheet' />
<style>
body {
font-family:sans-serif;
@tristen
tristen / index.html
Created Dec 8, 2016
Vertically aligned items in Flexbox
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body { margin:0; padding:0; background-color:#eee; }
.bg-grey { background-color:#ccc; }
.align {
@tristen
tristen / index.html
Created Nov 8, 2016
Dynamic template
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<link href='site.css' rel='stylesheet' />
</head>
<body class='clip loading'>
@tristen
tristen / index.html
Created Nov 8, 2016
Filtering in Mapbox GL JS
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<link href='site.css' rel='stylesheet' />
</head>
<body>
You can’t perform that action at this time.