Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active August 29, 2015 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/9982456 to your computer and use it in GitHub Desktop.
Save aaizemberg/9982456 to your computer and use it in GitHub Desktop.
Download ZIP
Mapa temático y tooltip con MapBox
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Choropleth</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<style>
.map-legend .swatch {
width:20px;
height:20px;
float:left;
margin-right:10px;
}
.leaflet-popup-close-button {
display: none;
}
.leaflet-popup-content-wrapper {
pointer-events: none;
}
</style>
<!-- <script src='http://www.mapbox.com/mapbox.js/assets/data/us-states.js'></script> -->
<script src='http://bl.ocks.org/aaizemberg/raw/9982456/rect.js'></script>
<script>
var mapdataviz = L.mapbox.map('map', 'examples.map-9ijuk24y')
.setView([-38, -65], 5);
var popup = new L.Popup({ autoPan: false });
// statesData comes from the 'us-states.js' script included above
// rect es un GeoJSON que viene de 'rect.js'
//var statesLayer = L.geoJson(statesData, {
var statesLayer = L.geoJson(rect, {
style: getStyle,
onEachFeature: onEachFeature
}).addTo(mapdataviz);
function getStyle(feature) {
return {
weight: 2,
opacity: 0.1,
color: 'black',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.size)
};
}
function getColor(d) {
return d <= 143 ? '#ffffb2' :
d <= 379 ? '#FECC5C' :
d <= 866 ? '#FD8D3C' :
d <= 2664 ? '#F03B20' :
d <= 3204 ? '#BD0026' :
'#0000ff';
}
function onEachFeature(feature, layer) {
layer.on({
mousemove: mousemove,
mouseout: mouseout,
click: zoomToFeature
});
}
var closeTooltip;
function mousemove(e) {
var layer = e.target;
popup.setLatLng(e.latlng);
popup.setContent('<div class="marker-title">' + layer.feature.properties.name + '</div>' + layer.feature.properties.size);
if (!popup._map) popup.openOn(mapdataviz);
window.clearTimeout(closeTooltip);
// highlight feature
layer.setStyle({
weight: 3,
opacity: 0.3,
fillOpacity: 0.9
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function mouseout(e) {
statesLayer.resetStyle(e.target);
closeTooltip = window.setTimeout(function() {
mapdataviz.closePopup();
}, 100);
}
function zoomToFeature(e) {
mapdataviz.fitBounds(e.target.getBounds());
}
mapdataviz.legendControl.addLegend(getLegendHTML());
function getLegendHTML() {
var grades = [0, 143, 379, 866, 2664, 3204],
labels = [],
from, to;
for (var i = 0; i < grades.length-1; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<li><span class="swatch" style="background:'
+ getColor(from + 1) + '"></span> ' +
from + (to ? '&ndash;' + to : '+')) + '</li>';
}
return '<span>referencias</span>' + labels.join('');
}
</script>
</body>
</html>
Raw
rect.js
var rect = { "type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "rect 1", "size": 54.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.775391201149759, -44.351501738710255 ], [ -71.775391201149759, -42.392788068441611 ], [ -67.283814780552163, -42.392788068441611 ], [ -67.283814780552163, -44.351501738710255 ], [ -71.775391201149759, -44.351501738710255 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 2", "size": 148.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.775391201149759, -42.392788068441611 ], [ -71.775391201149759, -40.370983829269996 ], [ -67.283814780552163, -40.370983829269996 ], [ -67.283814780552163, -42.392788068441611 ], [ -71.775391201149759, -42.392788068441611 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 3", "size": 379.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.775391201149759, -40.370983829269996 ], [ -71.775391201149759, -38.286654502781104 ], [ -67.283814780552163, -38.286654502781104 ], [ -67.283814780552163, -40.370983829269996 ], [ -71.775391201149759, -40.370983829269996 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 4", "size": 95.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.775391201149759, -38.286654502781104 ], [ -71.775391201149759, -36.14070880814171 ], [ -67.283814780552163, -36.14070880814171 ], [ -67.283814780552163, -38.286654502781104 ], [ -71.775391201149759, -38.286654502781104 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 5", "size": 156.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.775391201149759, -36.14070880814171 ], [ -71.775391201149759, -33.934422758312309 ], [ -67.283814780552163, -33.934422758312309 ], [ -67.283814780552163, -36.14070880814171 ], [ -71.775391201149759, -36.14070880814171 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 6", "size": 260.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.775391201149759, -33.934422758312309 ], [ -71.775391201149759, -31.669460811457348 ], [ -67.283814780552163, -31.669460811457348 ], [ -67.283814780552163, -33.934422758312309 ], [ -71.775391201149759, -33.934422758312309 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 7", "size": 143.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -67.283814780552163, -44.351501738710255 ], [ -67.283814780552163, -42.392788068441611 ], [ -62.792238359954553, -42.392788068441611 ], [ -62.792238359954553, -44.351501738710255 ], [ -67.283814780552163, -44.351501738710255 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 8", "size": 134.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -67.283814780552163, -42.392788068441611 ], [ -67.283814780552163, -40.370983829269996 ], [ -62.792238359954553, -40.370983829269996 ], [ -62.792238359954553, -42.392788068441611 ], [ -67.283814780552163, -42.392788068441611 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 9", "size": 137.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -67.283814780552163, -40.370983829269996 ], [ -67.283814780552163, -38.286654502781104 ], [ -62.792238359954553, -38.286654502781104 ], [ -62.792238359954553, -40.370983829269996 ], [ -67.283814780552163, -40.370983829269996 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 10", "size": 372.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -67.283814780552163, -38.286654502781104 ], [ -67.283814780552163, -36.14070880814171 ], [ -62.792238359954553, -36.14070880814171 ], [ -62.792238359954553, -38.286654502781104 ], [ -67.283814780552163, -38.286654502781104 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 11", "size": 508.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -67.283814780552163, -36.14070880814171 ], [ -67.283814780552163, -33.934422758312309 ], [ -62.792238359954553, -33.934422758312309 ], [ -62.792238359954553, -36.14070880814171 ], [ -67.283814780552163, -36.14070880814171 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 12", "size": 1326.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -67.283814780552163, -33.934422758312309 ], [ -67.283814780552163, -31.669460811457348 ], [ -62.792238359954553, -31.669460811457348 ], [ -62.792238359954553, -33.934422758312309 ], [ -67.283814780552163, -33.934422758312309 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 13", "size": 866.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -67.283814780552163, -31.669460811457348 ], [ -67.283814780552163, -29.347893202612525 ], [ -62.792238359954553, -29.347893202612525 ], [ -62.792238359954553, -31.669460811457348 ], [ -67.283814780552163, -31.669460811457348 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 14", "size": 0.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -62.792238359954553, -44.351501738710255 ], [ -62.792238359954553, -42.392788068441611 ], [ -58.300661939356942, -42.392788068441611 ], [ -58.300661939356942, -44.351501738710255 ], [ -62.792238359954553, -44.351501738710255 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 15", "size": 1.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -62.792238359954553, -42.392788068441611 ], [ -62.792238359954553, -40.370983829269996 ], [ -58.300661939356942, -40.370983829269996 ], [ -58.300661939356942, -42.392788068441611 ], [ -62.792238359954553, -42.392788068441611 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 16", "size": 408.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -62.792238359954553, -40.370983829269996 ], [ -62.792238359954553, -38.286654502781104 ], [ -58.300661939356942, -38.286654502781104 ], [ -58.300661939356942, -40.370983829269996 ], [ -62.792238359954553, -40.370983829269996 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 17", "size": 770.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -62.792238359954553, -38.286654502781104 ], [ -62.792238359954553, -36.14070880814171 ], [ -58.300661939356942, -36.14070880814171 ], [ -58.300661939356942, -38.286654502781104 ], [ -62.792238359954553, -38.286654502781104 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 18", "size": 2664.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -62.792238359954553, -36.14070880814171 ], [ -62.792238359954553, -33.934422758312309 ], [ -58.300661939356942, -33.934422758312309 ], [ -58.300661939356942, -36.14070880814171 ], [ -62.792238359954553, -36.14070880814171 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 19", "size": 3204.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -62.792238359954553, -33.934422758312309 ], [ -62.792238359954553, -31.669460811457348 ], [ -58.300661939356942, -31.669460811457348 ], [ -58.300661939356942, -33.934422758312309 ], [ -62.792238359954553, -33.934422758312309 ] ] ] } },
{ "type": "Feature", "properties": { "name": "rect 20", "size": 1245.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -62.792238359954553, -31.669460811457348 ], [ -62.792238359954553, -29.347893202612525 ], [ -58.300661939356942, -29.347893202612525 ], [ -58.300661939356942, -31.669460811457348 ], [ -62.792238359954553, -31.669460811457348 ] ] ] } }
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment