Skip to content

Instantly share code, notes, and snippets.

View maptastik's full-sized avatar

Ryan Cooper maptastik

68 followers · 44 following
View GitHub Profile
@maptastik
maptastik / index.html
Created November 14, 2014 21:16
// source http://jsbin.com/meboqu
<!DOCTYPE html>
<html>
<head>
<style id="jsbin-css">
body {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
background-color: #27ae60;
}
@maptastik
maptastik / README.md
Last active August 29, 2015 14:13
A Simple Leaflet Map

Walking through putting together the components of this map

  1. You'll need to set up a simple web document (see html-setup.html below)
  2. Add leaflet css and js (3-4)
  3. Add the map's container. In this case, it's #mapdiv. (10)
  4. Add basic style for map the map container (5-7)
  5. Set the initial view of the map (24)
  6. Grab the base layer tiles from their source and them to the map (26-33)
  7. Include data. In this case we're putting some geoJSON data straight into our HTML document. (13-22)
  8. Grab the geoJSON data from, give it a popup, and add the data to the map. (35-42)
@maptastik
maptastik / index.html
Last active August 29, 2015 14:13
Leaflet Squirrel - Step 0
<html>
<head>
<title>Leaflet Squirrel - Step 0</title>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
</body>
@maptastik
maptastik / index.html
Last active August 29, 2015 14:13
Leaflet Squirrel - Step 1
<html>
<head>
<title>Leaflet Squirrel - Step 1</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>
@maptastik
maptastik / index.html
Last active August 29, 2015 14:13
Leaflet Squirrel - Part 2
<html>
<head>
<title>Leaflet Squirrel - Part 2</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://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
@maptastik
maptastik / index.html
Last active August 29, 2015 14:13
Leaflet Squirrel - Step 3
<html>
<head>
<title>Leaflet Squirrel - Step 3</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://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
@maptastik
maptastik / index.html
Last active August 29, 2015 14:13
Leaflet Squirrel - Step 4
<html>
<head>
<title>Leaflet Squirrel - Step 4</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://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
@maptastik
maptastik / index.html
Last active August 29, 2015 14:13
Leaflet Squirrel - Part 5
<html>
<head>
<title>Leaflet Squirrel - Part 5</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://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
@maptastik
maptastik / index.html
Last active August 29, 2015 14:13
Leaflet Squirrel - Part 6
<html>
<head>
<title>Leaflet Squirrel - Part 6</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://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
@maptastik
maptastik / ssa-capitals.geojson
Created February 9, 2015 05:06
SSA Capitals
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.