Question

我正在掌握mapbox.js。我有一个CSV文件，我想添加为标记。

我的CSV文件如下所示：

 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

我想在地图上为每一行添加一个标记，将其标记为红色或橙色，并根据是纵火还是抢劫添加Maki图标，根据受影响人数确定尺寸，以及使用标题在mouseover上添加工具提示。

就我而言：

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

为每个事件添加灰色标记。如何根据事件类型设置标记的样式，并在鼠标悬停时添加工具提示？

有some mapbox documentation on CSV files，但似乎希望将CSV文件作为字符串并采用非常特殊的格式，并使用预定义的颜色/大小/图标设置。

我宁愿使用数据对象并在可能的情况下定义我自己的交互，因为我想对数据做其他事情。

更新：我已经弄清楚如何添加工具提示，所以现在只需要制定标记样式：

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

Answer 1

此示例http://mapbox.com/mapbox.js/example/single-marker/演示了一种方法请求所需语法中的自定义标记。

Mapbox.js：从CSV文件中添加标记？

1 个答案: