Skip to content

Instantly share code, notes, and snippets.

@ryanohs

ryanohs/choropleth.htm

Last active August 29, 2015 13:57
Show Gist options
  • Save ryanohs/9810195 to your computer and use it in GitHub Desktop.
Save ryanohs/9810195 to your computer and use it in GitHub Desktop.
Download ZIP
Presentation examples for Nebraska Code Camp.
Raw
choropleth.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="us-states.js"></script>
</head>
<body>
<div id="map" style="height: 580px"></div>
<script>
var map = L.map('map').setView([37.8, -96], 4);
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707',
styleId: 22677
}).addTo(map);
// control that shows state info on hover
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
// get color depending on population density value
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '&ndash;' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
</script>
</body>
Raw
geojson.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="sample-geojson.js"></script>
</head>
<body>
<div id="map" style="height: 580px"></div>
<script>
var map = L.map('map').setView([39.74739, -105], 15);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/API-KEY/{z}/{x}/{y}.png', {
attribution: 'MapBox'
}).addTo(map);
var baseballIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
function onEachFeature(feature, layer) {
var popupContent = "<p>I started out as a GeoJSON " +
feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
L.geoJson([bicycleRental, campus], {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
L.geoJson(freeBus, {
filter: function (feature, layer) {
if (feature.properties) {
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
}
return false;
},
onEachFeature: onEachFeature
}).addTo(map);
var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon});
},
onEachFeature: onEachFeature
}).addTo(map);
</script>
</body>
Raw
layers.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 580px"></div>
<script>
// Cities layer
var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
var cities = L.layerGroup([littleton, denver, aurora, golden]);
var url = 'https://{s}.tiles.mapbox.com/v3/{key}/{z}/{x}/{y}.png';
var attribution = 'MapBox';
var streets = L.tileLayer(url, {key: "API-KEY", attribution: attribution});
var terrain = L.tileLayer(url, {key: "API-KEY", attribution: attribution});
var map = L.map('map', {
center: new L.LatLng(39.7308819,-105.0348376),
zoom: 9,
layers: [streets, cities]
});
var baseMaps = {
"Streets" : streets,
"Terrain" : terrain
};
var overlayMaps = {
"Cities": cities
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>
</body>
Raw
mapquest.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://beta.mapquestapi.com/sdk/leaflet/v0.1/mq-map.js?key=API-KEY"></script>
<script src="http://beta.mapquestapi.com/sdk/leaflet/v0.1/mq-routing.js?key=API-KEY"></script>
</head>
<body>
<div id="map" style="height: 580px"></div>
<script>
var map = L.map('map', {
layers: MQ.mapLayer(),
center: [ 38.895345, -77.030101 ],
zoom: 15
});
var dir = MQ.routing.directions();
dir.route({
locations: [
'1600 pennsylvania ave, washington dc',
'935 pennsylvania ave, washington dc'
]
});
map.addLayer(MQ.routing.routeLayer({ directions: dir, fitBounds: true }));
</script>
</body>
Raw
markers.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 590px"></div>
<script>
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([40.8331503,-96.661308], 15);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var MyIcon = L.Icon.extend({
options: {
shadowUrl: 'marker-shadow.png',
iconSize: [32, 37],
shadowSize: [51, 37],
iconAnchor: [16, 37],
shadowAnchor: [17, 37],
popupAnchor: [-3, -76]
}
});
var fieldIcon = new MyIcon({iconUrl: 'field.png'});
var appleIcon = new MyIcon({iconUrl: 'apple.png'});
var cheeseIcon = new MyIcon({iconUrl: 'cheese.png'});
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([40.8362969,-96.6618559], {icon: fieldIcon}).addTo(map);
L.marker([40.8292632,-96.6559765], {icon: appleIcon}).addTo(map);
L.marker([40.828532,-96.6671955], {icon: cheeseIcon}).addTo(map);
</script>
</body>
Raw
popup.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 280px"></div>
<script>
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([40.8292632,-96.658642], 17);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var popup = L.popup()
.setLatLng([40.8292632,-96.658642])
.setContent("I am a standalone popup.")
.openOn(map);
var MyIcon = L.Icon.extend({
options: {
shadowUrl: 'marker-shadow.png',
iconSize: [32, 37],
shadowSize: [51, 37],
iconAnchor: [16, 37],
shadowAnchor: [17, 37],
popupAnchor: [0, -37]
}
});
var appleIcon = new MyIcon({iconUrl: 'apple.png'});
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([40.8292632,-96.6559765], {icon: appleIcon})
.addTo(map)
.bindPopup("Peacon orchard");
</script>
</body>
Raw
setup.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body style="font-family:Lato;font-size:1.25em;">
<div id="map" style="height: 600px"></div>
<script>
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
</script>
</body>
Raw
shapes.htm
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 580px"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
@dksivagis
Copy link

Thank you ryanohs... these pages really help us a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment