Permalink
Browse files

Big re-theme commit dump

  • Loading branch information...
1 parent 848f052 commit bfb4dda034fa3ae5c79983519b1aef447b25f082 @tristen tristen committed Nov 29, 2012
View
4 README.md
@@ -1 +1,3 @@
-SEGAYAC
+### SEGAYAC
+
+### Sitio de que muestra los incidentes delictivos , en un mapa desarrollado con [MapBox](http://mapbox.com/) y estadísticas , Este es un trabajo conjunto con la Subgerencia de Seguridad Ciudadana de la Municipalidad Provincial de Humanga.
View
BIN img/ajax-loader-rev.gif
Deleted file not rendered
View
BIN img/ajax-loader.gif
Deleted file not rendered
View
BIN img/close.png
Deleted file not rendered
View
BIN img/estatistic.png
Deleted file not rendered
View
BIN img/ftr-separator.png
Deleted file not rendered
View
BIN img/img-header.png
Deleted file not rendered
View
BIN img/inf2.png
Deleted file not rendered
View
BIN img/information.png
Deleted file not rendered
View
BIN img/mapbox.png
Deleted file not rendered
View
BIN img/row-2.png
Deleted file not rendered
View
BIN img/row.png
Deleted file not rendered
View
BIN img/sprite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
98 img/sprite.svg
@@ -9,12 +9,15 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="400"
- height="400"
+ width="120"
+ height="40"
id="svg4936"
version="1.1"
inkscape:version="0.48.2 r9819"
- sodipodi:docname="sprite.svg">
+ sodipodi:docname="sprite.svg"
+ inkscape:export-filename="./sprite.png"
+ inkscape:export-xdpi="90.518661"
+ inkscape:export-ydpi="90.518661">
<defs
id="defs4938" />
<sodipodi:namedview
@@ -24,17 +27,25 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="1.0711563"
- inkscape:cx="139.99226"
- inkscape:cy="196.72862"
+ inkscape:zoom="2.8284271"
+ inkscape:cx="35.506735"
+ inkscape:cy="18.163881"
inkscape:document-units="px"
inkscape:current-layer="layer1"
- showgrid="false"
+ showgrid="true"
inkscape:window-width="1280"
inkscape:window-height="752"
inkscape:window-x="0"
inkscape:window-y="0"
- inkscape:window-maximized="1" />
+ inkscape:window-maximized="1">
+ <inkscape:grid
+ type="xygrid"
+ id="grid14566"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
<metadata
id="metadata4941">
<rdf:RDF>
@@ -51,5 +62,74 @@
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
- transform="translate(0,-652.36218)" />
+ transform="translate(0,-1012.3622)">
+ <g
+ style="fill:#c1c3c8;fill-opacity:1;display:inline"
+ transform="matrix(1.8560872,0,0,1.8560872,0,857.88418)"
+ id="g5702">
+ <g
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="./renders/premium.png"
+ style="fill:#c1c3c8;fill-opacity:1;display:inline"
+ transform="matrix(0.5951758,0,0,0.5951758,-49.65323,30.071538)"
+ id="g5704">
+ <g
+ inkscape:export-ydpi="300"
+ inkscape:export-xdpi="300"
+ inkscape:export-filename="/Users/saman/work_repos/graphics/mapbox/flyer/mapbox_flier_front_8.5x5.5.png"
+ style="color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:55.73771286;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ transform="matrix(0.12086844,0,0,0.12086844,108.64001,151.52597)"
+ id="g5706">
+ <path
+ inkscape:connector-curvature="0"
+ style="color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:55.73771286;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ clip-path="none"
+ d="m 252.5,-403.39664 c -26.23353,0 -47.5,21.26647 -47.5,47.5 0,26.23353 21.26647,47.50004 47.5,47.50002 l 34.53125,-2e-5 c 2.11867,-1e-5 2.96875,-1.58176 2.96875,-3.75 l 0,-87.25 c 0,-3 -1,-4 -4,-4 z m 0,19 18.5,0 0,6.84375 0,45.3125 0,6.84375 -18.5,0 c -15.74011,0 -28.5,-14.75989 -28.5,-30.5 0,-15.74011 12.75989,-28.5 28.5,-28.5 z"
+ id="path5708"
+ sodipodi:nodetypes="csssssccsccccsss" />
+ <path
+ inkscape:connector-curvature="0"
+ style="color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:55.73771286;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ d="m 81,-441.39664 c -3,0 -4,1 -4,4 l 0,125 c 0,3 1,4 4,4 l 11.125,0 c 2.444295,0 3.545198,-0.69394 3.875,-2.5625 l 0,-105.4375 33.25,58.5 c 1.32604,2.33303 2.75,3.48718 4.75,3.5 2,0.0128 3.42396,-1.16697 4.75,-3.5 l 33.25,-58.5 0,104 c 0,3 1,4 4,4 l 11,0 c 3,0 4,-1 4,-4 l 0,-125 c 0,-3 -1,-4 -4,-4 l -17.125,0 c -2.49457,0 -4.14512,1.06903 -5.5,3.5 l -30.375,53.5 -30.4375,-53.59375 c -1.13065,-1.99082 -1.50429,-3.40625 -4.0005,-3.40625 z"
+ id="path5710"
+ sodipodi:nodetypes="sssssccssscsssssscscscs" />
+ <path
+ inkscape:connector-curvature="0"
+ style="color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:55.73771286;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ clip-path="none"
+ d="m 311.96875,-403.39664 c -2.20141,-3.2e-4 -2.96875,1.3125 -2.96875,3.9375 l 0,125.0625 c 0,3 0.99597,4 4.01632,3.99999 l 11.50957,0 c 2.7489,0 3.54605,-1.18066 3.54079,-3.875 L 328,-308.45914 c 6.0766,0.0365 12.586,0.0358 18.5,0.0625 26.12125,0.11774 47.5,-20.96203 47.5,-47.5 0,-26.23353 -21.26648,-47.5265 -47.5,-47.5 -11.54051,0.0117 -23.00312,0.002 -34.53125,0 z m 16.03125,19 18.5,0 c 15.74011,0 28.5,12.75989 28.5,28.5 0,15.74011 -12.75989,30.5 -28.5,30.5 l -18.5,0 z"
+ id="path5712"
+ sodipodi:nodetypes="sssscscsscssscsss" />
+ <path
+ clip-path="none"
+ id="path5714"
+ d="m 553.5,-403.39664 c 26.23353,0 47.5,21.26647 47.5,47.5 0,26.23353 -21.26647,47.5 -47.5,47.5 -26.23353,0 -47.5,-21.26647 -47.5,-47.5 0,-26.23353 21.26647,-47.5 47.5,-47.5 z m 0,19 c -15.74011,0 -28.5,12.75989 -28.5,28.5 0,15.74011 12.75989,30.5 28.5,30.5 15.74011,0 28.5,-14.75989 28.5,-30.5 0,-15.74011 -12.75989,-28.5 -28.5,-28.5 z"
+ style="color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:55.73771286;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ssssssssss" />
+ <path
+ sodipodi:nodetypes="ssssssccsscssccccssccc"
+ inkscape:connector-curvature="0"
+ id="path5716"
+ d="m 412,-441.40625 c -3,0 -4,1 -4,4 l 0,125.15625 c 0,2.54936 1.57368,3.84375 4.03125,3.84375 l 34.46875,0 c 26.23353,0 47.5,-12.26647 47.5,-38.5 0,-15.08273 -7.41879,-29.0953 -22.75,-34.9375 0,0 12.47895,-7.37119 12.75,-22.5 -0.23961,-25.91569 -21.41542,-37.0625 -47.5,-37.0625 z m 15,19 9.5,0 c 15.74011,0 28.5,2.75989 28.5,18.5 0,7.50938 -3.28083,12.5053 -7.65625,15.78125 -9.30886,5.53565 -19.3433,3.71875 -30.34375,3.71875 z m 0,52 19.5,0 c 15.7401,0 28.5,7.7599 28.5,23.5 0,15.74011 -12.75989,21.5 -28.5,21.5 -6.47242,9e-5 -13.00655,0 -19.5,0 z"
+ style="color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:55.73771286;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path5718"
+ d="m 606.8125,-403.40625 c -2.69064,0 -3.73316,1.66812 -2.25,3.625 l 29.93779,42.4716 -31.93779,45.2784 c -1.48316,1.95688 -0.44064,3.625 2.25,3.625 l 16.15625,0 c 1.67394,0 2.62104,-0.85774 3.625,-2.28125 l 21.39685,-30.3222 21.41565,30.3222 c 1.00396,1.42351 1.95106,2.28125 3.625,2.28125 l 16.15625,0 c 2.69064,0 3.73316,-1.66812 2.25,-3.625 L 657.5,-357.3125 l 29.9375,-42.46875 c 1.48316,-1.95688 0.44064,-3.625 -2.25,-3.625 l -16.15625,0 c -1.67394,0 -2.62104,0.85773 -3.625,2.28125 l -19.40511,27.50802 -19.40739,-27.50802 c -1.00396,-1.42352 -1.95106,-2.28125 -3.625,-2.28125 z"
+ style="color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:55.73771286;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ sodipodi:nodetypes="scccsscccsscccsscccss" />
+ </g>
+ </g>
+ <path
+ inkscape:export-ydpi="90"
+ inkscape:export-xdpi="90"
+ inkscape:export-filename="/Users/saman/Dropbox/mapbox-redesign/sketch-wireframe.png"
+ inkscape:connector-curvature="0"
+ style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#c1c3c8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:40;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+ d="m 8.0025,85.562189 c -0.13461,-7.99e-4 -0.26929,0.03309 -0.3875,0.0975 l -7.2,3.965 c -0.12472,0.06848 -0.22748,0.17269 -0.3,0.295001 C 0.0425,90.042 2.4e-4,90.18241 0,90.32469 l 0,8.0725 c 4.8e-4,0.28456 0.16557,0.56304 0.415,0.7 l 7.2,3.965 c 0.11737,0.0644 0.25119,0.1 0.385,0.1 0.13382,0 0.26764,-0.0356 0.385,-0.1 l 7.2,-3.965 c 0.24944,-0.13696 0.41454,-0.41544 0.415,-0.7 l 0,-8.0725 c -2.1e-4,-0.14228 -0.0425,-0.28269 -0.115,-0.405 -0.0725,-0.122311 -0.17528,-0.22652 -0.3,-0.295001 l -7.2,-3.965 c -0.11674,-0.0636 -0.24955,-0.09745 -0.3825,-0.0975 z m -0.007,1.622501 c 0.0339,4.34e-4 0.0729,0.01296 0.1175,0.0375 0.44026,0.242488 0.88051,0.483618 1.32,0.7275 0.12185,0.06762 0.1675,0.171571 0.1675,0.327499 l 0,0.715001 c 0,0.153973 -0.0442,0.257692 -0.1625,0.324999 l -0.39751,0.232501 0,0.172499 c 0,0.24 -0.0835,0.320001 -0.32,0.320001 l -0.0975,0 -0.6725,-0.795 c -0.0694,-0.08208 -0.11,-0.129618 -0.11,-0.2825 l 0,-1.5675 c 0,-0.116611 0.0534,-0.21362 0.155,-0.2125 z m -0.84,0.465 c 0.0771,0.0058 0.125,0.08993 0.125,0.2175 l 0,0.434999 c 0,0.120697 -0.0255,0.176915 -0.07,0.235001 l -0.525,0.624999 -0.0875,0.105 c -0.0885,0.105559 -0.1975,0.06977 -0.1975,-0.08 l 0,-0.912501 c 0,-0.152458 0.0421,-0.26607 0.16,-0.324999 l 0.51,-0.277501 c 0.0316,-0.01727 0.0593,-0.02444 0.085,-0.0225 z m -1.47,0.8025 c 0.0851,-0.007 0.155,0.05047 0.155,0.184999 l 0,1.527501 0.7125,0.395 c 0.12206,0.0672 0.1675,0.17157 0.1675,0.3275 l 0,0.2875 -0.505,0.2825 -0.55,-0.65 -1.0125,0.5575 c -0.19831,0.10921 -0.24256,0.21891 -0.0375,0.33 l 0.8175,0.45 c 0.12207,0.0672 0.1675,0.17157 0.1675,0.3275 l 0,0.165 0.4,0.22 0,-0.575 c 0,-0.16 -0.005,-0.26197 0.1675,-0.3575 l 0.81,-0.4475 0.7575,0.8975 -0.975,0.54 c -0.64432,0.76888 -1.28578,1.54028 -1.935,2.305 -0.0783,0.093 -0.16769,0.12033 -0.25,0.075 -0.45324,-0.2496 -0.82122,-0.45168 -1.26,-0.695 l -0.84,1.0125 c 0.31933,0.17553 0.63896,0.35054 0.9575,0.5275 0.12182,0.0677 0.1675,0.17157 0.1675,0.3275 l 0,0.585 1.675,0.9225 c 0.30713,0.1686 0.5275,0.79 0.5275,0.79 l 1.2525,0.6875 c 0.12207,0.0672 0.1675,0.17157 0.1675,0.3275 l 0,0.2925 c -0.005,0.13635 -0.0261,0.24605 -0.125,0.3 l -0.5225,0.285 c -0.071,0.0387 -0.16097,0.0355 -0.23,-0.003 L 3.33,98.99169 C 3.20794,98.92449 3.1625,98.82012 3.1625,98.66419 l 0,-0.0975 0.7225,-0.86 -2.12,-1.1675 C 1.64294,96.47199 1.6,96.36938 1.6,96.21169 l 0,-3.955 0,-0.4475 0,-0.67 0,-0.2225 c 0,-0.15593 0.0429,-0.26278 0.165,-0.33 l 0.1525,-0.085 c 1.24061,-0.681235 3.68,-2.0225 3.68,-2.0225 0.0295,-0.01623 0.0591,-0.02516 0.0875,-0.0275 z m 6.675,1.144999 c 0.0481,0 0.10139,0.02334 0.185,0.0675 0.56108,0.310072 1.12574,0.613661 1.6875,0.922501 0.12207,0.0672 0.1675,0.17157 0.1675,0.3275 l 0,3.8525 -0.285,-0.3375 c -0.0891,-0.10548 -0.18542,-0.10684 -0.285,-0.0525 l -0.3375,0.185 0.7875,0.935 c 0.0764,0.0907 0.12,0.13407 0.12,0.295 l 0,2.01 c 0,0.15593 -0.0454,0.26031 -0.1675,0.3275 l -2.15,1.185 c -0.092,0.0507 -0.19073,0.0442 -0.2725,-0.0525 -0.29093,-0.34405 -0.6248,-0.72865 -0.95,-1.1225 -0.24006,0.13275 -0.48689,0.278 -0.7275,0.4 -0.12276,0.0622 -0.19964,0.0663 -0.32,0 -0.21249,-0.1171 -0.44728,-0.23832 -0.6825,-0.375 -0.12049,-0.07 -0.1675,-0.17407 -0.1675,-0.33 -8.4e-4,-0.38246 -0.003,-0.75775 -0.002,-1.1475 2.1e-4,-0.13025 0.0449,-0.26586 0.1575,-0.4 l 1.2825,-1.53 -0.48,0 c -0.16,0 -0.32,-0.16 -0.32,-0.32 l 0,-0.4375 c 0,-0.15593 0.0456,-0.26003 0.1675,-0.3275 0.0783,-0.0433 0.395,-0.2225 0.395,-0.2225 l -0.002,-0.89 c -2.9e-4,-0.11185 0.0379,-0.24607 0.1675,-0.3175 l 1.1925,-0.6575 0,-1.33 c 0,-0.15593 0.0456,-0.259874 0.1675,-0.3275 0.14915,-0.0827 0.33397,-0.182562 0.5025,-0.275 0.0726,-0.03843 0.11997,-0.055 0.17,-0.055 z m -1.96,5.160001 0.89,0.4925 1.91,-1.0525 0,-0.98 -0.71,0.39 c -0.0994,0.055 -0.19614,0.0536 -0.285,-0.05 l -0.2525,-0.3 c -0.0783,-0.0931 -0.16292,-0.11032 -0.25,-0.075 l -0.94,0.5175 -0.36251,1.0575 z"
+ id="path5720" />
+ </g>
+ </g>
</svg>
View
182 index.html
@@ -9,119 +9,130 @@
<body>
<div id='masthead'>
<div id='header'>
- <h1><span>Seg</span>Ayac</h1>
- <h2>Mejorando el control de incidentes Delictivos en la ciudad de Ayacucho</h2>
+ <h1><a href='/'><span class='brand'>Seg</span>Ayac <span class='subtitle'>Mejorando el control de incidentes Delictivos en la ciudad de Ayacucho</span></a></h1>
</div>
- <!-- block for menu by type incident -->
- <div align='center' id='menu_type_incident'>
- <ul id='ul_menu_type_incident'>
+ <div class='limiter'>
+ <!-- block for menu by type incident -->
+ <ul class='navigation clearfix'>
<li><a href='#' class='active' id='all_incident_type'>Mostrar Todos</a></li>
<li><a id='Robo' data-layer='1' href='#'>Robo</a></li>
<li><a id='Intento_de_Robo' data-layer='2' href='#'>Intento de Robo</a></li>
<li><a id='Agresi&oacute;n' data-layer='3' href='#'>Agresión</a></li>
<li><a id='Accidente' data-layer='4' href='#'>Accidentes</a></li>
<li><a id='Violencia_Familiar' data-layer='5' href='#'>Violencia Familiar</a></li>
<li><a id='Otros' data-layer='6' href='#'>Otros</a></li>
+ <li><a href='#' id='arrow_show_block' class='graph views'>Gráfico</a></li>
+ <li><a href='#' id='arrow_block_inf' class='views'>Leyenda</a></li>
</ul>
- <div id='arrow_show_block'><a href='#'>&times;</a></div>
- <div id='arrow_block_inf'> <a href='#'>&times;</a></div>
</div>
</div>
- <div align='center' class='statistic_by_month' id='all_incident_type_statistic'>
+
+ <!-- Dropdown: Graph -->
+ <div class='dropdown statistic_by_month' id='all_incident_type_statistic'></div>
+ <div id='close_block_stac' class='close'> <a href='#'>&times;</a> </div>
+
+ <!-- Dropdown: Legend -->
+ <div class='dropdown block_inf_type'>
+ <div class='limiter'>
+ <div class='col col-50'>
+ <div class='inner'>
+ <h3>Robo</h3>
+ <p>Es un delito contra el patrimonio, que consistente en el apoderamiento de bienes ajenos,empleando para ello fuerza en las cosas o bien violencia o intimidación en la persona.</p>
+ <h3>Intento de Robo</h3>
+ <p>Es similar al incidentes anterior, con la difeencia de que este es impedido por la persona o por terceros.</p>
+ <h3>Agresión</h3>
+ <p>Ataque violento contra una persona con el objeto de dañarla físicamente y/o a sus bienes.</p>
+ </div>
+ </div>
+ <div class='col col-50'>
+ <div class='inner'>
+ <h3>Accidente</h3>
+ <p>Cualquier suceso que es provocado por una acción violenta y repentina ocasionada por un agente externo involuntario, y puede o no dar lugar a una lesión corporal.</p>
+ <h3>Violencia Familiar</h3>
+ <p>Es la acción u omisión que el integrante de un grupo familiar ejerce contra otro y que produce un daño no accidental en el aspecto físico o psíquico. </p>
+ <h3>Otros</h3>
+ <p>En este rubro se clasifican otros tipos de delitos que ocacionalmente suceden en la ciudad</p>
+ </div>
+ </div>
+ </div>
</div>
- <div align='center' id='close_block_stac' class='close_block'> <a href='#'>&times;</a> </div>
- <!-- block map -->
- <div id='map' class='loading'></div>
- <div class='block_inf_type'>
- <div class='for_colum'>
- <h3>Robo</h3>
- <p>Es un delito contra el patrimonio, que consistente en el apoderamiento de bienes ajenos,empleando para ello fuerza en las cosas o bien violencia o intimidación en la persona.</p>
- <h3>Intento de Robo</h3>
- <p>Es similar al incidentes anterior, con la difeencia de que este es impedido por la persona o por terceros.</p>
- <h3>Agresión</h3>
- <p>Ataque violento contra una persona con el objeto de dañarla físicamente y/o a sus bienes.</p>
+ <div id='close_block_inf' class='close'> <a href='#'>&times;</a></div>
+
+ <!-- Section: Map -->
+ <div class='map-container'>
+ <div id='indicate_menu'>
+ <p>Todos los incidentes registrados</p>
</div>
- <div class='for_colum'>
- <h3>Accidente</h3>
- <p>Cualquier suceso que es provocado por una acción violenta y repentina ocasionada por un agente externo involuntario, y puede o no dar lugar a una lesión corporal.</p>
- <h3>Violencia Familiar</h3>
- <p>Es la acción u omisión que el integrante de un grupo familiar ejerce contra otro y que produce un daño no accidental en el aspecto físico o psíquico. </p>
- <h3>Otros</h3>
- <p>En este rubro se clasifican otros tipos de delitos que ocacionalmente suceden en la ciudad</p>
+
+ <div class='introduction'>
+ <div class='inner'>
+ <h3>Incidentes Delictivos</h3>
+ <p> Actualmente en la ciudad de Ayacucho los incidentes delictivos son una actividad cotidiana,como sucede en cualquier otro lugar, la Sub Gerencia de Seguridad Ciudadana encargado de la seguridad en la ciudad de Ayacucho pone a disposición sus datos, para el conocimiento de la ciudadania, con finalidad de prevenir incidentes futuros en ciertos lugares de la ciudad.</p>
+ <p>El mapa de arriba muestra los puntos donde ocurrieron los incidentes delictivos, estos datos son recolectados, ingresados y publicados por la Sub Gerencia de Seguridad Ciudadana de la Municipalidad Provincial de Humanga con la iniciativa de Datos Abiertos.
+ </p>
+ </div>
</div>
+ <div id='map'></div>
</div>
- <div id='close_block_inf' class='close_block'> <a href='#'>&times;</a>
- </div>
- <div id='indicate_menu'>
- <p>Todos los incidentes registrados</p>
- </div>
- <!-- block menu by month -->
- <div align='center' id='menu_month'>
- <ul id='ul_menu_month'>
- <li>
- <a href='#' class='active' id='all_incident_month'>Todos</a>
- </li>
- </ul>
- </div>
- <!-- block midle content -->
- <div align='center' id='middle_content'>
- <div id='block_text_desription'>
- <h3>Incidentes Delictivos</h3>
- <p> Actualmente en la ciudad de Ayacucho los incidentes delictivos son una actividad cotidiana,como sucede en cualquier otro lugar, la Sub Gerencia de Seguridad Ciudadana encargado de la seguridad en la ciudad de Ayacucho pone a disposición sus datos, para el conocimiento de la ciudadania, con finalidad de prevenir incidentes futuros en ciertos lugares de la ciudad.</p>
- <p>El mapa de arriba muestra los puntos donde ocurrieron los incidentes delictivos, estos datos son recolectados, ingresados y publicados por la Sub Gerencia de Seguridad Ciudadana de la Municipalidad Provincial de Humanga con la iniciativa de Datos Abiertos.
- </p>
- </div>
- <div id='block_statistic' class='loading'>
- <div id='title_statistic'>Porcentaje total de incidentes </div>
- <div id='img_total_percentage'></div>
- <div id='num-incident'></div>
+
+ <!-- Section: Month Selection -->
+ <div class='block clearfix'>
+ <div class='limiter'>
+ <ul id='months' class='navigation clearfix'>
+ <li>
+ <a href='#' class='active' id='all_incident_month'>Todos</a>
+ </li>
+ </ul>
</div>
- <!--block downloads -->
- <div id='block_downloads'>
- <div id='downloads' class='clearfix'>
- <div class='limiter'>
- <div class='col dl'>
- <div class='dl-data'>.CSV</div>
- <div>
- <a id='download_csv' title='Descarga de Datos' class='button'>Descargar Datos</a>
- </div>
- <p class='details'>Descargue el documento .csv que contiene todos los datos visibles en este sitio para su uso en un programa de hoja de cálculo o <a href='http://mapbox.com/tilemill'>TileMill</a>.
- </p>
- </div>
- <div class='col dl'>
- <div class='dl-map'>JSON</div>
- <div>
- <a id='download_josn' title='API Feed' class='button'>Datos API Feed</a>
- </div>
- <p class='details'>Accede a los datos visualizados en formato JSON API para el uso en programación de una aplicación web.</p>
- </div>
- </div>
+ </div>
+
+ <!-- Section: Graph and Downloads -->
+ <div class='section'>
+ <div class='limiter clearfix'>
+
+ <!-- Graph -->
+ <div id='block_statistic' class='col col-50'>
+ <h3>Porcentaje total de incidentes</h3>
+ <div id='img_total_percentage'></div>
+ <div id='num-incident'></div>
+ </div>
+
+ <!-- Downloads -->
+ <div id='block_downloads' class='col col-50'>
+ <a id='download_csv' title='Descarga de Datos' class='button'>Descargar CSV Datos</a>
+ <p>Descargue el documento .csv que contiene todos los datos visibles en este sitio para su uso en un programa de hoja de cálculo o <a href='http://mapbox.com/tilemill'>TileMill</a>.</p>
+
+ <a id='download_josn' title='API Feed' class='button'>Datos .JSON Feed</a>
+ <p>Accede a los datos visualizados en formato JSON API para el uso en programación de una aplicación web.</p>
</div>
+
</div>
</div>
- <!-- block for superposition -->
- <div id='backdrop'></div>
- <!-- block footer -->
+
+ <!-- Section: Footer -->
<div id='footer'>
- <div class='center'>
- <p><a class='button' href='#opendata'>Datos Abiertos</a></p>
- <p><a class='button' href='#howto'>Como desarrollar</a></p>
- <div class='separator'>--</div>
- <span>Desarrollado con <a href='http://tilemill.com' title='TileMill'> TileMill</a></span>
- <a href='http://mapbox.com/' target='_blank'><img src='images/mapbox.png' alt='' /></a>
+ <div class='limiter'>
+ <a href='#opendata'>Datos Abiertos</a> | <a href='#howto'>Como desarrollar</a>
+ | Desarrollado con <a href='http://tilemill.com'>TileMill</a>
+ <a href='http://mapbox.com/' class='icon mapbox'>MapBox</a>
</div>
</div>
+
+ <!-- Modals -->
+ <div id='backdrop'></div>
+
<div id='opendata' class='popover'>
- <h1>Datos Abiertos</h1>
+ <h2>Datos Abiertos</h2>
<p>Mediante la presente aplicación "SEGAYAC" se viene abriendo datos con respectos a los incidentes delictivos, registrados desde enero del 2012 a la actualidad, por la Municipalidad provincial de Huamanga, Los incidentes delictivos registrados han sido clasificados en: Robo, Intento de Robo, Agresión, Accidentes, Violencia Familiar, Otros, los cuales son los que de manera frecuente suceden en la ciudad.
</p>
<p>La municipalidad Provincial de Humanga es un institución publica que se encuentra en el proceso de adoptar el nuevo paradigma Datos Abiertos, esta institución cuenta con una gran cantidad de datos, que ya anteriormente han sido otorgados para su publicación de forma abierta, es el caso de planos catastrales que fueron publicados en <a href='http://www.openstreetmap.org/?lat=-13.16078&amp;lon=-74.22367&amp;zoom=16&amp;layers=M'>OpenStreetMap</a> en Octubre del 2011. por algunos usuarios activos en esta ciudad.
</p>
<p>La Municipalidad Provincial de Huamanga, esta en el proceso de desarrollo de su portal de Datos Abiertos, que en próximos meses sera presentado a la ciudadanía. Para mas información en: <a href='http://datos.munihuamanga.gob.pe/'>datos.munihuamanga.gob.pe</a>
</p>
</div>
+
<div id='howto' class='popover'>
- <h1>Como Desarrollar</h1>
+ <h2>Como Desarrollar</h2>
<p>La presente aplicación fue desarrollado utilizando datos de <a href='http://www.openstreetmap.org/?lat=-13.16078&amp;lon=-74.22367&amp;zoom=16&amp;layers=M'>OpenStreetMap</a>, estos datos fueron procesados con ImpOSM y PostGIS, seguidamente para el diseño del mapa se ha utilizado TileMill con OSM-bright stylesheets, los cuales nos permite empezar en seguida con un mapa hermoso, con un combinación de colores personalizados y limpios que permitirá complementar cualquier tipo de información sobrepuestos en el mapa.
</p>
<p>Para el almacenamiento de datos se ha utilizado Google spreadsheet API, que permite acceder a una spreadsheets publico a traves de un jsonp feed. Seguidamente estos datos son recuperados mediante una <a href='https://github.com/mapbox/mapbox.js/blob/master/extensions/mapbox.converters.googledocs.js, '>extencion</a> de <a href='http://mapbox.com/mapbox.js/'>mapbox.js</a>
@@ -130,26 +141,23 @@
</p>
<p>
<span>Se puede encontrar más información en:</span>
- <br />
<span>
<a href='http://developmentseed.org/blog/2012/sept/13/mapping-dynamic-data-google-spreadsheet/'>
Mapping Dynamic Data Directly from a Google Spreadsheet</a>
</span>
- <br />
<span>
<a href='http://mapbox.com/blog/2012-09-05-mapping-crowdsourced-locations-google-docs/'>
Mapping Crowdsourced Locations with MapBox and Google Docs</a>
</span>
</p>
</div>
- <a id='close' href='#close'></a>
- <!-- scripts-->
+ <a id='close' href='#close'>&times;</a>
+
<script src='https://www.google.com/jsapi'></script>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.6/mapbox.js'></script>
<script src='ext/jquery.min.js'></script>
<script src='ext/underscore.min.js'></script>
<script src='ext/google_docs.js'></script>
<script src='site.js'></script>
- <!-- end scripts-->
</body>
</html>
View
680 site.css
@@ -12,23 +12,14 @@ small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display:block;
- }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
@@ -39,16 +30,28 @@ table { border-collapse: collapse; border-spacing:0; }
/* remember to define focus styles. Hee Haw */
:focus { outline:0; }
+*::-webkit-scrollbar {
+ background:#fff;
+ width:15px;
+ }
+*::-webkit-scrollbar-thumb {
+ background:#ccc;
+ border-radius:15px;
+ border:5px #fff solid;
+ }
+
/* ------------------------------------------
Typography
---------------------------------------------*/
body {
- font:16px/27px Helvetica, arial, freesans, clean, sans-serif;
- font-size:16px;
- line-height:27px;
+ background:#fff;
+ color:#404040;
+ font:14px/24px Helvetica, arial, freesans, clean, sans-serif;
+ -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
+ font-weight:bold;
}
h1 {
font-size:22px;
@@ -63,515 +66,336 @@ h3 {
line-height:27px;
}
p, ul {
- margin:0 0 27px;
+ margin:0 0 15px;
}
small {
font-size:15px;
}
a {
+ color:#404040;
+ font-weight:bold;
text-decoration:none;
}
-.marker-popup h3 {
- color:#000;
- }
#header h1 {
- line-height:42px;
- margin-left:150px;
- font-size:42px;
- float:left;
- }
-#header h1 span {
- color:#BA003F;
- }
-#header h2 {
- color:#40404B;
- font-size:20px;
- float:left;
- line-height:42px;
- margin-left:50px;
+ font-size:15px;
+ line-height:40px;
+ margin-left:40px;
}
+ #header h1 a {
+ color:#fff;
+ }
-a.button {
- background:#282828;
- display:block;
- font-size:21px;
- height:50px;
- line-height:50px;
- text-transform:uppercase;
+.button {
+ background:#c1c3c8;
+ width:auto;
+ color:#fff;
+ cursor:pointer;
+ display:inline-block;
+ font-size:14px;
+ font-weight:bold;
+ line-height:1;
+ margin:0 5px 10px 0;
+ padding:10px 20px 11px;
+ position:relative;
text-align:center;
- width:195px;
- margin-top:15px;
- font-weight:400!important;
- }
- a.button:hover {
- background-color:#000;
+ text-decoration:none;
+ -webkit-transition:background-color 100ms ease-in-out;
+ -moz-transition:background-color 100ms ease-in-out;
+ -o-transition:background-color 100ms ease-in-out;
+ transition:background-color 100ms ease-in-out;
+ -webkit-border-radius:2px;
+ border-radius:2px;
+ }
+ .button:hover {
+ background-color:#afb2b8;
}
+.brand { color:#BA003F; }
+
+.subtitle {
+ color:#9699A2;
+ margin-left:10px;
+ }
+
/* ------------------------------------------
Layout
---------------------------------------------*/
+.limiter {
+ width:960px;
+ margin:0 auto;
+ }
#masthead {
- background-color:#292929;
- height:82px;
- position:absolute;
- width:100%;
- top:0;
- z-index:5;
+ height:80px;
}
#header {
- height:42px;
- background-color:#ccc;
+ height:40px;
width:100%;
}
+.inner {
+ padding:20px;
+ }
+.col { float:left; }
+.col-50 { width:480px; }
/* ------------------------------------------
Style
---------------------------------------------*/
-#menu_type_incident {
- background-image:url(img/img-header.png);
- height:40px;
- left:0;
- margin-left:auto;
- margin-right:auto;
- position:absolute;
- right:0;
- top:42px;
- width:1100px;
- z-index:7;
- }
-
-#ul_menu_type_incident {
- background-color:#292929;
- color:#fff;
- float:left;
- height:40px;
- line-height:40px;
- width:959px;
+#header {
+ background:#2B2D33;
}
-
-#ul_menu_type_incident li a {
- background-color:#292929;
- color:#fff;
- display:block;
- height:40px;
- width:137px;
+.block,
+#masthead {
+ background:#414349;
+ width:100%;
+ overflow:hidden;
+ position:relative;
+ z-index:100;
+ }
+ #masthead {
+ position:relative;
+ z-index:1000;
+ -webkit-box-shadow:0 4px 8px rgba(0,0,0,0.25);
+ box-shadow:0 4px 8px rgba(0,0,0,0.25);
+ }
+.icon {
+ background:transparent url(img/sprite.png) no-repeat 0 0;
+ display:inline-block;
+ text-indent:-999em;
+ width:20px;
+ height:20px;
}
+ .icon.mapbox {
+ width:120px;
+ height:40px;
+ }
-#arrow_block_inf {
- background:transparen url(img/information.png) no-repeat 0 0;
+.navigation {
+ margin:0;
+ position:relative;
display:block;
+ left:50%;
float:left;
- height:40px;
- width:70px;
}
-
-#arrow_show_block {
- background-image:url(img/estatistic.png);
- background-position:center;
- background-repeat:no-repeat;
- float:left;
- height:40px;
- width:70px;
+ .navigation li {
+ float:left;
+ position:relative;
+ display:block;
+ right:50%;
+ }
+ .navigation li a {
+ color:#fff;
+ height:40px;
+ line-height:40px;
+ display:block;
+ text-align:center;
+ padding:0 10px;
+ margin-left:1px;
+ }
+ .navigation li a.active,
+ .navigation li a:hover {
+ background-color:#797d88;
+ }
+ .navigation li a.views {
+ color:#afb2b8;
+ }
+ .navigation li a.views.active,
+ .navigation li a.views:hover {
+ background-color:#202020;
+ }
+ .navigation li a.graph {
+ margin-left:40px;
+ }
+
+.section {
+ background:#f3f3f3;
+ padding:40px 0;
+ }
+
+/* Map
+---------------------------------------------*/
+.map-container {
+ position:relative;
+ height:480px;
}
#map {
- background-color:#EBE2D9;
+ background:#f3f3f3;
height:480px;
position:absolute;
- top:80px;
+ top:0;
+ left:0;
width:100%;
}
+ .zoomin,
+ .zoomer {
+ top:10px;
+ left:360px;
+ -webkit-border-radius:0;
+ border-radius:0;
+ }
+ .zoomout {
+ top:39px;
+ }
+
+.marker-popup {
+ padding:20px 20px 10px;
+ color:#404040;
+ -webkit-box-shadow:2px 2px 8px -2px rgba(0,0,0,0.5);
+ box-shadow:2px 2px 8px -2px rgba(0,0,0,0.5);
+ }
+ .marker-popup p {
+ margin:0 0 10px;
+ }
-.block_inf_type h3 {
- color:#005C9C;
- font-size:15px;
- margin:10px 1px 1px 10px;
- }
-
-.block_inf_type p {
- color:#282828;
- font-family:sans-serif;
- font-size:12px;
- line-height:22px;
- text-align:justify;
- padding:1px 35px;
- }
-
-.for_colum {
- height:300px;
- width:550px;
- float:left;
+.introduction {
+ background:rgb(255,255,255);
+ background:rgba(255,255,255,0.90);
+ position:absolute;
+ height:100%;
+ width:330px;
+ top:0;
+ left:20px;
+ z-index:100;
+ overflow:auto;
+ -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.25);
+ box-shadow:0 2px 4px rgba(0,0,0,0.25);
}
.close_block {
- background-image:url(img/close.png);
display:none;
- height:20px;
- width:19px;
}
.close_block a {
display:block;
- font-size:0;
height:20px;
width:19px;
}
-#menu_month {
- background:#ddd;
- border-bottom:5px solid #BA003F;
- border-top:1px solid #7F8A8C;
- height:40px;
- left:0;
- margin-left:auto;
- margin-right:auto;
- position:absolute;
- right:0;
- top:680px;
- z-index:7;
- }
-
-#ul_menu_month {
- background-color:#ddd;
- color:#fff;
- height:40px;
- line-height:42px;
- width:1100px;
- }
-
-#ul_menu_month li a {
- background-color:#ddd;
- color:#2E3546;
- display:block;
- height:40px;
- width:84px;
- }
-
-#middle_content {
- background-color:#fff;
- height:500px;
- left:0;
- position:absolute;
- right:0;
- top:725px;
- width:1100px;
- z-index:6;
- margin:0 auto;
- }
-
-#block_text_desription {
- background-color:#ECECEC;
+#block_statistic {
float:left;
- height:500px;
- width:300px;
- -moz-box-shadow:0 0 3px 3px #ddd;
- -webkit-box-shadow:0 0 3px 3px;
- box-shadow:0 0 3px 3px #ddd;
+ width:460px;
}
-#block_text_desription h3 {
-color:#005C9C;
-margin:5px 3px 3px;
-}
-
-#block_text_desription p {
-color:#282828;
-font-family:sans-serif;
-font-size:12px;
-line-height:25px;
-text-align:justify;
-width:280px;
-padding:3px 10px;
-}
-
-#block_statistic {
-float:left;
-height:500px;
-width:460px;
-}
-
-#img_total_percentage {
-float:left;
-height:500px;
-margin-left:-130px;
-margin-top:-60px;
-width:800px;
-}
-
-#title_statistic {
-color:#005C9C;
-font-size:35px;
-left:15px;
-position:relative;
-text-transform:uppercase;
-top:20px;
-z-index:8px;
-}
-
-#num-incident {
-color:#005C9C;
-font-size:30px;
-left:350px;
-position:absolute;
-top:380px;
-z-index:-9;
-}
-
-#block_downloads {
-background:#fff;
-height:500px;
-float:right;
-margin-left:0;
-width:300px;
-}
-
#indicate_menu {
-background:none repeat scroll 0 0 #000;
-border-bottom:2px solid #fff;
-border-top:2px solid #fff;
-height:auto;
-opacity:0.7;
-position:absolute;
-right:10px;
-top:85px;
-width:120px;
-z-index:15;
-}
-
-#indicate_menu p {
-color:#fff;
-font-weight:700;
-text-align:left;
-text-transform:uppercase;
-padding:12px;
-}
-
-#downloads {
-margin-top:35px;
-}
-
-#downloads .col {
-height:auto!important;
-min-height:170px;
-padding:20px 10px;
-}
-
-#downloads .copy {
-width:200px;
-padding:20px 20px 0;
-}
-
-.copy a {
-font-weight:700;
-color:#005C9C;
-}
-
-#downloads .dl {
-width:319px;
-border-left:1px dotted #FFF;
-padding:20px 0 10px 20px;
-}
-
-#downloads .dl a {
-font-weight:700;
-}
-
-#downloads .dl p.details {
-display:block;
-margin-left:90px;
-font-size:11px;
-line-height:16px;
-margin-right:40px;
-margin-top:54px;
-padding-top:20px;
-color:#000;
-}
-
-#downloads .limiter div {
-float:left;
-}
-
-#downloads .dl-map,#downloads .dl-data {
-background:url(img/sprite.png) no-repeat -425px -120px;
-width:80px;
-height:20px;
-display:block;
-font-weight:700;
-padding-top:75px;
-text-align:center;
-}
-
-#downloads .dl-map {
-background-position:-425px -5px;
-}
-
-#footer {
- height:150px;
- width:100%;
- z-index:6;
- }
-
-#footer .center {
- background:#2B2E31;
- height:40px;
- left:0;
+ background:white;
+ background:rgba(255,255,255,0.90);
position:absolute;
- top:0;
- right:0;
- width:1100px;
- z-index:99;
- margin:0 auto;
- }
-
-.center a {
- margin-top:7px;
- margin-left:15px;
- }
-
-#footer .center .separator {
- background:url(img/ftr-separator.png) no-repeat;
- background-position:center;
- display:block;
- font-size:0;
- margin-top:5px;
- text-align:center;
- }
+ padding:6px 20px;
+ bottom:-4px;
+ right:20px;
+ z-index:100;
+ -webkit-box-shadow:0 0 4px rgba(0,0,0,0.25);
+ box-shadow:0 0 4px rgba(0,0,0,0.25);
+ }
+ #indicate_menu p {
+ margin:0;
+ }
-#footer .center span {
- float:left;
- margin-top:25px;
- }
+ .copy a {
+ color:#005C9C;
+ }
-#footer .center img {
- float:right;
+#footer {
+ padding:60px 0;
}
+ #footer .mapbox {
+ float:right;
+ }
.popover {
- text-align:justify;
- overflow:auto;
- overflow-x:hidden;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- border-radius:3px;
- -moz-box-shadow:0 1px 10px rgba(0,0,0,0.5);
- -webkit-box-shadow:0 1px 10px rgba(0,0,0,0.5);
- box-shadow:0 1px 10px rgba(0,0,0,0.5);
background:#fff;
+ overflow:auto;
display:none;
position:fixed;
- top:20%;
+ top:40px;
left:0;
right:0;
- z-index:999;
+ z-index:5000;
width:500px;
- height:500px;
margin:0 auto;
- padding:10px 20px;
+ padding:20px;
+ -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
+ box-shadow:0 0 10px rgba(0,0,0,0.8);
}
- .popover h1 {
- text-align:center;
- margin-bottom:5px;
- color:#BA003F;
- }
- .popover p {
- line-height:25px;
- font-size:12px;
- margin-top:15px;
- text-align:justify;
+ .popover a {
+ color:#005C9C;
}
#close {
- display:none;
- position:fixed;
- width:30px;
- height:25px;
- top:20%;
- margin-top:-10px;
- left:50%;
- margin-left:255px;
- border:none;
- background:#333;
- border-radius:15px;
- -moz-box-shadow:0 0 3px #000;
- -webkit-box-shadow:0 0 3px #000;
- box-shadow:0 0 3px #000;
+ background:#303030;
color:#fff;
- font-size:20px;
- line-height:25px;
- padding-top:5px;
+ position:fixed;
+ width:40px;
+ height:40px;
+ top:20px;
+ right:20px;
+ z-index:5000;
text-align:center;
- text-shadow:0 1px 0 #000;
- z-index:99999;
+ line-height:38px;
+ font-size:22px;
+ border-radius:50%;
+ display:none;
}
- #close:hover {
- background:#444;
- }
#backdrop {
+ background:#404040;
+ background:rgba(0,0,0,0.5);
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
- background:#333;
- opacity:0.8;
- -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
- filter:alpha(opacity=80);
- z-index:99;
+ z-index:2000;
}
-#ul_menu_type_incident li,#ul_menu_month li {
- display:block;
- float:left;
- }
-
-#ul_menu_type_incident li a:hover,
-#ul_menu_type_incident li a.active {
- background-color:#bbb;
- color:#005C9C;
- }
-
-#arrow_block_inf a,
-#arrow_show_block a {
- display:block;
- font-size:0;
- height:40px;
- width:70px;
- }
-
-.statistic_by_month,
-.block_inf_type {
+.dropdown {
background:#fff;
- border:1px solid #7F8A8C;
display:none;
- height:300px;
- left:0;
+ height:360px;
position:absolute;
+ left:0;
right:0;
- top:82px;
- width:1100px;
- z-index:6;
- margin:0 auto;
+ top:80px;
+ z-index:1000;
+ -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.25);
+ box-shadow:0 2px 4px rgba(0,0,0,0.25);
}
-
-#close_block_stac,
-#close_block_inf {
- left:50%;
- margin-left:520px;
+.close {
+ display:none;
position:absolute;
top:90px;
- z-index:999;
+ right:20px;
+ z-index:1500;
}
+ .close a {
+ display:block;
+ background:#c1c3c8;
+ color:#fff;
+ width:40px;
+ height:40px;
+ text-align:center;
+ line-height:38px;
+ font-size:22px;
+ border-radius:50%;
+ }
-#ul_menu_month li a:hover,
-#ul_menu_month li a.active {
- background-color:#171717;
- color:#005C9C;
- font-weight:700;
+/*-----------------------------------
+ Lil Helpers
+-------------------------------------*/
+.centered {
+ display:block;
+ text-align:center;
}
-#middle_content a,
-.popover a {
- color:#005C9C;
+/*Markup free clearing
+Details: http: //perishablepress.com/press/2009/12/06/new-clearfix-hack*/
+.clearfix:after {
+ content:'';
+ display:block;
+ height:0;
+ clear:both;
+ visibility:hidden;
}
+* html .clearfix { height:1%; }
+*:first-child + html .clearfix { min-height:1%; }
View
195 site.js
@@ -1,10 +1,11 @@
var data_id = '0AhfXukqwpMbidDdTU3M0dE5raElpb3M2Y09ZaEJVSmc',
- map_id = 'examples.map-4l7djmvo',
+ map_id = 'examples.map-20v6611k',
markerLayer,
features,
features_summary,
interaction,
- map = mapbox.map('map'),
+ layer = mapbox.layer().id(map_id),
+ map = mapbox.map('map', layer, null, [easey_handlers.DragHandler()]),
a_tipo_incidente = [],
a_cantidad_type = [],
a_cantjanuary = [],
@@ -31,9 +32,9 @@ var data_id = '0AhfXukqwpMbidDdTU3M0dE5raElpb3M2Y09ZaEJVSmc',
'Setiembre',
'Octubre',
'Noviembre',
- 'Diciembre'];
+ 'Diciembre'
+ ];
-map.addLayer(mapbox.layer().id(map_id));
mmg_google_docs_spreadsheet_1(data_id, mapData);
map.centerzoom({
lat: -13.16048,
@@ -92,7 +93,7 @@ function fmonth(f) {
var aMonth = [];
// array de que se genera de la fecha
var aDate = [];
- var parent = document.getElementById("ul_menu_month");
+ var parent = document.getElementById('months');
//take only month from date in googlespretsheet dd/MM/yyyy
_.each(f, function (value, key) {
@@ -106,11 +107,8 @@ function fmonth(f) {
//create a tag "li" and "a" with "id=aMonth[i]" for menu month in the view
for (var i = 0; i < aMonth.length; i++) {
var new_li = document.createElement("li");
-
new_li.innerHTML = '<a href= \'#\' id=\'' + aMonth[i] + '\' > ' + monthNames[aMonth[i] - 1] + '</a>';
-
parent.appendChild(new_li);
-
}
}
@@ -173,33 +171,33 @@ function draw_main_box() {
}
//function to draw line for all incidents
-function draw_all_incedent() {
+function drawIncidents() {
var data = google.visualization.arrayToDataTable([]);
var options = {
title: 'GRAFICO DE LINEA DEL TOTAL DE INCIDENCIAS',
hAxis: {
title: 'Meses',
titleTextStyle: {
- color: 'red'
+ color: '#404040'
},
textStyle: {
- color: '#333',
- fontSize: 11
+ color: '#404040',
+ fontSize: 13
}
},
vAxis: {
title: 'Cantidad',
titleTextStyle: {
- color: 'red'
+ color: '#404040'
}
},
gridlines: {
- color: '#333',
+ color: '#404040',
count: 5
},
backgroundColor: 'transparent'
};
- var chart = new google.visualization.LineChart(document.getElementById("all_incident_type_statistic"));
+ var chart = new google.visualization.LineChart(document.getElementById('all_incident_type_statistic'));
data.addColumn('string', 'Mes');
data.addColumn('number', 'Total');
@@ -228,21 +226,21 @@ function draw_type_incedent(id_x, i) {
hAxis: {
title: 'Meses',
titleTextStyle: {
- color: 'red'
+ color: '#404040'
},
textStyle: {
- color: '#333',
+ color: '#404040',
fontSize: 11
}
},
vAxis: {
title: 'Cantidad',
titleTextStyle: {
- color: 'red'
+ color: '#404040'
}
},
gridlines: {
- color: '#333',
+ color: '#404040',
count: 4
},
backgroundColor: 'transparent'
@@ -275,30 +273,31 @@ function download_data() {
function indicateMenuIncident() {
var show_text = '',
- type_incident = $('#' + $('#ul_menu_type_incident .active').attr('id')).text(),
- month_incident = $('#' + $('#ul_menu_month li .active').attr('id')).text();
+ type_incident = $('#' + $('#masthead ul li').find('.active').attr('id')).text(),
+ month_incident = $('#' + $('#month ul li').find('.active').attr('id')).text();
- if (type_incident == 'Mostrar Todos' && month_incident == 'Todos') {
+ if (type_incident === 'Mostrar Todos' && month_incident == 'Todos') {
$('#indicate_menu').html('<p>Todos los incidentes registrados </p>');
- } else if (type_incident != 'Mostrar Todos' && month_incident == 'Todos') {
+ } else if (type_incident !== 'Mostrar Todos' && month_incident == 'Todos') {
$('#indicate_menu').html('<p>' + type_incident + ' de todos los meses</p>');
} else {
- if (type_incident == 'Mostrar Todos') {
+ if (type_incident === 'Mostrar Todos') {
type_incident = 'Todos los Incidentes';
}
- if (month_incident == 'Todos') {
+ if (month_incident === 'Todos') {
month_incident = 'Todos los Meses';
}
-
$('#indicate_menu').html('<p>' + type_incident + ' del Mes ' + month_incident + '</p>');
}
-
}
-// Document already
$(document).ready(function () {
+
+ var $headerMenu = $('#masthead ul li'),
+ $monthMenu = $('#month ul li');
+
// get event click on menu month
- $('#ul_menu_month').on('click', 'li', function (e) {
+ $monthMenu.find('a').on('click', function (e) {
var id_event_month = e.target.id;
//centralizing the map
map.ease.location({
@@ -307,16 +306,16 @@ $(document).ready(function () {
}).zoom(14).optimal();
//check if click is on all incidents
- if (id_event_month == "all_incident_month") {
+ if (id_event_month === 'all_incident_month') {
//renove all active class
- $('#ul_menu_month li a').removeClass('active');
+ $monthMenu.find('a').removeClass('active');
//put in here the active clas
$('#' + id_event_month).addClass('active');
indicateMenuIncident();
- if ($('#ul_menu_type_incident .active').attr('id') != 'all_incident_type') {
+ if ($headerMenu.find('.active').attr('id') !== 'all_incident_type') {
markerLayer.filter(function (features) {
- if (features.properties.title.replace(/\s/g, "_") == $('#ul_menu_type_incident .active').attr('id')) return true;
+ if (features.properties.title.replace(/\s/g, '_') === $headerMenu.find('.active').attr('id')) return true;
});
} else {
markerLayer.filter(function (features) {
@@ -328,69 +327,64 @@ $(document).ready(function () {
}
} else {
- //check if on menu type incident is active option "Todos Incidentes" with id=all_incident_type
- if ($('#ul_menu_type_incident .active').attr('id') == 'all_incident_type') {
- $('#ul_menu_month li a').removeClass('active');
+ // Check if on menu type incident is active option "Todos Incidentes" with id=all_incident_type
+ if ($headerMenu.find('.active').attr('id') === 'all_incident_type') {
+ $monthMenu.find('a').removeClass('active');
$('#' + id_event_month).addClass('active');
indicateMenuIncident();
//here classified by date all incidente
markerLayer.filter(function (features) {
//create arraydate and this get month from data JSON
var arraydate = features.properties.date.split("/");
- if (arraydate[1] == id_event_month) return true;
+ if (arraydate[1] === id_event_month) return true;
});
} else {
- $('#ul_menu_month li a').removeClass('active');
+ $monthMenu.find('a').removeClass('active');
$('#' + id_event_month).addClass('active');
indicateMenuIncident();
//here classified by date and by type of incidente
markerLayer.filter(function (features) {
var arraydate = features.properties.date.split('/');
//conditional double .. incident type and date
- if (arraydate[1] == e.target.id && features.properties.title.replace(/\s/g, '_') == $('#ul_menu_type_incident .active').attr('id')) return true;
+ if (arraydate[1] === e.target.id && features.properties.title.replace(/\s/g, '_') === $headerMenu.find('.active').attr('id')) return true;
});
}
-
return false;
}
-
});
+ // Dropdown: Graphic
+ $('#arrow_show_block').click(function(e) {
+ $('.statistic_by_month, #close_block_stac').show();
- //get the click on arrow under map
- $('#arrow_show_block a').on('click', function (e) {
- $('.statistic_by_month').css('display', 'block');
- $('#close_block_stac').show(200);
- $('#arrow_show_block').css('backgroundColor', '#ccc');
+ var activeMenu = $headerMenu.find('.active').attr('id') || 'all_incident_type';
- var id_active_type = $('#ul_menu_type_incident .active').attr('id');
-
- //check on menu type incident is active for show and draw line for box static all incident
- if (id_active_type == 'all_incident_type') {
- //call the function from google chart API, for create line statistic for all incident
+ // Check on menu type incident is active for show and draw line for box static all incident
+ if (activeMenu === 'all_incident_type') {
+ // Call the function from google chart API, for create line statistic for all incident
$('.statistic_by_month').attr('id', 'all_incident_type_statistic');
- draw_all_incedent();
- google.setOnLoadCallback(draw_all_incedent);
+ drawIncidents();
+ google.setOnLoadCallback(drawIncidents);
} else {
- //here get on menu type incident which is active for draw an show
- var name_active_tipe = $('#ul_menu_type_incident .active').attr('data-layer') - 1;
+ // Here get on menu type incident which is active for draw an show
+ var name_active_tipe = $headerMenu.find('.active').attr('data-layer') - 1;
- //call the function from google chart API, for create line statistic for type incident
- draw_type_incedent(id_active_type + '_statistic', name_active_tipe);
+ // Call the function from google chart API, for create line statistic for type incident
+ draw_type_incedent(activeMenu + '_statistic', name_active_tipe);
google.setOnLoadCallback(draw_type_incedent);
}
- //close other block information
+ // Close other block information
$('.block_inf_type').css('display', 'none');
- $('#arrow_block_inf').css('background-color', '#292929');
+ $('#arrow_block_inf').find('a').css('background-color', '#292929');
$('#close_block_inf').css('display', 'none');
+ return false;
});
-
// get event click on menu type incident
- $('#ul_menu_type_incident li').click(function (e) {
+ $headerMenu.find('a').click(function (e) {
var id_event_type = e.target.id;
//centralizing the map
@@ -400,66 +394,65 @@ $(document).ready(function () {
}).zoom(15).optimal();
//check is is active on menu type "Mostrar Todos "
- if (id_event_type == 'all_incident_type') {
- $('#ul_menu_type_incident li a').removeClass('active');
+ if (id_event_type === 'all_incident_type') {
+ $headerMenu.find('a').removeClass('active');
$('#' + id_event_type).addClass('active');
indicateMenuIncident();
//check to enable block where statistics show a month
- if ($('.close_block_stac').css('display') == 'block') { //esto estyo comentando
+ if ($('.close_block_stac').css('display') === 'block') { //esto estyo comentando
$('.statistic_by_month').attr('id', 'all_incident_type_statistic');
//draw the graphics statistic
- draw_all_incedent();
- google.setOnLoadCallback(draw_all_incedent);
+ drawIncidents();
+ google.setOnLoadCallback(drawIncidents);
}
- if ($('#ul_menu_month .active').attr('id') != 'all_incident_month') {
+ if ($monthMenu.find('.active').attr('id') !== 'all_incident_month') {
markerLayer.filter(function (features) {
var arraydate = features.properties.date.split('/');
//here classified by type of incidente and by date (month)
- if (arraydate[1] == $('#ul_menu_month .active').attr('id')) return true;
+ if (arraydate[1] == $monthMenu.find('.active').attr('id')) return true;
});
} else {
markerLayer.filter(function (features) {
// Returning true for all markers shows everything.
return true;
});
- return false;
}
} else {
//check if is active in menu month "Todos"
- if ($('#ul_menu_month .active').attr('id') == "all_incident_month") {
- $('#ul_menu_type_incident li a').removeClass('active');
+ if ($monthMenu.find('.active').attr('id') == "all_incident_month") {
+ $headerMenu.find('a').removeClass('active');
$('#' + id_event_type).addClass('active');
indicateMenuIncident();
markerLayer.filter(function (features) {
// replace the blanks with subindent and compared with the ID
- if (features.properties.title.replace(/\s/g, '_') == id_event_type) return true;
+ if (features.properties.title.replace(/\s/g, '_') === id_event_type) return true;
});
} else {
- $('#ul_menu_type_incident li a').removeClass('active');
+ $headerMenu.find('a').removeClass('active');
$('#' + id_event_type).addClass('active');
indicateMenuIncident();
markerLayer.filter(function (features) {
var arraydate = features.properties.date.split('/');
//here classified by type of incidente and by date (month)
- if (features.properties.title.replace(/\s/g, '_') == id_event_type && arraydate[1] == $('#ul_menu_month .active').attr('id')) return true;
+ if (features.properties.title.replace(/\s/g, '_') === id_event_type && arraydate[1] == $monthMenu.find('.active').attr('id')) return true;
});
}
// check to enable block where statistics show a month
- if ($('#close_block_stac').css('display') == 'block') {
+ if ($('#close_block_stac').css('display') === 'block') {
$('.statistic_by_month').css('display', 'block');
//hide box close in statistic
- $("#close_block_stac").show(200);
+ $("#close_block_stac").show();
} else {
$('.statistic_by_month').css('display', 'none');
- $('#close_block_stac').hide(200);
+ $('#close_block_stac').hide();
}
//agrega una id para mostrar la imagen ejem id=Robo_statistic
@@ -470,60 +463,52 @@ $(document).ready(function () {
//draw the graphics statistic by type of incident
draw_type_incedent(id_event_type + '_statistic', number_name);
google.setOnLoadCallback(draw_type_incedent);
- return false;
}
- });
+ return false;
+ });
$('a[href="#opendata"]').click(function (e) {
- e.preventDefault();
$('#backdrop').fadeIn(200);
- $('#opendata').show(200);
- $('#close').show(200);
+ $('#opendata, #close').show();
+ return false;
});
$('a[href="#howto"]').click(function (e) {
- e.preventDefault();
$('#backdrop').fadeIn(200);
- $('#howto').show(200);
- $('#close').show(200);
+ $('#howto, #close').show();
+ return false;
});
$('#close').click(function (e) {
- e.preventDefault();
$('#backdrop').fadeOut(200);
- $('#opendata').hide(200);
- $('#howto').hide(200);
- $('#close').hide(200);
+ $('#opendata, #howto, #close').hide();
+ return false;
});
-
$('#arrow_block_inf').click(function (e) {
- e.preventDefault();
$('.block_inf_type').css('display', 'block');
- $('#close_block_inf').show(200);
- $('#arrow_block_inf').css('background-color', '#ccc');
+ $('#close_block_inf').show();
//close other block static
$('.statistic_by_month').css('display', 'none');
- $('#arrow_show_block').css('background-color', '#292929');
- $$('#close_block_stac').css('display', 'none');
-
+ $('#arrow_show_block').find('a').css('background-color', '#292929');
+ $('#close_block_stac').css('display', 'none');
+ return false;
});
$('#close_block_inf').click(function (e) {
- e.preventDefault();
- $('#arrow_block_inf').css('background-color', '#292929');
- $('.zoomer').show(200);
- $('.block_inf_type').hide(200);
- $('#close_block_inf').hide(200);
+ $('#arrow_block_inf').find('a').css('background-color', '#292929');
+ $('.zoomer').show();
+ $('.block_inf_type').hide();
+ $('#close_block_inf').hide();
+ return false;
});
//get the click fro close block statistic line
$('#close_block_stac').click(function () {
- $(this).hide(200);
- $('.statistic_by_month').css('display', 'none');
- $('#arrow_show_block').css('display', 'block');
- $('#arrow_show_block').css('background-color', '#292929');
+ $('.dropdown').hide();
+ $('.views').css('background-color', 'transparent')
+ $('#arrow_show_block').find('a').css('background-color', 'transparent');
});
});

0 comments on commit bfb4dda

Please sign in to comment.