Preparing your page

See the instructions in the basic views tutorial.

Creating a Dataset

Just like in the main tutorial, here’s some example data We are going to work with:

var data = [
  {id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', geo: {lat:52.56, lon:13.40} },
  {id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', geo: {lat:54.97, lon:-1.60}},
  {id: 2, date: '2011-03-03', x: 3, y: 6, z: 9, country: 'US', geo: {lat:40.00, lon:-75.5}},
  {id: 3, date: '2011-04-04', x: 4, y: 8, z: 6, country: 'UK', geo: {lat:57.27, lon:-6.20}},
  {id: 4, date: '2011-05-04', x: 5, y: 10, z: 15, country: 'UK', geo: {lat:51.58, lon:0}},
  {id: 5, date: '2011-06-02', x: 6, y: 12, z: 18, country: 'DE', geo: {lat:51.04, lon:7.9}}
];


var dataset = new recline.Model.Dataset({
  records: data
});

General Pointers

Check out the Map reference (source) docs. In particular this has details of the various state options.

In addition, remember that Recline’s map view is just a relatively lightweight wrapper around Leaflet. This means that pretty much anything you can do with Leaflet you can do with Recline’s map. Specifically a recline.View.Map instance has the following attributes exposed:

map: the Leaflet map (L.Map)
features: Leaflet GeoJSON layer (L.GeoJSON) containing all the features

(Recline converts all records in a dataset that yield geospatial info to a GeoJSON feature and adds it to the features layer).

Customizing the infobox

The default infobox just shows all of the dataset attributes. Usually you’ll want something a bit nicer. All you need to do is override the infobox function. For example, in our case let’s make a nicer title and only show some data.

// this element will need to exist!
var $el = $('#map-infobox');
var view = new recline.View.Map({
  el: $el,
  model: dataset
});
// record is the recline.Model.Record object
view.infobox = function(record) {
  var html = '<h3>' + record.get('country') + ' &ndash; ' + record.get('date') + '</h3>';
  html += 'id: ' + record.get('id');
  return html;
}
view.render();
 

Customizing the marker

We’re going to show how to replace the default marker with a circular marker. Even more exciting, we’ll show how to have the marker size vary with an attribute of our data. We do the customization by via over-riding the pointToLayer function:

var $el = $('#map-customize');
var view = new recline.View.Map({
  el: $el,
  model: dataset
});

view.geoJsonLayerOptions.pointToLayer = function(feature, latlng) {
  // Look up Record so we can use it to customize size of marker
  // note that 'this' is specially bound for us to parent view + that feature
  // stores record cid
  var record = this.model.records.getByCid(feature.properties.cid);
  var marker = new L.CircleMarker(latlng, { radius: record.get('x') * 3 });
  marker.bindPopup(feature.properties.popupContent);
  return marker;
}
view.render();
 

Customing features (which aren’t points)

Leaflet treats points and features differently. To customize features that aren’t point we will need to bind to the feature layers featureparse event. As the feature layer can get re-rendered you don’t do this directly but rather set the featureparse function on the recline view. For example, for classic popup behaviour:

view.featureparse = function (e) {
  if (e.properties && e.properties.popupContent) {
    e.layer.bindPopup(e.properties.popupContent);
  }
};

Turning on clustering

You can turn on clustering of markers by setting the cluster option:

var map = new recline.View.Map({
  model: dataset
  state: {
    cluster: true;
  }
});

You could also enable marker clustering only if you have more than a certain number of markers. Here’s an example:

// var map is recline.View.Map instance
// marker cluster threshold
var threshold = 65;
  
// enable clustering if there is a large number of markers
var countAfter = 0;
map.features.eachLayer(function(){countAfter++;});
if (countAfter > threshold) {
  // note the map will auto-redraw when you change state!
  map.state.set({cluster: true});
}