Enables more configurable basemaps

Opens the door for WMS, and other customized basemaps.

README.md

@@ -34,13 +34,34 @@ rails generate blacklight_heatmaps:install
 
 ## Getting started
 
+### Indexing data
 BlacklightHeatmaps expects your data to be indexed as a [Spatial Recursive Prefix Tree](https://cwiki.apache.org/confluence/display/solr/Spatial+Search#SpatialSearch-RPT) type. The plugin currently supports data indexed in formats:
 
  - `x y` Syntax. example: "-121.631609 36.688128"
  - CQL ENVELOPE Syntax (`minX, maxX, maxY, minY`). example: "ENVELOPE(122.934585571, 153.987060547, 45.522888184, 20.422889709)"
 
 Additional formats could be added by extending `BlacklightHeatmaps::GeometryParser`
 
+### Customizing the basemap
+
+By default three different basemaps are included with BlacklightHeatmaps. You can modify these by changing the configuration value in the `CatalogController`.
+
+```ruby
+  # Basemaps configured include: 'positron', 'darkMatter', 'OpenStreetMap.HOT'
+  config.basemap_provider = 'OpenStreetMap.HOT'
+```
+
+BlacklightHeatmaps allows you to customize your basemap further to any Leaflet TileLayer subclass. This includes WMS layers, TileLayers, etc. Checkout [Leaflet Providers](https://github.com/leaflet-extras/leaflet-providers) for more ideas on basemaps you can use.
+
+To customize the basemap, make sure that you extend the `BlacklightHeatmaps.Basemaps` object to include your basemap selection:
+
+```javascript
+  BlacklightHeatmaps.Basemaps[' OpenStreetMap.BlackAndWhite'] = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
+	maxZoom: 18,
+	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+});
+```
+
 ## Development
 
 Run Solr and Blacklight (with BlacklightMaps) for interactive development:

app/assets/javascripts/blacklight_heatmaps/basemaps.js

@@ -0,0 +1,24 @@
+BlacklightHeatmaps.Basemaps = {
+  darkMatter: L.tileLayer(
+    'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+      maxZoom: 18,
+      worldCopyJump: true,
+      detectRetina: true,
+    }
+  ),
+  positron: L.tileLayer(
+    'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
+      maxZoom: 18,
+      worldCopyJump: true,
+      detectRetina: true,
+    }
+  ),
+  'OpenStreetMap.HOT': L.tileLayer(
+    'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>',
+      maxZoom: 19,
+    }
+  ),
+};

app/assets/javascripts/blacklight_heatmaps/blacklight_heatmaps.js

@@ -4,6 +4,14 @@
   var BlacklightHeatmaps = L.Class.extend({
     statics: {
       __version__: '0.0.2',
+
+      selectBasemap: function (basemap) {
+        if (basemap && basemap !== undefined) {
+          return BlacklightHeatmaps.Basemaps[basemap];
+        } else {
+          return BlacklightHeatmaps.Basemaps.positron;
+        }
+      },
     },
   });
   global.BlacklightHeatmaps = BlacklightHeatmaps;

app/assets/javascripts/blacklight_heatmaps/default.js

@@ -3,4 +3,5 @@
 //= require L.Control.Sidebar
 //= require leaflet_solr_heatmap
 //= require blacklight_heatmaps/blacklight_heatmaps
+//= require blacklight_heatmaps/basemaps
 //= require_tree ./viewers

app/assets/javascripts/blacklight_heatmaps/viewers/index.js

@@ -25,9 +25,9 @@ Blacklight.onLoad(function () {
       $('ul.pagination li').addClass('disabled');
 
       var map = L.map($el[0].id).setView([0, 0], 1);
-      var basemap = L.tileLayer($el.data().basemap, {
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
-      }).addTo(map);
+      var basemap = BlacklightHeatmaps.selectBasemap(
+        $el.data().basemapProvider
+      ).addTo(map);
 
       var solrLayer = L.solrHeatmap(requestUrl, {
         field: geometryField,

app/assets/javascripts/blacklight_heatmaps/viewers/show.js

@@ -17,9 +17,9 @@ Blacklight.onLoad(function () {
       var features = $el.data().features;
 
       var map = L.map($el[0].id).setView([0, 0], 1);
-      var basemap = L.tileLayer($el.data().basemap, {
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
-      }).addTo(map);
+      var basemap = BlacklightHeatmaps.selectBasemap(
+        $el.data().basemapProvider
+      ).addTo(map);
 
       var features = L.geoJson(features).addTo(map);
 

app/helpers/blacklight/maps_helper.rb

@@ -48,7 +48,7 @@ def document_path
     def index_map_data_attributes
       {
         index_map: true,
-        basemap: blacklight_config.basemap,
+        basemap_provider: blacklight_config.basemap_provider,
         search_url: request.url,
         geometry_field: blacklight_config.geometry_field,
         sidebar_template: sidebar_template,

app/views/catalog/_show_leaflet_map_default.html.erb

@@ -1,5 +1,5 @@
 <% features = document.to_geojson(blacklight_config) %>
 
 <% unless features.nil? %>
-  <%= content_tag(:div, nil, class: 'blacklight-heatmaps-show-map', id: "map-#{document.id}", data: {show_map: true, features: features, basemap: blacklight_config.basemap}) %>
+  <%= content_tag(:div, nil, class: 'blacklight-heatmaps-show-map', id: "map-#{document.id}", data: {show_map: true, features: features, basemap_provider: blacklight_config.basemap_provider}) %>
 <% end %>

lib/generators/blacklight_heatmaps/install_generator.rb

@@ -17,7 +17,8 @@ def configuration
       inject_into_file 'app/controllers/catalog_controller.rb', after: 'configure_blacklight do |config|' do
         "\n    # BlacklightHeatmaps configuration values" \
         "\n    config.geometry_field = :geo_srpt" \
-        "\n    config.basemap = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'" \
+        "\n    # Basemaps configured include: 'positron', 'darkMatter', 'OpenStreetMap.HOT'" \
+        "\n    config.basemap_provider = 'positron'" \
         "\n    config.show.partials.insert(1, :show_leaflet_map)" \
         "\n    config.view.heatmaps.partials = []" \
         "\n    #Heatmap color ramp. For best results, use http://colorbrewer2.org or http://tristen.ca/hcl-picker/#/hlc/5/1" \

spec/features/configurable_basemap_spec.rb

@@ -0,0 +1,30 @@
+require 'spec_helper'
+
+feature 'Configurable basemap', js: true do
+  scenario 'defaults to positron' do
+    visit search_catalog_path(q: ' ', view: 'heatmaps', search_field: 'all_fields')
+    expect(page).to have_css "img[src*='light_all']"
+  end
+  feature 'without configured basemap' do
+    before do
+      CatalogController.blacklight_config.basemap_provider = nil
+    end
+    scenario 'defaults to positron' do
+      visit search_catalog_path(q: ' ', view: 'heatmaps', search_field: 'all_fields')
+      expect(page).to have_css "img[src*='light_all']"
+    end
+  end
+  feature 'with alterate configured basemap' do
+    before do
+      CatalogController.blacklight_config.basemap_provider = 'darkMatter'
+    end
+    after do
+      CatalogController.blacklight_config.basemap_provider = 'positron'
+    end
+    scenario 'defaults to positron' do
+      visit search_catalog_path(q: ' ', view: 'heatmaps', search_field: 'all_fields')
+      expect(page).to have_css "img[src*='dark_all']"
+    end
+  end
+end
+

spec/features/index_page_map_spec.rb

@@ -6,7 +6,7 @@
     expect(page).to have_css '.leaflet-map-pane'
 
     # Zoomed to world
-    expect(page).to have_css 'img[src="http://a.basemaps.cartocdn.com/light_all/1/0/0.png"]'
+    expect(page).to have_css 'img[src*="/light_all/1/0/0.png"]'
 
     # Disabled pagination
     expect(page).to have_css 'ul.pagination li.disabled', count: 6

spec/features/show_page_map_spec.rb

@@ -5,7 +5,7 @@
     visit solr_document_path '43037890'
     expect(page).to have_css '.leaflet-map-pane'
     # Zoomed to Kazakhstan
-    expect(page).to have_css 'img[src="http://b.basemaps.cartocdn.com/light_all/4/11/5.png"]'
+    expect(page).to have_css 'img[src*="light_all/4/11/5.png"]'
     expect(page).to have_css 'svg g path'
   end
   it 'renders a point type' do

spec/helpers/blacklight/maps_helper_spec.rb

@@ -3,7 +3,7 @@
 describe Blacklight::MapsHelper do
   let(:blacklight_config) do
     Blacklight::Configuration.new(
-      basemap: 'http://www.example.com/{z}/{x}/{y}.png',
+      basemap_provider: 'positron',
       geometry_field: 'geo_srpt',
       index: Blacklight::OpenStructWithHashAccess.new(
         title_field: 'title_display'
@@ -24,7 +24,7 @@
       expect(helper.index_map_div)
         .to have_css '[data-geometry-field="geo_srpt"]'
       expect(helper.index_map_div)
-        .to have_css '[data-basemap="http://www.example.com/{z}/{x}/{y}.png"]'
+        .to have_css '[data-basemap-provider="positron"]'
       expect(helper.index_map_div).to have_css '[data-sidebar-template]'
       expect(helper.index_map_div).to have_css '[data-color-ramp]'
     end

spec/views/catalog/_show_leaflet_map_default.html.erb_spec.rb

@@ -17,7 +17,7 @@
              locals: { document: document, blacklight_config: blacklight_config }
       expect(rendered).to have_css '.blacklight-heatmaps-show-map'
       expect(rendered).to have_css '#map-abc123'
-      expect(rendered).to have_css '[data-basemap]'
+      expect(rendered).to have_css '[data-basemap-provider]'
       expect(rendered).to have_css '[data-show-map]'
       expect(rendered).to have_css '[data-features]'
     end