-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (75 loc) · 2.99 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Leaflet-Gridsquare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!--<script src="https://ha8tks.github.io/Leaflet.Maidenhead/src/L.Maidenhead.js"></script>-->
<script src="./js/L.Maidenhead.js"></script>
<script src="https://unpkg.com/leaflet-simple-map-screenshoter"></script>
</head>
<body>
<div id="map" style="width: 1600px; height: 1100px;"></div>
<script>
// 10 conant
var start_lat=42.41208137430952;
var start_lon=-71.29818102489375;
// 23 conant
var start_lat=42.40977627033596;
var start_lon=-71.2984418248693;
// parker
//var start_lat = 42.42177320792855;
//var start_lon = -71.14140650080418;
//var start_lat=44.42849861396812;
//var start_lon=-69.00385950557286;
var start_zoom = 17;
var map = L.map('map').setView([start_lat,start_lon], start_zoom);
L.simpleMapScreenshoter().addTo(map);
var default_tiles = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var topo_tiles = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
//var toner_tiles = 'http://a.tile.stamen.com/toner/${z}/${x}/${y}.png';
var toner_tiles = 'https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png';
var terrain_tiles = 'https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg';
var my_tiles = toner_tiles;
//L.tileLayer(topo_tiles, {
L.tileLayer(my_tiles, {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
/* L.maidenhead({
//color : 'rgba(255, 0, 0, 0.4)'
color : 'rgba(0, 0, 0, 1)'
}).addTo(map);
*/
/*
L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("I am a circle.");
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map).bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
*/
</script>
</body>
</html>