Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
3

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

#３、色々な表示
　これまで 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.png

ソースファイル内容

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/」を参照ください。

3
3
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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?