diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index 004c705..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,14 +0,0 @@ -module.exports = function(grunt) { - // Do grunt-related things in here - grunt.initConfig({ - connect: { - uses_defaults: {} - }, - watch: { - - } - }); - - grunt.loadNpmTasks('grunt-contrib-connect'); - grunt.loadNpmTasks('grunt-contrib-watch'); -}; diff --git a/README.md b/README.md index 198c2c3..3fd54da 100644 --- a/README.md +++ b/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 diff --git a/examples/iiif-example.js b/examples/iiif-example.js index d8fb4ec..d5671a7 100644 --- a/examples/iiif-example.js +++ b/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: 'ManuscritKalîla et Dimna, avec de nombreuses' + attribution: 'ManuscritKalîla et Dimna, avec de nombreuses', + fitBounds: false }) iiifLayers = { diff --git a/leaflet-iiif.js b/leaflet-iiif.js index dce4d7f..d94b54a 100644 --- a/leaflet-iiif.js +++ b/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; diff --git a/package.json b/package.json index 98cb4a2..5628a6d 100644 --- a/package.json +++ b/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" } } diff --git a/spec/LTileLayerIiifSpec.js b/spec/LTileLayerIiifSpec.js index 0406bbf..fa9a5da 100644 --- a/spec/LTileLayerIiifSpec.js +++ b/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); + }); + }); }); diff --git a/spec/fixtures/mlk_info.json b/spec/fixtures/mlk_info.json new file mode 100644 index 0000000..f6678a9 --- /dev/null +++ b/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" + ] +} diff --git a/spec/karma.conf.js b/spec/karma.conf.js index 4cec93e..85cf84e 100644 --- a/spec/karma.conf.js +++ b/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, + } ],