#６、おまけ
おまけとして、これまで記載した次の項目を集めてみました。 実際の表示を確認したい方は、こちらをクリックしてください。
１、各種地図の選択：
画面上部のメニューから選択できるようにしました。
２、オーバーレイ表示の選択：
画面上部のメニューからラジオボタンにより設定できるようにしました。
３、各種図形表示と保存・読込
３－１、マーカー
３－２、直線
３－３、多角形
３－４、円形
４、ユーティリティ
４－１、マーカーのスタイル設定
４－２、線のスタイル設定
４－３、緯度・経度のグリッド線表示
白線あるいは黒線のグリッド表示が選択できます。
４－４、マウス位置表示
マウスの位置（緯度・経度）の表示／非表示を選択できます。
４－５、検索窓表示
検索窓の表示／非表示を選択できます。
５、その他
５－１、広域地図表示
５－２、スケール表示
ソースファイルの内容
Leaflet_Tutrial_601.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet_Tutrial_601.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/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" />
<link rel = "stylesheet" href = "./Plugins/ms-Dropdown-master/css/msdropdown/dd.css" />
<link rel = "stylesheet" href = "./CSS/Leaflet_Graticule.css" />
<link rel = "stylesheet" href = "./CSS/scroll_menu.css" />
<link rel = "stylesheet" href = "./CSS/Original_Style_505.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/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 = "./Plugins/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
<script src = "./JS/Map_Data_601.js" ></script>
<script src = "./JS/Leaflet_Graticule.js" ></script>
<script src = "./JS/Dialog_505.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 Lines_shape = new Array();
var Lines_shape_clone_01 = new Array();
var Lines_shape_clone_02 = new Array();
var Lines_LAT = new Array();
var Lines_LON = new Array();
var Lines_NAM = new Array();
var Lines_LNK = new Array();
var Lines_ICN = new Array();
var Lines_ID = new Array();
var Lines_Marker_ID = new Array();
var Lines_Drag_flag = new Array();
var Lines_Drag_info = new Array();
var Polygons_shape = new Array();
var Polygons_shape_clone_01 = new Array();
var Polygons_shape_clone_02 = new Array();
var Polygons_pos = new Array();
var Polygons_pos_clone_01 = new Array();
var Polygons_pos_clone_02 = new Array();
var Polygons_LAT = new Array();
var Polygons_LON = new Array();
var Polygons_NAM = new Array();
var Polygons_LNK = new Array();
var Polygons_ICN = new Array();
var Polygons_ID = new Array();
var Polygons_Marker_ID = new Array();
var Polygons_Drag_flag = new Array();
var Polygons_Drag_info = new Array();
var Circles_shape = new Array();
var Circles_shape_clone = new Array();
var Circles_LAT = new Array();
var Circles_LON = new Array();
var Circles_RAD = new Array();
var Circles_NAM = new Array();
var Circles_LNK = new Array();
var Circles_ID = new Array();
var Circles_Drag_flag = new Array();
var Circles_Drag_info = new Array();
var Lines_Marker_count = 0;
var Lines_Marker_ID_count = 0;
var Lines_count = 0;
var Lines_ID_count = 0;
var Polygons_Marker_count = 0;
var Polygons_Marker_ID_count = 0;
var Polygons_count = 0;
var Polygons_ID_count = 0;
var Circles_count = 0;
var Circles_ID_count = 0;
var Layer_505_L = new Array();
var Layer_505_L_clone_01 = new Array();
var Layer_505_L_clone_02 = new Array();
var Layer_505_LM = new Array();
var Layer_505_LM_clone = new Array();
var Layer_505_P = new Array();
var Layer_505_P_clone_01 = new Array();
var Layer_505_P_clone_02 = new Array();
var Layer_505_PM = new Array();
var Layer_505_PM_clone = new Array();
var Layer_505_C = new Array();
var Layer_505_C_clone = new Array();
var Dialog_flag_001 = 0;
var Lines_flag = 0;
var Polygons_flag = 0;
var Mouse_Position = L.control.mousePosition( {position:'bottomright'} );
var map;
var Layer_00;
function init() {
map = L.map('map').setView([35.0, 137.0], 6);
Layer_00 = Basic_Map[ 0 ];
map.addLayer( Layer_00 );
L.control.scale().addTo(map);
var osm2 = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {minZoom: 0, maxZoom: 15, attribution: 'Map data © OpenStreetMap contributors' });
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true, position: 'bottomleft' }).addTo(map);
map.on('click', function(e) {
ClickLat = e.latlng.lat;
ClickLon = e.latlng.lng;
while(ClickLon < -180) {
ClickLon = ClickLon + 360;
}
while(ClickLon > 180) {
ClickLon = ClickLon - 360;
}
if ( Marker_flag == 1 ) { Leaflet_Marker_401(); }
if ( Marker_flag == 2 ) { Leaflet_Marker_403(); }
if ( Lines_flag >= 1 ) { Leaflet_Lines_501(); };
if ( Polygons_flag >= 1 ) { Leaflet_Polygons_501(); };
});
}
function Leaflet_Marker_400() { // 初期設定（マーカー単独設置）
ClickLat = null;
ClickLon = null;
Marker_flag = 1;
Lines_flag = 0;
Polygons_flag = 0;
}
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);
Layer_404_clone[ Temp ] = Temp_shape_clone;
Layer_404_clone[ Temp ].addTo(map);
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;
Lines_flag = 0;
Polygons_flag = 0;
}
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 ] = Set_Link;
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);
Layer_404_clone[ Temp ] = Temp_shape_clone;
Layer_404_clone[ Temp ].addTo(map);
Marker_count = Marker_count + 1;
Marker_ID_count = Marker_ID_count + 1;
}
}
function Leaflet_Marker_404() { // マーカー連続設置終了
Marker_flag = 0;
}
function Leaflet_Marker_405() { // マーカー全消去
for(i = 0; i < Layer_404.length; i++) {
if(Layer_404[i] != null) {
map.removeLayer(Layer_404[i]);
}
}
for(i = 0; i < Layer_404_clone.length; i++) {
if(Layer_404[i] != null) {
map.removeLayer(Layer_404_clone[ i ]);
}
}
Marker_flag = 0;
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 Lines_Marker_setting() { // 直線用マーカー設定
Temp_LAT = Lines_LAT[ Temp ] * 1.0;
Temp_LON = Lines_LON[ Temp ] * 1.0;
Temp_NAM = Lines_NAM[ Temp ];
Temp_LNK = Lines_LNK[ Temp ];
Temp_ICN = Lines_ICN[ Temp ];
Temp_ID = Lines_Marker_ID[ Temp ];
Temp_Drag_flag = Lines_Drag_flag[ Temp ];
Temp_Drag_info = Lines_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 Polygons_Marker_setting() { // 多角形用マーカー設定
Temp_LAT = Polygons_LAT[ Temp ] * 1.0;
Temp_LON = Polygons_LON[ Temp ] * 1.0;
Temp_NAM = Polygons_NAM[ Temp ];
Temp_LNK = Polygons_LNK[ Temp ];
Temp_ICN = Polygons_ICN[ Temp ];
Temp_ID = Polygons_Marker_ID[ Temp ];
Temp_Drag_flag = Polygons_Drag_flag[ Temp ];
Temp_Drag_info = Polygons_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 () {
if(SelectedID.slice(0,4) =="Line") {
Lines_Marker_DEL(tempMarker);
} else if(SelectedID.slice(0,7) =="Polygon") {
Polygons_Marker_DEL(tempMarker);
} else {
Marker_DEL(tempMarker);
}
});
$(".marker-change-button:visible").click(function () {
Dialog_flag_001 = 1;
Dialog_001();
Dialog_flag_001 = 0;
});
}
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]
});
}
}
for(i = 0; i <= Lines_Marker_count; i++) {
if(SelectedID == Lines_Marker_ID[ i ] ) {
Lines_NAM[ i ] = Set_Text;
Lines_ICN[ i ] = L.icon({
iconUrl: Icon_Url,
iconSize: [Icon_W, Icon_H],
iconAnchor : [Icon_AW, Icon_AH],
popupAnchor: [Icon_PW, Icon_PH]
});
}
}
for(i = 0; i <= Polygons_Marker_count; i++) {
if(SelectedID == Polygons_Marker_ID[ i ] ) {
Polygons_NAM[ i ] = Set_Text;
Polygons_ICN[ i ] = L.icon({
iconUrl: Icon_Url,
iconSize: [Icon_W, Icon_H],
iconAnchor : [Icon_AW, Icon_AH],
popupAnchor: [Icon_PW, Icon_PH]
});
}
}
Marker_Refresh();
Lines_Marker_Refresh();
Polygons_Marker_Refresh();
}
function Marker_DEL(tempMarker) { // マーカー削除ボタン押下時の処理
var k = 0;
Marker_flag = 0;
Marker_LAT[ Marker_count ] = "";
Marker_LON[ Marker_count ] = "";
Marker_NAM[ Marker_count ] = "";
Marker_LNK[ Marker_count ] = "";
Marker_ICN[ Marker_count ] = "";
Marker_ID[ Marker_count ] = "";
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_Refresh();
Marker_count = Marker_count - 1;
Marker_Refresh();
}
function Lines_Marker_DEL(tempMarker) { // 直線用マーカーの削除ボタン押下時の処理
var k = 0;
Lines_LAT[ Lines_Marker_count ] = "";
Lines_LON[ Lines_Marker_count ] = "";
Lines_NAM[ Lines_Marker_count ] = "";
Lines_LNK[ Lines_Marker_count ] = "";
Lines_ICN[ Lines_Marker_count ] = "";
Lines_ID[ Lines_Marker_count ] = "";
Lines_LAT[ Lines_Marker_count + 1 ] = "";
Lines_LON[ Lines_Marker_count + 1 ] = "";
Lines_NAM[ Lines_Marker_count + 1 ] = "";
Lines_LNK[ Lines_Marker_count + 1 ] = "";
Lines_ICN[ Lines_Marker_count + 1 ] = "";
Lines_ID[ Lines_Marker_count + 1 ] = "";
SelectedID = tempMarker.options.id;
for(i = 0; i <= Lines_Marker_count; i++) {
if(SelectedID == Lines_Marker_ID[ i ] ) {
for(k = i; k <= Lines_Marker_count; k++) {
Lines_LAT[ k ] = Lines_LAT[ k + 1 ];
Lines_LON[ k ] = Lines_LON[ k + 1 ];
Lines_NAM[ k ] = Lines_NAM[ k + 1 ];
Lines_LNK[ k ] = Lines_LNK[ k + 1 ];
Lines_ICN[ k ] = Lines_ICN[ k + 1 ];
Lines_Marker_ID[ k ] = Lines_Marker_ID[ k + 1 ];
Lines_Drag_flag[ k ] = Lines_Drag_flag[ k + 1 ];
Lines_Drag_info[ k ] = Lines_Drag_info[ k + 1 ];
}
}
}
SelectedID = null;
Lines_Marker_Refresh();
Lines_Marker_count = Lines_Marker_count - 1;
Lines_Marker_Refresh();
Leaflet_Lines_Draw();
}
function Polygons_Marker_DEL(tempMarker) { // 多角形用マーカーの削除ボタン押下時の処理
var k = 0;
Polygons_LAT[ Polygons_Marker_count ] = "";
Polygons_LON[ Polygons_Marker_count ] = "";
Polygons_NAM[ Polygons_Marker_count ] = "";
Polygons_LNK[ Polygons_Marker_count ] = "";
Polygons_ICN[ Polygons_Marker_count ] = "";
Polygons_ID[ Polygons_Marker_count ] = "";
Polygons_LAT[ Polygons_Marker_count + 1 ] = "";
Polygons_LON[ Polygons_Marker_count + 1 ] = "";
Polygons_NAM[ Polygons_Marker_count + 1 ] = "";
Polygons_LNK[ Polygons_Marker_count + 1 ] = "";
Polygons_ICN[ Polygons_Marker_count + 1 ] = "";
Polygons_ID[ Polygons_Marker_count + 1 ] = "";
SelectedID = tempMarker.options.id;
for(i = 0; i <= Polygons_Marker_count; i++) {
if(SelectedID == Polygons_Marker_ID[ i ] ) {
for(k = i; k <= Polygons_Marker_count; k++) {
Polygons_LAT[ k ] = Polygons_LAT[ k + 1 ];
Polygons_LON[ k ] = Polygons_LON[ k + 1 ];
Polygons_NAM[ k ] = Polygons_NAM[ k + 1 ];
Polygons_LNK[ k ] = Polygons_LNK[ k + 1 ];
Polygons_ICN[ k ] = Polygons_ICN[ k + 1 ];
Polygons_Marker_ID[ k ] = Polygons_Marker_ID[ k + 1 ];
Polygons_Drag_flag[ k ] = Polygons_Drag_flag[ k + 1 ];
Polygons_Drag_info[ k ] = Polygons_Drag_info[ k + 1 ];
}
}
}
SelectedID = null;
Polygons_Marker_Refresh();
Polygons_Marker_count = Polygons_Marker_count - 1;
Polygons_Marker_Refresh();
Leaflet_Polygons_Draw();
}
function Marker_Refresh() { // マーカー再表示
for(i = 0; i < Layer_404.length; i++) {
if(Layer_404[ i ] != null) {
map.removeLayer(Layer_404[ i ]);
}
}
for(i = 0; i < Layer_404_clone.length; i++) {
if(Layer_404_clone[ i ] != null) {
map.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);
Layer_404_clone[ Temp ] = Temp_shape_clone;
Layer_404_clone[ Temp ].addTo(map);
}
}
function Lines_Marker_Refresh() { // 直線用マーカー再表示
for(i = 0; i < Layer_505_LM.length; i++) {
if(Layer_505_LM[ i ] != null) {
map.removeLayer(Layer_505_LM[ i ]);
}
}
for(i = 0; i < Layer_505_LM_clone.length; i++) {
if(Layer_505_LM_clone[ i ] != null) {
map.removeLayer(Layer_505_LM_clone[ i ]);
}
}
for (i = 0; i <= (Lines_Marker_count - 1); i++)
{
Temp = i;
Lines_Marker_setting();
Marker_set();
Layer_505_LM[ Temp ] = Temp_shape;
Layer_505_LM[ Temp ].addTo(map);
Layer_505_LM_clone[ Temp ] = Temp_shape_clone;
Layer_505_LM_clone[ Temp ].addTo(map);
}
}
function Polygons_Marker_Refresh() { // 多角形用マーカー再表示
for(i = 0; i < Layer_505_PM.length; i++) {
if(Layer_505_PM[ i ] != null) {
map.removeLayer(Layer_505_PM[ i ]);
}
}
for(i = 0; i < Layer_505_PM_clone.length; i++) {
if(Layer_505_PM_clone[ i ] != null) {
map.removeLayer(Layer_505_PM_clone[ i ]);
}
}
for (i = 0; i <= (Polygons_Marker_count - 1); i++)
{
Temp = i;
Polygons_Marker_setting();
Marker_set();
Layer_505_PM[ Temp ] = Temp_shape;
Layer_505_PM[ Temp ].addTo(map);
Layer_505_PM_clone[ Temp ] = Temp_shape_clone;
Layer_505_PM_clone[ Temp ].addTo(map);
}
}
function Dragging() { // マーカーをドラッグ時の位置取得
ClickLat = this._latlng.lat;
ClickLon = this._latlng.lng;
SelectedID = this.options.id;
if(SelectedID.slice(0,4) == "Line") {
for(i = 0; i <= Lines_Marker_count; i++) {
if(SelectedID == Lines_Marker_ID[ i ] ) {
Lines_LAT[ i ] = ClickLat;
Lines_LON[ i ] = ClickLon;
}
}
Lines_Marker_Refresh();
Leaflet_Lines_Draw();
} else if(SelectedID.slice(0,7) == "Polygon") {
for(i = 0; i <= Polygons_Marker_count; i++) {
if(SelectedID == Polygons_Marker_ID[ i ] ) {
Polygons_LAT[ i ] = ClickLat;
Polygons_LON[ i ] = ClickLon;
}
}
Polygons_Marker_Refresh();
Leaflet_Polygons_Draw();
} else {
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 Leaflet_Lines_500() { // 初期設定（直線の設置）
ClickLat = null;
ClickLon = null;
Marker_flag = 0;
Lines_flag = 1;
Polygons_flag = 0;
}
function Leaflet_Lines_501() { // 直線用マーカーの設置
Lines_LAT[ Lines_Marker_count ] = ClickLat;
Lines_LON[ Lines_Marker_count ] = ClickLon;
Lines_NAM[ Lines_Marker_count ] = Set_Text;
Lines_LNK[ Lines_Marker_count ] = Set_Link;
Lines_ICN[ Lines_Marker_count ] = L.icon({
iconUrl: Icon_Url,
iconSize: [Icon_W, Icon_H],
iconAnchor : [Icon_AW, Icon_AH],
popupAnchor: [Icon_PW, Icon_PH]
});
Lines_Marker_ID[ Lines_Marker_count ] = "Line" + Lines_Marker_ID_count;
Lines_Drag_flag[ Lines_Marker_count ] = true;
Lines_Drag_info[ Lines_Marker_count ] = "マウスで移動出来ます。";
Temp = Lines_Marker_count;
Lines_Marker_setting();
Marker_set();
Layer_505_LM[ Temp ] = Temp_shape;
Layer_505_LM[ Temp ].addTo(map);
Layer_505_LM_clone[ Temp ] = Temp_shape_clone;
Layer_505_LM_clone[ Temp ].addTo(map);
Lines_Marker_count = Lines_Marker_count + 1;
Lines_Marker_ID_count = Lines_Marker_ID_count + 1;
Leaflet_Lines_Draw();
}
function Leaflet_Lines_502() { // 直線マーカーの設置終了
Lines_flag = 0;
Lines_LAT[ Lines_Marker_count ] = "";
Lines_LON[ Lines_Marker_count ] = "";
Lines_NAM[ Lines_Marker_count ] = "";
Lines_LNK[ Lines_Marker_count ] = "";
Lines_ICN[ Lines_Marker_count ] = "";
Lines_ID[ Lines_Marker_count ] = "";
Lines_Marker_count = Lines_Marker_count + 1;
}
function Leaflet_Lines_503() { // 直線と直線用マーカーの全消去
for(i = 0; i < Layer_505_LM.length; i++) {
if(Layer_505_LM[i] != null) {
map.removeLayer(Layer_505_LM[i]);
}
}
for(i = 0; i < Layer_505_LM_clone.length; i++) {
if(Layer_505_LM_clone[i] != null) {
map.removeLayer(Layer_505_LM_clone[i]);
}
}
for(i = 0; i < Layer_505_L.length; i++) {
if(Layer_505_L[i] != null) {
map.removeLayer(Layer_505_L[i]);
}
}
for(i = 0; i < Layer_505_L_clone_01.length; i++) {
if(Layer_505_L_clone_01[i] != null) {
map.removeLayer(Layer_505_L_clone_01[i]);
}
}
for(i = 0; i < Layer_505_L_clone_02.length; i++) {
if(Layer_505_L_clone_02[i] != null) {
map.removeLayer(Layer_505_L_clone_02[i]);
}
}
Lines_flag = 0;
Lines_count = 0;
Lines_Marker_count = 0;
Lines_shape = new Array();
Lines_shape_clone_01 = new Array();
Lines_shape_clone_02 = new Array();
Lines_LAT = new Array();
Lines_LON = new Array();
Lines_NAM = new Array();
Lines_LNK = new Array();
Lines_ICN = new Array();
}
function Leaflet_Lines_504() { // 直線用マーカーの非表示
for(i = 0; i < Layer_505_LM.length; i++) {
if(Layer_505_LM[i] != null) {
map.removeLayer(Layer_505_LM[i]);
}
}
for(i = 0; i < Layer_505_LM_clone.length; i++) {
if(Layer_505_LM_clone[i] != null) {
map.removeLayer(Layer_505_LM_clone[i]);
}
}
}
function Leaflet_Lines_505() { // 直線用マーカーの再表示
Lines_Marker_Refresh();
}
function Leaflet_Lines_Draw() { // 直線の描画
for (i = 0; i < Layer_505_L.length; i++) {
if(Layer_505_L[i] != null) {
map.removeLayer(Layer_505_L[i]);
}
}
for (i = 0; i < Layer_505_L_clone_01.length; i++) {
if(Layer_505_L_clone_01[i] != null) {
map.removeLayer(Layer_505_L_clone_01[i]);
}
}
for (i = 0; i < Layer_505_L_clone_02.length; i++) {
if(Layer_505_L_clone_02[i] != null) {
map.removeLayer(Layer_505_L_clone_02[i]);
}
}
var Temp_LON_01 = new Array();
var Temp_LON_02 = new Array();
for(i = 0; i <= (Lines_Marker_count - 1); i++) {
Temp_LON_01[ i ] = Lines_LON[ i ] * 1.0;
Temp_LON_02[ i ] = Lines_LON[ i ] * 1.0;
if(Lines_LON[ i ] * 1.0 <= 0) {
Temp_LON_01[ i ] = Lines_LON[ i ] * 1.0 + 360;
} else {
Temp_LON_02[ i ] = Lines_LON[ i ] * 1.0 - 360;
}
}
for(i = 0; i <= (Lines_Marker_count - 1); i++) {
if( !isNaN( Lines_LAT[ i ] ) && !isNaN( Lines_LAT[ i + 1 ] ) ) {
if( Math.abs(Lines_LON[ i ] - Lines_LON[ i + 1 ]) <= 180 ) {
if( (Lines_LAT[ i ] != 0) || (Lines_LON[ i ] != 0) ) {
if( (Lines_LAT[ i + 1 ] != 0) || (Lines_LON[ i + 1 ] != 0) ) {
Lines_shape[ Lines_count ] = L.polyline([[ Lines_LAT[ i ], Lines_LON[ i ] ], [ Lines_LAT[ i + 1 ], Lines_LON[ i + 1 ] ]],
{ color: "#"+Selected_Color,
weight: Line_W,
opacity: Selected_Opacity,
dashArray: Line_Type
});
Layer_505_L[ Lines_count ] = Lines_shape[ Lines_count ];
Layer_505_L[ Lines_count ].addTo(map);
}
}
}
if( Math.abs(Temp_LON_01[ i ] - Temp_LON_01[ i + 1 ]) <= 180 ) {
if( (Lines_LAT[ i ] != 0) || (Temp_LON_01[ i ] != 0) ) {
if( (Lines_LAT[ i + 1 ] != 0) || (Temp_LON_01[ i + 1 ] != 0) ) {
Lines_shape_clone_01[ Lines_count ] = L.polyline([[ Lines_LAT[ i ], Temp_LON_01[ i ] ], [ Lines_LAT[ i + 1 ], Temp_LON_01[ i + 1 ] ]],
{ color: "#"+Selected_Color,
weight: Line_W,
opacity: Selected_Opacity,
dashArray: Line_Type
});
Layer_505_L_clone_01[ Lines_count ] = Lines_shape_clone_01[ Lines_count ];
Layer_505_L_clone_01[ Lines_count ].addTo(map);
}
}
}
if( Math.abs(Temp_LON_02[ i ] - Temp_LON_02[ i + 1 ]) <= 180 ) {
if( (Lines_LAT[ i ] != 0) || (Temp_LON_02[ i ] != 0) ) {
if( (Lines_LAT[ i + 1 ] != 0) || (Temp_LON_02[ i + 1 ] != 0) ) {
Lines_shape_clone_02[ Lines_count ] = L.polyline([[ Lines_LAT[ i ], Temp_LON_02[ i ] ], [ Lines_LAT[ i + 1 ], Temp_LON_02[ i + 1 ] ]],
{ color: "#"+Selected_Color,
weight: Line_W,
opacity: Selected_Opacity,
dashArray: Line_Type
});
Layer_505_L_clone_02[ Lines_count ] = Lines_shape_clone_02[ Lines_count ];
Layer_505_L_clone_02[ Lines_count ].addTo(map);
}
}
}
Lines_count = Lines_count + 1;
}
}
}
function Leaflet_Polygons_500() { // 初期設定（多角形の設置）
ClickLat = null;
ClickLon = null;
Marker_flag = 0;
Lines_flag = 0;
Polygons_flag = 1;
}
function Leaflet_Polygons_501() { // 多角形マーカーの設置
Polygons_LAT[ Polygons_Marker_count ] = ClickLat;
Polygons_LON[ Polygons_Marker_count ] = ClickLon;
Polygons_NAM[ Polygons_Marker_count ] = Set_Text;
Polygons_LNK[ Polygons_Marker_count ] = Set_Link;
Polygons_ICN[ Polygons_Marker_count ] = L.icon({
iconUrl: Icon_Url,
iconSize: [Icon_W, Icon_H],
iconAnchor : [Icon_AW, Icon_AH],
popupAnchor: [Icon_PW, Icon_PH]
});
Polygons_Marker_ID[ Polygons_Marker_count ] = "Polygon" + Polygons_Marker_ID_count;
Polygons_Drag_flag[ Polygons_Marker_count ] = true;
Polygons_Drag_info[ Polygons_Marker_count ] = "マウスで移動出来ます。";
Temp = Polygons_Marker_count;
Polygons_Marker_setting();
Marker_set();
Layer_505_PM[ Temp ] = Temp_shape;
Layer_505_PM[ Temp ].addTo(map);
Layer_505_PM_clone[ Temp ] = Temp_shape_clone;
Layer_505_PM_clone[ Temp ].addTo(map);
Polygons_Marker_count = Polygons_Marker_count + 1;
Polygons_Marker_ID_count = Polygons_Marker_ID_count + 1;
}
function Leaflet_Polygons_502() { // 多角形マーカーの設置終了
Polygons_flag = 0;
Polygons_LAT[ Polygons_Marker_count ] = "";
Polygons_LON[ Polygons_Marker_count ] = "";
Polygons_NAM[ Polygons_Marker_count ] = "";
Polygons_LNK[ Polygons_Marker_count ] = "";
Polygons_ICN[ Polygons_Marker_count ] = "";
Polygons_ID[ Polygons_Marker_count ] = "";
Polygons_Marker_count = Polygons_Marker_count + 1;
Leaflet_Polygons_Draw();
}
function Leaflet_Polygons_503() { // 多角形と多角形用マーカーの全消去
for(i = 0; i < Layer_505_PM.length; i++) {
if(Layer_505_PM[i] != null) {
map.removeLayer(Layer_505_PM[i]);
}
}
for(i = 0; i < Layer_505_PM_clone.length; i++) {
if(Layer_505_PM_clone[i] != null) {
map.removeLayer(Layer_505_PM_clone[i]);
}
}
for(i = 0; i < Layer_505_P.length; i++) {
if(Layer_505_P[i] != null) {
map.removeLayer(Layer_505_P[i]);
}
}
for(i = 0; i < Layer_505_P_clone_01.length; i++) {
if(Layer_505_P_clone_01[i] != null) {
map.removeLayer(Layer_505_P_clone_01[i]);
}
}
for(i = 0; i < Layer_505_P_clone_02.length; i++) {
if(Layer_505_P_clone_02[i] != null) {
map.removeLayer(Layer_505_P_clone_02[i]);
}
}
Polygons_flag = 0;
Polygons_count = 0;
Polygons_Marker_count = 0;
Polygons_shape = new Array();
Polygons_LAT = new Array();
Polygons_LON = new Array();
Polygons_NAM = new Array();
Polygons_LNK = new Array();
Polygons_ICN = new Array();
}
function Leaflet_Polygons_504() { // 多角形用マーカーの非表示
for(i = 0; i < Layer_505_PM.length; i++) {
if(Layer_505_PM[i] != null) {
map.removeLayer(Layer_505_PM[i]);
}
}
for(i = 0; i < Layer_505_PM_clone.length; i++) {
if(Layer_505_PM_clone[i] != null) {
map.removeLayer(Layer_505_PM_clone[i]);
}
}
}
function Leaflet_Polygons_505() { // 多角形用マーカーの再表示
Polygons_Marker_Refresh();
}
function Leaflet_Polygons_Draw() { // 多角形の描画
if(Polygons_count != 0) {
for (i = 0; i < Layer_505_P.length; i++) {
if(Layer_505_P[i] != null) {
map.removeLayer(Layer_505_P[i]);
}
}
for (i = 0; i < Layer_505_P_clone_01.length; i++) {
if(Layer_505_P_clone_01[i] != null) {
map.removeLayer(Layer_505_P_clone_01[i]);
}
}
for (i = 0; i < Layer_505_P_clone_02.length; i++) {
if(Layer_505_P_clone_02[i] != null) {
map.removeLayer(Layer_505_P_clone_02[i]);
}
}
}
var Temp_LAT = new Array();
var Temp_LON = new Array();
var Temp_LON_clone_01 = new Array();
var Temp_LON_clone_02 = new Array();
var Temp_flag = new Array();
var j = 0;
Polygons_shape = new Array();
Polygons_shape_clone_01 = new Array();
Polygons_shape_clone_02 = new Array();
Polygons_pos = new Array();
Polygons_pos_clone_01 = new Array();
Polygons_pos_clone_02 = new Array();
Temp_flag[ 0 ] = 0;
for(i = 0; i <= (Polygons_LAT.length - 1); i++) {
if( isNaN( Polygons_LAT[ i ]) || isNaN( Polygons_LON[ i ] ) || ( (Polygons_LAT[ i ] * 1.0 == 0) && (Polygons_LON[ i ] * 1.0 == 0) ) ) {
j = j + 1;
Temp_flag[ j ] = 0;
} else {
if( Math.abs(Polygons_LON[ i ] * 1.0 - Polygons_LON[ i + 1 ] * 1.0 ) > 180) {
Temp_flag[ j ] = Temp_flag[ j ] + 1;
}
}
}
j = 0;
for(i = 0; i <= (Polygons_LAT.length - 1); i++) {
Temp_LAT[ i ] = Polygons_LAT[ i ];
Temp_LON[ i ] = Polygons_LON[ i ];
Temp_LON_clone_01[ i ] = Polygons_LON[ i ];
Temp_LON_clone_02[ i ] = Polygons_LON[ i ];
if( isNaN( Polygons_LAT[ i ]) || isNaN( Polygons_LON[ i ] ) || ( (Polygons_LAT[ i ] * 1.0 == 0) && (Polygons_LON[ i ] * 1.0 == 0) ) ) {
j = j + 1;
} else {
if(Temp_flag[ j ] != 0) {
if(Polygons_LON[ i ] * 1.0 < 0) {
Temp_LON[ i ] = Polygons_LON[ i ] * 1.0 + 360;
}
}
}
Temp_LON_clone_01[ i ] = Temp_LON[ i ] * 1.0 + 360;
Temp_LON_clone_02[ i ] = Temp_LON[ i ] * 1.0 - 360;
}
Polygons_pos[ 0 ] = [];
Polygons_pos_clone_01[ 0 ] = [];
Polygons_pos_clone_02[ 0 ] = [];
j = 0;
for(i = 0; i <= (Temp_LAT.length - 1); i++) {
if( isNaN( Polygons_LAT[ i ]) || isNaN( Polygons_LON[ i ] ) || ( (Polygons_LAT[ i ] * 1.0 == 0) && (Polygons_LON[ i ] * 1.0 == 0) ) ) {
j = j + 1;
Polygons_pos[ j ] = [];
Polygons_pos_clone_01[ j ] = [];
Polygons_pos_clone_02[ j ] = [];
} else {
Temp = Polygons_pos[ j ].push([ Temp_LAT[ i ], Temp_LON[ i ] ]);
Temp = Polygons_pos_clone_01[ j ].push([ Temp_LAT[ i ], (Temp_LON_clone_01[ i ]) ]);
Temp = Polygons_pos_clone_02[ j ].push([ Temp_LAT[ i ], (Temp_LON_clone_02[ i ]) ]);
}
}
j = 0;
for(i = 0; i <= (Polygons_pos.length - 1); i++) {
if(Polygons_pos[ i ].length >= 3) {
Polygons_shape[ j ] = L.polygon([ Polygons_pos[ i ] ],
{ color: "#"+Selected_Color,
weight: Line_W,
opacity: Selected_Opacity,
dashArray: Line_Type,
fillColor: "#" + Selected_Fill_Color,
fillopacity: Selected_Fill_Opacity
});
j = j + 1;
}
}
for(i = 0; i <= (Polygons_pos_clone_01.length - 1); i++) {
if(Polygons_pos_clone_01[ i ].length >= 3) {
Polygons_shape_clone_01[ i ] = L.polygon([ Polygons_pos_clone_01[ i ] ],
{ color: "#"+Selected_Color,
weight: Line_W,
opacity: Selected_Opacity,
dashArray: Line_Type,
fillColor: "#" + Selected_Fill_Color,
fillopacity: Selected_Fill_Opacity
});
}
}
for(i = 0; i <= (Polygons_pos_clone_02.length - 1); i++) {
if(Polygons_pos_clone_02[ i ].length >= 3) {
Polygons_shape_clone_02[ i ] = L.polygon([ Polygons_pos_clone_02[ i ] ],
{ color: "#"+Selected_Color,
weight: Line_W,
opacity: Selected_Opacity,
dashArray: Line_Type,
fillColor: "#" + Selected_Fill_Color,
fillopacity: Selected_Fill_Opacity
});
}
}
for(i = 0; i <= (Polygons_shape.length - 1); i++) {
if(Polygons_shape[ i ] != null) {
Layer_505_P[ i ] = Polygons_shape[ i ];
Layer_505_P[ i ].addTo(map);
}
}
for(i = 0; i <= (Polygons_shape_clone_01.length - 1); i++) {
if(Polygons_shape_clone_01[ i ] != null) {
Layer_505_P_clone_01[ i ] = Polygons_shape_clone_01[ i ];
Layer_505_P_clone_01[ i ].addTo(map);
}
}
for(i = 0; i <= (Polygons_shape_clone_02.length - 1); i++) {
if(Polygons_shape_clone_02[ i ] != null) {
Layer_505_P_clone_02[ i ] = Polygons_shape_clone_02[ i ];
Layer_505_P_clone_02[ i ].addTo(map);
}
}
Polygons_count = Polygons_count + 1;
}
function Leaflet_Circles_500() { // 円の設置
Dialog_004();
}
function Leaflet_Circles_501() { // 円の全消去
for(i = 0; i < Layer_505_C.length; i++) {
if(Layer_505_C[i] != null) {
map.removeLayer(Layer_505_C[i]);
}
}
for(i = 0; i < Layer_505_C_clone.length; i++) {
if(Layer_505_C_clone[i] != null) {
map.removeLayer(Layer_505_C_clone[i]);
}
}
Circles_count = 0;
Circles_shape = new Array();
Circles_shape_clone = new Array();
Circles_LAT = new Array();
Circles_LON = new Array();
Circles_RAD = new Array();
Circles_NAM = new Array();
Circles_LNK = new Array();
}
function Circles_Set(Temp) { // 円の表示
if(( Circles_RAD[ Temp ] * 1.0 == 0) || isNaN(Circles_RAD[ Temp ]) ) {
alert("データ名： " + Circles_NAM[ Temp ] + "\n" + "円の直径が指定されていません！");
return;
}
Circles_shape[ Temp ] = L.circle([ Circles_LAT[ Temp ], Circles_LON[ Temp ] ], Circles_RAD[ Temp ],
{ color: "#" + Selected_Color,
fillColor: "#" + Selected_Fill_Color,
opacity: Selected_Opacity,
weight: Line_W,
fillopacity: Selected_Fill_Opacity,
dashArray: Line_Type,
id: Circles_ID[ Temp ]
}).bindPopup(Circles_NAM[ Temp ] + "<BR> <input type='button' value='Delete this circle' class='circle-delete-button'/>");
if(Circles_LON[ Temp ] < 0) {
Circles_shape_clone[ Temp ] = L.circle([ Circles_LAT[ Temp ], (Circles_LON[ Temp ] + 360) ], Circles_RAD[ Temp ],
{ color: "#" + Selected_Color,
fillColor: "#" + Selected_Fill_Color,
opacity: Selected_Opacity,
weight: Line_W,
fillopacity: Selected_Fill_Opacity,
dashArray: Line_Type,
id: Circles_ID[ Temp ]
}).bindPopup(Circles_NAM[ Temp ] + "<BR> <input type='button' value='Delete this circle' class='circle-delete-button'/>");
} else {
Circles_shape_clone[ Temp ] = L.circle([ Circles_LAT[ Temp ], (Circles_LON[ Temp ] - 360) ], Circles_RAD[ Temp ],
{ color: "#" + Selected_Color,
fillColor: "#" + Selected_Fill_Color,
opacity: Selected_Opacity,
weight: Line_W,
fillopacity: Selected_Fill_Opacity,
dashArray: Line_Type,
id: Circles_ID[ Temp ]
}).bindPopup(Circles_NAM[ Temp ] + "<BR> <input type='button' value='Delete this circle' class='circle-delete-button'/>");
}
Layer_505_C[ Temp ] = Circles_shape[ Temp ].on('popupopen', onPopupCircle );
Layer_505_C[ Temp ].addTo(map);
Layer_505_C_clone[ Temp ] = Circles_shape_clone[ Temp ].on('popupopen', onPopupCircle );
Layer_505_C_clone[ Temp ].addTo(map);
}
function onPopupCircle() { // 円の選択削除
var tempFigure = this;
var k = 0;
Circles_LAT[ Circles_count ] = "";
Circles_LON[ Circles_count ] = "";
Circles_RAD[ Circles_count ] = "";
Circles_NAM[ Circles_count ] = "";
Circles_LNK[ Circles_count ] = "";
Circles_ID[ Circles_count ] = "";
Circles_LAT[ Circles_count + 1 ] = "";
Circles_LON[ Circles_count + 1 ] = "";
Circles_RAD[ Circles_count + 1 ] = "";
Circles_NAM[ Circles_count + 1 ] = "";
Circles_LNK[ Circles_count + 1 ] = "";
Circles_ID[ Circles_count + 1 ] = "";
SelectedID = tempFigure.options.id;
$(".circle-delete-button:visible").click(function () {
for(i = 0; i <= Circles_count; i++) {
if(SelectedID == Circles_ID[ i ] ) {
for(k = i; k <= Circles_count; k++) {
Circles_LAT[ k ] = Circles_LAT[ k + 1 ];
Circles_LON[ k ] = Circles_LON[ k + 1 ];
Circles_RAD[ k ] = Circles_RAD[ k + 1 ];
Circles_NAM[ k ] = Circles_NAM[ k + 1 ];
Circles_LNK[ k ] = Circles_LNK[ k + 1 ];
Circles_ID[ k ] = Circles_ID[ k + 1 ];
Circles_Drag_flag[ k ] = Circles_Drag_flag[ k + 1 ];
Circles_Drag_info[ k ] = Circles_Drag_info[ k + 1 ];
}
}
}
SelectedID = null;
Circles_count = Circles_count - 1;
Circles_Refresh();
});
}
function Circles_Refresh() { // 円の再描画
for(i = 0; i < Layer_505_C.length; i++) {
if(Layer_505_C[ i ] != null) {
map.removeLayer(Layer_505_C[ i ]);
}
}
for(i = 0; i < Layer_505_C_clone.length; i++) {
if(Layer_505_C_clone[ i ] != null) {
map.removeLayer(Layer_505_C_clone[ i ]);
}
}
for (i = 0; i <= (Circles_count - 1); i++)
{
Temp = i;
Circles_Set(Temp);
}
}
function Leaflet_CSV_510() { // 直線データの保存（CSV形式）
for (i = 0; i <= (Lines_LON.length - 1); i++) {
if( !isNaN(Lines_LON[ i ]) ) {
while( (Lines_LON[ i ] * 1.0) < -180) {
Lines_LON[ i ] = (Lines_LON[ i ] * 1.0) + 360;
}
while( (Lines_LON[ i ] * 1.0) > 180) {
Lines_LON[ i ] = (Lines_LON[ i ] * 1.0) - 360;
}
}
}
if(Lines_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_Line_Data.csv";
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
Temp = Lines_LAT.length - 1;
for ( i = 0; i < Temp; i++ ) {
CSV_content = CSV_content + Lines_LAT[ i ] + "," + Lines_LON[ i ] + "," + Lines_NAM[ i ] + "," + Lines_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_CSV_511() { // 多角形データの保存（CSV形式）
for (i = 0; i <= (Polygons_LON.length - 1); i++) {
if( !isNaN(Polygons_LON[ i ]) ) {
while( (Polygons_LON[ i ] * 1.0) < -180) {
Polygons_LON[ i ] = (Polygons_LON[ i ] * 1.0) + 360;
}
while( (Polygons_LON[ i ] * 1.0) > 180) {
Polygons_LON[ i ] = (Polygons_LON[ i ] * 1.0) - 360;
}
}
}
if(Polygons_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_Polygon_Data.csv";
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
Temp = Polygons_LAT.length - 1;
for ( i = 0; i < Temp; i++ ) {
CSV_content = CSV_content + Polygons_LAT[ i ] + "," + Polygons_LON[ i ] + "," + Polygons_NAM[ i ] + "," + Polygons_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_CSV_512() { // 円データの保存（CSV形式）
for (i = 0; i <= (Circles_LON.length -1); i++) {
if( !isNaN(Circles_LON[ i ]) ) {
while( (Circles_LON[ i ] * 1.0) < -180) {
Circles_LON[ i ] = (Circles_LON[ i ] * 1.0) + 360;
}
while( (Circles_LON[ i ] * 1.0) > 180) {
Circles_LON[ i ] = (Circles_LON[ i ] * 1.0) - 360;
}
}
}
if(Circles_LAT[ 0 ] == "LAT(deg.)") {
var CSV_content = [];
} else {
var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,Radius,\r\n";
}
const aTag = document.createElement('a');
aTag.download = "CSV_Circle_Data.csv";
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
Temp = Circles_LAT.length - 1;
for ( i = 0; i <= Temp; i++ ) {
CSV_content = CSV_content + Circles_LAT[ i ] + "," + Circles_LON[ i ] + "," + Circles_NAM[ i ] + "," + Circles_LNK[ i ] + "," + Circles_RAD[ 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 CSV_Markers() { // CSVデータのマーカー表示
CSV_Check();
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);
Layer_404_clone[ Temp ] = Temp_shape_clone;
Layer_404_clone[ Temp ].addTo(map);
}
}
Marker_count = Marker_count + 1;
Marker_ID_count = Marker_ID_count + 1;
}
Marker_count = Marker_count - 1;
}
function CSV_Lines() { // CSVデータの直線表示
CSV_Check();
for (i = 0; i <= (Data_CSV.length - 1); i++) {
Lines_LAT[ Lines_Marker_count ] = Data_CSV[i][0];
Lines_LON[ Lines_Marker_count ] = Data_CSV[i][1];
Lines_NAM[ Lines_Marker_count ] = Data_CSV[i][2];
Lines_LNK[ Lines_Marker_count ] = Data_CSV[i][3];
Lines_ICN[ Lines_Marker_count ] = L.icon({
iconUrl: Icon_Url,
iconSize: [Icon_W, Icon_H],
iconAnchor : [Icon_AW, Icon_AH],
popupAnchor: [Icon_PW, Icon_PH]
});
Lines_Marker_ID[ Lines_Marker_count ] = "Lines" + Lines_Marker_ID_count;
Lines_Drag_flag[ Lines_Marker_count ] = false;
Lines_Drag_info[ Lines_Marker_count ] = "移動出来ません。";
if( !isNaN( Lines_LAT[ Lines_Marker_count ] ) ) {
Temp = Lines_Marker_count;
Lines_Marker_setting();
Marker_set();
Layer_505_LM[ Temp ] = Temp_shape;
Layer_505_LM[ Temp ].addTo(map);
Layer_505_LM_clone[ Temp ] = Temp_shape_clone;
Layer_505_LM_clone[ Temp ].addTo(map);
Lines_Marker_count = Lines_Marker_count + 1;
Lines_Marker_ID_count = Lines_Marker_ID_count + 1;
} else {
Lines_Marker_count = Lines_Marker_count + 1;
Lines_Marker_ID_count = Lines_Marker_ID_count + 1;
}
}
Leaflet_Lines_Draw();
}
function CSV_Polygons() { // CSVデータの多角形表示
CSV_Check();
for (i = 0; i <= (Data_CSV.length - 1); i++) {
Polygons_LAT[ Polygons_Marker_count ] = Data_CSV[i][0];
Polygons_LON[ Polygons_Marker_count ] = Data_CSV[i][1];
Polygons_NAM[ Polygons_Marker_count ] = Data_CSV[i][2];
Polygons_LNK[ Polygons_Marker_count ] = Data_CSV[i][3];
Polygons_ICN[ Polygons_Marker_count ] = L.icon({
iconUrl: Icon_Url,
iconSize: [Icon_W, Icon_H],
iconAnchor : [Icon_AW, Icon_AH],
popupAnchor: [Icon_PW, Icon_PH]
});
Polygons_Marker_ID[ Polygons_Marker_count ] = "Polygon" + Polygons_Marker_ID_count;
Polygons_Drag_flag[ Polygons_Marker_count ] = false;
Polygons_Drag_info[ Polygons_Marker_count ] = "移動出来ません。";
if( !isNaN( Polygons_LAT[ Polygons_Marker_count ] ) ) {
Temp = Polygons_Marker_count;
Polygons_Marker_setting();
Marker_set();
Layer_505_PM[ Temp ] = Temp_shape;
Layer_505_PM[ Temp ].addTo(map);
Layer_505_PM_clone[ Temp ] = Temp_shape_clone;
Layer_505_PM_clone[ Temp ].addTo(map);
Polygons_Marker_count = Polygons_Marker_count + 1;
Polygons_Marker_ID_count = Polygons_Marker_ID_count + 1;
} else {
Polygons_Marker_count = Polygons_Marker_count + 1;
Polygons_Marker_ID_count = Polygons_Marker_ID_count + 1;
}
}
Leaflet_Polygons_Draw();
}
function CSV_Circles() { // CSVデータの円表示
CSV_Check();
for (i = 0; i <= (Data_CSV.length - 1); i++) {
Circles_LAT[ Circles_count ] = Data_CSV[i][0] * 1.0;
Circles_LON[ Circles_count ] = Data_CSV[i][1] * 1.0;
Circles_NAM[ Circles_count ] = Data_CSV[i][2];
Circles_LNK[ Circles_count ] = Data_CSV[i][3];
Circles_RAD[ Circles_count ] = Data_CSV[i][4] * 1.0;
Circles_ID[ Circles_count ] = "Circle" + Circles_ID_count;
Circles_Drag_flag[ Circles_count ] = false;
Circles_Drag_info[ Circles_count ] = "移動出来ません。";
if ( !isNaN( Circles_LAT[ Circles_count ] ) ) {
if ( (Circles_LAT[ Circles_count ] != 0) && (Circles_LON[ Circles_count ] != 0)) {
Circles_Set( Circles_count );
Circles_count = Circles_count + 1;
Circles_ID_count = Circles_ID_count + 1;
}
}
}
}
function CSV_Check() { // 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;
}
}
}
function Leaflet_Mouse_ON() { // マウス位置表示
Mouse_Position.addTo(map);
}
function Leaflet_Mouse_OFF() { // マウス位置非表示
map.removeControl(Mouse_Position);
}
function Leaflet_Search_ON() { // 検索窓表示
osmGeocoder = new L.Control.OSMGeocoder();
map.addControl(osmGeocoder);
}
function Leaflet_Search_OFF() { // 検索窓非表示
map.removeControl(osmGeocoder);
}
</script>
</head>
<body onload="init()">
<nav id="menu-wrap" style=" z-index: 1000;">
<ul id="menu" style="width: 98%;">
<li><a href="#">地図の選択</a>
<ul id="scroll">
<li><a><input type = "radio" name = "Basic_Layer" value = "0" checked onclick = "javascript: Sel_Basic_Layer();">Open Street Map</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "1" onclick = "javascript: Sel_Basic_Layer();">国土地理院 標準地図</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "2" onclick = "javascript: Sel_Basic_Layer();">国土地理院 淡色地図</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "3" onclick = "javascript: Sel_Basic_Layer();">国土地理院 写真</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "4" onclick = "javascript: Sel_Basic_Layer();">国土地理院 白地図</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "5" onclick = "javascript: Sel_Basic_Layer();">Stamen Toner-Background</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "6" onclick = "javascript: Sel_Basic_Layer();">Stamen Toner-Lite</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "7" onclick = "javascript: Sel_Basic_Layer();">Stamen Watercolor</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "8" onclick = "javascript: Sel_Basic_Layer();">Esri World Topo Map</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "9" onclick = "javascript: Sel_Basic_Layer();">Esri Ocean Base Map</a></li>
<li><a><input type = "radio" name = "Basic_Layer" value = "10" onclick = "javascript: Sel_Basic_Layer();">NASA EOSDIS GIBS/Coast Lines</a></li>
</ul>
</li>
<li><a href="#">オーバーレイ選択</a>
<ul id="scroll">
<div id="Over_Layer" >
<li><a><input type = "checkbox" id="ckbox0" value = "0" >Stamen toner-hybrid</a></li>
<li><a><input type = "checkbox" id="ckbox1" value = "1" >Stamen toner-lines</a></li>
<li><a><input type = "checkbox" id="ckbox2" value = "2" >Stamen toner-labels</a></li>
<li><a><input type = "checkbox" id="ckbox3" value = "3" >Open Sea Map SeaMark</a></li>
<li><a><input type = "checkbox" id="ckbox4" value = "4" >Water Mask</a></li>
<li><a><input type = "checkbox" id="ckbox5" value = "5" >1W Earthquake-Geojson</a></li>
</div>
</ul>
</li>
<li><a href="#">図形の設置</a>
<ul>
<li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
<li><a href="#" onclick = "Dialog_003()">線のスタイル設定</a></li>
<li><a href="#">---------------------------------------------</a></li>
<li><a href="#">マーカー設置・消去 ≫</a>
<ul>
<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>
<li><a href="#">直線の設置・消去 ≫</a>
<ul>
<li><a href="#" onclick = "Leaflet_Lines_500()">直線の設置 </a></li>
<li><a href="#" onclick = "Leaflet_Lines_502()">直線の設置終了 </a></li>
<li><a href="#" onclick = "Leaflet_Lines_503()">直線の全消去 </a></li>
<li><a href="#" onclick = "Leaflet_Lines_504()">直線用マーカー非表示 </a></li>
<li><a href="#" onclick = "Leaflet_Lines_505()">直線用マーカー再表示 </a></li>
<li><a href="#" onclick = "Leaflet_CSV_510()">直線データの保存（CSV形式） </a></li>
<li><a href="#" onclick = "Leaflet_Marker_407()">データの読込（CSV形式） </a></li>
</ul>
</li>
<li><a href="#">多角形の設置・消去 ≫</a>
<ul>
<li><a href="#" onclick = "Leaflet_Polygons_500()">多角形の設置 </a></li>
<li><a href="#" onclick = "Leaflet_Polygons_502()">多角形の設置終了 </a></li>
<li><a href="#" onclick = "Leaflet_Polygons_503()">多角形の全消去 </a></li>
<li><a href="#" onclick = "Leaflet_Polygons_504()">多角形用マーカー非表示 </a></li>
<li><a href="#" onclick = "Leaflet_Polygons_505()">多角形用マーカー再表示 </a></li>
<li><a href="#" onclick = "Leaflet_CSV_511()">多角形データの保存（CSV形式） </a></li>
<li><a href="#" onclick = "Leaflet_Marker_407()">データの読込（CSV形式） </a></li>
</ul>
</li>
<li><a href="#">円の設置・消去 ≫</a>
<ul>
<li><a href="#" onclick = "Leaflet_Circles_500()">円の設置 </a></li>
<li><a href="#" onclick = "Leaflet_Circles_501()">円の全消去 </a></li>
<li><a href="#" onclick = "Leaflet_CSV_512()">円データの保存（CSV形式） </a></li>
<li><a href="#" onclick = "Leaflet_Marker_407()">データの読込（CSV形式） </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">ユーティリティ</a>
<ul>
<li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
<li><a href="#" onclick = "Dialog_003()">線のスタイル設定</a></li>
<li><a href="#">グリッド線表示・非表示 ≫</a>
<ul>
<li><a href="#" onclick = "Grid_on_W();">白のグリッド線表示・更新 </a></li>
<li><a href="#" onclick = "Grid_on_B();">黒のグリッド線表示・更新 </a></li>
<li><a href="#" onclick = "Grid_off();">グリッド線非表示 </a></li>
</ul>
</li>
<li><a href="#">マウス位置表示・非表示 ≫</a>
<ul>
<li><a href="#" onclick = "Leaflet_Mouse_ON();">マウス位置表示 </a></li>
<li><a href="#" onclick = "Leaflet_Mouse_OFF();">マウス位置非表示 </a></li>
</ul>
</li>
<li><a href="#">検索窓の表示・非表示 ≫</a>
<ul>
<li><a href="#" onclick = "Leaflet_Search_ON();">検索窓の表示 </a></li>
<li><a href="#" onclick = "Leaflet_Search_OFF();">検索窓の非表示 </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div id="map_Layer">
<div id="map" style="width: 100%; height: 95%; border: solid 1px; top: 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>から取得しており、これらアイコン素材データの著作権は TopeconHeroes が保持しています。
</div>
</body>
</html>
地図表示とオーバーレイ表示の選択については、『 Leaflet_Tutrial_301.html 』と異なり、上部メニューから選択するように変更しました。 次の『 Map_Data_601.js 』のソースファイル内容で、地図表示の選択箇所は９８～１０８行目、オーバーレイ表示の選択箇所は１１０～１２６行目です。
ソースファイルの内容
Map_Data_601.js
// Map_Data_601.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: '© <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 © <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 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> — ' +
'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> — ' +
'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> — ' +
'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 OverLayerFlag = new Array();
function Sel_Basic_Layer() {
Temp = null;
Temp = document.getElementsByName("Basic_Layer");
for (i=0; i<Temp.length; i++) {
if(Temp[i].checked) {
map.removeLayer(Layer_00);
Layer_00 = Basic_Map[ i ];
map.addLayer(Layer_00);
}
}
}
$(function() {
$("#Over_Layer :checkbox").change(function() {
var cb_count = Over_Layer.length;
for (i = 0; i < cb_count; i++) {
Temp = $("#ckbox" + String(i) + ":checked").val();
if( Temp == i ) {
map.addLayer(Over_Layer[ i ]);
OverLayerFlag[ i ] = 1;
} else {
if (OverLayerFlag[ i ] == 1) {
map.removeLayer(Over_Layer[ i ]);
OverLayerFlag[ i ] = 0;
}
}
}
});
});
function dummy() {
alert("Under Construction!");
}
###Leafletで色々な地図を表示する記事内容
１、Leafletで色々な地図を表示する
２、Overlay表示
３、色々な表示
４、マーカーの表示
５、色々な図形の表示
６、おまけ
追加－１、デバイスの位置を地図上に表示する
追加ー２、写真の撮影地を地図上に表示する
ここに記載したHTML/JavaScriptの動作を確認したい方は、「https://github.com/To-Fujita/Leaflet.JS_Tutorial」 あるいは 「http://hal322.html.xdomain.jp/」を参照ください。