README.md 13.6 KB
Newer Older
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
1
# FRONT-END
NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
2

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
3
Es la parte visible, la que muestra el diseño, los contenidos y la que permite a los visitantes navegar por las diferentes páginas mientras lo deseen.
NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
4

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
5
6
7
8
9
10

### Plataforma del Sitio Oficial de los Objetivos de Desarrollo Sostenible de México.

La adopción de la Agenda 2030 para el Desarrollo Sostenible en México ha implicado la puesta en marcha de una plataforma para el seguimiento y monitoreo de los indicadores de los Objetivos de Desarrollo Sostenible, la cual esta diseñada en una arquitectura bajo el modelo MVC (Modelo Vista Controlador), que permite reutilizar el código y reduce el uso del código del servidor. Dentro de la capa del “modelo” se utiliza un servidor RESTful (API) para obtener los datos. En la capa “vista” se utiliza el HTML5, CSS 3 y Bootstrap. Finalmente la capa “controlador” usa Angular JS. 
 

NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
11
12
### Requisitos

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
13
* [Visual Studio Code](https://code.visualstudio.com/download) - Página oficial de descarga de de Visual Studio Code.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
14

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
15
* Tener un servidor de aplicaciones y una conexión a internet. En cuanto al servidor se pueden realizar múltiples configuraciones en servidores como Apache, IIS o puedes utilizar la extención "Live Server" de Visual Studio Code.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
16

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
17

NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
18
19
### Instalación

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
20
Procedimiento:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
21

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
22
#### 1.- Genera una carpeta llamada “ods” en el servidor de aplicaciones disponible. 
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
23

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
24
*  Ej. Si tu servidor de aplicaciones es Apache bajo el sistema operativo Linux, entonces genera la carpeta “ods” debajo de la ruta “\var\www\html” ó Windows debajo de la ruta "\xampp\htdocs".
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
25

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
26
#### 2.- Ve al proyecto Front-end y descarga el código del proyecto [Front-end](https://git.inegi.org.mx/ods-cepal/front-end) en formato .zip.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
27
28
29

![Download](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/download2.PNG )

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
30
#### 3.- En la carpeta creada en el paso 1 copia y pega el código fuente que descargaste en el paso anterior.
NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
31

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
32
#### 4.- Instalación de Servidor IIS
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
33

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
34
En el Panel de control abre "Programas y características".
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
35

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
36
• En el panel de la izquierda escoge: "Activar o desactivar las características de Windows".
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
37

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
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
• En la lista de funciones de Windows marca la casilla: "Internet Information Services" y haz clic en Aceptar.

• En la lista de funciones de Windows, da un clic en el signo más (+) situado junto a Internet Information Services, da un clic en el signo más (+) situado junto a Servicios World Wide Web, da un clic en el signo más (+) situado junto a Características de desarrollo de aplicaciones.

• Selecciona las funciones que necesites y presiona Aceptar.

#### 5.- Configuración de Servidor IIS y Publicación API

5.1- En el Panel de control/ Desinstalar programas iremos al apartado de Activar o desactivar las características de windows.

![Programas](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/programas.png)


5.2- Da clic en el apartado de Internet Information Services y seleccionaremos todas las casillas y aplicamos los cambios.

![Caracteristicas](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/caracteristicas.png)

5.3- Una vez aplicado los cambios podremos encontrar el administrador del IIS como si hubiéramos instalado un nuevo programa.

![IIS](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/iis.png)

5.4- Ahora una vez configurado el panel del IIS, iremos a la siguiente carpeta C:\inetpub\wwwroot. Una vez situados ahí crearemos una nueva carpeta y elegiremos un nombre.

![Carpeta](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/crearCarpeta.png)

5.5- Una vez en el panel, en la parte de Sitios agregaremos uno nuevo.

![Agregar Sitio](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/agregarSitio.png)

5.6. Nos mostrará el siguiente formulario en blanco, en nombre del sitio escribiremos como se llamará el nombre que mostrará en la lista, en la parte de ruta física buscaremos la carpeta que creamos anteriormente y por último en la parte de dirección IP “Todas las no asignadas”. Este último paso es para poder hacer que nuestro servicio funcione con con la dirección IP en caso de que ejecutemos el servicio en un lugar diferente (Casa, trabajo, escuela etc.).

![Agregar Sitio](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/agregarSitioW.png) 

5.7. Nos mostrará el siguiente mensaje y daremos clic en “si”.

![Mensaje](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/msj.png) 

5.8. Damos clic derecho y encendemos el servicio aunque no funcionará ya que funciona con los archivos de configuración de la carpeta, generados con el proyecto de .Net.

![Iniciar](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/iniciar.png) 

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
79
#### 6.- Abrir el proyecto o solución en Visual Studio Code 2019 con permisos de administrador.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
80
81
82
83
84
85
86
87
88

![Abrir VS](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/abrirVS.png) 


### 7.- Apuntar Front-end a API 

7.1.- Abre el código descargado en el paso anterior en Visual Studio Code.

7.2.- Ubica el archivo appSite.js ubicado dentro de la carpeta app/js/ dentro del proyecto como se muestra en la imagen a continuación y modifica la URL colocando la ruta en donde se encuentra instalada el API en tu servidor.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
89
90
91
92
93

![AppSite](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/appSite.PNG)



DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
94
### 8.- Pruebas de funcionalidad
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
95
96
97
Asegúrate que el servidor de aplicaciones se está ejecutando y desde ahí, mediante el uso de un navegador (Chrome, Explorer, etc.) accede a la liga  "http://localhost/ods/index.html".
A continuación, dar clic en la liga de “indicadores”, y posteriormente sobre el indicador 3.1.1 del objetivo 3. 
Este indicador mostrará sus tres elementos: Indicador, Metadato y Datos para el cálculo, asimismo, en el elemento Indicador se visualizarán los datos en Mapa, Gráfica y Datos,como se ve en la siguiente imagen:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
98
99


DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
100
### 9.- Estructura de Carpetas FRONT-END
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
101

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
102
![Carpetas](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/front-end2.PNG )
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
103

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
104
#### 10.- Descripción de archivos y carpetas:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
105

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
106
* email.html.- Página que genera un formulario para el envío de correo electrónico para los ODS.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
107

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
108
Esta página esta divida en 3 partes:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
109

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
110

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
111
112
113
114
1.  Nav divida en 2 partes: 


    *  Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
115

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
116

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
117
    *  Menú principal: (ver archivo: app/includes/Header_menu.html).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
118

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
119
2. Contenido: formulario email.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
120

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
121
3. Pie del sitio: (ver archivo: app/includes/Footer.html).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
122

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
123
124

* index.html.- Página principal del sitio de los ODS (home).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
125
126
127

Esta página se divide en:

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
128

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
*   Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas.
     
*   Carousel: Fotografías alusivas al sitio, incluye ligas a sitios internos y externos a esta página.
       
*   Nav (Menu principal): contiene le menú principal del sitio (ver archivo: app/includes/Header_menu.html).
     
*   Contenido del home: Objetivos, Indicadores por cobertura geográfica e información relacionada (ver archivo: app/partials/home_content.html).
     
*   Pie: (ver archivo: app/includes/Footer.html).
     
*   Nota importante: El sistema contempla 3 páginas principales (index.html, ODSind.html, ODSopc.html), por medio de index.html se llega a las demás utilizando ligas y pase de parámetros.
     
*   Archivo de control: app/js/app_Index.js.


* ODSind.html:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
145

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
146
Página del indicador: Presenta la serie del indicador seleccionado, mapa, gráfica, metadato, datos para el cálculo 
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
147

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
148
    Esta página esta divida en 4 partes:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
149
    
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
     - Nav divida en 3 partes:
         -Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas
         -Menú principal: (ver archivo: app/includes/Header_menu.html);
         -Lista de objetivos y lista de indicadores del objetivo seleccionado
     - Encabezado del indicador, divido en 3 partes:
         - Nombre del indicador: (include/Ind_Header_Descrip.html)
         - Secciones del indicador: botones Indicador, Metadato y Datos para cálculo; cada uno es una liga que cambia de página a la sección citada
           (includes/Ind_Header_Sections.html)
         - Opciones del indicador: Se abren solo si el indicador tiene desagreación geográfica, se divide en Estados Unidos Mexicanos, Entidad fedetativa y 
           Todos los (municipios/ciudades) (includes/Ind_Header_Options.html)
     - Contenido: se enlaza con 3 páginas (una a la vez):
         - Indicador: Página que contiene la serie del indicador, mapa, gráfica (partials/Ind_Indicator.html)-página por omisión
         - Metadato: Página que presenta los metadatos del indicador seleccionado (partials/Ind_Metadata.html)
         - Datos para el cálculo: Presenta las series insumo que generán el indicador (partials/Ind_BasicData.html)
     - Pie del sitio: (ver archivo: app/includes/Footer.html).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
165

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
166
* ODSopc.html
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
167

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
168
Página que abre las opciones (herramientas) que ofrece sitio de los ODS
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
169

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
    Esta página esta divida en 3 partes:
     - Nav divida en 2 partes:
         -Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas
         -Menú principal: (ver archivo: app/includes/Header_menu.html);
     - Contenido: esta página se enlaza con
         - About: Página que contiene información acerca de los ODS, (partials/About.html)
         - Lista de Indicadores: Presenta la temática completa del sitio ODS (partials/Indicators.html)
         - Buscador: Localiza los indicadores por diferentes tipos de búsqueda (partials/Search.html)
         - Calendario: Presenta la próxima fecha de actualización de c/u de los indicadores, (partials/Calendar.html)
         - Descarga masiva: Página en donde se descarga la información de N indicadores a la vez (partials/MassiveDownload.html)
         - Cobertura geográfica: Presenta los indicadores por cobertura geográfica (partials/GeoCoverage.html)
     - Pie del sitio: (ver archivo: app/includes/Footer.html)
     Nota importante: El sitio se enlaza a las páginas por medio de ligas, pase de parámetros
     Archivo de control: app/js/app_opc.js
     Acceso: ODSopc.html?opc=(cal,li,em,about,&ti=IND&lang=es#/cal
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
185

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
186
* README.md: archivo que contiene información acerca de otros archivos en un directorio y docuementación del proyecto.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
187

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
188
* Carpeta app: aquí se encuentra la carpeta app donde se ubica toda la implementación de los componentes principales, junto a su template html y archivos de estilos css.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
189
190
191

* Carpeta data:

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
192
* Carpeta docs: aquí se encuentran los documentos del proyecto.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
193

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
194
* Carpeta img: aquí se encuentran las imagenes del proyecto.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
195

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
196
* Carpeta json: aquí se encuentran los archivos en formato json.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
197

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
198
* Carpeta libs: aquí se encuentran las librerías del proyecto.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
199

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
200
* Carpeta mapasd3: código de mapas y componentes mapas.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
201

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
202
* Carpeta recursos: carpeta con imagenes del proyecto.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
203

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
204
* Carpeta settings: settings.json archivo que contiene la configuración global para la personalización del sitio.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
205

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
206
### 11. Configuración del mapa de estratificación
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
207

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
208
Descripción:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
209

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
210
El mapa de estratificación es un componente embebido en el proyecto cuya función principal es la de mostrar datos de estratificación correspondientes a un indicador de cierta área geográfica.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
211

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
212
**Características:**
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
213

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
214
•	Componente independiente reutilizable.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
215

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
216
•	Mapa base: capa del mundo en formato geoJSON (incluido en el componente).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
217

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
218
•	Mapa de países: capa de cada país en formato geoJSON (cargado por el desarrollador).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
219

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
220
•	Control de navegación por zoom por mouse y controles en el mapa.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
221

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
222
**Tecnología:**
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
223

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
224
225
226
227
228
229
230
•	Webpack (minificado y empaquetado del componente).

•	Bootstrap 4.3.1

•	Axios (Solicitudes al API).

•	D3 js (librería para la visualización de datos).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
231

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
232
•	React js (Librería para el desarrollo de la interfaz y funcionalidad).
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
233

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
234
Configuración y carga de capa país con sus entidades:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
235

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
236
237
238
239
240
Para la correcta visualización de datos en el mapa se deben realizar los siguientes ajustes.
1.	Abrir el archivo de configuración MapaD3.config.js que se encuentra en /front-end/mapasd3/.
2.	Configurar la URl base del API reemplazando el valor del parámetro: basePath 
3.	Modificar el parámetro fileGeojson el cual se reemplaza por el nombre del archivo que contiene el geojson del país a visualizar, el nombre del archivo deberá ser como lo especifica la norma ISO_3166-1 del estándar internacional de normalización utilizando el Código alfa-3, para más información visita: https://es.wikipedia.org/wiki/ISO_3166-1.
4.	El parámetro dirGeojson se puede modificar si prefieres optar por otro lugar donde se guarden los archivos en formato geoJSON.
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
241

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
242
![Mapa1](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/mapa1.png)
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
243

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
244
5.	La estructura del archivo geoJSON para el país deberá tener la siguiente estructura:
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
245

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
246
247
248
249
250
251
252
Ejemplo: MEX.json

![Mapa2](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/mapa2.png)

NOTA: es importante que el campo CVE_ENT coincida con el del dato que regrese el API y poder colocar el datos en la entidad correspondiente.

![Mapa3](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/mapa3.png)
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
253

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
254
### Construido con:
NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
255
256
257
258
259
260
261

*	HTML 5
*	CSS 3
*	Bootstrap
*	D3
*	Angular JS

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
262
### Versiones
NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
263
264
265

La versión disponible del Sistema de Información de los Objetivos de Desarrollo Sostenible de México es la 2.4.0.

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
266
### Autor
NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
267
268
269

Instituto Nacional de Estadística y Geografía (INEGI), México [www.inegi.org.mx](http://www.inegi.org.mx).

DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
270
### Licencia
NIETO MACIAS SERGIO's avatar
NIETO MACIAS SERGIO committed
271
272

Este proyecto está bajo la licencia de código abierto del Instituto Nacional de Estadística y Geografía, para más detalles ver [licencia](http://www.agenda2030.mx/docs/doctos/system/Licencia_codigo_abierto_ES.pdf)
DIAZ RUIZ ANA KAREN's avatar
DIAZ RUIZ ANA KAREN committed
273
274