alexkapps/NK_Blog_draft.md

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Toggling layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.menu-ui {
  background:#fff;
  position:absolute;
  top:10px;right:10px;
  z-index:1;
  border-radius:3px;
  width:120px;
  border:1px solid rgba(0,0,0,0.4);
  }
  .menu-ui a {
    font-size:13px;
    color:#404040;
    display:block;
    margin:0;padding:0;
    padding:10px;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.25);
    text-align:center;
    }
    .menu-ui a:first-child {
      border-radius:3px 3px 0 0;
      }
    .menu-ui a:last-child {
      border:none;
      border-radius:0 0 3px 3px;
      }
    .menu-ui a:hover {
      background:#f8f8f8;
      color:#404040;
      }
    .menu-ui a.active {
      background:#3887BE;
      color:#FFF;
      }
      .menu-ui a.active:hover {
        background:#3074a4;
        }
</style>
<nav id='menu-ui' class='menu-ui'></nav>
<div id='map'></div>

<script>
var map = L.mapbox.map('map', 'devseed.im6c8d53').setView([40.355, 127.112], 7);
var layers = document.getElementById('menu-ui');

//addLayer(L.mapbox.tileLayer('devseed.im6c8d53'), 'Base Map', 1);
addLayer(L.mapbox.tileLayer('devseed.im7hbego'), 'Labels and Streets', 1);


function addLayer(layer, name, zIndex) {
    layer
        .setZIndex(zIndex)
        .addTo(map);

    // Create a simple layer switcher that
    // toggles layers on and off.
    var link = document.createElement('a');
        link.href = '#';
        link.className = 'active';
        link.innerHTML = name;

    link.onclick = function(e) {
        e.preventDefault();
        e.stopPropagation();

        if (map.hasLayer(layer)) {
            map.removeLayer(layer);
            this.className = '';
        } else {
            map.addLayer(layer);
            this.className = 'active';
        }
    };

    layers.appendChild(link);
}
</script>
</body>
</html>

## NK_Blog_draft.md

      
    Raw
  

              NK_Blog_draft.md
            
          
    ##Visualizing North Korea's Worst Drought in Decades
The Democratic Peoples Republic of Korea (North Korea) is experiencing its worst drought in over a decade. According to reports, some areas have experienced 70 days without rain as well as the lowest rainfall levels since 1961. As food shortages are already a problem for North Korea, the damage that this drought will likely cause for harvests is cause for serious alarm. Food shortages in the 1990s led to an estimated million deaths.
We used satellite data to measure what areas are most impacted by the drought. We examined MODIS Normalized Difference Vegetation Index (NDVI) data to evaluate current vegetation levels across the country as a proxy for drought. The map below shows the difference between current vegetation levels (data comprising NDVI measurements from June 10 through June 25) and a baseline constructed from average vegetation levels, for the same June extent, over the past 5 years (2009-2013). Red areas have less vegetation than normal. Darker red shows significantly less vegetation. Green areas have higher levels of vegetation than average. Blank spots are the result of ground-obscuring clouds in the satellite imagery.
This drought map can be used to identify urban areas most vulnerable to food shortages right now, to plan irrigation and relief efforts, or to identify areas that are susceptible to widespread forest fires.
MAP GOES HERE
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Toggling layers</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<style>
	.menu-ui {
	background:#fff;
	position:absolute;
	top:10px;right:10px;
	z-index:1;
	border-radius:3px;
	width:120px;
	border:1px solid rgba(0,0,0,0.4);
	}
	.menu-ui a {
	font-size:13px;
	color:#404040;
	display:block;
	margin:0;padding:0;
	padding:10px;
	text-decoration:none;
	border-bottom:1px solid rgba(0,0,0,0.25);
	text-align:center;
	}
	.menu-ui a:first-child {
	border-radius:3px 3px 0 0;
	}
	.menu-ui a:last-child {
	border:none;
	border-radius:0 0 3px 3px;
	}
	.menu-ui a:hover {
	background:#f8f8f8;
	color:#404040;
	}
	.menu-ui a.active {
	background:#3887BE;
	color:#FFF;
	}
	.menu-ui a.active:hover {
	background:#3074a4;
	}
	</style>
	<nav id='menu-ui' class='menu-ui'></nav>
	<div id='map'></div>

	<script>
	var map = L.mapbox.map('map', 'devseed.im6c8d53').setView([40.355, 127.112], 7);
	var layers = document.getElementById('menu-ui');

	//addLayer(L.mapbox.tileLayer('devseed.im6c8d53'), 'Base Map', 1);
	addLayer(L.mapbox.tileLayer('devseed.im7hbego'), 'Labels and Streets', 1);


	function addLayer(layer, name, zIndex) {
	layer
	.setZIndex(zIndex)
	.addTo(map);

	// Create a simple layer switcher that
	// toggles layers on and off.
	var link = document.createElement('a');
	link.href = '#';
	link.className = 'active';
	link.innerHTML = name;

	link.onclick = function(e) {
	e.preventDefault();
	e.stopPropagation();

	if (map.hasLayer(layer)) {
	map.removeLayer(layer);
	this.className = '';
	} else {
	map.addLayer(layer);
	this.className = 'active';
	}
	};

	layers.appendChild(link);
	}
	</script>
	</body>
	</html>