datahub/docs/tutorial-maps.markdown

layout, title, recline-deps, root

layout	title	recline-deps	root
container	Maps - Customizing Maps in Recline - Tutorial	true	../

Doing More with the Map View
This tutorial goes beyond the basic views tutorial and shows you how to do more with maps

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:

{% highlight javascript %} {% include data.js %} var dataset = new recline.Model.Dataset({ records: data }); {% endhighlight %}

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.

{% highlight javascript %} {% include tutorial-maps-infobox.js %} {% endhighlight %}

 

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:

{% highlight javascript %} {% include tutorial-maps-customize.js %} {% endhighlight %}

 

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:

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

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});
}