kampar/leaflet_demo_tms.html

## leaflet_demo_tms.html
<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet CDN - Black Marble</title>
    <style>
      html, body, #map{
        height: 100%;
        margin: 0px;
        padding: 0px
      }
			.leaflet-control-attribution { display:none!important}
    </style>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>

</head>
<body>
	<div id="map"></div>
	<script>
		var meranti =[1.00176, 102.71264];
		var center = [0.08789, 101.7334];
		var map = L.map('map').setView(center, 5);// load DOM kita yang id nya map dan tampilkan peta


		//var stamen_watercolor_ssl = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg');
		var stamen_watercolor = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg');
		var stamen_toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png');

		var cesium_blackmarble =  L.tileLayer('http://cesiumjs.org/blackmarble/{z}/{x}/{-y}.png',{maxZoom:8});
		var cesium_blackmarble_TMS =  L.tileLayer('http://cesiumjs.org/blackmarble/{z}/{x}/{y}.png',{maxZoom:8});


		var tileLayer_ESRI_World_Imagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/'
           + 'rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
					 ,{ attribution: 'ESRI'
					 });

		//DEFAULT
		cesium_blackmarble.addTo(map);


		//tileLayer_merantiJalan.addTo(map).bringToFront();

		var baseMaps = {
				"Stamen Watercolor": stamen_watercolor,
				"Stamen Toner": stamen_toner,
				"cesium Black Marble": cesium_blackmarble,
				"cesium Black Marble TMS": cesium_blackmarble_TMS,
				"ESRI World Imagery": tileLayer_ESRI_World_Imagery
		};


L.control.layers( baseMaps).addTo(map);


var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString()+ " zoom="+map.getZoom()
			+"\n Center: " + JSON.stringify(map.getCenter())
			+"\n Bounds: " + JSON.stringify(map.getBounds())
		).openOn(map);
}

map.on('click', onMapClick);

	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet CDN - Black Marble</title>
	<style>
	html, body, #map{
	height: 100%;
	margin: 0px;
	padding: 0px
	}
	.leaflet-control-attribution { display:none!important}
	</style>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>

	</head>
	<body>
	<div id="map"></div>
	<script>
	var meranti =[1.00176, 102.71264];
	var center = [0.08789, 101.7334];
	var map = L.map('map').setView(center, 5);// load DOM kita yang id nya map dan tampilkan peta


	//var stamen_watercolor_ssl = L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg');
	var stamen_watercolor = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg');
	var stamen_toner = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png');

	var cesium_blackmarble = L.tileLayer('http://cesiumjs.org/blackmarble/{z}/{x}/{-y}.png',{maxZoom:8});
	var cesium_blackmarble_TMS = L.tileLayer('http://cesiumjs.org/blackmarble/{z}/{x}/{y}.png',{maxZoom:8});


	var tileLayer_ESRI_World_Imagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/'
	+ 'rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
	,{ attribution: 'ESRI'
	});

	//DEFAULT
	cesium_blackmarble.addTo(map);


	//tileLayer_merantiJalan.addTo(map).bringToFront();

	var baseMaps = {
	"Stamen Watercolor": stamen_watercolor,
	"Stamen Toner": stamen_toner,
	"cesium Black Marble": cesium_blackmarble,
	"cesium Black Marble TMS": cesium_blackmarble_TMS,
	"ESRI World Imagery": tileLayer_ESRI_World_Imagery
	};


	L.control.layers( baseMaps).addTo(map);



	var popup = L.popup();

	function onMapClick(e) {
	popup
	.setLatLng(e.latlng)
	.setContent("You clicked the map at " + e.latlng.toString()+ " zoom="+map.getZoom()
	+"\n Center: " + JSON.stringify(map.getCenter())
	+"\n Bounds: " + JSON.stringify(map.getBounds())
	).openOn(map);
	}

	map.on('click', onMapClick);

	</script>
	</body>
	</html>