Skip to content

Instantly share code, notes, and snippets.

@ebrelsford
ebrelsford / index.html
Created April 27, 2016 14:55
Blur a Leaflet map with html2canvas and StackBlur
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.min.js"></script>
<script src="https://cdn.rawgit.com/flozz/StackBlur/master/dist/stackblur.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<style>
html, body {
margin:0;
@ebrelsford
ebrelsford / index.html
Created June 5, 2015 15:03
Bike routing with Valhalla // source http://jsbin.com/qepurisibe
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://rawgit.com/jieter/Leaflet.encoded/master/Polyline.encoded.js"></script>
<meta charset="utf-8">
<title>Bike routing with Valhalla</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Load jQuery -->
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<!-- Load Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.css' rel='stylesheet' />
<style id="jsbin-css">
html, body {
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!--
Load the MapPaint plugin.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html, body {
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.window {
border: 1px solid black;
height: 200px;
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#bob {
background-color: blue;
height: 50px;