リーフレットマーカーアイコンを変更

Question

リーフレットマップのデータの変更を表示するために、Dennis Wilhelmのリーフレットスライダーを使用しています。

マーカーアイコンの変更を変更しようとしていますが、正しく表示されません。だから、リーフレットスライダーを使って時間の経過とともに変化を表示するには、どのようにしてマーカーアイコンを変更できますか？元のSliderControl.jsで何をしなければならないのですか？

ありがとうございます！以下は

デニス・ヴィルヘルムのリーフレットスライダーコードへのリンクです：

https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

Answer 1

これは、元のslidercontrol.jsファイルの正確な変更になります

if (this._layer) { 
     var index_temp = 0; 
     this._layer.eachLayer(function (layer) { 

      var greenIcon = L.icon({ //add this new icon 
       iconUrl: i+'.png', 
       shadowUrl: 'leaf-shadow.png', 

       iconSize:  [38, 95], // size of the icon 
       shadowSize: [50, 64], // size of the shadow 
       iconAnchor: [22, 94], // point of the icon which will correspond to marker's location 
       shadowAnchor: [4, 62], // the same for the shadow 
       popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor 
      }); 

      options.markers[index_temp] = layer; 
      options.markers[index_temp].setIcon(greenIcon); //Here set the icon to indiviual markers 

      ++index_temp; 
     }); 
     options.maxValue = index_temp - 1; 
     this.options = options; 
    } 

Answer 2

あなたは以下のように新しいアイコンのクラスを作成することができます。

：

var LeafIcon = L.Icon.extend({ 
    options: { 
     iconSize:  [38, 95], 
     shadowSize: [50, 64], 
     iconAnchor: [22, 94], 
     shadowAnchor: [4, 62], 
     popupAnchor: [-3, -76] 
    } 
}); 

を次に以下のような新しいアイコンオブジェクトを作成します

var greenIcon = new LeafIcon({ 
    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png', 
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png' 
}) 

地図上のマーカーのアイコンを上にすると、次のようになります：

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map); 

詳しくはdocumentを参照してください。あなたは2枚の画像を作成する必要がslidercontrolについては

：その後

(1) Marker Icon [ Use name: marker-icon.png ] 
(2) Marker Icon Shadow [ Use name: marker-shadow.png ] 

あなたは以下のようにデフォルトのイメージのパスを指定することができます。

L.Icon.Default.imagePath = "Url to the image folder"; // This specifies image path for marker icon. 
e.x L.Icon.Default.imagePath = "http://leafletjs.com/examples/custom-icons"; 

をので、アイコンのURLは次のようになります。

Icon URL : http://leafletjs.com/examples/custom-icons/marker-icon.png 
Shadow URL: http://leafletjs.com/examples/custom-icons/marker-shadow.png