-
Notifications
You must be signed in to change notification settings - Fork 1
/
Leaflet_Tutrial_503_EN.html
75 lines (70 loc) · 2.3 KB
/
Leaflet_Tutrial_503_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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leaflet_Tutrial_503_EN.html 2019/7/20 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>
<style>
html, body {
width: 99%;
height: 98%;
font-size: 14px;
z-index: 0;
}
</style>
<script>
function init() {
var Layer_503 = new Array();
var map_503 = L.map('map_503').setView([51.5, 0.0], 8);
mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + mapLink,
maxZoom: 18
}).addTo(map_503);
Leaflet_Circles_503();
function Leaflet_Circles_503() // Draw Circles
{
var Circle_shape = new Array();
var Circle_shape_LAT = new Array();
var Circle_shape_LON = new Array();
var Circle_shape_RAD = new Array();
var Circle_shape_NAM = new Array();
var Circle_shape_LNK = new Array();
var Circle_strokecol = new Array();
var Circle_fillcolor = new Array();
var Line_W = 2;
Circle_shape_LAT[ 0 ] = 51.5;
Circle_shape_LON[ 0 ] = -0.1;
Circle_shape_RAD[ 0 ] = 30000;
Circle_shape_NAM[ 0 ] = "Circle Sample #001";
Circle_shape_LNK[ 0 ] = " ";
Circle_strokecol[ 0 ] = "000000";
Circle_fillcolor[ 0 ] = "FFFF00";
Circle_shape_LAT[ 1 ] = 51.3;
Circle_shape_LON[ 1 ] = 1.5;
Circle_shape_RAD[ 1 ] = 50000;
Circle_shape_NAM[ 1 ] = "Circle Sample #002";
Circle_shape_LNK[ 1 ] = " ";
Circle_strokecol[ 1 ] = "FF0000";
Circle_fillcolor[ 1 ] = "FF0000";
for (i = 0; i <= (Circle_shape_LAT.length - 1); i++) {
Circle_shape[ i ] = L.circle([ Circle_shape_LAT[ i ], Circle_shape_LON[ i ] ], Circle_shape_RAD[ i ],
{ color: "#" + Circle_strokecol[ i ],
fillColor: "#" + Circle_fillcolor[ i ],
weight: Line_W,
fillopacity: 0.5
}).bindPopup(Circle_shape_NAM[ i ]
);
Layer_503[ i ] = Circle_shape[ i ];
Layer_503[ i ].addTo(map_503);
}
}
}
</script>
</head>
<body onload="init()">
<div id="map_503" style="width: 100%; height: 100%; border: solid 1px"></div>
</body>
</html>