#３、色々な表示
　これまで OverLayを含む基本的な地図の表示方法について記載しました。　しかしながら、一般の地図では『スケール』や『広域地図』等が付いていますので、それらの表示方法について表示項目毎に説明します。　また、色々な表示の例とHTML及びJAVA Scriptのソースファイル内容を示します。　実際の表示を確認したい方は、こちらをクリックしてください。

##３－１、スケール表示
　地図の左下部に表示されるスケールの設定をソースファイル内の３１行目に示します。

##３－２、広域地図表示
　３３～３４行目の部分が広域地図表示の設定箇所です。　地図の左下部の「矢印」をクリックすると表示／非表示が切り替わります。　これは、Leaflet 用プラグイン『 Leaflet.MiniMap 』を使用して表示させています。

##３－３、緯度・経度線表示
　３５行目の部分が緯度・経度線表示の設定箇所です。　別ファイル『Leaflet_Graticule.css』及び『Leaflet_Graticule.JS』により緯度・経度線を作成しています。　なお、これらの別ファイルについては、以下に説明します。

##３－４、マウス位置表示
　３２行目の部分がマウス位置を右下に緯度・経度として表示する設定箇所です。　これも Leaflet 用プラグイン『 Leaflet.MousePosition 』を使用して表示させています。

##３－５、検索窓表示
　５０～５１行目の部分が右上に虫メガネマークの検索窓を表示する設定箇所です。　虫メガネマークにマウスを合わせると検索窓が表示され、場所の検索が可能となります。　Leaflet 用プラグイン『 Leaflet Control OSM Geocoder 』を使用して表示させています。

ソースファイル内容

Leaflet_Tutrial_301.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_301.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 = "./CSS/Leaflet_Graticule.css" />
    <link rel = "stylesheet" href = "./Plugins/Leaflet-MousePosition-master/src/L.Control.MousePosition.css" />
    <link rel = "stylesheet" href = "./Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.css" />
    <link rel = "stylesheet" href = "./Plugins/leaflet-control-osm-geocoder-master/Control.OSMGeocoder.css" />
    <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src = "./Plugins/leaflet-GIBS-master/src/GIBSMetadata.js" ></script>
    <script src = "./Plugins/leaflet-GIBS-master/src/GIBSLayer.js" ></script>
    <script src = "./Plugins/leaflet-ajax-master/dist/leaflet.ajax.js" ></script>
    <script src = "./Plugins/Leaflet-MousePosition-master/src/L.Control.MousePosition.js" ></script>
    <script src = "./Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.js" ></script>
    <script src = "./Plugins/leaflet-control-osm-geocoder-master/Control.OSMGeocoder_SRC.js" ></script>
    <script src = "./JS/Map_Data.JS" ></script>
    <script src = "./JS/Leaflet_Graticule.js" ></script>

<script>
    var map;
    var ClickLat, ClickLon, Act_Zoom, Pre_Zoom;
    var Mouse_Position = L.control.mousePosition( {position:'bottomright'} );

    function init() {
	map = L.map('map').setView([35.65809922, 139.74135747], 8);
	map.addLayer( Basic_Map[ 0 ] );
	L.control.layers(baseMap, overLay).addTo(map);

	L.control.scale().addTo(map);
	Mouse_Position.addTo(map);
	var osm2 = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {minZoom: 0, maxZoom: 15, attribution: 'Map data &copy; OpenStreetMap contributors' });
	var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true, position: 'bottomleft' }).addTo(map);
	Grid_on_B();
	map.on('click', function(e) {
		ClickLat = e.latlng.lat;
		ClickLon = e.latlng.lng;
		if(flag_grid == 1)
		{
			Act_Zoom = map.getZoom();
			Act_Ctn = map.getCenter();
			if(Act_Zoom != Pre_Zoom)
			{
				grid( grid_line_col );
				Pre_Zoom = Act_Zoom;
			}
		}
	});
	osmGeocoder = new L.Control.OSMGeocoder();
	map.addControl(osmGeocoder);
    }
</script>
</head>
<body onload="init()">
    <div id="map" style="width: 100%; height: 400px; border: solid 1px"></div>
</body>
</html>

　ここで、地図とOverlayを表示するJavascript部分については、『Leaflet_Tutrial_202.html』から変更はありませんので、別ファイル『Map_Data.js』として切り出しました。　ソースファイル内容は次の通りです。

Map_Data.js

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

var Basic_Map = new Array();
	Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
		continuousWorld: false
	});
	Basic_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 3 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 4 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 5 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-background'
	});
	Basic_Map[ 6 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-lite'
	});
	Basic_Map[ 7 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		minZoom: 1,
		maxZoom: 16,
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'watercolor'
	});
	Basic_Map[ 8 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles &copy; <a href="http://www.esrij.com/"> Esri Japan </a>'
	});
	Basic_Map[ 9 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
		maxZoom: 13,
		attribution: 'Tiles by <a href="http://www.esrij.com/"> Esri Japan </a>'
	});
	Basic_Map[ 10 ] = new L.GIBSLayer('Coastlines', {
		date: new Date('2015/04/01'),
		transparent: true
	});

	var baseMap = {
		"OpenStreetMap": Basic_Map[ 0 ],
		"国土地理院 標準地図": Basic_Map[ 1 ],
		"国土地理院 淡色地図": Basic_Map[ 2 ],
		"国土地理院 写真": Basic_Map[ 3 ],
		"国土地理院 白地図": Basic_Map[ 4 ],
		"Stamen Toner-Background": Basic_Map[ 5 ],
		"Stamen Toner-Lite": Basic_Map[ 6 ],
		"Stamen Watercolor": Basic_Map[ 7 ],
		"Esri World Topo Map": Basic_Map[ 8 ],
		"Esri Ocean Base Map": Basic_Map[ 9 ],
		"NASA EOSDIS GIBS/Coast Lines": Basic_Map[ 10 ],
	};


var Over_Layer = new Array();
	Over_Layer[ 0 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-hybrid'
	});
	Over_Layer[ 1 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-lines'
	});
	Over_Layer[ 2 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
	    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
		'<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; ' +
		'Map data {attribution.OpenStreetMap}',
	    variant: 'toner-labels'
	});
	Over_Layer[ 3 ] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
	    attribution: "<a href='http://www.openseamap.org' target='_blank'>OpenSeaMap</a> contributors"
	});
	Over_Layer[ 4 ] = new L.GIBSLayer('MODIS_Water_Mask', {
	    date: new Date('2018/11/15'),
	    transparent: true
	});
	Over_Layer[ 5 ] = new L.GeoJSON.AJAX(
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson",
		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
//		"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
	   {pointToLayer: function (feature, latlng) {
		return L.circleMarker(latlng, {
		    radius: feature.properties.mag * feature.properties.mag / 3,
		    fillcolor: "#FF7800",
		    color: "#FF7800",
		    weight: 1,
		    opacity: 0.5,
		    fillOpacity: 0.5
		}); },
	    onEachFeature: function (feature, layer) {
	    layer.bindPopup(new Date(feature.properties.time).toUTCString() + " / " + feature.properties.title);
	    } 
	});

	var overLay = {
	    "Stamen toner-lines": Over_Layer[ 1 ],
	    "Stamen toner-labels": Over_Layer[ 2 ],
	    "OpenSeaMap": Over_Layer[ 3 ],
	    "GIBS Water Mask": Over_Layer[ 4 ],
	    "1W All Earthquake(Geojson)": Over_Layer[ 5 ]
	};

　緯度・経度線表示用のスタイルシートとJavaScriptの内容を以下に示します。　スタイルシートは、白線と黒線で表示できるように指定していますが、ここでは、黒線で表示する設定にしています。　『Leaflet_Tutrial_301.html』のソースファイルで、３５行目を『Grid_on_W();』に変更すると白線で緯度・経度線が表示されます。　また、表示例では、マウスをクリックするとズームに合わせて自動で緯度・経度線を表示するようにしています。

Leaflet_Graticule.css

.grid_textStyle_W
{
    color: #FFFFFF !important;
    font: 12px arial, sans-serif !important;
    width: 80px !important;
}

.grid_textStyle_B
{
    color: #000000 !important;
    font: 12px arial, sans-serif !important;
    width: 80px !important;
}

Leaflet_Graticule.JS

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

var grid_line_col = "FFFFFF";
var flag_grid = 0;
var grid_shape_A = new Array();
var grid_shape_B = new Array();
var grid_text_Lat = new Array();
var grid_text_Lng = new Array();

function Grid_on_W()
{
	grid_line_col ="FFFFFF";
	grid( grid_line_col );
	flag_grid = 1;
}

function Grid_on_B()
{
	grid_line_col ="000000";
	grid( grid_line_col );
	flag_grid = 1;
}

function Grid_off()
{
	if( flag_grid == 1 ) {
		del_grid();
	}
	flag_grid = 0;
}

function grid( grid_line_col )
{
	if( flag_grid == 1 ) {
		del_grid();
	}

	var zoom = map.getZoom();
	var c_point = map.getCenter();
	var temp_Lat = c_point.lat;
	var temp_Lng = c_point.lng;
	var grid_Lat = new Array();
	var grid_Lng = new Array();
	var grid_pos_A = new Array();
	var grid_pos_B = new Array();
	var infobox_Lat;
	var infobox_Lng;
	var grid_i = 30;
	var c_pos_Lat = 30 * Math.floor(temp_Lat/30);
	var c_pos_Lng = 30 * Math.floor(temp_Lng/30);
	var NS = " N";
	var EW = " E";
	var Temp_min, Temp_max;
	var Temp_West = map.getBounds().pad(0.0).getWest();
	var Temp_North = map.getBounds().pad(0.0).getNorth();

	if( zoom == 3 )
	{
		grid_i = 30;
		var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
		var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
	}
	if( zoom == 4 )
	{
		grid_i = 10;
		var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
		var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
	}
	if( zoom == 5 )
	{
		grid_i = 5;
		var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
		var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
	}
	if( zoom == 6 )
	{
		grid_i = 2.5;
		var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
		var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
	}
	if( zoom == 7 )
	{
		grid_i = 2;
		var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
		var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
	}
	if( zoom == 8 )
	{
		grid_i = 1;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 2) / 2;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 2) / 2;
	}
	if( zoom == 9 )
	{
		grid_i = 30/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 3) / 3;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 3) / 3;
	}
	if( zoom == 10 )
	{
		grid_i = 20/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 6) / 6;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 6) / 6;
	}
	if( zoom == 11 )
	{
		grid_i = 10/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 20) / 20;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 20) / 20;
	}
	if( zoom == 12 )
	{
		grid_i = 5/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 30) / 30;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 30) / 30;
	}
	if( zoom == 13 )
	{
		grid_i = 2/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 60) / 60;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 60) / 60;
	}
	if( zoom == 14 )
	{
		grid_i = 1/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 200) / 200;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 200) / 200;
	}
	if( zoom == 15 )
	{
		grid_i = 0.5/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 300) / 300;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 300) / 300;
	}
	if( zoom == 16 )
	{
		grid_i = 0.2/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 600) / 600;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 600) / 600;
	}
	if( zoom == 17 )
	{
		grid_i = 0.1/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 2000) / 2000;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 2000) / 2000;
	}
	if( zoom == 18 )
	{
		grid_i = 0.05/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 3000) / 3000;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 3000) / 3000;
	}
	if( zoom == 19 )
	{
		grid_i = 0.02/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 3000) / 3000;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 3000) / 3000;
	}
	if( zoom >=20 )
	{
		grid_i = 0.01/60;
		var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 6000) / 6000;
		var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 6000) / 6000;
	}

	Temp_min = c_pos_Lat - grid_i * 20;
	Temp_max = c_pos_Lat + grid_i * 20;
	if(Temp_min < -90)
	{
		Temp_min = -90;
	}
	if(Temp_max > 90)
	{
		Temp_max = 90;
	}
	j = 0;
	for ( i = Temp_min; i <= Temp_max; i = i + grid_i )
	{
		grid_Lat[ j ] = i;
		j = j + 1;
	}

	Temp_min = c_pos_Lng - grid_i * 20;
	Temp_max = c_pos_Lng + grid_i * 20;
	if(Temp_min < -360)
	{
		Temp_min = -360;
	}
	if(Temp_max > 360)
	{
		Temp_max = 360;
	}
	j = 0;
	for ( i = Temp_min; i <= Temp_max; i = i + grid_i )
	{
		grid_Lng[ j ] = i;
		j = j + 1;
	}

	j = grid_Lat.length - 1;
	for ( i = 0; i <= j; i ++ )
	{
		grid_pos_A = [ [ grid_Lat[i], -360 ], [ grid_Lat[i], 360 ] ];
		grid_shape_A[i] = L.polyline([ grid_pos_A ],
			{ color: "#"+grid_line_col,
			  weight: 1,
			  opacity: 0.5
		});
		grid_shape_A[i].addTo(map);
		if (grid_Lat[i] >= 0)
		{
			NS = "'N";
		}
		else
		{
			NS = "'S";
		}
		var grid_Lat_dsp = Math.abs( grid_Lat[i]);
		infobox_Lat = Math.floor(grid_Lat_dsp) + "°" + Math.round(6000 * (grid_Lat_dsp - Math.floor(grid_Lat_dsp)))/100 + NS;
		if( grid_line_col == "FFFFFF" ) {
			grid_text_Lat[ i ] = L.marker([ grid_Lat[i], Temp_West ], {
		            icon: L.divIcon({
		                className: 'grid_textStyle_W',
		                html: infobox_Lat,
				iconAnchor: [-10,6]
		            }),
		            draggable: true,
		            zIndexOffset: 100
		        });
		} else {
			grid_text_Lat[ i ] = L.marker([ grid_Lat[i], Temp_West ], {
		            icon: L.divIcon({
		                className: 'grid_textStyle_B',
		                html: infobox_Lat,
				iconAnchor: [-10,6]
		            }),
		            draggable: true,
		            zIndexOffset: 100
		        });
		}
		grid_text_Lat[ i ].addTo(map);
	}

	j = grid_Lng.length - 1;
	for ( i = 0; i <= j; i ++ )
	{
		grid_pos_B = [ [ -90, grid_Lng[i]] , [ 90, grid_Lng[i] ] ];
		grid_shape_B[i] = L.polyline([ grid_pos_B ],
			{ color: "#"+grid_line_col,
			  weight: 1,
			  opacity: 0.5
		});
		grid_shape_B[i].addTo(map);
		if (grid_Lng[i] >= 0)
		{
			EW = "'E";
		}
		else
		{
			EW = "'W";
		}

		var grid_Lng_dsp = Math.abs( grid_Lng[i]);
	if(grid_Lng[i] >= -180 && grid_Lng[i] <= 180) {
		infobox_Lng = Math.floor(grid_Lng_dsp) + "°" + Math.round(6000 * (grid_Lng_dsp - Math.floor(grid_Lng_dsp)))/100 + EW;
	}
	if(grid_Lng[i] < -180) {
		grid_Lng_dsp = Math.abs(grid_Lng[i] + 360);
		EW = "E";
		infobox_Lng = Math.floor(grid_Lng_dsp) + "°" + Math.round(6000 * (grid_Lng_dsp - Math.floor(grid_Lng_dsp)))/100 + EW;
	}
	if(grid_Lng[i] > 180) {
		grid_Lng_dsp = Math.abs(grid_Lng[i] - 360);
		EW = "W";
		infobox_Lng = Math.floor(grid_Lng_dsp) + "°" + Math.round(6000 * (grid_Lng_dsp - Math.floor(grid_Lng_dsp)))/100 + EW;
	}

		if( grid_line_col == "FFFFFF" ) {
			grid_text_Lng[ i ] = L.marker([ Temp_North, grid_Lng[i] ], {
		            icon: L.divIcon({
		                className: 'grid_textStyle_W',
		                html: infobox_Lng,
				iconAnchor: [15,-10]
		            }),
		            draggable: true,
		            zIndexOffset: 101
		        });
		} else {
			grid_text_Lng[ i ] = L.marker([ Temp_North, grid_Lng[i] ], {
		            icon: L.divIcon({
		                className: 'grid_textStyle_B',
		                html: infobox_Lng,
				iconAnchor: [15,-10]
		            }),
		            draggable: true,
		            zIndexOffset: 101
		        });
		}
		grid_text_Lng[ i ].addTo(map);
	}
}

function del_grid()
{
	var j = grid_shape_A.length - 1;
	for(i=0; i<=j; i++) {
		map.removeLayer(grid_shape_A[i])
	}
	var j = grid_shape_B.length - 1;
	for(i=0; i<=j; i++) {
		map.removeLayer(grid_shape_B[i])
	}
	var j = grid_text_Lat.length - 1;
	for(i=0; i<=j; i++) {
		map.removeLayer(grid_text_Lat[i])
	}
	var j = grid_text_Lng.length - 1;
	for(i=0; i<=j; i++) {
		map.removeLayer(grid_text_Lng[i])
	}
}

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

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