tristen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##Enforce Limits
Sometimes you want to limit a users ability to pan around to just a particular region. In Modest Maps you can specify limits by setting locationCoordinate to the map object.
Contributors

  
## app.js
var initMap = function() {
    var layer = new MM.TemplatedLayer("http://otile1.mqcdn.com/tiles/1.0.0/osm/{Z}/{X}/{Y}.png");
    map = new MM.Map('map', layer)

    var minZoom = 2;
    var maxZoom = 10;
    var topLeft = new MM.Location(51.4, -131.8);
    var bottomRight = new MM.Location(21.5, -50.5);

    // override map limits so that panning and zooming are constrained within these bounds:
    map.coordLimits = [
      map.locationCoordinate(topLeft).zoomTo(minZoom),
      map.locationCoordinate(bottomRight).zoomTo(maxZoom)
    ];

    // override provider limits so that tiles are not loaded unless they are inside these bounds:
    layer.tileLimits = [
      map.locationCoordinate(topLeft).zoomTo(minZoom),
      map.locationCoordinate(bottomRight).zoomTo(maxZoom)
   ];

    // override sourceCoordinate so that it doesn't use coord limits to wrap tiles
    // but so that it rejects any tile coordinates that lie outside the limits
    layer.sourceCoordinate = function(coord) {
        // don't need .container() stuff here but it means *something* will get loaded at low zoom levels
        // e.g. at level 0 the base tile could contain the entire extent
        // skip the .container() stuff if you don't want to load/render tiles outside the extent *at all*
        var TL = this.tileLimits[0].zoomTo(coord.zoom).container();
        var BR = this.tileLimits[1].zoomTo(coord.zoom).container().right().down();
        if (coord.row < TL.row || coord.row >= BR.row || coord.column < TL.column || coord.column >= BR.column) {
            // it's too high or too low or too lefty or too righty:
            //console.log(coord.toString() + " is outside bounds");
            return null;
        }
        // otherwise it's cool, let it through
        return coord;
    }

    map.setCenterZoom(new MM.Location(37.811530, -122.2666097), 5);
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Modest Maps JS Demo | Enforce Limits</title>
    <link rel='stylesheet' href='style.css'>
  </head>

  <body onload='initMap()'>
    <div id='map' />
    <script src='https://rawgithub.com/stamen/modestmaps-js/master/modestmaps.min.js'></script>
    <script src='app.js'></script>
  </body>
</html>

## style.css
body {
  font: 13px/22px 'Helvetica Neue', Helvetica, sans;
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  }
	var initMap = function() {
	var layer = new MM.TemplatedLayer("http://otile1.mqcdn.com/tiles/1.0.0/osm/{Z}/{X}/{Y}.png");
	map = new MM.Map('map', layer)

	var minZoom = 2;
	var maxZoom = 10;
	var topLeft = new MM.Location(51.4, -131.8);
	var bottomRight = new MM.Location(21.5, -50.5);

	// override map limits so that panning and zooming are constrained within these bounds:
	map.coordLimits = [
	map.locationCoordinate(topLeft).zoomTo(minZoom),
	map.locationCoordinate(bottomRight).zoomTo(maxZoom)
	];

	// override provider limits so that tiles are not loaded unless they are inside these bounds:
	layer.tileLimits = [
	map.locationCoordinate(topLeft).zoomTo(minZoom),
	map.locationCoordinate(bottomRight).zoomTo(maxZoom)
	];

	// override sourceCoordinate so that it doesn't use coord limits to wrap tiles
	// but so that it rejects any tile coordinates that lie outside the limits
	layer.sourceCoordinate = function(coord) {
	// don't need .container() stuff here but it means something will get loaded at low zoom levels
	// e.g. at level 0 the base tile could contain the entire extent
	// skip the .container() stuff if you don't want to load/render tiles outside the extent at all
	var TL = this.tileLimits[0].zoomTo(coord.zoom).container();
	var BR = this.tileLimits[1].zoomTo(coord.zoom).container().right().down();
	if (coord.row < TL.row \|\| coord.row >= BR.row \|\| coord.column < TL.column \|\| coord.column >= BR.column) {
	// it's too high or too low or too lefty or too righty:
	//console.log(coord.toString() + " is outside bounds");
	return null;
	}
	// otherwise it's cool, let it through
	return coord;
	}

	map.setCenterZoom(new MM.Location(37.811530, -122.2666097), 5);
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Modest Maps JS Demo \| Enforce Limits</title>
	<link rel='stylesheet' href='style.css'>
	</head>

	<body onload='initMap()'>
	<div id='map' />
	<script src='https://rawgithub.com/stamen/modestmaps-js/master/modestmaps.min.js'></script>
	<script src='app.js'></script>
	</body>
	</html>
	body {
	font: 13px/22px 'Helvetica Neue', Helvetica, sans;
	margin: 0;
	padding: 0;
	}
	#map {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	}