add templated index map view

app/assets/javascripts/geoblacklight/geoblacklight.js

@@ -1,5 +1,6 @@
 //= require leaflet
 //= require native.history
+//= require_tree ./templates
 
 !function(global) {
   'use strict';

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

@@ -5,5 +5,26 @@ GeoBlacklight.Util = {
   linkify: function(str) {
     var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
     return str.toString().replace(urlRegEx, '<a href=\'$1\'>$1</a>');
+  },
+  /**
+   * Calls the index map template
+   * @param {Object} data - GeoJSON feature properties object
+   * @param {requestCallback} cb
+   */
+  indexMapTemplate: function(data, cb) {
+    var thumbDeferred = $.Deferred();
+    $.when(thumbDeferred).done(function() {
+      cb(HandlebarsTemplates["index_map_info"](data));
+    });
+    if (data.iiifUrl) {
+      var manifest = $.getJSON(data.iiifUrl, function(manifestResponse) {
+        if (manifestResponse.thumbnail['@id'] !== null) {
+          data.thumbnailUrl = manifestResponse.thumbnail['@id'];
+          thumbDeferred.resolve();
+        }
+      });
+    } else {
+      thumbDeferred.resolve();
+    }
   }
 };

app/assets/javascripts/geoblacklight/templates/index_map_info.hbs

@@ -0,0 +1,38 @@
+<div class="index-map-info">
+  {{#if title}}
+    <h3>{{title}}</h3>
+  {{/if}}
+  <div class="">
+    {{#if thumbnailUrl}}
+      {{#if websiteUrl}}
+        <a href="{{websiteUrl}}">
+          <img src="{{thumbnailUrl}}" class="img-responsive">
+        </a>
+      {{else}}
+        <img src="{{thumbnailUrl}}">
+      {{/if}}
+    {{/if}}
+    <dl>
+      {{#if websiteUrl}}
+        <dt>Website</dt>
+        <dd><a href="{{websiteUrl}}">{{websiteUrl}}</a></dd>
+      {{/if}}
+      {{#if downloadUrl}}
+        <dt>Download</dt>
+        <dd><a href="{{downloadUrl}}">{{downloadUrl}}</a></dd>
+      {{/if}}
+      {{#if recordIdentifier}}
+        <dt>Record Identifier</dt>
+        <dd>{{recordIdentifier}}</dd>
+      {{/if}}
+      {{#if label}}
+        <dt>Label</dt>
+        <dd>{{label}}</dd>
+      {{/if}}
+      {{#if note}}
+        <dt>Note</dt>
+        <dd>{{note}}</dd>
+      {{/if}}
+    </dl>
+  </div>
+</div>

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

@@ -20,27 +20,29 @@ GeoBlacklight.Viewer.IndexMap = GeoBlacklight.Viewer.Map.extend({
         {
           style: function(feature) {
             var style = {
-              weight: 1,
-              color: '#1eb300',
+              weight: 1
             }
-            var title = feature.properties.Title
-            if (title === null) {
-              style.color = '#b3001e'
+            // Style the colors based on availability
+            if (feature.properties.available) {
+              style.color = '#1eb300';
+            } else {
+              style.color = '#b3001e';
             }
             return style;
           },
           onEachFeature: function(feature, layer) {
-            layer.bindLabel(feature.properties.Sheet_Num, {
-              direction: 'auto', permanent: true
-            });
-            if (feature.properties.Title !== null) {
+            // Add a hover label for the label property
+            if (feature.properties.label !== null) {
+              layer.bindLabel(feature.properties.label, {
+                direction: 'auto', permanent: true
+              });
+            }
+            // If it is available add clickable info
+            if (feature.properties.available !== null) {
               layer.on('click', function(e) {
-                console.log(e)
-                var html = '';
-                $.each(feature.properties, function(key, val) {
-                  html += key + ': ' + val + '\n';
+                GeoBlacklight.Util.indexMapTemplate(feature.properties, function(html) {
+                  $('.viewer-information').html(html);
                 });
-                $('.viewer-information').html(html);
               });
             }
           }

spec/features/index_map_spec.rb

@@ -0,0 +1,24 @@
+require 'spec_helper'
+
+feature 'Index map' do
+  scenario 'displays index map viewer', js: true do
+    visit solr_document_path('stanford-fb897vt9938')
+    # Wait until SVG elements are added
+    expect(page).to have_css '.leaflet-overlay-pane svg'
+    page.first('svg g path').click
+    within '.index-map-info' do
+      expect(page).to have_css 'h3', text: 'Dabao Kinbōzu -- ダバオ近傍圖'
+      expect(page).to have_css 'a img[src="https://stacks.stanford.edu/image/iiif/zh828kt2136%2Fzh828kt2136_00_0001/full/!400,400/0/default.jpg"]'
+      within 'dl' do
+        expect(page).to have_css 'dt', text: 'Website'
+        expect(page).to have_css 'dd a', text: 'http://purl.stanford.edu/zh828kt2136'
+        expect(page).to have_css 'dt', text: 'Download'
+        expect(page).to have_css 'dd a', text: 'https://embed.stanford.edu/iframe?url=https://purl.stanford.edu/zh828kt2136&hide_title=true#'
+        expect(page).to have_css 'dt', text: 'Record Identifier'
+        expect(page).to have_css 'dd', text: '10532136'
+        expect(page).to have_css 'dt', text: 'Label'
+        expect(page).to have_css 'dd', text: 'SHEET 8'
+      end
+    end
+  end
+end

spec/lib/geoblacklight/item_viewer_spec.rb

@@ -49,5 +49,15 @@
         expect(item_viewer.viewer_preference).to eq tiled_map_layer: 'http://www.example.com/MapServer'
       end
     end
+    context 'index map' do
+      let(:document_attributes) do
+        {
+          references_field => {
+            'https://openindexmaps.org' => 'http://www.example.com/index_map'
+          }.to_json
+        }
+      end
+      it { expect(item_viewer.viewer_preference).to eq index_map: 'http://www.example.com/index_map' }
+    end
   end
 end