Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryan Cooper maptastik

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.