-
Notifications
You must be signed in to change notification settings - Fork 0
/
SSTMapa.html
74 lines (74 loc) · 4.52 KB
/
SSTMapa.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
<!DOCTYPE html>
<html>
<head>
<title>IEO Ocean Observing System</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<style>
html, body {height: 100 .leaflet-container {height: 500px;width: 600px;max-width: 100 </style>
<style>#map { width: 800px; height: 600px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }
</style>
</head>
<body>
<div align="center">
Cobertura del sistema de observacion oceanica del <b>IEO</b> el 27-May-2022 <br/>
(24) Estaciones hidrograficas. Último dato recibido el 21-Apr-2022 06:03:30 <br/>
<div id="map" style="width: 700px; height: 650px;"></div>
</div>
<script type="text/javascript">
// Initialize the map and set up control
const map = L.map('map',{scrollwheelzoom: false}).setView([38.00, -8.00], 5);
map.addControl(new L.Control.Fullscreen());
//Tiles
const tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © ESRI'}).addTo(map);
//Defino iconos
var stationIcon = L.Icon.extend({
options: {
iconSize: [10, 10],
iconAnchor: [ 5, 5],
popupAnchor: [-3, -76]
}
});
var marcador0 = new stationIcon({iconUrl: 'http://www.oceanografia.es/argo/imagenes/icons8-select-10.png'}),
marcador1 = new stationIcon({iconUrl: 'http://www.oceanografia.es/argo/imagenes/icons8-select-10.png'});
//Datos de las ultimas ocupaciones de las estaciones
var estaciones = [
[1,'',28.56,-16.12,'NorteTenerife','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',28.56,-16.12,'NorteTenerife','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',42.13,-9.12,'Vigo','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',42.13,-9.12,'Vigo','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',43.78,-5.55,'Gijon','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',43.78,-5.55,'Gijon','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',43.80,-3.78,'Santander','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',43.80,-3.78,'Santander','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',36.15,-6.71,'Cadiz','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
[1,'',36.15,-6.71,'Cadiz','14-Jan-2020 00:10:40','SurfaceValue','BottonValue','#bf3eff'],
];
for (var i = 0; i < estaciones.length; i++) {
var estacion = estaciones[i];
if(estacion[0] == 1){
L.circleMarker([estacion[2], estacion[3]],
{radius : 3,
color : estacion[8],
title: estacion[4]+estacion[1]+' '+estacion[5],
opacity: 1,
fillOpacity:.45,
fillColor:estacion[8]}).addTo(map).bindPopup('<center><p><b><a href="http://www.oceanografia.es/pedro/SST'+estacion[4]+'.html" target="_blank">'+estacion[4]+'</a></b><br><b>Ultimo datos </b>'+estacion[5]+'</p></center>');
}else if (estacion[0] == 0) {
L.marker([estacion[2], estacion[3]],{
icon: marcador0,
title: estacion[4]+estacion[1]+' '+estacion[5],
}).addTo(map).bindPopup('<center><p>Station <b><a href="http://www.oceanografia.es/pedro/SST+'+estacion[1]+'.html" target="_blank">'+estacion[1]+'</a></b><br><b>'+estacion[4]+'</b><br><br><b>Last profile </b>'+estacion[5]+'</p></center>');
}
}
</script>
</body>
</html>
</html>