Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@halboujp(T Fujita)

Leafletで色々な地図を表示する（４／６）

Last updated at Posted at 2019-05-02

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

ソースファイル内容

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が保持しています。
Leaflet_Tutrial_402.html.png

追加したマーカーは、２７行目でアイコンの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.png

ソースファイル内容

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_404a.html.png

ソースファイル内容

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で保存すると文字化けしますので、ご注意ください）
CSV_Sample.png

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

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

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?