Skip to content

Instantly share code, notes, and snippets.

View mapsam's full-sized avatar

Sam Matthews mapsam

272 followers · 298 following
View GitHub Profile
@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 / 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 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 / countries.js
Last active May 17, 2025 07:40
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 / 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 / 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 / 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 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 11:29
JS Countdown Timer
<!DOCTYPE html>
<head>
<style>
body {
text-align:center;
}
#clock {
font-family:arial;
font-size:2em;
font-weight:bold;
@mapsam
mapsam / README.md
Last active December 20, 2015 07:19
D3: Proportional Symbols

Proportional symbol map based on secondary data. This map shows proportional symbols based on the city populations minimum and maximum values.