Merge pull request #35 from mejackreed/zoomToLayer-optional

Zoom to layer optional

README.md

@@ -37,6 +37,7 @@ Option | Type | Default | Description
 ------ | ---- | ------- | -----------
 `tileFormat` | `String` | `'jpg'` | The [format](http://iiif.io/api/image/2.0/#format) of the returned image.
 `tileSize` | Number | 256 | Tile size (width and height in pixels, assuming tiles are square).
+`fitBounds` | Boolean | true | Automatically center and fit the maps bounds to the added IIIF layer
 
 ### Development
 
@@ -46,13 +47,19 @@ Clone the repository
 $ git clone https://github.com/mejackreed/Leaflet-IIIF.git
 ```
 
+Install the dependencies
+
+```
+$ npm install
+```
+
 Run the server
 
 ```
-$ grunt connect watch
+$ npm start
 ```
 
-Access the examples at http://127.0.0.1/examples/example.html
+Access the examples at http://127.0.0.1:8080/examples/example.html
 
 ### Leaflet-IIIF in the wild
 

examples/iiif-example.js

@@ -20,7 +20,8 @@ apostle = L.tileLayer.iiif('http://ids.lib.harvard.edu/ids/iiif/25286610/info.js
 });
 
 bnf = L.tileLayer.iiif('http://gallica.bnf.fr/iiif/ark:/12148/btv1b84539771/f1/info.json', {
-  attribution: '<a href="http://gallicalabs.bnf.fr/ark:/12148/btv1b84539771">ManuscritKalîla et Dimna, avec de nombreuses'
+  attribution: '<a href="http://gallicalabs.bnf.fr/ark:/12148/btv1b84539771">ManuscritKalîla et Dimna, avec de nombreuses',
+  fitBounds: false
 })
 
 iiifLayers = {

leaflet-iiif.js

@@ -9,7 +9,8 @@ L.TileLayer.Iiif = L.TileLayer.extend({
     continuousWorld: true,
     tileSize: 256,
     updateWhenIdle: true,
-    tileFormat: 'jpg'
+    tileFormat: 'jpg',
+    fitBounds: true
   },
 
   initialize: function(url, options) {
@@ -73,21 +74,16 @@ L.TileLayer.Iiif = L.TileLayer.extend({
     // Wait for deferred to complete
     $.when(_this._infoDeferred).done(function() {
 
-      // Find best zoom level and center map
-      var initialZoom = _this._getInitialZoom(map.getSize()),
-        imageSize = _this._imageSizes[initialZoom],
-        sw = map.options.crs.pointToLatLng(L.point(0, imageSize.y), initialZoom),
-        ne = map.options.crs.pointToLatLng(L.point(imageSize.x, 0), initialZoom),
-        bounds = L.latLngBounds(sw, ne);
-
-      map.fitBounds(bounds, true);
-
       // Set maxZoom for map
       map._layersMaxZoom = _this.maxZoom;
 
       // Call add TileLayer
       L.TileLayer.prototype.onAdd.call(_this, map);
 
+      if (_this.options.fitBounds) {
+        _this._fitBounds();
+      }
+
       // Reset tile sizes to handle non 256x256 IIIF tiles
       _this.on('tileload', function(tile, url) {
 
@@ -103,6 +99,18 @@ L.TileLayer.Iiif = L.TileLayer.extend({
       });
     });
   },
+  _fitBounds: function() {
+    var _this = this;
+
+    // Find best zoom level and center map
+    var initialZoom = _this._getInitialZoom(map.getSize());
+    var imageSize = _this._imageSizes[initialZoom];
+    var sw = map.options.crs.pointToLatLng(L.point(0, imageSize.y), initialZoom);
+    var ne = map.options.crs.pointToLatLng(L.point(imageSize.x, 0), initialZoom);
+    var bounds = L.latLngBounds(sw, ne);
+
+    map.fitBounds(bounds, true);
+  },
   _getInfo: function() {
     var _this = this;
 

package.json

@@ -7,7 +7,8 @@
     "example": "examples"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "./node_modules/.bin/karma start ./spec/karma.conf.js",
+    "start": "./node_modules/.bin/http-server"
   },
   "repository": {
     "type": "git",
@@ -26,16 +27,13 @@
   },
   "homepage": "https://github.com/mejackreed/Leaflet-IIIF",
   "devDependencies": {
-    "grunt": "^0.4.5",
-    "grunt-contrib-connect": "^0.10.1",
-    "grunt-contrib-watch": "^0.6.1",
+    "http-server": "^0.9.0",
+    "jasmine": "^2.4.1",
+    "jquery": "^2.2.2",
     "karma": "^0.13.22",
     "karma-jasmine": "^0.3.7",
     "karma-phantomjs-launcher": "^1.0.0",
     "leaflet": "^0.7.7",
     "phantomjs-prebuilt": "^2.1.5"
-  },
-  "scripts": {
-    "test": "./node_modules/.bin/karma start ./spec/karma.conf.js"
   }
 }

spec/LTileLayerIiifSpec.js

@@ -13,7 +13,28 @@ describe('L.TileLayer.Iiif', function() {
     map = L.map(div);
   });
 
+  afterEach(function() {
+    document.body.removeChild(div);
+  });
+
+  function iiifLayerFactory(options) {
+    return L.tileLayer.iiif('http://localhost:9876/base/fixtures/mlk_info.json', options || {});
+  }
+
   it('initializes the map', function(){
     expect(typeof (map)).toEqual('object');
   });
+
+  describe('fitBounds', function() {
+    var iiifLayer;
+
+    beforeEach(function() {
+      iiifLayer = iiifLayerFactory();
+    });
+
+    it('by default is on', function() {
+      expect(iiifLayer.options.fitBounds).toBe(true);
+      map.addLayer(iiifLayer);
+    });
+  });
 });

spec/fixtures/mlk_info.json

@@ -0,0 +1,45 @@
+{
+  "@context": "http://iiif.io/api/image/2/context.json",
+  "@id": "https://stacks.stanford.edu/image/iiif/hg676jb4964%252F0380_796-44",
+  "width": 5426,
+  "height": 3820,
+  "protocol": "http://iiif.io/api/image",
+  "sizes": [
+    {
+      "height": 239,
+      "width": 340
+    },
+    {
+      "height": 478,
+      "width": 679
+    },
+    {
+      "height": 955,
+      "width": 1357
+    },
+    {
+      "height": 1910,
+      "width": 2713
+    },
+    {
+      "height": 3820,
+      "width": 5426
+    }
+  ],
+  "tiles": [
+    {
+      "width": 1024,
+      "height": 1024,
+      "scaleFactors": [
+        1,
+        2,
+        4,
+        8,
+        16
+      ]
+    }
+  ],
+  "profile": [
+    "http://iiif.io/api/image/2/level0.json"
+  ]
+}

spec/karma.conf.js

@@ -16,7 +16,15 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       './../node_modules/leaflet/dist/leaflet.js',
-      './**/*.js'
+      './../node_modules/jquery/dist/jquery.js',
+      './../leaflet-iiif.js',
+      './**/*.js',
+      {
+        pattern: './fixtures/*.json',
+        watched: true,
+        served:  true,
+        included: false,
+      }
     ],