-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (108 loc) · 6.65 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
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa SMN</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
<style>
.minimapa {width: 100%;height: 700px; border: 1px solid #053481;border-radius: 10px;}
.card-800{min-height: 800px;max-height: 800px;}
.square { width: 15px;height: 15px;}
</style>
</head>
<body>
<main class="container-fluid">
<section class="row m-2">
<article class="col text-center">
<h2>Mapa Argentina en base a datos del Servicio Mererológico Nacional</h2>
</article>
</section>
<section class="row m-1">
<article class="col">
<table class="table table-sm">
<tr>
<td><div class="square" style="background-color: #0dcaf0;"></div></td><td class="small">Barrio</td>
<td><div class="square" style="background-color: #2b6be1;"></div></td><td class="small">Base Militar</td>
<td><div class="square" style="background-color: #555555;"></div></td><td class="small">Caserío</td>
<td><div class="square" style="background-color: #198754;"></div></td><td class="small">Centro de esquí</td>
<td><div class="square" style="background-color: #6610f2;"></div></td><td class="small">Ciudad</td>
<td><div class="square" style="background-color: #80eb15;"></div></td><td class="small">Colonia</td>
<td><div class="square" style="background-color: #940ce1;"></div></td><td class="small">Localidad</td>
<td><div class="square" style="background-color: #e5b1c2;"></div></td><td class="small">Observatorio</td>
<td><div class="square" style="background-color: #fff000;"></div></td><td class="small">Otro</td>
<td><div class="square" style="background-color: #74366F;"></div></td><td class="small">Paraje</td>
<td><div class="square" style="background-color: #fd7e14;"></div></td><td class="small">Parque nacional</td>
<td><div class="square" style="background-color: #d63384;"></div></td><td class="small">Paso fronterizo</td>
<td><div class="square" style="background-color: #6f42c1;"></div></td><td class="small">Pueblo</td>
<td><div class="square" style="background-color: #20c997;"></div></td><td class="small">Punto Turisitico</td>
<td><div class="square" style="background-color: #c20952;"></div></td><td class="small">Villa</td>
</tr>
</table>
</article>
</section>
<section class="row mt-1">
<article class="col-7">
<div class="card card-800 border border-primary">
<div class="card-header"><h4 id="tituloMapa"> Mapa Ciudades</h4></div>
<div class="card-body m-1"><div class="minimapa" id='mapid'><h1>MAPA NO DISPONIBLE</h1></div></div>
</div>
</article>
<article class="col-5">
<div class="card card-800 border border-primary">
<div class="card-header"><h4> Ciudades</h4></div>
<div class="card-body m-1 overflow-auto"><div id="tablaCiudades"></div></div>
</div>
</article>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
<script type="text/javascript">
//Centro Argentina
const defaultLat = -34.87
const defaultLon = -64.76
let smnMap = L.map('mapid').setView([defaultLat ,defaultLon], 5);
cargaMapa()
async function cargaMapa(){
const tableDiv = document.getElementById('tablaCiudades')
let tablaFinal = `<table class='table table-sm table-striped table-hover'><thead><tr><th>SMN ID</th><th>Nombre</th><th>Provincia</th><th>Lat</th><th>Lon</th></tr></thead><tbody>`
let marcadores = ''
const colores = {'Barrio': '#0dcaf0','Base Militar': '#2b6be1','Caserío': '#555555','Centro de esquí': '#198754','Ciudad': '#6610f2','Colonia': '#80eb15','Localidad': '#940ce1','Observatorio': '#e5b1c2','Otro': 'fff000','Paraje': '#74366F','Parque nacional': '#fd7e14','Paso fronterizo': '#d63384','Pueblo': '#6f42c1','Punto Turisitico': '#20c997','Villa': '#c20952'}
let referencias = new L.LayerGroup(marcadores);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(smnMap);
// let grupoMarcadores= new L.markerClusterGroup();
const response = await fetch('./listaCiudadesSMN.json');
const ciudades = await response.json();
for(let ciudad of ciudades){
tablaFinal += `<tr class=''>
<td class='text-end'>${ciudad.smn_id_interno}</td>
<td><a href="javascript:void(0)" onclick="ubicaCiudad(${ciudad.smn_lat},${ciudad.smn_lon},'${ciudad.smn_tipo} ${ciudad.smn_provincia}')">${ciudad.smn_nombre}</a></td>
<td>${ciudad.smn_provincia}</td>
<td class='text-end'>${ciudad.smn_lat}</td>
<td class='text-end'>${ciudad.smn_lon}</td>
</tr>`
const color = colores[ciudad.smn_tipo] || '#28A745'
marcadores += L.circleMarker([ciudad.smn_lat,ciudad.smn_lon],{color: color,radius: 5,weight:2,fillOpacity:0.7}).addTo(referencias).bindPopup(`<h4 class='text-primary'>${ciudad.smn_nombre}</h4><strong>${ciudad.smn_provincia}</strong><br>${ciudad.smn_tipo}<br>SmnID: ${ciudad.smn_id_interno}`).openPopup();
}
tablaFinal += `</tbody></table>`
tableDiv.innerHTML = tablaFinal
L.circleMarker([defaultLat ,defaultLon],{color: '#28A745',radius: 8,weight:2,fillOpacity:0.8}).addTo(smnMap).bindPopup("<h4>Argentina</h4>").openPopup();
referencias.addTo(smnMap);
let popup = L.popup();
function onMapClick(e) {
popup.setLatLng(e.latlng).setContent("Ubicación: " + e.latlng.toString()).openOn(smnMap);
}
smnMap.on('click', onMapClick);
}
function ubicaCiudad(centerlat,centerlon,cuidad){
smnMap.flyTo([centerlat,centerlon],12);
let tituloMapa = document.getElementById('tituloMapa');
tituloMapa.innerHTML = cuidad;
}
</script>
</html>