#４、マーカーの表示
##４－１、基本マーカーの表示
　まずは、基本地図である『Leaflet_Tutrial_101.html』を元に地図上にマーカーを表示させてみます。　　以下に表示例とそのソースファイルの内容を示します。　ここで表示するマーカーの位置はJR東京駅を指定していますが、表示するマーカーについては特に指定していませんのでデフォルトのマーカーが表示されます。　また、マーカーをクリックするとポップアップが表示され、JR東京駅へのリンクが可能なようにしました。　実際の表示を確認したい方は、こちらをクリックしてください。

ソースファイル内容

Leaflet_Tutrial_401.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_401.html	2019/4/26	by T. Fujita</title>
    <meta charset="utf-8" />
    <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script>

    function init() {
	var Layer_401 = new Array();
	var map_401 = L.map('map_401').setView([35.65809922, 139.74135747], 8);
	mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
	    L.tileLayer(
		'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: 'Map data &copy; ' + mapLink,
		maxZoom: 18
            }).addTo(map_401);
	Leaflet_Marker_401();

	function Leaflet_Marker_401()		// マーカー設置
	{
	    var Markers_shape = new Array();
	    var Markers_shape_pos = new Array();
	    var Markers_shape_nam = new Array();
	    var Markers_shape_lnk = new Array();
	    Markers_shape_pos[ 0 ] = [35.68109, 139.76717];
	    Markers_shape_nam[ 0 ] = "東京駅";
	    Markers_shape_lnk[ 0 ] = "<a href= 'https://www.jreast.co.jp/estation/stations/1039.html' target='_blank'>東京駅情報にリンク</a>";
	    Markers_shape[ 0 ] = L.marker([ Markers_shape_pos[ 0 ][ 0 ], Markers_shape_pos[ 0 ][ 1 ] ]);
	    Markers_shape[ 0 ].bindPopup(Markers_shape_nam[ 0 ] + "<br>" + Markers_shape_lnk[ 0 ]).openPopup();
	    Layer_401[ 0 ] = Markers_shape[ 0 ];
	    Layer_401[ 0 ].addTo(map_401);
	}
    }

    </script>
</head>
<body onload="init()">
    <div id="map_401" style="width: 100%; height: 400px; border: solid 1px"></div>
</body>
</html>

　ここで、１１行目でマーカー用のレイヤーを新たに設定し、２１行目から３４行目でマーカーの設置位置やタイトル、リンク先等を指定しています。　なお、１９行目で関数『Leaflet_Marker_401()』を呼び出してマーカーを表示させています。

##４－２、複数マーカーの表示
　マーカーが一種類のみでは面白くありませんので、数種類のマーカーを追加してみます。　マーカーは、サンプルとしてPNG形式のアイコンを使用しましたが、JPEG形式でもGIF形式あるいはSVG形式でも同様です。　以下に複数マーカーの表示例とそのソースファイルの内容を示します。　実際の表示を確認したい方は、こちらをクリックしてください。
　ここで使用しているアイコン素材は、 FLAT ICON DESIGN および ICOON MONO から取得しており、これらアイコン素材データの著作権は TopeconHeroesが保持しています。

追加したマーカーは、２７行目でアイコンのURLを収容するための配列を準備し、それぞれアイコンについてサイズや表示位置（アンカー位置）、ポップアップが表示される位置を指定しています。　なお、東京駅のマーカーについても変更しています。

ソースファイル内容

Leaflet_Tutrial_402.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_402.html	2019/4/26	by T. Fujita</title>
    <meta charset="utf-8" />
    <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script>

    function init() {
	var Layer_402 = new Array();
	var map_402 = L.map('map_402').setView([35.0, 137.0], 6);
	mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
	    L.tileLayer(
		'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: 'Map data &copy; ' + mapLink,
		maxZoom: 18
            }).addTo(map_402);
	Leaflet_Marker_402();

	function Leaflet_Marker_402()		// マーカー設置
	{
	    var Markers_shape = new Array();
	    var Markers_shape_pos = new Array();
	    var Markers_shape_nam = new Array();
	    var Markers_shape_lnk = new Array();
	    var Markers_shape_icn = new Array();
	    Markers_shape_pos[ 0 ] = [35.68109, 139.76717];
	    Markers_shape_nam[ 0 ] = "東京駅";
	    Markers_shape_lnk[ 0 ] = "<a href= 'https://www.jreast.co.jp/estation/stations/1039.html' target='_blank'>東京駅情報にリンク</a>";
	    Markers_shape_icn[ 0 ] = L.icon({
		iconUrl: "../ICONS/Flat_Icons/s64_f_business_76_0nbg.png",
		iconSize: [32, 32],
		iconAnchor: [16, 32],
		popupAnchor: [0, -16]
	    });

	    Markers_shape_pos[ 1 ] = [34.98540, 135.75829];
	    Markers_shape_nam[ 1 ] = "京都駅";
	    Markers_shape_lnk[ 1 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0610116' target='_blank'>京都駅情報にリンク</a>";
	    Markers_shape_icn[ 1 ] = L.icon({
		iconUrl: "../ICONS/Flat_Icons/s64_f_traffic_45_0nbg.png",
		iconSize: [32, 32],
		iconAnchor: [0, 32],
		popupAnchor: [16, -16]
	    });

	    Markers_shape_pos[ 2 ] = [33.59010, 130.42065];
	    Markers_shape_nam[ 2 ] = "博多駅";
	    Markers_shape_lnk[ 2 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0910127' target='_blank'>博多駅情報にリンク</a>";
	    Markers_shape_icn[ 2 ] = L.icon({
		iconUrl: "../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png",
		iconSize: [32, 32],
		iconAnchor: [0, 32],
		popupAnchor: [16, -16]
	    });
	    for ( i = 0; i < Markers_shape_pos.length; i++ )
	    {
		if( Markers_shape_pos[ i ] != null ) {
		    Markers_shape[ i ] = L.marker([ Markers_shape_pos[ i ][ 0 ], Markers_shape_pos[ i ][ 1 ] ],
			{icon: Markers_shape_icn[ i ]});
		    Markers_shape[ i ].bindPopup(Markers_shape_nam[ i ] + "<br>" + Markers_shape_lnk[ i ]).openPopup();
		    Layer_402[ i ] = Markers_shape[ i ];
		    Layer_402[ i ].addTo(map_402);
		}
	    }
	}
    }

    </script>
</head>
<body onload="init()">
    <div id="map_402" style="width: 100%; height: 400px; border: solid 1px"></div>
　ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>
これらアイコン素材データの著作権は TopeconHeroes が保持しています。
</body>
</html>

##４－３、移動可能マーカーの表示
　さらに、移動可能なマーカー（人型のアイコン）を追加してみました。　ここで、マーカーを移動可能にしているのは、１０９行目の『draggable: true』という記述です。　これを『draggable: false』と変更することでマーカーは固定になります。以下に移動可能マーカーの表示例とそのソースファイルの内容を示します。　実際の表示を確認したい方は、こちらをクリックしてください。

ソースファイル内容

Leaflet_Tutrial_403.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_403.html	2019/4/26	by T. Fujita</title>
    <meta charset="utf-8" />
    <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script>

    function init() {
	var Layer_403 = new Array();
	var map_403 = L.map('map_403').setView([35.0, 137.0], 6);
	mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
	    L.tileLayer(
		'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: 'Map data &copy; ' + mapLink,
		maxZoom: 18
            }).addTo(map_403);
	Leaflet_Marker_403();

	function Leaflet_Marker_403()		// マーカー設置
	{
	    var Markers_shape = new Array();
	    var Markers_shape_pos = new Array();
	    var Markers_shape_nam = new Array();
	    var Markers_shape_lnk = new Array();
	    var Markers_shape_icn = new Array();
	    var Drag_Markers_shape = new Array();
	    var Drag_Markers_shape_pos = new Array();
	    var Drag_Markers_shape_nam = new Array();
	    var Drag_Markers_shape_lnk = new Array();
	    var Drag_Markers_shape_icn = new Array();

	    Markers_shape_pos[ 0 ] = [35.68109, 139.76717];
	    Markers_shape_nam[ 0 ] = "東京駅";
	    Markers_shape_lnk[ 0 ] = "<a href= 'https://www.jreast.co.jp/estation/stations/1039.html' target='_blank'>東京駅情報にリンク</a>";
	    Markers_shape_icn[ 0 ] = L.icon({
		iconUrl: "../ICONS/Flat_Icons/s64_f_business_76_0nbg.png",
		iconSize: [32, 32],
		iconAnchor: [16, 32],
		popupAnchor: [0, -16]
	    });

	    Markers_shape_pos[ 1 ] = [34.98540, 135.75829];
	    Markers_shape_nam[ 1 ] = "京都駅";
	    Markers_shape_lnk[ 1 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0610116' target='_blank'>京都駅情報にリンク</a>";
	    Markers_shape_icn[ 1 ] = L.icon({
		iconUrl: "../ICONS/Flat_Icons/s64_f_traffic_45_0nbg.png",
		iconSize: [32, 32],
		iconAnchor: [0, 32],
		popupAnchor: [16, -16]
	    });

	    Markers_shape_pos[ 2 ] = [33.59010, 130.42065];
	    Markers_shape_nam[ 2 ] = "博多駅";
	    Markers_shape_lnk[ 2 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0910127' target='_blank'>博多駅情報にリンク</a>";
	    Markers_shape_icn[ 2 ] = L.icon({
		iconUrl: "../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png",
		iconSize: [32, 32],
		iconAnchor: [0, 32],
		popupAnchor: [16, -16]
	    });

	    Drag_Markers_shape_pos[ 0 ] = [37, 134];
	    Drag_Markers_shape_nam[ 0 ] = "移動可能マーカー#1";
	    Drag_Markers_shape_lnk[ 0 ] = " ";
	    Drag_Markers_shape_icn[ 0 ] = L.icon({
		iconUrl: "../ICONS/Flat_Icons/s64_f_object_116_1nbg.png",
		iconSize: [48, 48],
		iconAnchor: [24, 24],
		popupAnchor: [0, 0]
	    });

	    Drag_Markers_shape_pos[ 1 ] = [35, 142];
	    Drag_Markers_shape_nam[ 1 ] = "移動可能マーカー#2";
	    Drag_Markers_shape_lnk[ 1 ] = " ";
	    Drag_Markers_shape_icn[ 1 ] = L.icon({
		iconUrl: "../ICONS/Flat_Icons/s64_f_object_115_0nbg.png",
		iconSize: [48, 48],
		iconAnchor: [24, 24],
		popupAnchor: [0, 0]
	    });

	    Drag_Markers_shape_pos[ 2 ] = [33, 137];
	    Drag_Markers_shape_nam[ 2 ] = "移動可能マーカー#3";
	    Drag_Markers_shape_lnk[ 2 ] = "<A HREF = 'http://icooon-mono.com/' target='_blank'> ICOON MONO にリンク</A>";
	    Drag_Markers_shape_icn[ 2 ] = L.icon({
		iconUrl: "../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png",
		iconSize: [48, 48],
		iconAnchor: [24, 24],
		popupAnchor: [0, 0]
	    });

	    for ( i = 0; i < Markers_shape_pos.length; i++ )
	    {
		if( Markers_shape_pos[ i ] != null ) {
		    Markers_shape[ i ] = L.marker([ Markers_shape_pos[ i ][ 0 ], Markers_shape_pos[ i ][ 1 ] ],
			{icon: Markers_shape_icn[ i ]});
		    Markers_shape[ i ].bindPopup(Markers_shape_nam[ i ] + "<br>" + Markers_shape_lnk[ i ]).openPopup();
		    Layer_403[ i ] = Markers_shape[ i ];
		    Layer_403[ i ].addTo(map_403);
		}
	    }
	    for ( i = 0; i < Drag_Markers_shape_pos.length; i++ )
	    {
		if( Drag_Markers_shape_pos[ i ] != null ) {
		    Drag_Markers_shape[ i ] = L.marker([ Drag_Markers_shape_pos[ i ][ 0 ], Drag_Markers_shape_pos[ i ][ 1 ] ],
			{icon: Drag_Markers_shape_icn[ i ], draggable: true});
		    Drag_Markers_shape[ i ].bindPopup(Drag_Markers_shape_nam[ i ] + "<br>" + Drag_Markers_shape_lnk[ i ]);
		    Layer_403[ i ] = Drag_Markers_shape[ i ];
		    Layer_403[ i ].addTo(map_403);
		}
	    }
	}
    }

    </script>
</head>
<body onload="init()">
    <div id="map_403" style="width: 100%; height: 400px; border: solid 1px"></div>
　ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>
これらアイコン素材データの著作権は TopeconHeroes が保持しています。
</body>
</html>

##４－４、インタラクティブなマーカーの設置
　次に好きな位置にマーカーを設置し、CSV形式でローカル・ファイルとして保存・読込む方法を記載します。　今回は、画面上部にメニューを表示させ、そこから各種処理を選択出来るようにしました。　なお、マーカーの設置は、Leaflet内部処理系で経度が－３６０度から＋３６０度の範囲で表示させるようにしています。　その主な処理内容は、次の通りです。　実際の表示を確認したい方は、こちらをクリックしてください。

###（１）画面上部にメニューを表示
『Leaflet_Tutrial_404.html』ソースファイルにおける３７８～３９２行目の部分と『scroll_menu.css』から構成されており、画面上部のメニュー部分にマウスを合わせると下側にサブメニューが表示され、選択できるようになっています。

###（２）マーカーのスタイル設定
ソースファイルと『Original_Style_404.css』、『Dialog_404.js』から構成されており、ダイアログボックスを表示しマーカーの選択とサイズの指定、タイトル付けが可能なようにしています。　ダイアログボックスの表示には、『jquery』及び『jquery-ui』を使用しています。　なお、マーカーをクリックすることで表示される吹き出しからそのマーカーを変更出来るようにしています。

###（３）移動可能なマーカーの設置
ソースファイルにおける１９７～２３９行目と３１６～３２８行目の部分であり、メニューから「マーカー単独設置」、「マーカー連続設置」、「マーカー連続設置終了」を選択出来ます。　設置したマーカーは移動可能です。

###（４）設置したマーカーの消去
ソースファイルにおける１３６～１５０行目と２４１～２４６行目、２５７～２９４行目の部分であり、メニューから「マーカー全消去」を選択することで、表示している全てのマーカーを消去出来ます。　また、マーカーをクリックすることで表示される吹き出しからそのマーカーを削除可能としています。

###（５）CSV形式で保存と読込
ソースファイルにおける３３０～３７３行目の部分と『Dialog_404.js』から構成されています。　データの保存先は、Windowsの標準設定ではローカルPCの「ダウンロード」フォルダです。　データの読み込みには、marghoobsuleman/ms-Dropdownを使用しています。　なお、緯度のデータは－１８０度～＋１８０度の範囲に制限している他、読み込んで表示したマーカーは移動できないようにしています。　残念ながら、CSV形式での保存と読込は「Safari」には対応できていません。

　以下にインタラクティブなマーカーの表示例とそのソースファイルの内容を示します。　但し、緯度・経度とも”０度”の場合にはマーカーを表示しません。

ソースファイル内容

Leaflet_Tutrial_404.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_404.html	2019/4/26	by T. Fujita</title>
    <meta charset = "utf-8" />
    <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
    <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel = "stylesheet" href = "./Plugins/ms-Dropdown-master/css/msdropdown/dd.css" />
    <link rel = "stylesheet" href = "./CSS/scroll_menu.css" />
    <link rel = "stylesheet" href = "./CSS/Original_Style_404.css" />

<style>
    html, body {
	width: 99%;
	height: 98%;
	font-size: 14px;
	z-index: 0;
    }
</style>

    <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src = "./Plugins/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
    <script src = "./JS/Dialog_404.js" ></script>
    <script>
	var Marker_LAT = new Array();
	var Marker_LON = new Array();
	var Marker_NAM = new Array();
	var Marker_LNK = new Array();
	var Marker_ICN = new Array();
	var Marker_ID = new Array();
	var Marker_Drag_flag = new Array();
	var Marker_Drag_info = new Array();
	var ClickLat = null;
	var ClickLon = null;
	var Marker_count = 0;
	var Marker_ID_count = 0;
	var SelectedID;
	var Marker_flag = 0;
	var Temp_shape, Temp_shape_clone;
	var Temp, Temp_LAT, Temp_LON, Temp_NAM, Temp_LNK, Temp_ICN, Temp_ID;
	var Temp_Drag_flag, Temp_Drag_info;
	var Layer_404 = new Array();
	var Layer_404_clone = new Array();
	var Dialog_flag_001 = 0;
	var map_404;

	function init() {
		map_404 = L.map('map_404').setView([35.0, 137.0], 6);
		mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
		L.tileLayer(
			'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			attribution: 'Map data &copy; ' + mapLink,
			maxZoom: 18
	        }).addTo(map_404);
		map_404.on('click', function(e) {
			ClickLat = e.latlng.lat;
			ClickLon = e.latlng.lng;
			if ( Marker_flag == 1 ) { Leaflet_Marker_401(); }
			if ( Marker_flag == 2 ) { Leaflet_Marker_403(); }
		});
	}

	function Leaflet_Marker_400() {		// 初期設定（マーカー単独設置）
		ClickLat = null;
		ClickLon = null;
		Marker_flag = 1;
	}

	function Leaflet_Marker_401() {		// マーカー単独設置
	  if(Marker_flag == 1) {
		Marker_LAT[ Marker_count ] = ClickLat;
		Marker_LON[ Marker_count ] = ClickLon;
		Marker_NAM[ Marker_count ] = Set_Text;
		Marker_LNK[ Marker_count ] = " ";
		Marker_ICN[ Marker_count ] = L.icon({
			iconUrl: Icon_Url,
			iconSize: [Icon_W, Icon_H],
			iconAnchor : [Icon_AW, Icon_AH],
			popupAnchor: [Icon_PW, Icon_PH]
		});
		Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
		Marker_Drag_flag[ Marker_count ] = true;
		Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
		Temp = Marker_count;
		Marker_setting();
		Marker_set();
		Layer_404[ Temp ] = Temp_shape;
		Layer_404[ Temp ].addTo(map_404);
		Layer_404_clone[ Temp ] = Temp_shape_clone;
		Layer_404_clone[ Temp ].addTo(map_404);
		Marker_count = Marker_count + 1;
		Marker_ID_count = Marker_ID_count + 1;
		Marker_flag = 0;
	    }
	}

	function Leaflet_Marker_402() {		// 初期設定（マーカー連続設置）
		ClickLat = null;
		ClickLon = null;
		Marker_flag = 2;
	}

	function Leaflet_Marker_403() {		// マーカー連続設置
	  if(Marker_flag == 2) {
		Marker_LAT[ Marker_count ] = ClickLat;
		Marker_LON[ Marker_count ] = ClickLon;
		Marker_NAM[ Marker_count ] = Set_Text;
		Marker_LNK[ Marker_count ] = " ";
		Marker_ICN[ Marker_count ] = L.icon({
			iconUrl: Icon_Url,
			iconSize: [Icon_W, Icon_H],
			iconAnchor : [Icon_AW, Icon_AH],
			popupAnchor: [Icon_PW, Icon_PH]
		});
		Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
		Marker_Drag_flag[ Marker_count ] = true;
		Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
		Temp = Marker_count;
		Marker_setting();
		Marker_set();
		Layer_404[ Temp ] = Temp_shape;
		Layer_404[ Temp ].addTo(map_404);
		Layer_404_clone[ Temp ] = Temp_shape_clone;
		Layer_404_clone[ Temp ].addTo(map_404);
		Marker_count = Marker_count + 1;
		Marker_ID_count = Marker_ID_count + 1;
	    }
	}

	function Leaflet_Marker_404() {		// マーカー連続設置終了
		Marker_flag = 0;
	}

	function Leaflet_Marker_405() {		// マーカー全消去
		var j = Layer_404.length - 1;
		for(i = 0; i <= j; i++) {
			if(Layer_404[i] != null) {
				map_404.removeLayer(Layer_404[i]);
				map_404.removeLayer(Layer_404_clone[ i ]);
			}
		}
		Marker_count = 0;
		Marker_LAT = new Array();
		Marker_LON = new Array();
		Marker_NAM = new Array();
		Marker_LNK = new Array();
		Marker_ICN = new Array();
	}

	function Leaflet_Marker_406() {		// マーカー保存（CSV形式）
	    for (i = 0; i <= (Marker_LON.length - 1); i++) {
		if( !isNaN(Marker_LON[ i ]) ) {
		    while( (Marker_LON[ i ] * 1.0) < -180) {
			Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) + 360;
		    }
		    while( (Marker_LON[ i ] * 1.0) > 180) {
			Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) - 360;
		    }
		}
	    }
	    if(Marker_LAT[ 0 ] == "LAT(deg.)") {
		var CSV_content = [];
	    } else {
		var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n";
	    }
		const aTag = document.createElement('a');
		aTag.download = "CSV_Data.csv";
		var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
		Temp = Marker_LAT.length;
		for ( i = 0; i < Temp; i++ ) {
			if( Marker_LAT[ i ] != "" && Marker_LON[ i ] != "" ) {
			  CSV_content = CSV_content + Marker_LAT[ i ] + "," + Marker_LON[ i ] + "," + Marker_NAM[ i ] + "," + Marker_LNK[ i ] + ",\r\n";
			}
		  }
		var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
		if(window.navigator.msSaveBlob) {
		     window.navigator.msSaveBlob(blob, aTag.download);					// for IE
		  } else if (window.URL && window.URL.createObjectURL) {
			aTag.href = window.URL.createObjectURL(blob);					// for FireFox
			document.body.appendChild(aTag);
			aTag.click();
			document.body.removeChild(aTag);
		  } else if (window.webkitURL && window.webkitURL.createObject) {
			aTag.href = (window.URL || window.webkitURL).createObjectURL(blob);		// for Chrome
			aTag.click();
		  } else {
			alert("保存に失敗しました！");
		  }
	}

	function Leaflet_Marker_407() {		// マーカー読込（CSV形式）
		Dialog_002();
	}

	function Marker_setting() {		// マーカー設定
		Temp_LAT = Marker_LAT[ Temp ] * 1.0;
		Temp_LON = Marker_LON[ Temp ] * 1.0;
		Temp_NAM = Marker_NAM[ Temp ];
		Temp_LNK = Marker_LNK[ Temp ];
		Temp_ICN = Marker_ICN[ Temp ];
		Temp_ID = Marker_ID[ Temp ];
		Temp_Drag_flag = Marker_Drag_flag[ Temp ]
		Temp_Drag_info = Marker_Drag_info[ Temp ]
		Set_Link =" ";
		if(Temp_LNK != undefined ) {
		    if( String( Temp_LNK ).length > 5 ) {
			Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
		    }
		}
	}

	function Marker_set() {			// マーカー設置
	  if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
	    if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) {
		if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
		    Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
			{icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
			 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
			 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
		    Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
		    if(Temp_LON >= 0) {
			Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
			    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
			 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
			 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
			Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
		    } else {
			Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
			    {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
			 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
			 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
			Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
		    }
		}
	    }
	  }
	}

	function onMarkerOpen() {		// マーカーをクリックした時に表示する削除ボタンと変更ボタン
	    var tempMarker = this;
	    SelectedID = tempMarker.options.id;
	    $(".marker-delete-button:visible").click(function () {
		Marker_DEL(tempMarker);
	    });
	    $(".marker-change-button:visible").click(function () {
		Dialog_001();
	    });
	}

	function Change_Marker() {		// 変更ボタン押下時の処理
	    for(i = 0; i <= Marker_count; i++) {
		if(SelectedID == Marker_ID[ i ] ) {
			Marker_NAM[ i ] = Set_Text;
			Marker_ICN[ i ] = L.icon({
				iconUrl: Icon_Url,
				iconSize: [Icon_W, Icon_H],
				iconAnchor : [Icon_AW, Icon_AH],
				popupAnchor: [Icon_PW, Icon_PH]
			});
		}
	    }
	    Marker_Refresh();
	}

	function Marker_DEL(tempMarker) {	// 削除ボタン押下時の処理
		var k = 0;
		Marker_flag = 0;
		Marker_LAT[ Marker_count + 1 ] = "";
		Marker_LON[ Marker_count + 1 ] = "";
		Marker_NAM[ Marker_count + 1 ] = "";
		Marker_LNK[ Marker_count + 1 ] = "";
		Marker_ICN[ Marker_count + 1 ] = "";
		Marker_ID[ Marker_count + 1 ] = "";
		SelectedID = tempMarker.options.id;
		for(i = 0; i <= Marker_count; i++) {
			if(SelectedID == Marker_ID[ i ] ) {
				for(k = i; k <= Marker_count; k++) {
					Marker_LAT[ k ] = Marker_LAT[ k + 1 ];
					Marker_LON[ k ] = Marker_LON[ k + 1 ];
					Marker_NAM[ k ] = Marker_NAM[ k + 1 ];
					Marker_LNK[ k ] = Marker_LNK[ k + 1 ];
					Marker_ICN[ k ] = Marker_ICN[ k + 1 ];
					Marker_ID[ k ] = Marker_ID[ k + 1 ];
					Marker_Drag_flag[ k ] = Marker_Drag_flag[ k + 1 ];
					Marker_Drag_info[ k ] = Marker_Drag_info[ k + 1 ];
				}
			}
		}
		SelectedID = null;
		Marker_count = Marker_count - 1;
		Marker_Refresh();
	}

	function Marker_Refresh() {		// マーカー再表示
		var j = Layer_404.length - 1;
		for(i = 0; i <= j; i++) {
		    if(Layer_404[ i ] != null) {
			map_404.removeLayer(Layer_404[ i ]);
			map_404.removeLayer(Layer_404_clone[ i ]);
		    }
		}
		for (i = 0; i <= Marker_count - 1; i++)
		{
			Temp = i;
			Marker_setting();
			Marker_set();
			Layer_404[ Temp ] = Temp_shape;
			Layer_404[ Temp ].addTo(map_404);
			Layer_404_clone[ Temp ] = Temp_shape_clone;
			Layer_404_clone[ Temp ].addTo(map_404);
		}
	}

	function Dragging() {			// マーカーをドラッグ時の位置取得
		ClickLat = this._latlng.lat;
		ClickLon = this._latlng.lng;
		SelectedID = this.options.id;
		for(i = 0; i <= Marker_count; i++) {
			if(SelectedID == Marker_ID[ i ] ) {
				Marker_LAT[ i ] = ClickLat;
				Marker_LON[ i ] = ClickLon;
			}
		}
		Marker_Refresh();
		SelectedID = null;
	}

	function CSV_Markers() {		// CSVデータを表示
	    for (i = 0; i <= (Data_CSV.length - 1); i++) {
		if((Data_CSV[i][0] * 1.0) > 90) {
		    Data_CSV[i][0] = 90;
		}
		if((Data_CSV[i][0] * 1.0) < -90) {
		    Data_CSV[i][0] = -90;
		}
		while( (Data_CSV[i][1] * 1.0) < -180) {
		    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 + 360;
		}
		while( (Data_CSV[i][1] * 1.0) > 180) {
		    Data_CSV[i][1] = Data_CSV[i][1] * 1.0 - 360;
		}
	    }
	    for (i = 0; i <= (Data_CSV.length - 1); i++) {
		Marker_LAT[ Marker_count ] = Data_CSV[i][0];
		Marker_LON[ Marker_count ] = Data_CSV[i][1];
		Marker_NAM[ Marker_count ] = Data_CSV[i][2];
		Marker_LNK[ Marker_count ] = Data_CSV[i][3];
		Marker_ICN[ Marker_count ] = L.icon({
			iconUrl: Icon_Url,
			iconSize: [Icon_W, Icon_H],
			iconAnchor : [Icon_AW, Icon_AH],
			popupAnchor: [Icon_PW, Icon_PH]
		});
		Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
		Marker_Drag_flag[ Marker_count ] = false;
		Marker_Drag_info[ Marker_count ] = "移動出来ません。";
		if( Data_CSV[i][0] != "" ) {
		    if( !isNaN( Data_CSV[i][0] ) ) {
			Temp = Marker_count;
			Marker_setting();
			Marker_set();
			Layer_404[ Temp ] = Temp_shape;
			Layer_404[ Temp ].addTo(map_404);
			Layer_404_clone[ Temp ] = Temp_shape_clone;
			Layer_404_clone[ Temp ].addTo(map_404);
		    }
		}
		Marker_count = Marker_count + 1;
		Marker_ID_count = Marker_ID_count + 1;
	    }
	}

    </script>
</head>
<body onload="init()">
<nav id="menu-wrap" style="z-index: 1000;">  
	<ul id="menu" style="width: 98%;">
		<li><a href="#">マーカー設定</a>
		<ul>
			<li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
			<li><a href="#" onclick = "Leaflet_Marker_400()">マーカー単独設置 </a></li>
			<li><a href="#" onclick = "Leaflet_Marker_402()">マーカー連続設置 </a></li>
			<li><a href="#" onclick = "Leaflet_Marker_404()">マーカー連続設置終了 </a></li>
			<li><a href="#" onclick = "Leaflet_Marker_405()">マーカー全消去 </a></li>
			<li><a href="#" onclick = "Leaflet_Marker_406()">マーカー保存（CSV形式） </a></li>
			<li><a href="#" onclick = "Leaflet_Marker_407()">マーカー読込（CSV形式） </a></li>
		</ul>
		</li>
	</ul>
</nav>
<div id="map_Layer">
    <div id="map_404" style="width: 100%; height: 400px; border: solid 1px"></div>
　ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>
これらアイコン素材データの著作権は TopeconHeroes が保持しています。
</div>
</body>
</html>

『 scroll_menu.css 』は、画面上部にメニューを表示するためのスタイルシートです。

scroll_menu.css

#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
}

#menu {
	width: 100%;
	height: 30px;
	margin: 0px auto;
	border: 1px solid #444;
	background-color: #111;
	background-image: linear-gradient(#444, #111);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 1px;
	border-bottom-right-radius: 1px;
	box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}

#menu:before,

#menu:after {
	content: "";
	display: table;
	clear: both;
}

#menu li {
	float: left;
	border: 1px solid #fff;
	box-shadow: 1px 0 0 #444;
	position: relative;
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
}

#menu a {
	float: left;
	padding: 5px 10px;
	color: #FAFAFA;
	text-transform: uppercase;
	font: 12px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
	
#menu li:hover > a {
	color: #BA0000;
}

#menu ul {
	margin: 10px 0 0 0;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 24px;
	left: 0;
	z-index: 1000;
	background: #444;
	background: linear-gradient(#444, #111);
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
	border-radius: 3px;
	transition: all .2s ease-in-out;
}

#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}

#menu ul ul {
	top: 0;
	left: 200px;
	margin: 0 0 0 8px;
	box-shadow: -1px 0 0 rgba(255,255,255,.3);		
}

#menu ul li {
	float: none;
	display: block;
	border: 0;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {   
	box-shadow: none;    
}

#menu ul a {    
	padding: 3px;
	width: 200px;
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}

#menu ul a:hover {
	color: #FAFAFA;
	background-color: #BA0000;
	background-image: linear-gradient(#BA0000, #111);
}

#menu ul li:last-child > a {
	border-radius: 0 0 3px 3px;
}

#scroll {
	max-width: 210px;
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

#myColor {
	border: 1px solid #FFFFFF;
	position: absolute;
	top: 2px;
}

#txtInfo {
	position: absolute;
	left: 546px;
}

#menu-wrap{
	width: 100%;
}

#map_Layer {
	width: 100%;
	height: 93%;
	position: relative;
	top:30px;
	z-index: 0;
}

.leaflet-container {
	background: #fff;
	outline: 0;
}

『 Original_Style_404.css 』は、ダイアログボックス内を表示するためのスタイルシートです。

Original_Style_404.css

.leaflet-container {
    background: #fff;
    outline: 0;
}
.ui-widget {
    font-family: Arial,Verdana,sans-serif;
    font-size: 0.8em;
}
.ui-slider-range {
     background: #808080;
}
#console {
    height: 136px;
    overflow-y: scroll;
    color: white;
    background-color: black;
}

　『 Dialog_404.js 』は、マーカーのスタイルを選択するダイアログボックスと CSVファイルを読み込むためのダイアログボックスを表示させるJavascriptファイルです。
　ダイアログボックス内で選択できるマーカーは、１９行目～７８行目で６０個指定しています。　これを変更することで任意のマーカーを任意の個数使用できます。　ここでは、選択時に表示するマーカーのサイズを64×64ドットに統一しています。

Dialog_404.js

// Dialog_404.js	2019/4/26 by T. Fujita

var Set_Text = "";
var Set_Link = " ";
var Icon_Url = "../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png";
var Icon_W = 24;
var Icon_H = 24;
var Icon_AW = Math.round(Icon_W / 2);
var Icon_AH = Math.round(Icon_H / 2);
var Icon_PW = 0;
var Icon_PH = Math.round(Icon_H / 2) * -1;
var Max_M_Size = 64;
var Min_M_Size = 8;
var Data_CSV = new Array();

$(document).ready( function() {
        $("body").append('<div id="dialog_001" style="z-index: 2000;"><p><form name="Form_001"> Title: '+
'<input type="text" style="width: 230px;" name="txt_mk" value=""></form><BR>'+
'<div>Marker Select:<BR>'+
'<select id="Marker_Samples" name="Marker_Samples" style="width:150px;">'+
'<option value="1" title="../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png">001</option>'+
'<option value="2" title="../ICONS/BW_Icon/BW_Icons_64/icon_127890_64.png">002</option>'+
'<option value="3" title="../ICONS/BW_Icon/BW_Icons_64/icon_114880_64.png">003</option>'+
'<option value="4" title="../ICONS/BW_Icon/BW_Icons_64/icon_109890_64.png">004</option>'+
'<option value="5" title="../ICONS/BW_Icon/BW_Icons_64/icon_001050_64.png">005</option>'+
'<option value="6" title="../ICONS/BW_Icon/BW_Icons_64/icon_119170_64.png">006</option>'+
'<option value="7" title="../ICONS/BW_Icon/BW_Icons_64/icon_122590_64.png">007</option>'+
'<option value="8" title="../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png">008</option>'+
'<option value="9" title="../ICONS/BW_Icon/BW_Icons_64/icon_133000_64.png">009</option>'+
'<option value="10" title="../ICONS/BW_Icon/BW_Icons_64/icon_115740_64.png">010</option>'+
'<option value="11" title="../ICONS/BW_Icon/BW_Icons_64/icon_115710_64.png">011</option>'+
'<option value="12" title="../ICONS/BW_Icon/BW_Icons_64/icon_115750_64.png">012</option>'+
'<option value="13" title="../ICONS/BW_Icon/BW_Icons_64/icon_115720_64.png">013</option>'+
'<option value="14" title="../ICONS/BW_Icon/BW_Icons_64/icon_147060_64.png">014</option>'+
'<option value="15" title="../ICONS/BW_Icon/BW_Icons_64/icon_127900_64.png">015</option>'+
'<option value="16" title="../ICONS/BW_Icon/BW_Icons_64/icon_109850_64.png">016</option>'+
'<option value="17" title="../ICONS/BW_Icon/BW_Icons_64/icon_111050_64.png">017</option>'+
'<option value="18" title="../ICONS/BW_Icon/BW_Icons_64/icon_111060_64.png">018</option>'+
'<option value="19" title="../ICONS/BW_Icon/BW_Icons_64/icon_111520_64.png">019</option>'+
'<option value="20" title="../ICONS/BW_Icon/BW_Icons_64/icon_127100_64.png">020</option>'+
'<option value="21" title="../ICONS/BW_Icon/BW_Icons_64/icon_127110_64.png">021</option>'+
'<option value="22" title="../ICONS/BW_Icon/BW_Icons_64/icon_127120_64.png">022</option>'+
'<option value="23" title="../ICONS/BW_Icon/BW_Icons_64/icon_127130_64.png">023</option>'+
'<option value="24" title="../ICONS/BW_Icon/BW_Icons_64/icon_127140_64.png">024</option>'+
'<option value="25" title="../ICONS/BW_Icon/BW_Icons_64/icon_127150_64.png">025</option>'+
'<option value="26" title="../ICONS/BW_Icon/BW_Icons_64/icon_127160_64.png">026</option>'+
'<option value="27" title="../ICONS/BW_Icon/BW_Icons_64/icon_001720_64.png">027</option>'+
'<option value="28" title="../ICONS/BW_Icon/BW_Icons_64/icon_100590_64.png">028</option>'+
'<option value="29" title="../ICONS/BW_Icon/BW_Icons_64/icon_100600_64.png">029</option>'+
'<option value="30" title="../ICONS/BW_Icon/BW_Icons_64/icon_102040_64.png">030</option>'+
'<option value="31" title="../ICONS/BW_Icon/BW_Icons_64/icon_104940_64.png">031</option>'+
'<option value="32" title="../ICONS/BW_Icon/BW_Icons_64/icon_107470_64.png">032</option>'+
'<option value="33" title="../ICONS/BW_Icon/BW_Icons_64/icon_108510_64.png">033</option>'+
'<option value="34" title="../ICONS/BW_Icon/BW_Icons_64/icon_108730_64.png">034</option>'+
'<option value="35" title="../ICONS/BW_Icon/BW_Icons_64/icon_111960_64.png">035</option>'+
'<option value="36" title="../ICONS/BW_Icon/BW_Icons_64/icon_111970_64.png">036</option>'+
'<option value="37" title="../ICONS/BW_Icon/BW_Icons_64/icon_112440_64.png">037</option>'+
'<option value="38" title="../ICONS/BW_Icon/BW_Icons_64/icon_112450_64.png">038</option>'+
'<option value="39" title="../ICONS/BW_Icon/BW_Icons_64/icon_113000_64.png">039</option>'+
'<option value="40" title="../ICONS/BW_Icon/BW_Icons_64/icon_113010_64.png">040</option>'+
'<option value="41" title="../ICONS/BW_Icon/BW_Icons_64/icon_114520_64.png">041</option>'+
'<option value="42" title="../ICONS/BW_Icon/BW_Icons_64/icon_114530_64.png">042</option>'+
'<option value="43" title="../ICONS/BW_Icon/BW_Icons_64/icon_114770_64.png">043</option>'+
'<option value="44" title="../ICONS/BW_Icon/BW_Icons_64/icon_114780_64.png">044</option>'+
'<option value="45" title="../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png">045</option>'+
'<option value="46" title="../ICONS/BW_Icon/BW_Icons_64/icon_124660_64.png">046</option>'+
'<option value="47" title="../ICONS/BW_Icon/BW_Icons_64/icon_127930_64.png">047</option>'+
'<option value="48" title="../ICONS/Flat_Icons/s64_f_business_72_0nbg.png">048</option>'+
'<option value="49" title="../ICONS/Flat_Icons/s64_f_business_76_0nbg.png">049</option>'+
'<option value="50" title="../ICONS/Flat_Icons/s64_f_object_6_2nbg.png">050</option>'+
'<option value="51" title="../ICONS/Flat_Icons/s64_f_object_7_2nbg.png">051</option>'+
'<option value="52" title="../ICONS/Flat_Icons/s64_f_object_24_1nbg.png">052</option>'+
'<option value="53" title="../ICONS/Flat_Icons/s64_f_object_25_0nbg.png">053</option>'+
'<option value="54" title="../ICONS/Flat_Icons/s64_f_object_27_2nbg.png">054</option>'+
'<option value="55" title="../ICONS/Flat_Icons/s64_f_object_155_1nbg.png">055</option>'+
'<option value="56" title="../ICONS/Flat_Icons/s64_f_object_164_2nbg.png">056</option>'+
'<option value="57" title="../ICONS/Flat_Icons/s64_f_object_167_0nbg.png">057</option>'+
'<option value="58" title="../ICONS/Flat_Icons/s64_f_object_173_0nbg.png">058</option>'+
'<option value="59" title="../ICONS/Flat_Icons/s64_f_object_115_0nbg.png">059</option>'+
'<option value="60" title="../ICONS/Flat_Icons/s64_f_object_116_1nbg.png">060</option>'+
'</select></div><BR>'+
'<div><tr><td><BR><div id="num_001"></div><div id="slider_001"></div>'+
'<BR><BR><div id="Selected_Icon">Selected Icon: <img src=""></div>'+
'</td></tr></div><BR>(注) ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および' +
'<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>' +
'これらアイコン素材データの著作権は TopeconHeroes が保持しています。</p><div>');

	$('#Selected_Icon img').attr('src', Icon_Url);

	$('#dialog_001').dialog({
		autoOpen: false,
		title: 'Please Set the Icon Style.',
		height: 450,
		width: 300,
		closeOnEscape: true,
		modal: true,
		buttons: {
			"設定": function(){
				Set_Text = document.Form_001.txt_mk.value;
				var Temp = Marker_Samples.options[Marker_Samples.selectedIndex].title;
				Icon_Url = Temp;
				Icon_AW = Math.round(Icon_W / 2);
				Icon_AH = Math.round(Icon_H / 2);
				Icon_PW = 0;
				Icon_PH = Math.round(Icon_H / 2) * -1;
				Change_Marker(); 
				$(this).dialog('close');
			}
		}
	});

        $("body").append('<div id="dialog_002" style="z-index: 2000;"><p><form name="Form_002">'+
'Title: <input type="text" style="width: 230px;" name="txt_dat" value=""></form></p><HR>'+
'<p> File Select:'+
'<form name="subinput">'+
'<center>CSVファイルを指定してください。<BR><BR>'+
'  <TD><input type="file" name="select" id="select_002" value=""></TD>'+
'  <BR><BR>'+
'</center></p></div>');

	$('#dialog_002').dialog({
		autoOpen: false,
		title: 'CSVファイル選択',
		height: 400,
		width: 300,
		closeOnEscape: true,
		modal: true,
		show: "fade",
		hide: "fade",
		buttons: {
			"Select the Marker": function(){
				Dialog_001();
			},
			"Set Markers": function(){
				CSV_Data();
				CSV_Markers();
			},
			"Close": function(){
				$(this).dialog('close');
			}
		}
	});


     $('#slider_001').slider( {
         orientation: 'horizontal',
         range: 'min',
         max: 255,
         value: 127,
         slide: refreshSwatch,
         change: refreshSwatch
     } );
     $( '#slider_001' ).slider( 'value', 96 );
     $( '#Marker_Samples' ).msDropDown({
		visibleRows:4,
		on:{change:function(data, ui) {
			Icon_Url = Marker_Samples.options[Marker_Samples.selectedIndex].title;
			$('#Selected_Icon img').attr('src', Icon_Url);
		}}
     });
});


function Dialog_001() {
	document.Form_001.txt_mk.value = "";
	$('#dialog_001').dialog('open');
}

function Dialog_002() {
	CSV_Data();
	document.Form_002.txt_dat.value = "";
	$('#dialog_002').dialog('open');
}


function refreshSwatch() {
     Icon_W = Math.round($('#slider_001').slider('value') / 255 * Max_M_Size);
     if (Icon_W <= Min_M_Size) { Icon_W = Min_M_Size; }
     Icon_H = Icon_W;
     $( '#num_001' ).html( 'Marker Size： ' + Icon_W );
     $( '#Selected_Icon img' ).css( { width: Icon_W, height: Icon_H } );
}

function CSV_Data() {
    if(window.File) {
	var select = document.getElementById('select_002');
	select.addEventListener('change', function(e) {
	var fileData = e.target.files[0];

	Data_CSV = [];
	var reader = new FileReader();
	reader.onerror = function() {
		alert('ファイル読み込みに失敗しました。');
	}
	reader.onload = function() {
		var lineArr = reader.result.split("\r\n");
		for (var i = 0; i < lineArr.length; i++) {
			Data_CSV[i] = lineArr[i].split(",");
		}
	}
	reader.readAsText(fileData);
	}, false);
    }
}

　ここで使用するCSVファイルには、緯度、経度、名称、リンク先の４項目を記載します。（緯度、経度は必須です）　そのフォーマット例（MS-EXCELでの表示）を次に示します。　緯度・経度は、「３－４、マウス位置表示」の項で表示される数値を使用する事が出来ます。　なお、CSVファイル内に全角文字を使用する場合には、UTF8で保存する必要があります。（シフトJISで保存すると文字化けしますので、ご注意ください）

###Leafletで色々な地図を表示する記事内容
１、Leafletで色々な地図を表示する
 ２、Overlay表示
 ３、色々な表示
４、マーカーの表示
５、色々な図形の表示
 ６、おまけ
 追加－１、デバイスの位置を地図上に表示する
 追加ー２、写真の撮影地を地図上に表示する

ここに記載したHTML/JavaScriptの動作を確認したい方は、「https://github.com/To-Fujita/Leaflet.JS_Tutorial」あるいは「http://hal322.html.xdomain.jp/」を参照ください。