diegovalle/ageb0.json

## ageb0.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ageb0.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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>

## map.js
(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
        });

    }


}());
	<!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 © 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
	});

	}


	}());