/index.html

## index.html
<html>

<head>
  <meta charset=utf-8 />
  <title>London Pollution</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>

  <script src="https://unpkg.com/esri-leaflet@2.0.4/dist/esri-leaflet.js"></script>

  <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />

</head>


<body>
  <div id='map'></div>
</body>

</html>

## mapbox-leaflet-sandbox.markdown

      
    Raw
  

              mapbox-leaflet-sandbox.markdown
            
          
    Mapbox | Leaflet | sandbox

A Pen by Alex Chiu on CodePen.
License.

  
## script.js
function setupMap() {
  //few things happening here- grabs mapbox access token, centers on london, calls 2 different mapbox basemaps ,makes a button to switch between layers and also a scale bar ,credits on bottom right.

  L.mapbox.accessToken = 'pk.eyJ1IjoiY2hpdWJhY2EiLCJhIjoiY2lrNWp6NzI2MDA0NmlmbTIxdGVybzF3YyJ9.rRBFEm_VY3yRzpMey8ufKA';
  window.map = L.mapbox.map('map', null, {
    minZoom: 9
  });

  var basemaps = {
    "Streets": L.mapbox.tileLayer('mapbox.streets'),
    "Imagery": L.mapbox.tileLayer('mapbox.satellite')
  };

  //Air pollution layers
  var layers = {
      "Combined": L.esri.dynamicMapLayer({
        url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/Combined_Now/MapServer'
      }),
      " NO2": L.esri.dynamicMapLayer({
        url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/NO2_Now/MapServer'
      }),
      "O3": L.esri.dynamicMapLayer({
        url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/O3_Now/MapServer'
      }),
      "PM25": L.esri.dynamicMapLayer({
        url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/PM25_Now/MapServer'
      }),

    }

    //creates the layer control button
  basemaps["Streets"].addTo(map);
  L.control.layers(basemaps, layers).addTo(map);

  //scale on the bottom right
  L.control.scale({
    imperial: false,
    position: "bottomright"
  }).addTo(map);
  map.setView([51.5049494376284, -0.0881481170654297], 3);

};
//not using this function
function getCoordsCRAP() {

  map.on('click', function(e) {

    console.log("Lat, Lon : " + e.latlng)

    var points = [];
    points.push(e.latlng.lat, +e.latlng.lng);
    console.log(points);

    var marker = L.marker([points[0], points[1]]).addTo(map);
    marker.bindPopup("<b>Hello world!</b><br />I am a popup.<br />" + points).openPopup();

  });

};

function getPollution(){

  map.on('click', function(e) {

   var theUrl = "http://api.erg.kcl.ac.uk/AirQuality/Data/Nowcast/lat=" + e.latlng.lat +"/lon="+ e.latlng.lng + "/Json";

       function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}


     });


}

function getCoords() {

  var marker = null;

  map.on('click', function(e) {
    if (marker !== null) {
      map.removeLayer(marker);
    }
    marker = L.marker(e.latlng).addTo(map);
    marker.bindPopup("<b>Pollution Levels at:<br />" + e.latlng.lat +" "+e.latlng.lng).openPopup();
    console.log("point @ " + e.latlng.lat +" "+e.latlng.lng);
  });

};

//I have no idea what i'm doing...
window.onload = function() {

  setupMap();
  getCoords();
  getPollution();
};

## style.css
body {
  margin: 0;
  padding: 0;
}


#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
	<html>

	<head>
	<meta charset=utf-8 />
	<title>London Pollution</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>

	<script src="https://unpkg.com/esri-leaflet@2.0.4/dist/esri-leaflet.js"></script>

	<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />

	</head>


	<body>
	<div id='map'></div>
	</body>

	</html>
	function setupMap() {
	//few things happening here- grabs mapbox access token, centers on london, calls 2 different mapbox basemaps ,makes a button to switch between layers and also a scale bar ,credits on bottom right.

	L.mapbox.accessToken = 'pk.eyJ1IjoiY2hpdWJhY2EiLCJhIjoiY2lrNWp6NzI2MDA0NmlmbTIxdGVybzF3YyJ9.rRBFEm_VY3yRzpMey8ufKA';
	window.map = L.mapbox.map('map', null, {
	minZoom: 9
	});

	var basemaps = {
	"Streets": L.mapbox.tileLayer('mapbox.streets'),
	"Imagery": L.mapbox.tileLayer('mapbox.satellite')
	};

	//Air pollution layers
	var layers = {
	"Combined": L.esri.dynamicMapLayer({
	url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/Combined_Now/MapServer'
	}),
	" NO2": L.esri.dynamicMapLayer({
	url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/NO2_Now/MapServer'
	}),
	"O3": L.esri.dynamicMapLayer({
	url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/O3_Now/MapServer'
	}),
	"PM25": L.esri.dynamicMapLayer({
	url: 'http://webgis.erg.kcl.ac.uk/arcgis/rest/services/PM25_Now/MapServer'
	}),

	}

	//creates the layer control button
	basemaps["Streets"].addTo(map);
	L.control.layers(basemaps, layers).addTo(map);

	//scale on the bottom right
	L.control.scale({
	imperial: false,
	position: "bottomright"
	}).addTo(map);
	map.setView([51.5049494376284, -0.0881481170654297], 3);

	};
	//not using this function
	function getCoordsCRAP() {

	map.on('click', function(e) {

	console.log("Lat, Lon : " + e.latlng)

	var points = [];
	points.push(e.latlng.lat, +e.latlng.lng);
	console.log(points);

	var marker = L.marker([points[0], points[1]]).addTo(map);
	marker.bindPopup("<b>Hello world!</b><br />I am a popup.<br />" + points).openPopup();

	});

	};

	function getPollution(){

	map.on('click', function(e) {

	var theUrl = "http://api.erg.kcl.ac.uk/AirQuality/Data/Nowcast/lat=" + e.latlng.lat +"/lon="+ e.latlng.lng + "/Json";

	function httpGet(theUrl)
	{
	var xmlHttp = new XMLHttpRequest();
	xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
	xmlHttp.send( null );
	return xmlHttp.responseText;
	}


	});




	}

	function getCoords() {

	var marker = null;

	map.on('click', function(e) {
	if (marker !== null) {
	map.removeLayer(marker);
	}
	marker = L.marker(e.latlng).addTo(map);
	marker.bindPopup("<b>Pollution Levels at:<br />" + e.latlng.lat +" "+e.latlng.lng).openPopup();
	console.log("point @ " + e.latlng.lat +" "+e.latlng.lng);
	});

	};

	//I have no idea what i'm doing...
	window.onload = function() {

	setupMap();
	getCoords();
	getPollution();
	};
	body {
	margin: 0;
	padding: 0;
	}


	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}