Skip to content

Instantly share code, notes, and snippets.

Ryan Cooper maptastik

Block or report user

Report or block maptastik

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.html
<!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 Aug 29, 2015
A Simple Leaflet Map
View README.md

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 Aug 29, 2015
Leaflet Squirrel - Step 0
View index.html
<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 Aug 29, 2015
Leaflet Squirrel - Step 1
View index.html
<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 Aug 29, 2015
Leaflet Squirrel - Part 2
View index.html
<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 Aug 29, 2015
Leaflet Squirrel - Step 3
View index.html
<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 Aug 29, 2015
Leaflet Squirrel - Step 4
View index.html
<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 Aug 29, 2015
Leaflet Squirrel - Part 5
View index.html
<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 Aug 29, 2015
Leaflet Squirrel - Part 6
View index.html
<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>
View ssa-capitals.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
You can’t perform that action at this time.