マーカーの画像を動的に変更する

Leafletで表示しているマーカーの画像を変更させるサンプルプログラム。下の例では、クリックするたびに○と×が交互に表示されます。画像を表示させるだけの場合は、好きな画像をマーカーとして表示させるのページを。

  var myMap = L.map("map", {
    zoom: 13, 
    center: [35.710139, 139.810833],
  });
  // タイルレイヤにはオープンストリートマップを拝借
  var osm = L.tileLayer("https://tile.openstreetmap.jp/{z}/{x}/{y}.png", {
    attribution: "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
  });
  osm.addTo(myMap);

  // ○の画像
  var icon_o = L.icon({ iconUrl: "o.png", iconAnchor: [15, 15] });

  // ×の画像
  var icon_x = L.icon({ iconUrl: "x.png", iconAnchor: [15, 15] });

  // マーカー
  var myMarker = L.marker(
    [35.710139, 139.810833],
    {
      icon: icon_o
    }
  );
  myMarker.addTo(myMap);

  // マーカーにクリックイベントをbind
  myMarker.on('click', function(){

    if (myMarker.getIcon() === icon_o) {
      // ○なら×を
      myMarker.setIcon(icon_x);
    } else if (myMarker.getIcon() === icon_x) {
      // ×なら○を
      myMarker.setIcon(icon_o);
    } else {
      // え?
      alert('Oh, my God!');
    }
  });