Skip to content

Instantly share code, notes, and snippets.

@mwkorver

mwkorver/leaflet_example.html

Last active March 12, 2016 01:30
Show Gist options
  • Save mwkorver/c77f12e2f071da6179ae to your computer and use it in GitHub Desktop.
Save mwkorver/c77f12e2f071da6179ae to your computer and use it in GitHub Desktop.
Download ZIP
Workshop leaflet example HTML
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment