Skip to content

Instantly share code, notes, and snippets.

View mapsam's full-sized avatar

Sam Matthews mapsam

271 followers · 298 following
View GitHub Profile
@mapsam
mapsam / index.html
Last active December 20, 2015 11:39
Eight-thousands
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
#names {
list-style-type:disc;
display:inline-block;
width:200px;
}
#names li {
margin:3px 0;
@mapsam
mapsam / index.html
Last active December 20, 2015 18:28
Leaflet Basemap
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<style>
#map {
@mapsam
mapsam / index.html
Last active December 20, 2015 18:28
Leaflet L.marker and .bindPopup()
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<style>
#map {
@mapsam
mapsam / README.md
Last active December 20, 2015 21:09
D3: .datum() test

This example shows how adding geographic data with the .datum() function creates one large svg element instead of multiple elements. The hover effect highlights the element, which happens to be the entire extent. Using .data() and .enter() will allow you to interact with each element separately because each is created in a separate iteration. See how to interact with topojson files.

@mapsam
mapsam / countries.js
Last active December 20, 2015 21:19
Leaflet: Geojson Data
var countries = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"AFG","properties":{"name":"Afghanistan"},"geometry":{"type":"Polygon","coordinates":[[[61.210817,35.650072],[62.230651,35.270664],[62.984662,35.404041],[63.193538,35.857166],[63.982896,36.007957],[64.546479,36.312073],[64.746105,37.111818],[65.588948,37.305217],[65.745631,37.661164],[66.217385,37.39379],[66.518607,37.362784],[67.075782,37.356144],[67.83,37.144994],[68.135562,37.023115],[68.859446,37.344336],[69.196273,37.151144],[69.518785,37.608997],[70.116578,37.588223],[70.270574,37.735165],[70.376304,38.138396],[70.806821,38.486282],[71.348131,38.258905],[71.239404,37.953265],[71.541918,37.905774],[71.448693,37.065645],[71.844638,36.738171],[72.193041,36.948288],[72.63689,37.047558],[73.260056,37.495257],[73.948696,37.421566],[74.980002,37.41999],[75.158028,37.133031],[74.575893,37.020841],[74.067552,36.836176],[72.920025,36.720007],[71.846292,36.509942],[71.262348,36.074388],[71.498768,35.650563],[71.613076,35.153203],[71.11
@mapsam
mapsam / index.html
Last active December 20, 2015 23:49
D3: Style & Position Change
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 practice</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
padding:0;
margin:0;
@mapsam
mapsam / charm.json
Last active December 21, 2015 00:29
Project Linework - Charmingly Inaccurate
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@mapsam
mapsam / index.html
Last active December 21, 2015 00:49
Leaflet: WMS Layer
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<style>
#map {
width:960px;
@mapsam
mapsam / index.html
Created August 13, 2013 22:00
Leaflet: Layer Control
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<style>
@mapsam
mapsam / index.html
Created August 23, 2013 21:55
Leaflet: Stamen Basemap
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<style>