#7 added UI elements for config parameters

the pulldown options the render method is fun to play with.
due to bugs, you many want to reload the page sfter some changes

Readme.md

@@ -36,16 +36,33 @@ Solr intersection is used on the field of type BBox.
 To display popups, set popupDisplay to the name of the Solr field you
 would like displayed.  If you need more than one field displayed, set 
 popupDisplay to a comma seperated list of Solr field names.  If you
-want to provide a formatter for a single field, rather than providing
+want to change the formatting of a single field, rather than providing
 the field name provide an array whose first element is the field name
-and second element a function that takes a Solr document.  If you do
-not like the default formatting of Solr fields, set popupDisplay to a
-function that accepts one argument, a Solr document in JSON format.
-This function should return a string with HTML tags.  
+and second element a function that takes a Solr document.  This
+function should return the html description of the field.  You can
+override all the default formatting of Solr fields.  Simply set
+popupDisplay to a function that accepts one argument, a Solr document
+in JSON format. This function should return a string with HTML tags.   
 
 If the area field is provided, the results in the popup are sorted
 from smallest to largest.
 
+
+```javascript
+// how to specify popup
+var solr = L.solrHeatmap("http://localhost:8983/solr/coreName", 
+{
+  field: 'bounds_rpt',
+  type: 'heatmap',
+  bboxField: 'bounds_bbox',
+  popupDisplay: ['title',['doi', function(doc) {return formatDoi(doc);}],'count']
+}.addTo(map);
+
+// where title, doi and count are Solr field names 
+// and formatDoi is a local Javascript function that returns the html
+// representation of the doi field
+```
+
 ## Running locally
 
 Download required libraries for example (Leaflet, Leaflet MarkerClusterer, jQuery)

example/example.js

@@ -11,15 +11,17 @@ function onEachFeature(feature, layer) {
 
 // Create and add a solrHeatmap layer to the map
 //var solr = L.solrHeatmap('http://127.0.0.1:8983/solr/gettingstarted', {
-//var solr = L.solrHeatmap('http://dev.jdarchive.org:8080/solr/zeega', {
 
 function resetSolr()
 {
     var solrUrl = jQuery('#solrUrl').val();
+    var renderType = jQuery("#renderType option:selected" ).text();
+    console.log('renderType', renderType);
     var rptField = jQuery('#rptField').val();
     var bboxField = jQuery('#bboxField').val();
     var popupDisplayField = jQuery('#popupDisplayField').val();
     var areaField = jQuery('#areaField').val();
+
     if (popupDisplayField.contains(','))
 	popupDisplayField = popupDisplayField.split(',');
     else
@@ -56,21 +58,17 @@ function resetSolr()
     //http://localhost:8983/solr/jstorTest
     solr = L.solrHeatmap(solrUrl, {
 	    // Solr field with geospatial data (should be type Spatial Recursive Prefix Tree)
-	    //field: 'loc_srpt',
-	    //field: 'bbox_srpt',
 	    field: rptField,
+	    // Sorl field needed to compute nearby items (should be type BBox Field)
 	    bboxField: bboxField,
 
-	    // Set type of visualization. Allowed types: 'geojsonGrid', 'clusters' Note: 'clusters' requires LeafletMarkerClusterer
-	    type: 'heatmap',
-	    //type: 'geojsonGrid',
-	    //type: 'clusters',
+	    // Set type of visualization. Allowed types: 'geojsonGrid', 'clusters' Note: 'clusters' requires LeafletMarkerClusterer, heatmap
+	    type: renderType,
 	    colors: ['#000000', '#0000df', '#00effe', '#00ff42', '#feec30', '#ff5f00', '#ff0000'],
 	    maxSampleSize: 400,
-	    //popupDisplay: ['title', 'doi'],
 	    popupDisplay: popupDisplayField,
+	    // we optionally sort display of nearby items from smallest to largest
 	    areaField: areaField,
-	    //popupDisplay: function(doc) {return doc['title']},
 
 	    // Inherited from L.GeoJSON
 	    onEachFeature: onEachFeature

example/index.html

@@ -16,6 +16,12 @@ <h2>Solr Information:</h2>
       <div style="margin-left: 50px">
       URL: <input type='text' id='solrUrl' size='35' value='http://localhost:8983/solr/jstorTest'/>
       <br/>
+      Render Style: <select id='renderType'>
+	<option>geojsonGrid</option>
+	<option>clusters</option>
+	<option selected='selected'>heatmap</option>
+	</select>
+      <br/>
       RPT Field Name: <input type='text' id='rptField' value='bbox_srpt'/>
       <br/>
       BBox Field Name: <input type='text' id='bboxField' value='bbox_bbox'/>