Xiaoji Chen Pessimistress

🚀

MaxQ

Designer. Geek. Beer addict. Data queen.

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 / 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

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