-
Notifications
You must be signed in to change notification settings - Fork 1
/
Leaflet_Tutrial_202_EN.html
129 lines (125 loc) · 5.49 KB
/
Leaflet_Tutrial_202_EN.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leaflet_Tutrial_202_EN.html 2019/7/19 by T. Fujita</title>
<meta charset = "utf-8" />
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src = "https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src = "./Plugins/leaflet-GIBS-master/GIBSMetadata.js" ></script>
<script src = "./Plugins/leaflet-GIBS-master/GIBSLayer.js" ></script>
<script src = "./Plugins/leaflet-ajax-master/leaflet.ajax.js" ></script>
<style>
html, body {
width: 99%;
height: 98%;
font-size: 14px;
z-index: 0;
}
</style>
<script>
function init() {
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('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[ 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>, ',
variant: 'toner-lite'
});
Basic_Map[ 3 ] = 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[ 4 ] = 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[ 5 ] = 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[ 6 ] = new L.GIBSLayer('Coastlines', {
date: new Date('2015/04/01'),
transparent: true
});
var baseMap = {
"OpenStreetMap": Basic_Map[ 0 ],
"Stamen Toner-Background": Basic_Map[ 1 ],
"Stamen Toner-Lite": Basic_Map[ 2 ],
"Stamen Watercolor": Basic_Map[ 3 ],
"Esri World Topo Map": Basic_Map[ 4 ],
"Esri Ocean Base Map": Basic_Map[ 5 ],
"NASA EOSDIS GIBS/Coast Lines": Basic_Map[ 6 ],
};
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 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 ]
};
var map_202 = L.map('map_202').setView([51.5, 0.0], 8);
map_202.addLayer( Basic_Map[ 0 ] );
L.control.layers(baseMap, overLay).addTo(map_202);
}
</script>
</head>
<body onload="init()">
<div id="map_202" style="width: 100%; height: 100%; background-color:#ffffff; border: solid 1px"></div>
</body>
</html>