-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
153 lines (139 loc) · 6.66 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>OpenStreetMap Argentina</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="comunidad argentina de OpenStreetMap">
<meta name="author" content="Gonzalo Perez" />
<meta name="keywords" Content="osm,map,mapa,openstreetmap" />
<meta property="og:type" content="website">
<meta property="og:locale" content="es_AR">
<meta property="og:title" content="OpenStreetMap Argentina">
<meta property="og:site_name" content="OpenStreetMap Argentina">
<meta property="og:description" content="comunidad argentina de OpenStreetMap">
<meta property="og:url" content="https://osm-ar.github.io/osm-argentina-website">
<meta property="og:image" itemprop="image" content="https://osm-ar.github.io/osm-argentina-website/assets/img/osm-ar-logo.jpg">
<meta property="og:image:secure_url" itemprop="image"
content="https://osm-ar.github.io/osm-argentina-website/assets/img/osm-ar-logo.jpg">
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:image:alt" content="Logo de OpenStreetMap Argentina" />
<link rel="icon" type="image/png" href="assets/img/favicon.png" sizes="32x32" />
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
<link rel='stylesheet'
href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css'
type='text/css' />
<script src="assets/js/nav.js"></script>
<script defer src="assets/font/fontawesome/js/all.js"></script>
</head>
<body>
<div class="menu-bar">
<img title="logo chico" src="assets/img/small-logo.svg" class="small-logo">
<a href="#" class="menu-button tx-white"><i class="fas fa-bars"></i></span></a>
</div>
<header>
<nav>
<img title="logo grande" src="assets/img/big-logo.svg" class="big-logo">
<div class="nav-buttons">
<ul>
<li><a rel="noopener" href="https://umap.openstreetmap.fr/es/map/sistema-de-salud-argentina-covid19_437454"
target="_blank" class="tx-white"><i class="fas fa-virus"></i> COVID-19</a></li>
<li><a id="editarMapa" href="#" target="_blank" class="tx-white"><i class="fas fa-edit"></i> Editá el mapa</a>
</li>
<li><a rel="noopener" href="https://enosm.openstreetmap.org.ar/" target="_blank" class="tx-white"><i
class="fas fa-store-alt"></i>
Agregá una tienda</a></li>
<li><a rel="noopener" href="https://wiki.openstreetmap.org/wiki/ES:Argentina" target="_blank"
class="tx-white"><i class="fas fa-users"></i>
Sumate a la comunidad</a></li>
</ul>
</div>
</nav>
</header>
<div id="map"></div>
<div id="mapa" class="section scrollspy"></div>
<button id="panelToggle" class="btn-panel panelToggle" onclick="ocultarPanel()">
<i class="fas fa-layer-group"></i>
</button>
<section id="panel" class="capas oculto">
<div id=menuDatos class="datosMenu formulario">
<div id='menuMapaBase'>
<div class="map-options">
<input id='osm' type='checkbox' name='rtoggle' value='osm' checked='checked'>
<label for='osm' title='Capas de datos de OSM'>
<div class="sel-marco marco-map"></div>
OpenStreetMap
</label>
<br />
<input id='satelite' type='checkbox' name='rtoggle' value='satelite'>
<label for='satelite'>
<div class="sel-marco marco-sat"></div>
Satélite
</label>
<br />
</div>
<input id='chk_sup_calles' type='checkbox' name='rtoggle' value='chk_sup_calles'>
<label for='chk_sup_calles'>Calles
<span class="calles conPavimento">con</span>
y
<span class="calles sinPavimento">sin</span>
pavimento</label><br />
</div>
<button id='btnPanelDatos' class="btn-panel">Ver datos de objetos</button>
<section class="col-3 col-m-2">
<pre id='features' class="oculto"></pre>
</section>
</div>
</section>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiemFsaXRvYXIiLCJhIjoiYVJFNTlfbyJ9.mPX8qTsRUGOOETl0CtA-Pg';
if (!mapboxgl.supported()) {
alert('Tu navegaddor no soporta Mapbox GL, habilita en la configuración el soporte para WebGL');
} else {
var map = new mapboxgl.Map({
container: 'map',
projection: 'globe',
style: 'map/styles/osm-argentina-min.json',
center: [-64.1, -48.8],
zoom: 1.5,
hash: true,
});
map.on('style.load', () => {
map.setFog({
color: 'rgb(186, 210, 235)', // Lower atmosphere
'high-color': 'rgb(36, 92, 223)', // Upper atmosphere
'horizon-blend': 0.02, // Atmosphere thickness (default 0.2 at low zooms)
'space-color': 'rgb(11, 11, 25)', // Background color
'star-intensity': 0.1 // Background star brightness (default 0.35 at low zoooms )
});
});
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
map.addControl(new mapboxgl.GeolocateControl());
map.addControl(new mapboxgl.ScaleControl({ unit: 'metric' }));
}
// Inserta cuadro de búsqueda
$(".mapboxgl-ctrl-top-right").prepend("<div class='mapboxgl-ctrl-top-right mapboxgl-ctrl mapboxgl-ctrl-geocoder'><span class='geocoder-icon geocoder-icon-search'></span><input id='buscarLugar' type='text' placeholder='Buscar con Nominatim'><!--<button class='geocoder-icon geocoder-icon-close' aria-label='Clear'></button><span class='geocoder-icon geocoder-icon-loading'></span>--></div>");
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-97648273-1', 'auto');
ga('send', 'pageview');
</script>
<script src="assets/js/buscador.min.js"></script>
<script src="assets/js/funciones.min.js"></script>
<!--SweetAlert2.js-->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="assets/js/alertas.js"></script>
</body>
</html>