Mapa_SoloMpio.html 14.9 KB
Newer Older
veronica.rodriguez's avatar
veronica.rodriguez committed
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html ng-app="app_Mapa_SoloMpio">
<!--Página html que muestra el mapa digital con municipios-->
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
	<link href="libs/please-wait/please-wait.css" rel="stylesheet">
	<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="libs/normalize/normalize.min.css">
	<link href="libs/form-helpers/css/bootstrap-formhelpers.min.css" rel="stylesheet">
	
<!--	<script src="libs/bootstrap/js/bootstrap.min.js"></script>-->
	
	 <!--archivo de estilos para el mapa digital-->
	<link rel="stylesheet" href="app/css/estiloMapa.css">
	<!--archivo de estilos para la gráfica-->
	<link rel="stylesheet" href="app/css/estiloGrafica.css">
	<script src="libs/angularjs/angular.min.js"></script>
	<script src="libs/angularjs-ui-router/angular-ui-router.min.js"></script>
	<script src="libs/angularjs-resource/angular-resource.min.js"></script>
	
	<script src="libs/IsMobile/Mobile.js"></script>
	<script src="libs/cdnjs.cloudflare.com/numeral.min.js"></script>
	
	<!--Archivos necesarios para el mapa digital-->
	<!--Archivo para incorporar funciones-->
	<script type="text/javascript" src="data/Mapa/project/init.js"></script>
	<!--Archivo que contiene las capas base y capas que usara el mapa-->
	<script type="text/javascript" src="data/Mapa/config/tree.js"></script>
	<!--Archivo que contiene las reoluciones (niveles de visualizacion)  proyeccion empleada y capas adicionales a agregar-->
	<script type="text/javascript" src="data/Mapa/config/map.js"></script>

	<!--Enlace con el mapa digital-->
	<script src="http://gaia.inegi.org.mx/mdm-api/api?key=mdmfhKcvE_IPaOXJT6Ddjx89-GjMuUSZO9tTxS9XXAdZxA&version=V6" type="text/javascript"></script>


	<!--Librerias para generar la gráfica-->
	<script src="libs/d3js/d3.js"></script>
	<script src="libs/d3-tip-master/d3.tip.v0.6.3.js"></script>
	<script src="libs/underscorejs_org/underscore-min.js"></script>


</head>

<body>
	<form>
		<!--Div general vinculado al controller-->
		<div id="divGralMapa" ng-controller="ObtenerDatosMapa">
			<div id="spinner" class="loader">Loading...</div>
			<!--Div que contendrá el mapa digital-->
			<div id="mapa" class="" ng-class="{'mapaDig':screenAn>=1024, 'mapaDigResol':screenAn<1024}">
			</div>
			<!--Div de la tabla que muestra los estratos del mapa para resoluciones de 1024 o más-->
     <div id="Div1024" style="display:block;">
			<div id="IfGral" class="container InfGralCoS" >
				<div class="container InfGral2">
					<div class="row">
						<div id="FlechaInfGral" class="col-xs-12 colImgAC">
							<!--Imagen para abrir o cerrar la ventana de los estratos
								función AbreCierraInfGral() se encuentra en el archivo app_Mapa_SoloMpio.js
								-->
							<a href="" ng-click="AbreCierraInfGral()"><img id="imgCG" src="app/images/DespInfMapaAba.png" class="img-responsive EimgAC" align="right" /></a>
						</div>
					</div>
					<!--Div que muestra los estratos
					Variable MuestraInfGral se encuentra en el archivo app_Mapa_SoloMpio.js
					-->	
					<div ng-show="MuestraInfGral">
						<table class="TabInfGral">
							<tbody>
								<tr>
									<td style="padding-left:3px;">
										<div class="col2InfGral">
											<div>
												<label class="LEstrat"   ng-show="lang == 'es'" ng-bind="objIdiomaM.arrIdioma[324].es"></label>
												<label class="LEstrat"  ng-show="lang == 'en'" ng-bind="objIdiomaM.arrIdioma[324].en"></label>
											</div>
											<div><div id="tdEstratos"></div><div id="tdEstratos2"></div></div>
<!--											<div id="tdEstratos2"> </div>-->
											<div id="LEst">
												<!--etiqueta para la descripción 'Estratificación' en español o inglés
													Variable lang y objIdiomaM se encuentra en el archivo app_Mapa_SoloMpio.js
												-->	
												<br>
												<label class="LEstrat"   ng-show="lang == 'es'" ng-bind="objIdiomaM.arrIdioma[202].es"></label>
												<label class="LEstrat"  ng-show="lang == 'en'" ng-bind="objIdiomaM.arrIdioma[202].en"></label>
												<!--Combo que despliega los diferentes tipos de estratificación
													Variable Estratos se encuentra en el archivo app_Mapa_SoloMpio.js
												-->	
												<select id="Estrati" class="SelecEstrato"  >
                                            		<option ng-repeat="Est in Estratos" ng-selected="{{Est.Clave == 0}}" value="{{Est.Clave}}" >{{Est.EstratoEs}}</option>
												</select>
												<img  src="app/images/TabAyu.png" align="right" style="display:block;" class="img-responsive"  /><br>
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div id="EspBlan">&nbsp;</div>
				</div>

			</div>
			<!--Div del tabulado y gráfica (lado derecho)
				Variable Dts se encuentra en el archivo app_Mapa_SoloMpio.js
			-->
			<div ng-show="Dts" >
			  <div id='Dat' class='Dat1'>
				  <!--Tabla de los periodos, cifras y gráfica  -->
				  <div id='Cifr' class='Cifras'>
					<div class="row TabCif">
						<div class="col-xs-8 Cobert">{{AbrevCobGeo}}{{DescripCob}}</div>
						<div class="col-xs-4 CerrarTab">
							<!--Imagen para cerrar la ventana del tabulado y gráfica
								Variable lang, objIdiomaM y la función CierraTabGra() se encuentra en el archivo app_Mapa_SoloMpio.js
							-->
							<a id="ax" href="" ng-show="lang == 'es'" ng-click="CierraTabGra()" title={{objIdiomaM.arrIdioma[229].es}}><img src='app/images/cerrar.png' alt={{objIdiomaM.arrIdioma[229].es}} title={{objIdiomaM.arrIdioma[229].es}} class="img-responsive" /></a>
							<a id="ax" href="" ng-show="lang == 'en'" ng-click="CierraTabGra()" title={{objIdiomaM.arrIdioma[229].en}}><img src='app/images/cerrar.png' alt={{objIdiomaM.arrIdioma[229].en}} title={{objIdiomaM.arrIdioma[229].en}} class="img-responsive" /></a>
						</div>
					 </div>

					
					<!--Tabla de los periodos, cifras y gráfica -->
					<div id="TabPC">
						<table align='center' id="TabPrinTG" class="TabGra" >
							<!--Variable  lang, objIdiomaM está en app_Mapa_SoloMpio.js-->	
							<tr valing='top'>
								<td class='Td1Blan'>
									<div class="row RowEtiPerCif">
									<!--Etiquetas para el periodo y la cifra seleccionada
										Variable PerSelecRow, CifSelecRow se encuentra en el archivo app_Mapa_SoloMpio.js
									-->
										<div class="col-xs-12 ColPerSel"><label class="EtiPer">{{PerSelecRow}}</label><label id="LabCif" class="EtiCif"  title={{NoDato}}>{{CifSelecRow}}</label></div>
									</div>
									<div class="row RowEtiPerCif" ng-if="objMapaSoloMpio.clasTexto!=''"> <!--Fabián 22-nov-17-->
										<div class="col-xs-12 ColClasSel">
											<label class="EtiPer" ng-show="lang == 'es'" ng-bind="objIdiomaM.arrIdioma[206].es"></label>
											<label class="EtiPer" ng-show="lang == 'en'" ng-bind="objIdiomaM.arrIdioma[206].en"></label>
											<label class="EtiClas">{{objMapaSoloMpio.clasTexto}}</label> 

										</div>
									</div>
								</td>
								<td id='TabB' valign='bottom' class="Td2Blan">
									<a id="ATabB1" href='' ng-show="lang == 'es'" ng-click='AbreCierraTabGra("Tab")'><img id='TabM' ng-src='{{iconTab}}' alt={{objIdiomaM.arrIdioma[209].es}} title={{objIdiomaM.arrIdioma[209].es}} class="img-responsive" /></a>
									<a id="ATabB2" href='' ng-show="lang == 'en'" ng-click='AbreCierraTabGra("Tab")'><img id='TabM' ng-src='{{iconTab}}' alt={{objIdiomaM.arrIdioma[209].en}} title={{objIdiomaM.arrIdioma[209].en}} class="img-responsive" /></a>
								</td>
								<td id='TabG' valign='bottom' class="Td2Blan">
									<a id="ATabG1" href='' ng-show="lang == 'es'" ng-click='AbreCierraTabGra("GraMap")'><img id='GraM' ng-src='{{iconGra}}' alt={{objIdiomaM.arrIdioma[29].es}} title={{objIdiomaM.arrIdioma[29].es}} class="img-responsive" /></a>
									<a id="ATabG2" href='' ng-show="lang == 'en'" ng-click='AbreCierraTabGra("GraMap")'><img id='GraM' ng-src='{{iconGra}}' alt={{objIdiomaM.arrIdioma[29].en}} title={{objIdiomaM.arrIdioma[29].en}} class="img-responsive" /></a>
								</td>
							</tr>
							</table>
								<div class='Td4Blan' >

									<br>
									<!--Tabulado-->
									<div id='ConTab'>
										<!--Variable  Tab, DatosC, EsClasif está en app_Mapa_SoloMpio.js-->	
										<div id='Tabul' ng-show='Tab'>
											<table class="TabCif2">
												<tr ng-repeat="ACif in DatosC">
													<!--Muestra los datos cuando el indicador no tiene clasificaciones-->
													<td ng-if="EsClasif=='0'" id="PT{{ACif.AADato_ser}}/{{ACif.MMDato_ser}}/{{ACif.DDDato_ser}}" ng-style="ACif.AADato_ser + '/' + ACif.MMDato_ser + '/' + ACif.DDDato_ser===PerSelec2  ?  {'background-color':'#35b2e0','font-weight':'bold'} : {'background-color':'#FFFFFF',
                                                            'font-weight':'normal'}">{{ACif.Leyenda_ser}}</td>
													<td ng-if="EsClasif=='0'" id="CT{{ACif.AADato_ser}}/{{ACif.MMDato_ser}}/{{ACif.DDDato_ser}}" ng-style="ACif.AADato_ser + '/' + ACif.MMDato_ser + '/' + ACif.DDDato_ser===PerSelec2  ?  {'background-color':'#35b2e0','font-weight':'bold'} : {'background-color':'#FFFFFF',
                                                            'font-weight':'normal'}" style="text-align:right;padding-right:2px;width:10%;">{{ACif.Dato_Formato}}</td>



													<!--Muestra los datos cuando el indicador tiene Clasificaciones-->
													<td ng-if="EsClasif!='0'" id="PT{{ACif.ValorDato.AADato_ser}}/{{ACif.ValorDato.MMDato_ser}}/{{ACif.ValorDato.DDDato_ser}}" ng-style="ACif.ValorDato.AADato_ser + '/' + ACif.ValorDato.MMDato_ser + '/' + ACif.ValorDato.DDDato_ser===PerSelec2  ?  {'background-color':'#35b2e0','font-weight':'bold'} : {'background-color':'#FFFFFF',
                                                            'font-weight':'normal'}">{{ACif.ValorDato.Leyenda_ser}}</td>
													<td ng-if="EsClasif!='0'" id="CT{{ACif.ValorDato.AADato_ser}}/{{ACif.ValorDato.MMDato_ser}}/{{ACif.ValorDato.DDDato_ser}}" ng-style="ACif.ValorDato.AADato_ser + '/' + ACif.ValorDato.MMDato_ser + '/' + ACif.ValorDato.DDDato_ser===PerSelec2  ?  {'background-color':'#35b2e0','font-weight':'bold'} : {'background-color':'#FFFFFF',
                                                            'font-weight':'normal'}" style="text-align:right;padding-right:2px;width:10%;">{{ACif.ValorDato.Dato_Formato}}</td>

												</tr>
											</table>
										</div>
										<!--Gráfica-->
										<!--Variable  GraMp está en app_Mapa_SoloMpio.js-->
										<div id='GraMap' ng-show='GraMp'>
										</div>
									</div>
								</div>
					  </div>
			      </div>
				
			  </div>
			</div>
		</div>
			<!--Div para resolución pequeña-->
			<div id="DivMenos1024" style="display:none;">	
			<div class="container InfGralCoSResol"  >
				<div class="container InfGral2Resol">
					<div class="row">
					</div>
							<table class="TabInfGral">
								<tbody>
									<tr>
										<td style="padding-left:3px;">
											<div class="col2InfGral">
												<div>
													<label  class="LEstratResol"   ng-show="lang == 'es'" ng-bind="objIdiomaM.arrIdioma[324].es"></label>
													<label  class="LEstratResol"  ng-show="lang == 'en'" ng-bind="objIdiomaM.arrIdioma[324].en"></label>
												</div>
												<div><div id="tdEstratosResol"></div><div id="tdEstratos2Resol"></div></div>

												<div id="LEstResol">
													<!--etiqueta para la descripción 'Estratificación' en español o inglés
														Variable lang y objIdiomaM se encuentra en el archivo app_Mapa_SoloMpio.js
													-->	
													<br>
													<label  class="LEstratResol"  ng-show="lang == 'es'" ng-bind="objIdiomaM.arrIdioma[202].es"></label>
													<label  class="LEstratResol"  ng-show="lang == 'en'" ng-bind="objIdiomaM.arrIdioma[202].en"></label>
													<!--Combo que despliega los diferentes tipos de estratificación
														Variable Estratos se encuentra en el archivo app_Mapa_SoloMpio.js
													-->	
													<select id="EstratiResol" class="SelecEstratoResol" >
														<option ng-repeat="Est in Estratos" ng-selected="{{Est.Clave == 0}}" value="{{Est.Clave}}" >{{Est.EstratoEs}}</option>
													</select>
												</div>
											</div>
										</td>
									</tr>
								</tbody>

							</table>
					<div id="EspBlanResol" class="EspBlanc">&nbsp;</div>
				</div>
			  </div>
				<!--div que muestra la información básica en resoluciones pequeñas  -->
			<div id='Dat2'  class='Dat1Resol' >
				<div class="row" >
					<div class="col-xs-12 CobertResol"  >{{AbrevCobGeo}}{{DescripCob}}&nbsp;&nbsp;&nbsp;
						<label class="EtiPerResol"  >{{PerSelecRow}}</label>&nbsp;&nbsp;
						<label id="LabCifResol" class="EtiCifResol"  title={{NoDato}}>{{CifSelecRow}}</label>&nbsp;&nbsp;
						<label class="EtiPerDesResol"  ng-show="lang == 'es'" ng-bind="objIdiomaM.arrIdioma[206].es"  ng-if="objMapaSoloMpio.clasTexto!=''"></label>
						<label class="EtiPerDesResol"   ng-show="lang == 'en'" ng-bind="objIdiomaM.arrIdioma[206].en"  ng-if="objMapaSoloMpio.clasTexto!=''"></label>
						<label class="EtiClasResol"   ng-if="objMapaSoloMpio.clasTexto!=''">{{objMapaSoloMpio.clasTexto}}</label> 
					
					</div>

				</div>
			</div>
			
		</div>
 	 </div>
		<div id="divposi" ></div>
		<!--Archivos con código angularjs para el mapa-->
       
      <!--fab 8-ago-18 (bloque); minificación-->
		<any ng-if="site=='PUB'">
          <script src="app/js/app_Mapa_SoloMpio.min.js"></script> 
            <!--Archivos con código angularjs para el llamado de la API y archivos JSON (peticiones de datos XHR)--> 
          <script src="app/js/appService.min.js"></script> <!--fab 21-may-18-->
          <!--Archivos con código angularjs para la gráfica-->
          <script src="app/js/appFactoryGraf.min.js"></script>
          <!--Archivos con código angularjs que guarda las rutas o direcciones que se usan en los tres sitios que tiene los ODS -->
          <script src="app/js/appSite.min.js"></script>
       </any>
       <!--Sin minificación-->
       <any ng-if="site!='PUB'">
          <script src="app/js/app_Mapa_SoloMpio.js"></script> 
            <!--Archivos con código angularjs para el llamado de la API y archivos JSON (peticiones de datos XHR)--> 
          <script src="app/js/appService.js"></script> <!--fab 21-may-18-->
          <!--Archivos con código angularjs para la gráfica-->
          <script src="app/js/appFactoryGraf.js"></script>
          <!--Archivos con código angularjs que guarda las rutas o direcciones que se usan en los tres sitios que tiene los ODS -->
          <script src="app/js/appSite.js"></script>
       </any>
      <!--fab 8-ago-18 (fin bloque); minificación-->
       
<!--		<script src="libs/form-helpers/js/bootstrap-formhelpers.min.js"></script>-->
	</form>
</body>

</html>
<script>


</script>