Skip to content

Instantly share code, notes, and snippets.

View Pessimistress's full-sized avatar
🚀
MaxQ

Xiaoji Chen Pessimistress

🚀
MaxQ
View GitHub Profile
@Pessimistress
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
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
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
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;}
<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;