Skip to content

Instantly share code, notes, and snippets.

View awoodruff's full-sized avatar

Andy Woodruff awoodruff

View GitHub Profile
@awoodruff
awoodruff / index.html
Created May 24, 2017 03:00
Leaflet heatmap example
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
crossorigin=""></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
@awoodruff
awoodruff / index.html
Created September 16, 2014 01:25
Leaflet map with two tile layers
<html>
<head>
<title>A Leaflet map!</title>
<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>
<style>
#map{ height: 100% }
</style>
</head>
<body>
@awoodruff
awoodruff / index.html
Last active February 23, 2023 11:49
Basic Leaflet map
<html>
<head>
<title>A Leaflet map!</title>
<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>
<style>
#map{ width: 900px; height: 500px; }
</style>
</head>
<body>
@awoodruff
awoodruff / README.md
Last active September 26, 2021 21:50
Dot density map

This is an attempt at a slightly D3-ish way of drawing a dot density map on a canvas element. In short, each polygon is drawn (invisibly) with a unique color, then random points are thrown at polygon bounding boxes and the pixel color is used for a point-in-polygon test. This example draws one dot for every 2 people in central Boston census blocks, for a total of approximately 132,000 dots.

@awoodruff
awoodruff / index.html
Last active September 4, 2020 14:03
Leaflet map with markers and polygons
<html>
<head>
<title>A Leaflet map!</title>
<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://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
@awoodruff
awoodruff / MarkerCluster.css
Last active May 1, 2020 19:10
Leaflet cluster map + choropleth
.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
@awoodruff
awoodruff / index.html
Last active September 30, 2019 22:59
State lines
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#states path {
fill: none;
}
</style>
@awoodruff
awoodruff / index.html
Last active September 13, 2019 11:04
Leaflet map with markers and choropleth
<html>
<head>
<title>A Leaflet map!</title>
<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://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
@awoodruff
awoodruff / index.html
Created October 28, 2015 16:57
AMAZING MAP
<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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
fid OBJECTID Name Acres Neighborho SqMiles Shape_STAr Shape_STLe HISTO_0 HISTO_1 HISTO_2 HISTO_3 HISTO_4 HISTO_5 HISTO_6 HISTO_7 HISTO_8 HISTO_9 HISTO_10 HISTO_11 HISTO_12 HISTO_13 HISTO_14 HISTO_15 HISTO_16 HISTO_17 HISTO_18 HISTO_19 HISTO_20 HISTO_21 HISTO_22 HISTO_23 HISTO_24 HISTO_25 HISTO_26 HISTO_27 HISTO_28 HISTO_29 HISTO_30 HISTO_31 HISTO_32 HISTO_33 HISTO_34 HISTO_35 HISTO_36 HISTO_37 HISTO_38 HISTO_39 HISTO_40 HISTO_41 HISTO_42 HISTO_43 HISTO_44 HISTO_45 HISTO_46 HISTO_47 HISTO_48 HISTO_49 HISTO_50 HISTO_51 HISTO_52 HISTO_53 HISTO_54 HISTO_55 HISTO_56 HISTO_57 HISTO_58 HISTO_59 HISTO_60 HISTO_61 HISTO_62 HISTO_63 HISTO_64 HISTO_65 HISTO_66 HISTO_67 HISTO_68 HISTO_69 HISTO_70 HISTO_71 HISTO_72 HISTO_73 HISTO_74 HISTO_75 HISTO_76 HISTO_77 HISTO_78 HISTO_79 HISTO_80 HISTO_81 HISTO_82 HISTO_83 HISTO_84 HISTO_85 HISTO_86 HISTO_87 HISTO_88 HISTO_89 HISTO_90 HISTO_91 HISTO_92 HISTO_93 HISTO_94 HISTO_95 HISTO_96 HISTO_97 HISTO_98 HISTO_99 HISTO_100 HISTO_101 HISTO_102 HISTO_103 HISTO_104 HISTO_105 HISTO_106