2

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アイコンを追加し、影響を受ける人の数に応じてサイズを変更し、マウスオーバーにツールチップを追加しますタイトル付き。

これは私が持っている限りです：

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

イベントごとに灰色のマーカーを追加します。イベントタイプに応じてマーカーのスタイルを設定し、マウスオーバーにツールチップを追加するにはどうすればよいですか？

CSVファイルに関するいくつかのマップボックスのドキュメントがありますが、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);
    });
  });
4

1 に答える 1

2

この例http://mapbox.com/mapbox.js/example/single-marker/は、期待される構文でカスタム マーカーをリクエストする方法を示しています。

于 2013-02-25T14:15:30.650 に答える