documentacion routes map

README.md

Ruotes Map d3js & leafleft

Mapa reutilizable que usa como fuente de datos Google Spreadsheet

Spreadsheet de ejemplo

Parámetros para el permalink:

• gkey: El id del Google Spreadsheet, ej: "1kr4QxM_VgIsKhGL9b_ystBzQR1bSFSLwhLVw2yY9-E0"
• gid_text: gid de la hoja en el Spreadheet donde está el título y la fuente de los datos, ej: "819992543"
• gid_ctos: gid donde entan los créditos periodísticos, ej: "1622935471"
• default_zoom: Ajustar el zoom cuando es un solo punto. Valor numérico (opcional)
• gid_styles: Sheet con estilos customs. En la primer columna definir el selector y el la segunda tolos los valores css que se quieran para el mismo. _ej: "1524125102"

Ejemplo: ?gkey=1kr4QxM_VgIsKhGL9b_ystBzQR1bSFSLwhLVw2yY9-E0&gid_text=819992543&gid_ctos=1622935471

Ej con estilos custom (gid_styles): ?gkey=1kr4QxM_VgIsKhGL9b_ystBzQR1bSFSLwhLVw2yY9-E0&gid_text=819992543&gid_ctos=1622935471&gid_styles=1524125102

Ajustar el zoom cuando es un solo punto agregar el parametro default_zoom

Especificaciones del Spreadsheet

Hoja principal.

Esta debe ser la hoja principal del Spreadsheet, siempre debe ser el gid=0.

Campos obligatorios **

• step*: Indica el número de la viñeta que se va a mostrar. Este campo se usa para agrupar puntos para una misma viñeta. En el caso que se quiera mostrar más de un punto agregar una fila poniendo el mismo número en este campo, de esta manera la aplicación entiende que los puntos corresponden a una misma vista.
• title*: Título del cuadro de referencia (overlay) que se muestra a la izquierda.
• text_content*: Contenido del overlay.
• html_content: Contenido html del overlay.
• name*: Nombre del punto de origen. Es necesario definir coordinates
• coordinates*: Coordenadas del punto (lat,lon)
• overlay_link: Al completar este campo con si generará una línea entre el punto del mapa y overlay. En el caso de no necesitar la línea dejar vacío.
• target_name: Agrega un punto de destino vinculados por una línea. Es necesario definir target_coordinates. En el caso de necesitar más de un punto de destino para un mismo source, crear una nueva fila repitiendo los datos del punto de origen (name y coordinates) agregando un nuevo target. Como en el step 4 del ejemplo.
• target_coordinates: Coordenadas del punto de destino
• target_overlay_link: Indica si el punto de destino en el mapa debe estar vinculado con el overlay. Indicar si en el caso que así lo quiera.
• target_highlight: El punto de destino será resaltado azul y grande como el de origen.
• style_line: Estilo de la línea, posibles valores: black, dash, dash_black.

Desarrollo

Instrucciones para Intalar dependencias

Todos los comandos se deben ejecutar dentro de la carpeta server

• Instalar dependencias node.js npm install
• Instalas dependencias bower bower install
• Correr el server de desarrollo gulp
• Correr el build de la app gulp build