Merge pull request #207 from geoblacklight/iiif-viewer-switch-to-leaflet

remove osd for leaflet-iiif

app/assets/javascripts/geoblacklight/geoblacklight.js

@@ -1,4 +1,5 @@
 //= require leaflet
+//= require leaflet-iiif
 //= require native.history
 //= require readmore.min
 

app/assets/javascripts/geoblacklight/modules/home.js

@@ -1,7 +1,7 @@
 Blacklight.onLoad(function() {
   $('[data-map="home"]').each(function(i, element) {
 
-    var geoblacklight = new GeoBlacklight.Viewer.Leaflet(this),
+    var geoblacklight = new GeoBlacklight.Viewer.Map(this),
         data = $(this).data();
     geoblacklight.map.addControl(L.control.geosearch({
       baseUrl: data.catalogPath,

app/assets/javascripts/geoblacklight/modules/results.js

@@ -35,7 +35,7 @@ Blacklight.onLoad(function() {
     }
 
     // instantiate new map
-    geoblacklight = new GeoBlacklight.Viewer.Leaflet(this, { bbox: bbox });
+    geoblacklight = new GeoBlacklight.Viewer.Map(this, { bbox: bbox });
 
     // set hover listeners on map
     $('#content')

app/assets/javascripts/geoblacklight/viewers/iiif.js

@@ -1,20 +1,17 @@
-//= require geoblacklight/viewers/viewer.js
-//= require openseadragon
+//= require geoblacklight/viewers/viewer
 
 GeoBlacklight.Viewer.Iiif = GeoBlacklight.Viewer.extend({
   load: function() {
-    this.osdConfig = {
-      id: this.element.id,
-      prefixUrl: '/assets/osd/',
-      preserveViewport: true,
-      showNavigator:  false,
-      visibilityRatio: 1,
-      minZoomLevel: 1,
-      tileSources: [this.data.url]
-    };
-
     this.adjustLayout();
-    OpenSeadragon(this.osdConfig);
+
+    this.map = L.map(this.element, {
+      center: [0, 0],
+      crs: L.CRS.Simple,
+      zoom: 0
+    });
+
+    this.iiifLayer = L.tileLayer.iiif(this.data.url)
+      .addTo(this.map);
   },
 
   adjustLayout: function() {

app/assets/javascripts/geoblacklight/viewers/leaflet.js → app/assets/javascripts/geoblacklight/viewers/map.js

@@ -1,6 +1,6 @@
-//= require geoblacklight/viewers/viewer.js
+//= require geoblacklight/viewers/viewer
 
-GeoBlacklight.Viewer.Leaflet = GeoBlacklight.Viewer.extend({
+GeoBlacklight.Viewer.Map = GeoBlacklight.Viewer.extend({
 
   options: {
     /**

app/assets/javascripts/geoblacklight/viewers/wms.js

@@ -1,6 +1,6 @@
-//= require geoblacklight/viewers/leaflet.js
+//= require geoblacklight/viewers/map
 
-GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Leaflet.extend({
+GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Map.extend({
 
   load: function() {
     this.options.bbox = L.bboxToBounds(this.data.mapBbox);
@@ -59,7 +59,7 @@ GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Leaflet.extend({
             return;
           }
           var t = $('<table id="attribute-table" class="table table-hover table-condensed table-responsive table-striped table-bordered"><thead><tr><th>Attribute</th><th>Value</th></tr></thead><tbody>');
-          $.each(data.values, function(i,val) {
+          $.each(data.values, function(i, val) {
             t.append('<tr><td>' + val[0] + '</td><td>' + val[1] + '</tr>');
           });
           $('#attribute-table').replaceWith(t);
@@ -70,4 +70,4 @@ GeoBlacklight.Viewer.Wms = GeoBlacklight.Viewer.Leaflet.extend({
       });
     });
   }
-});
+});

vendor/assets/javascripts/leaflet-iiif.js

@@ -0,0 +1,152 @@
+/*
+* Leaflet-IIIF 0.0.2
+* IIIF Viewer for Leaflet
+* by Jack Reed, @mejackreed
+*/
+
+L.TileLayer.Iiif = L.TileLayer.extend({
+  options: {
+    continuousWorld: true,
+    tileSize: 256,
+    updateWhenIdle: true
+  },
+
+  initialize: function(url, options) {
+    options = L.setOptions(this, options);
+    this._infoDeferred = new $.Deferred();
+    this._infoUrl = url;
+    this._baseUrl = this._templateUrl();
+    this._getInfo();
+  },
+  getTileUrl: function(coords) {
+    var _this = this,
+    x = coords.x,
+    y = (coords.y),
+    zoom = _this._map.getZoom(),
+    scale = Math.pow(2, _this.maxZoom - zoom),
+    tileBaseSize = _this.options.tileSize * scale,
+    minx = (x * tileBaseSize),
+    miny = (y * tileBaseSize),
+    maxx = Math.min(minx + tileBaseSize, _this.x),
+    maxy = Math.min(miny + tileBaseSize, _this.y);
+
+    return L.Util.template(this._baseUrl, L.extend({
+      format: 'jpg',
+      quality: _this.quality,
+      region: [minx, miny, (maxx - minx), (maxy - miny)].join(','),
+      rotation: 0,
+      size: 'pct:' + (100 / scale)
+    }, this.options));
+  },
+  onAdd: function(map) {
+    var _this = this;
+
+    // Wait for deferred to complete
+    $.when(_this._infoDeferred).done(function() {
+
+      // Try to center the map a bit
+      map.setView([-_this.options.tileSize / 2, _this.options.tileSize / 4], 1);
+
+      // Set maxZoom for map
+      map._layersMaxZoom = _this.maxZoom;
+
+      // Call add TileLayer
+      L.TileLayer.prototype.onAdd.call(_this, map);
+
+      // Reset tile sizes to handle non 256x256 IIIF tiles
+      _this.on('tileload', function(tile, url) {
+
+        var height = tile.tile.naturalHeight,
+        width = tile.tile.naturalWidth;
+
+        // No need to resize if tile is 256 x 256
+        if (height === 256 && width === 256) return;
+
+        tile.tile.style.width = width + 'px';
+        tile.tile.style.height = height + 'px';
+
+      });
+    });
+  },
+  _getInfo: function() {
+    var _this = this;
+
+    // Look for a way to do this without jQuery
+    $.getJSON(_this._infoUrl)
+    .done(function(data) {
+      _this.y = data.height;
+      _this.x = data.width;
+
+      var profile,
+      tierSizes = [],
+      scale,
+      width_,
+      height_,
+      tilesX_,
+      tilesY_;
+
+      // Set quality based off of IIIF version
+      if (data.profile instanceof Array) {
+        profile = data.profile[0];
+      }else {
+        profile = data.profile;
+      }
+      switch (profile) {
+        case 'http://library.stanford.edu/iiif/image-api/compliance.html#level1':
+          _this.quality = 100;
+          break;
+        case 'http://library.stanford.edu/iiif/image-api/1.1/compliance.html':
+          _this.quality = 'native';
+          break;
+        case 'http://iiif.io/api/image/2/level2.json':
+          _this.quality = 'default';
+          break;
+      }
+
+      ceilLog2 = function(x) {
+        return Math.ceil(Math.log(x) / Math.LN2);
+      };
+
+      // Calculates maxZoom for the layer
+      _this.maxZoom = Math.max(ceilLog2(_this.x / _this.options.tileSize),
+      ceilLog2(_this.y / _this.options.tileSize));
+
+      for (var i = 0; i <= _this.maxZoom; i++) {
+        scale = Math.pow(2, _this.maxZoom - i);
+        width_ = Math.ceil(_this.x / scale);
+        height_ = Math.ceil(_this.y / scale);
+        tilesX_ = Math.ceil(width_ / _this.options.tileSize);
+        tilesY_ = Math.ceil(height_ / _this.options.tileSize);
+        tierSizes.push([tilesX_, tilesY_]);
+      }
+      _this._tierSizes = tierSizes;
+
+      // Resolved Deferred to initiate tilelayer load
+      _this._infoDeferred.resolve();
+    });
+  },
+  _infoToBaseUrl: function() {
+    return this._infoUrl.replace('info.json', '');
+  },
+  _templateUrl: function() {
+    return this._infoToBaseUrl() + '{region}/{size}/{rotation}/{quality}.{format}';
+  },
+  _tileShouldBeLoaded: function(coords) {
+    var _this = this,
+    zoom = _this._map.getZoom(),
+    sizes = _this._tierSizes[zoom],
+    x = coords.x,
+    y = (coords.y);
+
+    if (!sizes) return false;
+    if (x < 0 || sizes[0] <= x || y < 0 || sizes[1] <= y) {
+      return false;
+    }else {
+      return true;
+    }
+  }
+});
+
+L.tileLayer.iiif = function(url, options) {
+  return new L.TileLayer.Iiif(url, options);
+};