Custom Infobox Formatter - d3.carto.map

A demonstration of custom modal infoboxes from d3.carto.map.

If you click on a site point (the pink circles) you’ll see an infobox that reads something like “Lugdunum Convenarum in modern day France” whereas if you click on a country, you’ll see an infobox that reads something like “The country of Spain has a short name”.

How a modal handles the data in a datapoint for display is handled by defining a custom formatter for the modal, which requires that you create a new d3.carto.modal. The new modal is assigned to a d3.carto.layer using .modal() as shown in the example for the CSV Points and Feature Array layers.

Formatters are defined using the standard D3 accessor syntax. The default formatter, demonstrated in the basic modal example. Since you know your data better than d3.carto does, you can specify how to parse what attributes in as specific a manner as you want. The function should return a string of HTML suitable to be dropped into the modal div.

The key lines for defining the modal and formatter are:

    csvModal = d3.carto.modal();
    csvModal.formatter(
      function(d) {return "<h1>" + d.label + " in modern day " + d.modern + "</h1>"}
    )

and:

    featureModal = d3.carto.modal();
    featureModal.formatter(
      function(d) {return "<p class='countryInfobox'>The country of " + d.properties.name + " has a short name</p>"}
    )