Skip to content

Instantly share code, notes, and snippets.

<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.1.0/mapbox.css' rel='stylesheet' />
<style>
* {
box-sizing:border-box;
@yhahn
yhahn / index.html
Created February 16, 2013 22:15
Circle with number
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body {
margin:0px;
@yhahn
yhahn / index.html
Created February 12, 2013 19:16
Simple geojson search
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body {
margin:0px;
@yhahn
yhahn / index.html
Created February 5, 2013 14:24
Custom template
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
@yhahn
yhahn / index.html
Created February 4, 2013 20:01
Enable/disable map handlers
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.buttons {
position:absolute;
@yhahn
yhahn / index.html
Last active December 12, 2015 03:48
Enable/disable map handlers
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.buttons {
position:absolute;
@yhahn
yhahn / index.html
Created February 3, 2013 18:39
custom markers + custom tooltips
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src='http://underscorejs.org/underscore-min.js'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
@yhahn
yhahn / example.md
Created January 23, 2013 15:33
Markdown example

Here is an example of Markdown text. This is a paragraph, you can emphasize text and do other basic formatting. Use headings and lists to make your writing skimmable and create structure. For example:

Pros of Markdown

  • Easy to write and read in plain text form
  • Converted to HTML automatically by GitHub, other software
  • Reasonable convention to use anywhere, e.g. email

Cons of Markdown

@yhahn
yhahn / index.html
Created January 23, 2013 03:33
Mousewheel offset + fixed position
<!DOCTYPE html>
<html>
<head>
<script src='https://raw.github.com/modestmaps/modestmaps-js/master/modestmaps.min.js'></script>
<style>
body { margin:0; padding:0; height:2000px; }
#map { position:fixed !important; top:0; width:500px; height:300px; }
</style>
</head>
<body>