tristen’s gists

tristen / mapbox-gl.js

Created January 19, 2022 19:47

This file has been truncated, but you can view the full file.

tristen / map.js

Last active August 23, 2020 13:07

	class Map extends React.Component {
	componentDidMount() {
	this.map = new mapboxgl.Map({
	container: this.mapContainer,
	style: 'mapbox://styles/mapbox/streets-v9'
	});
	}

	componentWillUnmount() {
	this.map.remove();

tristen / cool-modal.js

Created September 14, 2017 00:25

tristen / index.html

Created February 24, 2017 18:54

Marker hover style

	<!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 / index.html

Created February 7, 2017 20:53

Remove a marker

	<!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 / index.html

Created December 22, 2016 15:56

Attach Mapbox GL JS controls to arbitrary DOM nodes

	<!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; }

tristen / index.html

Created December 16, 2016 16:53

	<!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;

tristen / index.html

Created December 13, 2016 16:30

underlines

	<!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 / index.html

Created December 8, 2016 15:58

Vertically aligned items in Flexbox

	<!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 / index.html

Created November 8, 2016 22:46

Dynamic template

	<!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'>

	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 Brown tristen