Skip to content

frogcat/leaflet-tilelayer-clip

Repository files navigation

leaflet-tilelayer-clip

leaflet 0.7.3 plugin to clip tilelayer

Demo

http://frogcat.github.io/leaflet-tilelayer-clip/demo.html

Usage

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>leaflet-tilelayer-clip</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="leaflet-tilelayer-clip.js"></script>
<style>
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>
</head>
<body>
	<div id="map"></div>
	<script>
		var map = L.map("map", {
			zoom : 16,
			minZoom : 10,
			center : [ 36.09894, 139.96672 ]
		});

		L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
			attribution : "国土地理院",
			maxNativeZoom : 18,
			maxZoom : 20
		}).addTo(map);

		L.tileLayer.clip('http://cyberjapandata.gsi.go.jp/xyz/20150911dol2/{z}/{x}/{y}.png', {
			attribution : "国土地理院",
			maxNativeZoom : 18,
			maxZoom : 20,
			clip : L.bounds([ 0, 0 ], [ window.innerWidth * 0.5, window.innerHeight ])
		}).addTo(map);
	</script>
</body>
</html>

View live demo http://frogcat.github.io/leaflet-tilelayer-clip/simple.html

Options

Option Type Default Description
clip L.Bounds ([0,0],[640,480]) Clip bounds

Methods

Mthod Returns Description
setClip(bounds) this Set clip bounds.
update(bounds) this update view.

About

leaflet plugin to clip tilelayer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published