Pessimistress’s gists

Pessimistress / index.html

Last active March 25, 2022 02:32

MSAGL

	<html>

	<head>
	<title>MSAGL</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	margin: 0;
	overflow: hidden;

Pessimistress / index.html

Last active May 6, 2019 20:11

Google Maps example: Trees in Paris

	<html>
	<head>
	<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaoLdV31Y5ls8ABBpuAQt9t8RzMDfOMiM&libraries=visualization&v=3.34"></script>
	<script src="https://d3js.org/d3.v5.min.js"></script>

	<style type="text/css">
	body {margin: 0; padding: 0; overflow: hidden;}
	#container {width: 100vw; height: 100vh;}
	#tooltip {position: absolute; z-index: 1; background: #000; color: #fff; font-family: sans-serif; font-size: 11px; padding: 4px; padding: 8px; pointer-events: none;}

Pessimistress / index.html

Last active April 26, 2019 01:35

deck.gl GoogleMapsOverlay Code Sample

	<html>
	<head>
	<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=<google_maps_api_key>&libraries=visualization&v=3.34"></script>

	<style type="text/css">
	body {margin: 0; padding: 0;}
	#container {width: 100vw; height: 100vh;}
	</style>
	</head>

Pessimistress / index.html

Last active June 18, 2019 21:42

deck.gl GoogleMapOverlay example

	<html>
	<head>
	<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaoLdV31Y5ls8ABBpuAQt9t8RzMDfOMiM&libraries=visualization&v=3.34"></script>

	<style type="text/css">
	body {margin: 0; padding: 0; overflow: hidden;}
	#container {width: 100vw; height: 100vh;}
	#tooltip {position: absolute; z-index: 1; background: #000; color: #fff; font-family: sans-serif; font-size: 11px; padding: 4px; padding: 8px; pointer-events: none;}
	</style>

Pessimistress / index.html

Created March 22, 2019 18:52

Mapbox iframe bug

	<!DOCTYPE html>
	<html>
	<body>
	<iframe></iframe>
	<script>
	var content = unescape(`%3C%21DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cscript%20src%3D%27https%3A//api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js%27%3E%3C/script%3E%0A%3Clink%20href%3D%27https%3A//api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css%27%20rel%3D%27stylesheet%27%20/%3E%0A%3C/head%3E%0A%3Cbody%3E%0A%3Cdiv%20id%3D%27map%27%3E%3C/div%3E%0A%3Cscript%3E%0Amapboxgl.accessToken%20%3D%20%27%3Cyour%20access%20token%20here%3E%27%3B%0Avar%20map%20%3D%20new%20mapboxgl.Map%28%7B%0Acontainer%3A%20%27map%27%2C%20//%20container%20id%0Astyle%3A%20%27mapbox%3A//styles/mapbox/streets-v11%27%2C%20//%20stylesheet%20location%0Acenter%3A%20%5B-74.50%2C%2040%5D%2C%20//%20starting%20position%20%5Blng%2C%20lat%5D%0Azoom%3A%209%20//%20starting%20zoom%0A%7D%29%3B%0A%3C/script%3E%0A%3C/body%3E%0A%3C/html%3E`);
	var blob = new Blob([content], {type: 'text/html'});
	document.querySelector('iframe').src = URL.createObjectURL(

Pessimistress / app.js

Created October 8, 2018 03:40

deck.gl + Mapbox: Get Started (React)

	import React from 'react';
	import DeckGL, {ScatterplotLayer} from 'deck.gl';
	import {StaticMap} from 'react-map-gl';

	import {MapboxLayer} from '@deck.gl/mapbox';

	const INITIAL_VIEW_STATE = {
	longitude: -74.50,
	latitude: 40,
	zoom: 9

Pessimistress / map.js

Created October 8, 2018 03:36

deck.gl + Mapbox: Get Started

	import {ScatterplotLayer} from '@deck.gl/layers';
	import {MapboxLayer} from '@deck.gl/mapbox';
	import mapboxgl from 'mapbox-gl';

	// Get a mapbox API access token
	mapboxgl.accessToken = '<your access token here>';

	// Initialize mapbox map
	const map = new mapboxgl.Map({
	container: 'map',

Pessimistress / index.html

Last active October 30, 2018 19:44

deck.gl + Mapbox: Get Started (Demo)

	<html>
	<head>
	<title>deck.gl + Mapbox Integration</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
	<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
	</head>
	<body>
	<div id="map" style="width: 100vw; height: 100vh"></div>

Pessimistress / index.html

Last active October 30, 2018 19:44

deck.gl + Mapbox HexagonLayer Example

	<html>
	<head>
	<title>Road Accidents in UK</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
	<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
	<script src="https://d3js.org/d3.v5.min.js"></script>

Pessimistress / index.html

Last active December 19, 2019 19:51

Deck.gl + Mapbox Brushing Arcs

	<html>
	<head>
	<title>US County-to-County Migration</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
	<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
	<script src="https://d3js.org/d3.v5.min.js"></script>

Xiaoji Chen Pessimistress