Skip to content

Instantly share code, notes, and snippets.

@diegovalle diegovalle/ageb0.json
Last active Aug 29, 2015

Embed
What would you like to do?
Nobody lives here
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nobody lives here - Mexican areas with zero population</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="Nobody lives here. Mexican rural areas with zero population">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@diegovalle" />
<meta name="twitter:title" content="Nobody lives here" />
<meta name="twitter:description" content="Nobody lives here. Rural areas with zero population" />
<meta name="twitter:image" content="https://www.diegovalle.net/maps/nobody-lives-here/empty.png" />
<meta name="twitter:url" content="https://www.diegovalle.net/maps/nobody-lives-here" />
<meta property="og:title" content="Nobody lives here" />
<meta property="og:description" content="Nobody lives here. Rural areas with zero population. An interactive map of all rural AGEBs that contain no localities and thus are empty of people"/>
<meta property="og:url" content="https://www.diegovalle.net/maps/nobody-lives-here"/>
<meta property="og:image" content="https://www.diegovalle.net/maps/nobody-lives-here/empty.png"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="Nobody lives here"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/>
<style>
body {
padding: 0;
margin: 0;
}
html,body,#map{
height:100%;
}
body{
color:#333;
font-family:sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
<a class="a2a_button_twitter"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_google_plus"></a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="map.js"></script>
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<script id="deferedjs" type="text/javascript">
var _gaq=[['_setAccount','UA-100264-1'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
_gaq.push(['_setSiteSpeedSampleRate', 5]); //Measure Page Speed
</script>
</body>
</html>
(function(){
'use strict'
var map = L.map('map').setView([24.8, -96], 5);
var HERE_app_id = 'zTzEnl1eyyzi3TqSmlsa';
var HERE_app_code = '1fczZYwHACkvMg5tnbuN4g';
var HERE_hybridDayMobile = L.tileLayer('//{s}.{base}.maps.cit.api.here.com/maptile/2.1/maptile/{mapID}/hybrid.day/{z}/{x}/{y}/256/png8?app_id={app_id}&app_code={app_code}', {
attribution: 'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>',
subdomains: '1234',
mapID: 'newest',
app_id: HERE_app_id,
app_code: HERE_app_code,
base: 'aerial',
minZoom: 0,
maxZoom: 20
}).addTo(map);
L.TopoJSON = L.GeoJSON.extend({
addData: function(jsonData) {
if (jsonData.type === "Topology") {
for (var key in jsonData.objects) {
var geojson = topojson.feature(jsonData, jsonData.objects[key]);
L.GeoJSON.prototype.addData.call(this, geojson);
}
}
else {
L.GeoJSON.prototype.addData.call(this, jsonData);
}
}
});
// Copyright (c) 2013 Ryan Clark
var topoLayer = new L.TopoJSON();
//d3.json('ageb0.json', function(topoData) {
// addTopoData(topoData);
//})
function request(url, callback) {
var req = new XMLHttpRequest;
req.open("GET", url, true);
req.setRequestHeader("Accept", "application/json");
req.onreadystatechange = function() {
if (req.readyState === 4) {
if (req.status < 300) callback(null, JSON.parse(req.responseText));
else callback(req.status);
}
};
req.send(null);
}
request('ageb0.json', addTopoData)
function addTopoData(error, topoData){
topoLayer.addData(topoData);
topoLayer.addTo(map);
topoLayer.eachLayer(styleLayer);
}
function styleLayer(layer){
layer.setStyle({
fillColor : '#7f0000',
fillOpacity: .3,
color:'#111',
weight:1,
opacity:1
});
}
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.