Skip to content

Instantly share code, notes, and snippets.

@AlanPew
AlanPew / index.html
Created July 10, 2015 05:46
Mapbox GL with OSM Tiles
<!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.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@AlanPew
AlanPew / mapbox-streets-v7.json
Last active August 29, 2015 14:24
Mapbox Streets v7 Style
var streets = {
"version": 7,
"name": "Mapbox Streets",
"constants": {
"@poi-scalerank3": {
"base": 1,
"stops": [
[
16,
11
@AlanPew
AlanPew / index.html
Last active August 29, 2015 14:24
Mapbox GL Streets v7
<!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.8.1/mapbox-gl.js'></script>
<script src='https://rawgit.com/AlanPew/mapbox-gl-styles/master/mapbox-streets-v7.json'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
@AlanPew
AlanPew / index.html
Created July 10, 2015 12:04
Mapbox Streets GL with gist json file
<!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.8.1/mapbox-gl.js'></script>
<script src='https://rawgit.com/AlanPew/ba721e303d5e87b21c20/raw/70ce6c22770fc11ae3ae1796415e0443f14e77c4/mapbox-streets-v7.json'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
@AlanPew
AlanPew / streets.json
Created July 10, 2015 13:01
Mapbox Streets GL Style v7
var streets = {
"version": 7,
"name": "Mapbox Streets",
"constants": {
"@poi-scalerank3": {
"base": 1,
"stops": [
[
16,
11
@AlanPew
AlanPew / index.html
Created July 10, 2015 13:20
javascript test
<!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.8.1/mapbox-gl.js'></script>
<script src='maps.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
@AlanPew
AlanPew / index.html
Last active August 29, 2015 14:24
Mapbox GL Streets v7
<!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.8.1/mapbox-gl.js'></script>
<script src='style.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
@AlanPew
AlanPew / index.html
Created July 10, 2015 13:31
Drone Video
<!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.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
@AlanPew
AlanPew / index.html
Last active August 29, 2015 14:24
Mapbox GL (Streets v7)
<!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.8.1/mapbox-gl.js'></script>
<script src='maps.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
@AlanPew
AlanPew / index.html
Last active August 29, 2015 14:24
Testing PBF vector tiles with MB-UTIL
<!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.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }