-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.html
106 lines (83 loc) · 3.92 KB
/
map.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
<!DOCTYPE html>
<html lang="en-us" ng-app="weatherApp">
<head>
<link rel="icon" type="image/jpg" href="img/logo.png">
<title>Instant Weather | Maps</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, #map {
height: 100%;
margin: 0px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/leaflet-owm.css" />
<link rel="stylesheet" href="css/iconLayers.css" />
</head>
<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="js/leaflet-src.js"></script>
<script src="js/leaflet-owm.js"></script>
<script src="js/iconLayer.js"></script>
<script>
var providers = {};
providers['OSM'] = {
title: 'OSM',
icon: 'img/layers-osm.png',
layer: L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
})
};
providers['Satellite'] = {
title: 'MODIS',
icon: 'img/layers-satellite.png',
layer: L.tileLayer('http://{s}.sat.owm.io/sql/{z}/{x}/{y}?select=b1,b4,b3&from=modis&order=last&color=modis&appid=d22d9a6a3ff2aa523d5917bbccc89211', {
maxZoom: 19,
attribution: '© <a href="http://owm.io">VANE</a>'
})
};
</script>
<script>
var map = L.map('map').setView([20, 30], 2);
//http://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=d9cfe451d5a775abaf178aec4951b4b0
var Temp = L.tileLayer('http://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=d22d9a6a3ff2aa523d5917bbccc89211', {
maxZoom: 18,
attribution: '© <a href="http://owm.io">VANE</a>',
id: 'temp'
}),
Precipitation = L.tileLayer('http://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=d22d9a6a3ff2aa523d5917bbccc89211', {
maxZoom: 18,
attribution: '© <a href="http://owm.io">VANE</a>'
}),
Wind = L.tileLayer('http://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=d22d9a6a3ff2aa523d5917bbccc89211', {
maxZoom: 18,
attribution: '© <a href="http://owm.io">VANE</a>'
}),
Pressure = L.tileLayer('http://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=d22d9a6a3ff2aa523d5917bbccc89211', {
maxZoom: 18,
attribution: '© <a href="http://owm.io">VANE</a>'
}),
Clouds = L.tileLayer('http://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=d22d9a6a3ff2aa523d5917bbccc89211', {
maxZoom: 18,
attribution: '© <a href="http://owm.io">VANE</a>'
});
var owm = new L.OWMLayer({key: 'b1b15e88fa797225412429c1c50c122a1'});
map.addLayer(owm);
Temp.addTo(map);
var overlays = {"Temperature": Temp, "Precipitation": Precipitation, "Clouds": Clouds, "Pressure": Pressure, "Wind": Wind};
L.control.layers(overlays, null, {collapsed:false}).addTo(map);
var layers = [];
for (var providerId in providers) {
layers.push(providers[providerId]);
}
L.control.iconLayers(layers).addTo(map);
</script>
</body>
</html>