Mapbox.js: add markers from a CSV file?

Question

I'm getting to grips with mapbox.js. I have a CSV file of points that I would like to add as markers.

My CSV file looks like this:

 event,lat,lon,title,num_people
 arson,47.14,8.01,Company 1,2
 arson,46.68,9.50,Company 2,120
 robbery,46.57,6.62,Company 3,3

I'd like to add a marker on the map for each row, colour it red or orange and add a Maki icon depending on whether it was arson or robbery, size it depending on the number of people affected, and add a tooltip on mouseover with the title.

This is as far as I've got:

var markerLayer = mapbox.markers.layer();
$.get("/data/crimes.csv", function(data) { 
    var crimes = $.csv.toObjects(data); 
    $.each(crimes, function(i, crime) {
      var newfeature = {
          geometry: { coordinates: [crime.lon,crime.lat] }
      };
      // How to define colour/size/icon here?
      markerLayer.add_feature(newfeature);
      map.addLayer(markerLayer);
    });
  });

It adds a grey marker for each event. How can I style the marker depending on the event type, and add a tooltip on mouseover?

There is some mapbox documentation on CSV files, but it seems to expect a CSV file as a string and in a very particular format, with pre-defined settings for colour/size/icon.

I'd rather use a data object and define my own interactions if possible, because I want to do other things with the data.

UPDATE: I've figured out how to add tooltips, so now just need to work out marker styling:

  var markerLayer = mapbox.markers.layer();
  var interaction = mapbox.markers.interaction(markerLayer);
  interaction.formatter(function(feature) {
    console.log(feature);
      var o = '<strong>' + feature.properties.title + '</strong>';
      return o;
  });
  $.get("/data/crimes.csv", function(data) { 
    var crimes = $.csv.toObjects(data); 
    $.each(crimes, function(i, crime) {
      var newfeature = {
          geometry: { coordinates: [crime.lon,crime.lat] },
          properties:  {
            title: crime.title
          }
      };
      markerLayer.add_feature(newfeature);
      map.addLayer(markerLayer);
    });
  });

tristen tristen · Accepted Answer · 2013-02-25T14:15:30

This example http://mapbox.com/mapbox.js/example/single-marker/ demonstrates a way to request a custom marker in the syntax it expects.

Mapbox.js: add markers from a CSV file?

1 Answers