Mapbox tiles

Leaflet

by marcus211

HTML

<script src="leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="map-container">
      <div id="map-canvas" style="width: 100%; height: 500px"></div>
    </div>
  </div>
</div>

CSS

.map-container {
    width: 800px;
    margin: 0 auto;
  }

JavaScript

//MapBox Layers
    var mbUrl='https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicGFycmllaHVudGVyIiwiYSI6ImNpbnNuaGc1bDExNml1a20zcnBhbGJua3IifQ.pylT_at_7Cym6Nt3Jssg7g';
    var mbAttrib='Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>';
    var Esri_WorldTopoMap = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}';
	  var Esri_WorldTopoMapAttrib = 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community';

    
    var HERE_hybridDay = L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/{type}/{mapID}/hybrid.day/{z}/{x}/{y}/{size}/{format}?app_id={app_id}&app_code={app_code}&lg={language}', {
	attribution: 'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>',
	subdomains: '1234',
	mapID: 'newest',
	app_id: 'XBFPmottusgi5fUIFuVV',
	app_code: 'G9w_NIF6aqq5FyqYEdAm7w',
	base: 'aerial',
	maxZoom: 22,
	type: 'maptile',
	language: 'eng',
	format: 'png8',
	size: '256'
    });

    var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
    });

    //var mbAccessToken = 'pk.eyJ1IjoicGFycmllaHVudGVyIiwiYSI6ImNpbnNuaGc1bDExNml1a20zcnBhbGJua3IifQ.pylT_at_7Cym6Nt3Jssg7g'; //Gareth Key
    var mbAccessToken = 'pk.eyJ1IjoiamptY25hYiIsImEiOiJjaW5xbXBoa3QxMGI5dTJtM2N6czB4enJsIn0.qpGOZT0Zf_XnMmyVhP9mzw'; //Justin Key
    var mb_streets = new L.TileLayer(mbUrl, {attribution: mbAttrib, id: 'mapbox.streets', accessToken: mbAccessToken});
    var...