mwkorver/leaflet_example.html

## leaflet_example.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Tile-maker Demo using NAIP on S3</title>

	<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
        <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
	<style type='text/css'>	</style>


<script type='text/javascript'>

    $(window).load(function(){
        var mapquest = L.tileLayer('//otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg', {
                maxZoom: 18,
                minZoom: 5,
                attribution: 'Map data &copy; 2014 Mapquest'
            }),

            wmsTest = L.tileLayer.wms("http://your-elb-name-743146079.us-east-1.elb.amazonaws.com/cgi-bin/mapserv?map=/data/map/mapfiles/naip_docker.map", {
                layers: 'utm11-100pct',
                format: 'image/jpeg',
                service: 'wms',
                SRS: 'epsg:3875',
                maxZoom: 24,
                minZoom:5,
                attribution: "Test Docker layer"
            }),

            // NAIP on S3, target bucket has a redirect to tiler
            workshop = L.tileLayer('//your-bucket-name.s3-website-us-east-1.amazonaws.com/1.0.0/tms-mercator-naip/{z}/{x}/{y}.jpg', {
                maxZoom: 17,
                minZoom: 12,
                tms: 'true',
                attribution: 'USDA Farm Service Agency'
            });

            var canvasTiles = L.tileLayer.canvas();

         canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
             var ctx = canvas.getContext('2d');
             ctx.strokeStyle = ctx.fillStyle = "red";
             ctx.rect(0,0, 256,256);
             ctx.stroke();
             ctx.fillText('(' + zoom + '/' + tilePoint.x + '/' + tilePoint.y + ')',4,15);
         };

        var map = L.map('map', {
                center: [43.8319, -88.0175],
                zoom: 17,
                layers: [naipcf,canvasTiles]
            });

        var baseLayers = {
                "Mapquest OSM Tiles": mapquest,
                "workshop on S3": workshop,
                "Your Tile Layer": wmsTest
                //"City of Oakland via tiler": oaklandt
            };

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

        $(window).on("resize", function () {
            $("#map").height($(window).height()).width($(window).width());
            map.invalidateSize();
        }).trigger("resize");

        map.options.maxZoom = 21;
        map.options.minZoom = 6

        //map.addLayer(canvasTiles);


        //alert ("Max Zoom is: " & map.getMaxZoom());
    });


</script>

</head>

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


</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Tile-maker Demo using NAIP on S3</title>

	<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
	<style type='text/css'> </style>


	<script type='text/javascript'>

	$(window).load(function(){
	var mapquest = L.tileLayer('//otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg', {
	maxZoom: 18,
	minZoom: 5,
	attribution: 'Map data © 2014 Mapquest'
	}),

	wmsTest = L.tileLayer.wms("http://your-elb-name-743146079.us-east-1.elb.amazonaws.com/cgi-bin/mapserv?map=/data/map/mapfiles/naip_docker.map", {
	layers: 'utm11-100pct',
	format: 'image/jpeg',
	service: 'wms',
	SRS: 'epsg:3875',
	maxZoom: 24,
	minZoom:5,
	attribution: "Test Docker layer"
	}),

	// NAIP on S3, target bucket has a redirect to tiler
	workshop = L.tileLayer('//your-bucket-name.s3-website-us-east-1.amazonaws.com/1.0.0/tms-mercator-naip/{z}/{x}/{y}.jpg', {
	maxZoom: 17,
	minZoom: 12,
	tms: 'true',
	attribution: 'USDA Farm Service Agency'
	});

	var canvasTiles = L.tileLayer.canvas();

	canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
	var ctx = canvas.getContext('2d');
	ctx.strokeStyle = ctx.fillStyle = "red";
	ctx.rect(0,0, 256,256);
	ctx.stroke();
	ctx.fillText('(' + zoom + '/' + tilePoint.x + '/' + tilePoint.y + ')',4,15);
	};

	var map = L.map('map', {
	center: [43.8319, -88.0175],
	zoom: 17,
	layers: [naipcf,canvasTiles]
	});

	var baseLayers = {
	"Mapquest OSM Tiles": mapquest,
	"workshop on S3": workshop,
	"Your Tile Layer": wmsTest
	//"City of Oakland via tiler": oaklandt
	};

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

	$(window).on("resize", function () {
	$("#map").height($(window).height()).width($(window).width());
	map.invalidateSize();
	}).trigger("resize");

	map.options.maxZoom = 21;
	map.options.minZoom = 6

	//map.addLayer(canvasTiles);


	//alert ("Max Zoom is: " & map.getMaxZoom());
	});


	</script>

	</head>

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


	</html>