CINXE.COM

BikeMaps

<!DOCTYPE html> <html> <head> <title>BikeMaps</title> <meta name="description" content="Map your cycling incidents, hazard, and theft locations so they can be analyzed to identify hot spots of cycling safety, risk, and crime."/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <!-- Browser icon --> <link rel="shortcut icon" type="image/x-icon" href="/static/mapApp/images/BikeMapsORG_Logo.ico" /> <!-- Allow fullscreen webapps on iOS and Chrome Mobile --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <!-- Google verification --> <meta name="google-site-verification" content="sHpQWUFpj7aSwFlam5B_xWmrBr_nEa49gu7IrFYe8aE" /> <!-- EXTERNAL CSS --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="/static/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> <!-- Leaflet --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <!-- Leaflet plugins --> <link rel="stylesheet" href="/static/leaflet/plugins/extra-markers/css/leaflet.extra-markers.min.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" /> <link href="/static/mapApp/css/common.css" rel="stylesheet"> <!-- Bootstrap --> <link rel="stylesheet" href="/static/bootstrap-slider/css/bootstrap-slider.min.css"> <link href="/static/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"/> <!-- Leaflet plugins --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/MarkerCluster.Default.css" integrity="sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" integrity="sha512-gc3xjCmIy673V6MyOAZhIW93xhM9ei1I+gLbmFjUHIjocENRsLX/QUE1htk5q1XV2D/iie/VQ8DXI6Vu8bexvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/static/leaflet/plugins/usermarker/leaflet.usermarker.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.76.0/dist/L.Control.Locate.min.css" /> <!-- Internal --> <link rel="stylesheet" href="/static/mapApp/css/index.css"> <link rel="stylesheet" href="/static/mapApp/css/forms.css"> <!-- Open Graph data --> <meta property="og:title" content="BikeMaps" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://bikemaps.org/" /> <meta property="og:image" content="https://bikemaps.org/static/mapApp/images/BikeMapsSocialMediaLogo.jpg" /> <meta property="og:image:secure_url" content="https://bikemaps.org/static/mapApp/images/BikeMapsSocialMediaLogo.jpg" /> <meta property="og:description" content="Map your cycling incidents, hazard, and theft locations so they can be analyzed to identify hot spots of cycling safety, risk, and crime." /> <meta property="og:site_name" content="BikeMaps" /> <meta property="fb:admins" content="569635572" /> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-TGNTWHQE1C"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-TGNTWHQE1C'); </script> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Activar navegación</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/es/" class="navbar-brand"><img src="/static/mapApp/images/BikeMapsORG_Logo_notxt_sm.png"> BikeMaps.org</a> </div> <!-- {% endifequal % --> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" role="navigation"> <li class="active" ><a href="/es/">Inicio <span class="fa fa-map-marker"></span></a></li> <li ><a href="/es/vis/">Visualización <span class="fa fa-bar-chart"></span></a></li> <li ><a href="/es/blog/">Blog <span class="fa fa-newspaper-o"></span></a></li> <li ><a href="/es/about/">Acerca de <span class="fa fa-leaf"></span></a></li> </ul> <ul class="nav navbar-nav navbar-right"> <!-- brute force method of changing language --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-globe"></span> Idioma<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="https://bikemaps.org">English</a></li> <li><a href="https://bikemaps.org/es">Español</a></li> <li><a href="https://bikemaps.org/fr">Français</a></li> <li><a href="https://bikemaps.org/is">Íslenska</a></li> <li><a href="https://bikemaps.org/fi">Suomeksi</a></li> <li><a href="https://bikemaps.org/da/@55.7543113,10.5486379,6z">Dansk</a></li> </ul> </li> <li><a href="https://walkrollmap.org/" target="_blank" rel="noopener noreferrer" class="navbar-icon" style="height:35px; margin-right:0px"><img src="/static/mapApp/images/WalkRollMapLogo.png"></a></li> <!-- Social media --> <li><a href="https://www.facebook.com/BikeMaps.org" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/BikeMapsTeam" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a></li> <!-- Logged in features --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-user"></span> Invitado<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/es/user/login/?next=/es/">Iniciar sesión</a></li> <li><a href="/es/user/register/">Registrar</a></li> </ul> </li> </ul> </div> </div> </nav> <!-- container for alert popups --> <div id="message"> </div> <!-- container for message after report submitted popUp--> <div id="followUpMsgPopUp"> </div> <div class="page-body"> <div id="map"> <div id="legend" class="leaflet-container leaflet-control-container overflow-auto"> <div class="leaflet-top leaflet-right"> <div class="leaflet-control-layers leaflet-control" aria-haspopup="true"> <a class="leaflet-control-layers-toggle" href="#" title="Layers"></a> <form class="leaflet-control-layers-list"> <div class="leaflet-control-layers-overlays"> <span class="hidden-xs hidden-sm"> <div id="legend-about" class="legend-group-title"> Acerca de </div> <div class="legend-group"> BikeMaps.org es una herramienta de crowdsource para el mapeo global de la seguridad en bicicleta. Usando el botón <span class="marker-icon"></span>, agregue sus propios datos sobre accidentes de ciclismo, casi accidentes, peligros y robos. <a href="/es/about/">Más información</a> </div> </span> <div class="legend-group-title">Capas</div> <div class="legend-group"> <input class="layer-toggle" type="checkbox" value="incidentAppliedLayers" checked> Incidente <div class="marker-group legend-subtext collapse in"> <input type="checkbox" id="collisionCheckbox" checked><img src="/static/mapApp/images/custom_icons/collision_icon.png" alt="Collision icon" class="img-responsive img-circle center-block" height="20" width="20" style="display: inline; margin-left: 4px;"><small> Informe de colisión ciudadana</small><br> <input type="checkbox" id="nearmissCheckbox" checked><img src="/static/mapApp/images/custom_icons/nearmiss_icon.png" alt="Nearmiss icon" class="img-responsive img-circle center-block" height="20" width="20" style="display: inline; margin-left: 4px;"><small> Informe de casi accdiente ciudadano</small><br> <input type="checkbox" id="hazardCheckbox"checked> <i class="hazard fa fa-warning"></i><small> Peligro para ciclistas</small><br> <input type="checkbox" id="theftCheckbox"checked> <i class="theft fa fa-unlock"></i><small> Robo de bicicleta</small><br> <input type="checkbox" id="newInfrastructureCheckbox"checked> <i class="newInfrastructure fa fa-star"></i><small> Nueva infraestructura</small><br> <input id="filterCheckbox" type="checkbox"> <span class="fa-stack"> <i class="fa fa-filter fa-stack-1x"></i> <i class="fa fa-circle-thin fa-stack-2x"></i> </span></i><small> Date filter</small> <div class="filter"> <div class="date-container"> <small><span class="start-date"></span></small> <small><span class="end-date pull-right"></span></small> </div> <input class="slider"></input> </div> </div> </div> <div class="legend-group"> <input class="layer-toggle" id="stravaCheckbox" type="checkbox" value="stravaHM" checked> Datos de usuarios de Strava <a data-target="#about-strava" data-toggle="modal" href="#"><i class="fa fa-question-circle fa-1x"></i></a><br> <div class="legend-subtext collapse in"> <small class="strava-gradient gradient-bar"> <div class="pull-left strava-gradient-label">menos</div> <div class="pull-right strava-gradient-label">más</div> </small> </div> </div> <div class="legend-group"> <input class="layer-toggle" type="checkbox" value="alertAreas" checked> Áreas de Alerta <a data-target="#about-alert-areas" data-toggle="modal" href="#"><i class="fa fa-question-circle fa-1x"></i></a><br> <div class="legend-subtext collapse in"> <small class="alert-area-box"></small> </div> </div> <div class="legend-group-title">Attribution</div> <div class="legend-group"> <div id="basemap-about"> Basemaps by <a href='https://www.cyclosm.org/'>CyclOSM</a> and <a href='https://www.hotosm.org/'>HotOSM</a>. Report and fix infrastructure data issues on <a href='https://www.openstreetmap.org/fixthemap'>OpenStreetMap.</a> </div> <div align="right"> <a href="/es/disclaimer/" target="_blank ">Descargo de responsabilidad</a> </div> </div> </div> </div> </form> </div> </div> </div> <!-- Use 'start report' button on web app, double tap action on mobile --> <div id="startButtonContainer"> <button type="button" id="startReportButton" class="btn btn-default btn-md"> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Start a report </button> <button type="button" id="cancelDrawButton" class="btn btn-default btn-md"> Cancelar </button> </div> <!-- Overlay that displays number of markers loaded to map- helpful for debugging or watching data load. Uncomment calls to updateCounter in index-helpers.js as well as pointCounterContainer in overlays.html to enable. --> <!-- <div id="pointCounterContainer" class="leaflet-container leaflet-bottom leaflet-left"> <p>Markers loaded: <span id="markersLoaded"></span> Markers displayed: <span id="markersApplied"</span></p> </div> --> </div> </div> <!-- EXTERNAL JS --> <!-- JQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrap --> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <!-- Leaflet & leaflet plugins--> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <script src="/static/leaflet/plugins/extra-markers/js/leaflet.extra-markers.min.js"></script> <!-- D3 --> <script src="https://d3js.org/d3.v5.js"></script> <!-- Moment --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script> <!-- Bootstrap --> <script src="/static/bootstrap-slider/bootstrap-slider.js"></script> <script src="/static/datetimepicker/js/bootstrap-datetimepicker.js"></script> <script src="/static/datetimepicker/js/locales/bootstrap-datetimepicker.de.js" charset="UTF-8"></script> <!-- Leaflet plugins --> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/leaflet.markercluster.js" integrity="sha512-pWPELjRaw2ZdoT0PDi7iRpRlk1XX3rtnfejJ/HwskyojpHei+9hKpwdphC4yssNt4FM0TjMQOmMrk6ZYSn274w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" integrity="sha512-ozq8xQKq6urvuU6jNgkfqAmT7jKN2XumbrX1JiB3TnF7tI48DPI4Gy1GXKD/V3EExgAs1V+pRO7vwtS1LHg0Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="/static/leaflet/plugins/usermarker/leaflet.usermarker.js"></script> <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.76.0/src/L.Control.Locate.min.js"></script> <!--Referencing the 3.0.2 version of the Esri-Leaflet plugin for compatibility with Leaflet 1.7.1 --> <script src="https://unpkg.com/esri-leaflet@3.0.2/dist/esri-leaflet.js" integrity="sha512-myckXhaJsP7Q7MZva03Tfme/MSF5a6HC2xryjAM4FxPLHGqlh5VALCbywHnzs2uPoF/4G/QVXyYDDSkp5nPfig==" crossorigin=""></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script type="text/javascript" src="/es/jsi18n/"></script> <script type="text/javascript"> var LANGUAGE_CODE = "es"; </script> <!-- Turf spatial analysis library --> <script src="/static/mapApp/js/geofence/outTurf.js"></script> <script src="/static/mapApp/js/icons.js"></script> <script src="/static/mapApp/js/map.js"></script> <script src="/static/mapApp/js/csrfheader.js"></script> <script> // Convert database querysets to geojsons //collisions = null, //nearmisses = null, //hazards = null, //thefts = null, //var newInfrastructures = null, geofences = {"type": "FeatureCollection", "features": [], "crs": {"type": "link", "properties": {"href": "http://spatialreference.org/ref/epsg/4326/", "type": "proj4"}}}; // if zoom parameter in url, set variables // Display number of points in user dropdown if admin is logged in </script> <script src="/static/mapApp/js/index-helpers.js"></script> <script src="/static/mapApp/js/index.js"></script> <script src="/static/mapApp/js/legend_collapse.js"></script> <!-- Load Crispy-froms form template renderer --> <!-- Modal form --> <div class="modal fade" id="incidentForm" tabindex="-1" role="dialog" aria-labelledby="incidentForm" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="incidentForm">Enviar un nuevo informe</h4> </div> <div class="modal-body"> <label class="control-label">¿Qué tipo de informe es este?</label> <!-- Nav Tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#incidentReport" role="tab" data-toggle="tab">Colisión o caída</a></li> <li role="presentation"><a href="#nearmissReport" role="tab" data-toggle="tab">Casi accdiente</a></li> <li role="presentation"><a href="#hazardReport" role="tab" data-toggle="tab">Peligro</a></li> <li role="presentation"><a href="#theftReport" role="tab" data-toggle="tab">Robo</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="incidentReport"> <form action="/es/incident_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-3831"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-3831" href="#detalles-de-la-colision">Detalles de la colisión</a> </h4> </div> <div id="detalles-de-la-colision" class="panel-collapse collapse in" > <div class="panel-body"> <input type="hidden" name="geom" id="point"> <div id="div_id_personal_involvement" class="form-group"> <label for="incident_personal_involvement" class="control-label requiredField"> ¿Estuviste involucrado(a) de manera directa en el incidente?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="personal_involvement" id="incident_personal_involvement" class="select form-control" required> <option value="" selected>---------</option> <option value="Yes">Si, esto me pasó a mi.</option> <option value="No">No, yo fui testigo de que esto le sucedió a otra persona.</option> </select> </div> </div> <div id="div_id_witness_vehicle" class="form-group"> <label for="incident_witness_vehicle" class="control-label "> ¿En qué ibas viajando? </label> <div class="controls "> <select name="witness_vehicle" id="incident_witness_vehicle" class="select form-control"> <option value="" selected>---------</option> <option value="Bicycle">Bicicleta</option> <option value="E-scooter">E-scooter</option> <option value="Pedestrian">Yo era un peatón</option> <option value="Driving">Yo estaba manejando/conduciendo</option> </select> </div> </div> <!-- Util from http://www.malot.fr/bootstrap-datetimepicker/demo.php --> <!-- Help from https://gist.github.com/eguevara2012/2821026 --> <!-- KNOWN ISSUES WHICH HAVE BEEN REPORTED: Calendar view 3 displays wrong month selection and end date (displays 2 months previous) --> <div id="div_id_date" class="form-group "> <label for="id_incident_date" class="control-label requiredField"> ¿Cuándo fue el incidente?<span class="asteriskField">*</span> </label> <div class="controls"> <div class="input-group date form_datetime" id="incident_date" data-date-format='yyyy-mm-dd hh:ii' data-link-field="id_date" > <input type="text" name="date" id="incident_date" autocomplete="off" class="datetimeinput form-control" required> <!-- <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> --> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> <span class="add-on "></span> </div> </div> </div> <script type="text/javascript"> $('#incident_date').datetimepicker({ autoclose: 1, todayBtn: 0, autoclose: 1, todayHighlight: 1, maxView: 2, startView: 2, forceParse: 0, showMeridian: 1, initialDate: "2025-02-17T12:00:08Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "es", }); </script> <div id="div_id_i_type" class="form-group"> <label for="incident_i_type" class="control-label requiredField"> ¿Qué tipo de incidente fue?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="i_type" id="incident_i_type" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Colisión"> <option value="Collision with stationary object or vehicle">Colisión con un objeto o vehículo estacionado </option> <option value="Collision with moving object or vehicle">Colisión con un objeto o vehículo en movimiento</option> </optgroup> <optgroup label="Casi accdiente"> <option value="Near collision with stationary object or vehicle">Casi accdiente con un objeto o vehículo estacionado</option> <option value="Near collision with moving object or vehicle">Casi accdiente con un objeto o vehículoen movimiento</option> </optgroup> <optgroup label="Caída"> <option value="Fall">Perdí el control y me caí.</option> </optgroup> </select> </div> </div> <div id="div_id_incident_with" class="form-group"> <label for="incident_incident_with" class="control-label requiredField"> ¿Con qué tipo de objeto chocaste o casi chocaste?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="incident_with" id="incident_incident_with" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Vehículo"> <option value="Vehicle, head on">De frente</option> <option value="Vehicle, side">Impacto lateral</option> <option value="Vehicle, angle">Ángulo de impacto</option> <option value="Vehicle, rear end">Parte trasera</option> <option value="Vehicle, turning right">Girando a la derecha</option> <option value="Vehicle, turning left">Girando a la izquierda</option> <option value="Vehicle, passing">Pasando</option> <option value="Vehicle, open door">Puerta de vehículo abierta</option> </optgroup> <optgroup label="Persona/animal"> <option value="Another cyclist">Otro ciclista</option> <option value="Pedestrian">Peatón</option> <option value="Animal">Animal</option> <option value="E-scooter">E-scooter</option> </optgroup> <optgroup label="Infrastructura"> <option value="Curb">Borde de la acera</option> <option value="Train Tracks">Vías de tren</option> <option value="Pothole">Bache</option> <option value="Lane divider">Divisor de carril</option> <option value="Sign/Post">Señal/poste</option> <option value="Roadway">Calzada</option> </optgroup> <option value="Other">Otro (por favor describe)</option> </select> </div> </div> <div id="div_id_bicycle_type" class="form-group"> <label for="incident_bicycle_type" class="control-label "> ¿Qué tipo de bicicleta estabas usando? </label> <div class="controls "> <select name="bicycle_type" id="incident_bicycle_type" class="select form-control"> <option value="" selected>---------</option> <option value="Personal">Personal (mi propia bicicleta o la de un amigo/a)</option> <option value="Bike share">Porgrama de comprartir biciletas</option> <option value="Bike rental">Bicicleta rentada</option> <option value="E-scooter">E-scooter</option> </select> </div> </div> <div id="div_id_ebike" class="form-group"> <label for="incident_ebike" class="control-label "> ¿El incidente involucró una bicicleta eléctrica asistida por pedales (eBike)? </label> <div class="controls "> <select name="ebike" id="incident_ebike" class="select form-control"> <option value="" selected>---------</option> <option value="Yes">Si</option> <option value="No">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_ebike_class" class="form-group"> <label for="incident_ebike_class" class="control-label "> What class of e-bike were you riding? </label> <div class="controls "> <select name="ebike_class" id="incident_ebike_class" class="select form-control"> <option value="" selected>---------</option> <option value="Pedal assist under 20 mph">Pedal assist up to 20 mph (32 km/h)</option> <option value="Throttle assist under 20 mph">Throttle assist up to 20 mph (32 km/h)</option> <option value="Pedal or throttle assist over 20mph">Pedal or throttle assist over 20 mph (32 km/h)</option> </select> </div> </div> <div id="div_id_ebike_speed" class="form-group"> <label for="incident_ebike_speed" class="control-label "> Approximately what speed was your e-bike traveling at the time? </label> <div class="controls "> <select name="ebike_speed" id="incident_ebike_speed" class="select form-control"> <option value="" selected>---------</option> <option value="Under 5 mph">Under 5 mph (8 km/h)</option> <option value="Between 5-20 mph">Between 5-20mph (8-32 km/h)</option> <option value="Over 20 mph">Over 20mph (32 km/h)</option> </select> </div> </div> <div id="div_id_injury" class="form-group"> <label for="incident_injury" class="control-label requiredField"> ¿Te lastimaste?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="injury" id="incident_injury" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Si"> <option value="Injury, no treatment">Tratamiento médico.</option> <option value="Injury, saw family doctor">Acudí con un médico familiar.</option> <option value="Injury, hospital emergency visit">Visited the hospital emergency dept.</option> <option value="Injury, hospitalized">Estancia por la noche en el hospital.</option> </optgroup> <optgroup label="No"> <option value="No injury">Ninguna herida</option> </optgroup> <optgroup label="Desconocido"> <option value="Unknown">No lo sé</option> </optgroup> </select> </div> </div> <div id="div_id_impact" class="form-group"> <label for="incident_impact" class="control-label requiredField"> ¿Cómo afectó este incidente a tu andar bicicleta?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="impact" id="incident_impact" class="select form-control" required> <option value="" selected>---------</option> <option value="None">Ningún impacto</option> <option value="More careful">Ahora tengo más cuidado de donde/cuando/como ando en bicicleta</option> <option value="Bike less">Uso menos la bicicleta</option> <option value="More careful and bike less">Ahora tengo más cuidado de donde/cuando/como ando en bicicleta Y ando menos</option> <option value="Stopped biking">No he andado en bicicleta desde entonces.</option> <option value="Too soon">Demasiado pronto para decir</option> <option value="Witness">No estuve directamente involucrado(a).</option> </select> </div> </div> <div id="div_id_trip_purpose" class="form-group"> <label for="incident_trip_purpose" class="control-label "> ¿Cuál era el propósito de tu viaje? </label> <div class="controls "> <select name="trip_purpose" id="incident_trip_purpose" class="select form-control"> <option value="" selected>---------</option> <option value="Commute">Al/desde el trabajo o a la escuela</option> <option value="Exercise or recreation">Ejercicio o recreación </option> <option value="Social reason">Motivo social (por ejemplo, películas, visitas a amigos).</option> <option value="Personal business">Negocios personales</option> <option value="During work">Durante el trabajo</option> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="collision_details" class="control-label "> Por favor proporciona una breve descripción del incidente </label> <div class="controls "> <textarea name="details" cols="40" rows="10" maxlength="500" id="collision_details" placeholder="necesario" class="textarea form-control"> </textarea> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-3831" href="#incident-conditions">Condiciones</a> </h4> </div> <div id="incident-conditions" class="panel-collapse collapse" > <div class="panel-body"> <div id="div_id_road_conditions" class="form-group"> <label for="incident_road_conditions" class="control-label "> ¿Cuáles fueron las condiciones de la calle? </label> <div class="controls "> <select name="road_conditions" id="incident_road_conditions" class="select form-control"> <option value="" selected>---------</option> <option value="Dry">Seco</option> <option value="Wet">Mojado</option> <option value="Loose sand, gravel, or dirt">Arena suelta, grava o tierra</option> <option value="Icy">Helado</option> <option value="Snowy">Nevado</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_sightlines" class="form-group"> <label for="incident_sightlines" class="control-label "> ¿Cómo eran las líneas de visión? </label> <div class="controls "> <select name="sightlines" id="incident_sightlines" class="select form-control"> <option value="" selected>---------</option> <option value="No obstructions">Sin obstrucciones</option> <option value="View obstructed">Vista obstruida </option> <option value="Glare or reflection">Brillo o reflejo</option> <option value="Obstruction on road">Obstrucción en la calle</option> <option value="Don&#x27;t Remember">Don&#x27;t Remember</option> </select> </div> </div> <div id="div_id_cars_on_roadside" class="form-group"> <label for="incident_cars_on_roadside" class="control-label "> ¿Había autos estacionados en la calle? </label> <div class="controls "> <select name="cars_on_roadside" id="incident_cars_on_roadside" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_bike_lights" class="form-group"> <label for="incident_bike_lights" class="control-label "> ¿Estabas usando luces de bicicleta? </label> <div class="controls "> <select name="bike_lights" id="incident_bike_lights" class="select form-control"> <option value="" selected>---------</option> <option value="NL">Sin luces</option> <option value="FB">Luces delanteras y traseras</option> <option value="F">Solo luces delanteras</option> <option value="B">Solo luces traseras</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_terrain" class="form-group"> <label for="incident_terrain" class="control-label "> ¿Cómo era el terreno? </label> <div class="controls "> <select name="terrain" id="incident_terrain" class="select form-control"> <option value="" selected>---------</option> <option value="Uphill">De subiida</option> <option value="Downhill">De bajada</option> <option value="Flat">Plano</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_direction" class="form-group"> <label for="incident_direction" class="control-label "> ¿Hacia qué dirección te dirigías? </label> <div class="controls "> <select name="direction" id="incident_direction" class="select form-control"> <option value="" selected>---------</option> <option value="N">N</option> <option value="NE">NE</option> <option value="E">E</option> <option value="SE">SE</option> <option value="S">S</option> <option value="SW">SO</option> <option value="W">O</option> <option value="NW">NW</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_turning" class="form-group"> <label for="incident_turning" class="control-label "> ¿Cómo te estabas moviendo? </label> <div class="controls "> <select name="turning" id="incident_turning" class="select form-control"> <option value="" selected>---------</option> <option value="Heading straight">En dirección recta</option> <option value="Turning left">Girando a la izquierda</option> <option value="Turning right">Girando a la derecha</option> <option value="I don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_intersection" class="form-group"> <label for="incident_intersection" class="control-label "> ¿El incidente ocurrió en una intersección? </label> <div class="controls "> <select name="intersection" id="incident_intersection" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_aggressive" class="form-group"> <label for="incident_aggressive" class="control-label "> ¿El conductor fue agresivo? </label> <div class="controls "> <select name="aggressive" id="incident_aggressive" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-3831" href="#incident-personal-details">Detalles personales</a> </h4> </div> <div id="incident-personal-details" class="panel-collapse collapse" > <div class="panel-body"> <a class="text-info" data-toggle="collapse" aria-expanded="false" aria-controls="why-personal" href=".tab-pane.active .why-personal"><span class="glyphicon glyphicon-question-sign"></span> <strong>¿Por qué pedimos datos personales? </strong></a><div class="why-personal collapse" > <div class="well" > Los datos personales, como la edad y el sexo, se recopilan de forma rutinaria en investigaciones de salud, incluidos estudios que examinan lesiones en bicicleta (por ejemplo, Cripton et al.2015). Además, se ha demostrado que detalles como la experiencia del conductor y el género son predictores importantes de la seguridad y el riesgo del ciclismo (Beck et al. 2007). El objetivo de BikeMaps.org es reunir datos más completos para evaluar mejor la seguridad y el riesgo del ciclismo. Proporcionar datos personales nos permitirá completar con mayor precisión estos vacíos de datos. </div> </div> <div id="div_id_source" class="form-group"> <label for="incident_source" class="control-label "> ¿Dónde te enteraste por primera vez sobre BikeMaps.org? </label> <div class="controls "> <select name="source" id="incident_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directamente por medio del equipo de BikeMaps.org</option> <option value="BikeMaps swag">Por los promocionales de BikeMaps.org swag (por ejemplo, el protector para asiento, botella de agua, etc.) sin haber conocido al equipo</option> <option value="Traditional media">Medios tradicionales (periódico, TV, radio)</option> <option value="Another website">Vinculo desde otro sitio web</option> <option value="Word of mouth">De boca en boca</option> <option value="Social media">Redes sociales (por ejemplo, Twitter, Instagram, Facebook)</option> <option value="Other">Otro</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_age" class="form-group"> <label for="incident_age" class="control-label "> ¿Cuál es tu año de nacimiento? </label> <div class="controls "> <select name="age" id="incident_age" class="select form-control"> <option value="" selected>---------</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> </select> </div> </div> <div id="div_id_birthmonth" class="form-group"> <label for="incident_birthmonth" class="control-label "> ¿Cuál es tu mes de nacimiento? </label> <div class="controls "> <select name="birthmonth" id="incident_birthmonth" class="select form-control"> <option value="" selected>---------</option> <option value="1">Enero</option> <option value="2">Febrero</option> <option value="3">Marzo</option> <option value="4">Abril</option> <option value="5">Mayo</option> <option value="6">Junio</option> <option value="7">Julio</option> <option value="8">Agosto</option> <option value="9">Septiembre</option> <option value="10">Octubre</option> <option value="11">Noviembre</option> <option value="12">Diciembre</option> </select> </div> </div> <div id="div_id_gender" class="form-group"> <label for="id_gender" class="control-label "> Please select your gender (choose all that apply) </label> <div class="controls " choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender"> <label class="checkbox-inline" for="id_gender_1"> <input type="checkbox" name="gender" id="id_gender_1" value="1" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Woman </label> <label class="checkbox-inline" for="id_gender_2"> <input type="checkbox" name="gender" id="id_gender_2" value="2" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Man </label> <label class="checkbox-inline" for="id_gender_3"> <input type="checkbox" name="gender" id="id_gender_3" value="3" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Non-binary </label> <label class="checkbox-inline" for="id_gender_4"> <input type="checkbox" name="gender" id="id_gender_4" value="4" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Genderfluid or Gender nonconforming </label> <label class="checkbox-inline" for="id_gender_5"> <input type="checkbox" name="gender" id="id_gender_5" value="5" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Two-Spirit </label> <label class="checkbox-inline" for="id_gender_6"> <input type="checkbox" name="gender" id="id_gender_6" value="6" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Transgender </label> <label class="checkbox-inline" for="id_gender_7"> <input type="checkbox" name="gender" id="id_gender_7" value="7" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Agender </label> <label class="checkbox-inline" for="id_gender_8"> <input type="checkbox" name="gender" id="id_gender_8" value="8" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Prefer not to say </label> <label class="checkbox-inline" for="id_gender_9"> <input type="checkbox" name="gender" id="id_gender_9" value="9" choices="[(&#x27;F&#x27;, &#x27;Woman&#x27;), (&#x27;M&#x27;, &#x27;Man&#x27;), (&#x27;NBY&#x27;, &#x27;Non-binary&#x27;), (&#x27;GNC&#x27;, &#x27;Genderfluid or Gender nonconforming&#x27;), (&#x27;TS&#x27;, &#x27;Two-Spirit&#x27;), (&#x27;T&#x27;, &#x27;Transgender&#x27;), (&#x27;A&#x27;, &#x27;Agender&#x27;), (&#x27;P&#x27;, &#x27;Prefer not to say&#x27;), (&#x27;O&#x27;, &#x27;Another option not listed here&#x27;)]" id="incident_gender">Another option not listed here </label> </div> </div> <div id="div_id_gender_additional" class="form-group"> <label for="incident_gender_additional" class="control-label "> If you selected 'another option', optionally describe here: </label> <div class="controls "> <textarea name="gender_additional" cols="40" rows="1" maxlength="100" id="incident_gender_additional" class="textarea form-control"> </textarea> </div> </div> <div id="div_id_regular_cyclist" class="form-group"> <label for="incident_regular_cyclist" class="control-label "> ¿Pedaleas al menos una vez a la semana? </label> <div class="controls "> <select name="regular_cyclist" id="incident_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_helmet" class="form-group"> <label for="incident_helmet" class="control-label "> ¿Estabas usando un casco? </label> <div class="controls "> <select name="helmet" id="incident_helmet" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> </div> </div> </div> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="nearmissReport"> <form action="/es/nearmiss_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-1076"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-1076" href="#detalles-de-la-casi-accidente">Detalles de la casi accidente</a> </h4> </div> <div id="detalles-de-la-casi-accidente" class="panel-collapse collapse in" > <div class="panel-body"> <input type="hidden" name="geom" id="nearmisspoint"> <div id="div_id_personal_involvement" class="form-group"> <label for="nearmiss_personal_involvment" class="control-label requiredField"> ¿Estuviste involucrado(a) de manera directa en el incidente?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="personal_involvement" id="nearmiss_personal_involvment" class="select form-control" required> <option value="" selected>---------</option> <option value="Yes">Si, esto me pasó a mi.</option> <option value="No">No, yo fui testigo de que esto le sucedió a otra persona.</option> </select> </div> </div> <div id="div_id_witness_vehicle" class="form-group"> <label for="nearmiss_witness_vehicle" class="control-label "> ¿En qué ibas viajando? </label> <div class="controls "> <select name="witness_vehicle" id="nearmiss_witness_vehicle" class="select form-control"> <option value="" selected>---------</option> <option value="Bicycle">Bicicleta</option> <option value="E-scooter">E-scooter</option> <option value="Pedestrian">Yo era un peatón</option> <option value="Driving">Yo estaba manejando/conduciendo</option> </select> </div> </div> <!-- Util from http://www.malot.fr/bootstrap-datetimepicker/demo.php --> <!-- Help from https://gist.github.com/eguevara2012/2821026 --> <!-- KNOWN ISSUES WHICH HAVE BEEN REPORTED: Calendar view 3 displays wrong month selection and end date (displays 2 months previous) --> <div id="div_id_date" class="form-group "> <label for="id_nearmiss_date" class="control-label requiredField"> ¿Cuándo fue el incidente?<span class="asteriskField">*</span> </label> <div class="controls"> <div class="input-group date form_datetime" id="nearmiss_date" data-date-format='yyyy-mm-dd hh:ii' data-link-field="id_date" > <input type="text" name="date" id="nearmiss_date" autocomplete="off" class="datetimeinput form-control" required> <!-- <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> --> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> <span class="add-on "></span> </div> </div> </div> <script type="text/javascript"> $('#nearmiss_date').datetimepicker({ autoclose: 1, todayBtn: 0, autoclose: 1, todayHighlight: 1, maxView: 2, startView: 2, forceParse: 0, showMeridian: 1, initialDate: "2025-02-17T12:00:08Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "es", }); </script> <div id="div_id_i_type" class="form-group"> <label for="nearmiss_i_type" class="control-label requiredField"> ¿Qué tipo de incidente fue?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="i_type" id="nearmiss_i_type" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Colisión"> <option value="Collision with stationary object or vehicle">Colisión con un objeto o vehículo estacionado </option> <option value="Collision with moving object or vehicle">Colisión con un objeto o vehículo en movimiento</option> </optgroup> <optgroup label="Casi accdiente"> <option value="Near collision with stationary object or vehicle">Casi accdiente con un objeto o vehículo estacionado</option> <option value="Near collision with moving object or vehicle">Casi accdiente con un objeto o vehículoen movimiento</option> </optgroup> <optgroup label="Caída"> <option value="Fall">Perdí el control y me caí.</option> </optgroup> </select> </div> </div> <div id="div_id_incident_with" class="form-group"> <label for="nearmiss_incident_with" class="control-label requiredField"> ¿Con qué tipo de objeto chocaste o casi chocaste?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="incident_with" id="nearmiss_incident_with" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Vehículo"> <option value="Vehicle, head on">De frente</option> <option value="Vehicle, side">Impacto lateral</option> <option value="Vehicle, angle">Ángulo de impacto</option> <option value="Vehicle, rear end">Parte trasera</option> <option value="Vehicle, turning right">Girando a la derecha</option> <option value="Vehicle, turning left">Girando a la izquierda</option> <option value="Vehicle, passing">Pasando</option> <option value="Vehicle, open door">Puerta de vehículo abierta</option> </optgroup> <optgroup label="Persona/animal"> <option value="Another cyclist">Otro ciclista</option> <option value="Pedestrian">Peatón</option> <option value="Animal">Animal</option> <option value="E-scooter">E-scooter</option> </optgroup> <optgroup label="Infrastructura"> <option value="Curb">Borde de la acera</option> <option value="Train Tracks">Vías de tren</option> <option value="Pothole">Bache</option> <option value="Lane divider">Divisor de carril</option> <option value="Sign/Post">Señal/poste</option> <option value="Roadway">Calzada</option> </optgroup> <option value="Other">Otro (por favor describe)</option> </select> </div> </div> <div id="div_id_bicycle_type" class="form-group"> <label for="nearmiss_bicycle_type" class="control-label "> ¿Qué tipo de bicicleta estabas usando? </label> <div class="controls "> <select name="bicycle_type" id="nearmiss_bicycle_type" class="select form-control"> <option value="" selected>---------</option> <option value="Personal">Personal (mi propia bicicleta o la de un amigo/a)</option> <option value="Bike share">Porgrama de comprartir biciletas</option> <option value="Bike rental">Bicicleta rentada</option> <option value="E-scooter">E-scooter</option> </select> </div> </div> <div id="div_id_ebike" class="form-group"> <label for="nearmiss_ebike" class="control-label "> ¿El incidente involucró una bicicleta eléctrica asistida por pedales (eBike)? </label> <div class="controls "> <select name="ebike" id="nearmiss_ebike" class="select form-control"> <option value="" selected>---------</option> <option value="Yes">Si</option> <option value="No">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_ebike_class" class="form-group"> <label for="nearmiss_ebike_class" class="control-label "> What class of e-bike were you riding? </label> <div class="controls "> <select name="ebike_class" id="nearmiss_ebike_class" class="select form-control"> <option value="" selected>---------</option> <option value="Pedal assist under 20 mph">Pedal assist up to 20 mph (32 km/h)</option> <option value="Throttle assist under 20 mph">Throttle assist up to 20 mph (32 km/h)</option> <option value="Pedal or throttle assist over 20mph">Pedal or throttle assist over 20 mph (32 km/h)</option> </select> </div> </div> <div id="div_id_ebike_speed" class="form-group"> <label for="nearmiss_ebike_speed" class="control-label "> Approximately what speed was your e-bike traveling at the time? </label> <div class="controls "> <select name="ebike_speed" id="nearmiss_ebike_speed" class="select form-control"> <option value="" selected>---------</option> <option value="Under 5 mph">Under 5 mph (8 km/h)</option> <option value="Between 5-20 mph">Between 5-20mph (8-32 km/h)</option> <option value="Over 20 mph">Over 20mph (32 km/h)</option> </select> </div> </div> <div id="div_id_injury" class="form-group"> <label for="nearmiss_injury" class="control-label requiredField"> ¿Te lastimaste?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="injury" id="nearmiss_injury" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Si"> <option value="Injury, no treatment">Tratamiento médico.</option> <option value="Injury, saw family doctor">Acudí con un médico familiar.</option> <option value="Injury, hospital emergency visit">Visited the hospital emergency dept.</option> <option value="Injury, hospitalized">Estancia por la noche en el hospital.</option> </optgroup> <optgroup label="No"> <option value="No injury">Ninguna herida</option> </optgroup> <optgroup label="Desconocido"> <option value="Unknown">No lo sé</option> </optgroup> </select> </div> </div> <div id="div_id_impact" class="form-group"> <label for="nearmiss_impact" class="control-label requiredField"> ¿Cómo afectó este incidente a tu andar bicicleta?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="impact" id="nearmiss_impact" class="select form-control" required> <option value="" selected>---------</option> <option value="None">Ningún impacto</option> <option value="More careful">Ahora tengo más cuidado de donde/cuando/como ando en bicicleta</option> <option value="Bike less">Uso menos la bicicleta</option> <option value="More careful and bike less">Ahora tengo más cuidado de donde/cuando/como ando en bicicleta Y ando menos</option> <option value="Stopped biking">No he andado en bicicleta desde entonces.</option> <option value="Too soon">Demasiado pronto para decir</option> <option value="Witness">No estuve directamente involucrado(a).</option> </select> </div> </div> <div id="div_id_trip_purpose" class="form-group"> <label for="nearmiss_trip_purpose" class="control-label "> ¿Cuál era el propósito de tu viaje? </label> <div class="controls "> <select name="trip_purpose" id="nearmiss_trip_purpose" class="select form-control"> <option value="" selected>---------</option> <option value="Commute">Al/desde el trabajo o a la escuela</option> <option value="Exercise or recreation">Ejercicio o recreación </option> <option value="Social reason">Motivo social (por ejemplo, películas, visitas a amigos).</option> <option value="Personal business">Negocios personales</option> <option value="During work">Durante el trabajo</option> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="nearmiss_details" class="control-label "> Por favor proporciona una breve descripción del incidente </label> <div class="controls "> <textarea name="details" cols="40" rows="10" maxlength="500" id="nearmiss_details" placeholder="necesario" class="textarea form-control"> </textarea> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-1076" href="#nearmiss-conditions">Condiciones</a> </h4> </div> <div id="nearmiss-conditions" class="panel-collapse collapse" > <div class="panel-body"> <div id="div_id_road_conditions" class="form-group"> <label for="nearmiss_road_conditions" class="control-label "> ¿Cuáles fueron las condiciones de la calle? </label> <div class="controls "> <select name="road_conditions" id="nearmiss_road_conditions" class="select form-control"> <option value="" selected>---------</option> <option value="Dry">Seco</option> <option value="Wet">Mojado</option> <option value="Loose sand, gravel, or dirt">Arena suelta, grava o tierra</option> <option value="Icy">Helado</option> <option value="Snowy">Nevado</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_sightlines" class="form-group"> <label for="nearmiss_sightlines" class="control-label "> ¿Cómo eran las líneas de visión? </label> <div class="controls "> <select name="sightlines" id="nearmiss_sightlines" class="select form-control"> <option value="" selected>---------</option> <option value="No obstructions">Sin obstrucciones</option> <option value="View obstructed">Vista obstruida </option> <option value="Glare or reflection">Brillo o reflejo</option> <option value="Obstruction on road">Obstrucción en la calle</option> <option value="Don&#x27;t Remember">Don&#x27;t Remember</option> </select> </div> </div> <div id="div_id_cars_on_roadside" class="form-group"> <label for="nearmiss_cars_on_roadside" class="control-label "> ¿Había autos estacionados en la calle? </label> <div class="controls "> <select name="cars_on_roadside" id="nearmiss_cars_on_roadside" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_bike_lights" class="form-group"> <label for="nearmiss_bike_lights" class="control-label "> ¿Estabas usando luces de bicicleta? </label> <div class="controls "> <select name="bike_lights" id="nearmiss_bike_lights" class="select form-control"> <option value="" selected>---------</option> <option value="NL">Sin luces</option> <option value="FB">Luces delanteras y traseras</option> <option value="F">Solo luces delanteras</option> <option value="B">Solo luces traseras</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_terrain" class="form-group"> <label for="nearmiss_terrain" class="control-label "> ¿Cómo era el terreno? </label> <div class="controls "> <select name="terrain" id="nearmiss_terrain" class="select form-control"> <option value="" selected>---------</option> <option value="Uphill">De subiida</option> <option value="Downhill">De bajada</option> <option value="Flat">Plano</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_direction" class="form-group"> <label for="nearmiss_direction" class="control-label "> ¿Hacia qué dirección te dirigías? </label> <div class="controls "> <select name="direction" id="nearmiss_direction" class="select form-control"> <option value="" selected>---------</option> <option value="N">N</option> <option value="NE">NE</option> <option value="E">E</option> <option value="SE">SE</option> <option value="S">S</option> <option value="SW">SO</option> <option value="W">O</option> <option value="NW">NW</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_turning" class="form-group"> <label for="nearmiss_turning" class="control-label "> ¿Cómo te estabas moviendo? </label> <div class="controls "> <select name="turning" id="nearmiss_turning" class="select form-control"> <option value="" selected>---------</option> <option value="Heading straight">En dirección recta</option> <option value="Turning left">Girando a la izquierda</option> <option value="Turning right">Girando a la derecha</option> <option value="I don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_intersection" class="form-group"> <label for="nearmiss_intersection" class="control-label "> ¿El incidente ocurrió en una intersección? </label> <div class="controls "> <select name="intersection" id="nearmiss_intersection" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_aggressive" class="form-group"> <label for="nearmiss_aggressive" class="control-label "> ¿El conductor fue agresivo? </label> <div class="controls "> <select name="aggressive" id="nearmiss_aggressive" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-1076" href="#nearmiss-personal-details">Detalles personales</a> </h4> </div> <div id="nearmiss-personal-details" class="panel-collapse collapse" > <div class="panel-body"> <a class="text-info" data-toggle="collapse" aria-expanded="false" aria-controls="why-personal" href=".tab-pane.active .why-personal"><span class="glyphicon glyphicon-question-sign"></span> <strong>¿Por qué pedimos datos personales?</strong></a><div class="why-personal collapse" > <div class="well" > Los datos personales, como la edad y el sexo, se recopilan de forma rutinaria en investigaciones de salud, incluidos estudios que examinan lesiones en bicicleta (por ejemplo, Cripton et al.2015). Además, se ha demostrado que detalles como la experiencia del conductor y el género son predictores importantes de la seguridad y el riesgo del ciclismo (Beck et al. 2007). El objetivo de BikeMaps.org es reunir datos más completos para evaluar mejor la seguridad y el riesgo del ciclismo. Proporcionar datos personales nos permitirá completar con mayor precisión estos vacíos de datos. </div> </div> <div id="div_id_source" class="form-group"> <label for="nearmiss_source" class="control-label "> ¿Dónde te enteraste por primera vez sobre BikeMaps.org? </label> <div class="controls "> <select name="source" id="nearmiss_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directamente por medio del equipo de BikeMaps.org</option> <option value="BikeMaps swag">Por los promocionales de BikeMaps.org swag (por ejemplo, el protector para asiento, botella de agua, etc.) sin haber conocido al equipo</option> <option value="Traditional media">Medios tradicionales (periódico, TV, radio)</option> <option value="Another website">Vinculo desde otro sitio web</option> <option value="Word of mouth">De boca en boca</option> <option value="Social media">Redes sociales (por ejemplo, Twitter, Instagram, Facebook)</option> <option value="Other">Otro</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_age" class="form-group"> <label for="nearmiss_age" class="control-label "> ¿Cuál es tu año de nacimiento? </label> <div class="controls "> <select name="age" id="nearmiss_age" class="select form-control"> <option value="" selected>---------</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> </select> </div> </div> <div id="div_id_birthmonth" class="form-group"> <label for="nearmiss_birthmonth" class="control-label "> ¿Cuál es tu mes de nacimiento? </label> <div class="controls "> <select name="birthmonth" id="nearmiss_birthmonth" class="select form-control"> <option value="" selected>---------</option> <option value="1">Enero</option> <option value="2">Febrero</option> <option value="3">Marzo</option> <option value="4">Abril</option> <option value="5">Mayo</option> <option value="6">Junio</option> <option value="7">Julio</option> <option value="8">Agosto</option> <option value="9">Septiembre</option> <option value="10">Octubre</option> <option value="11">Noviembre</option> <option value="12">Diciembre</option> </select> </div> </div> <div id="div_id_gender" class="form-group"> <label for="id_gender" class="control-label "> Please select your gender (choose all that apply) </label> <div class="controls " id="nearmiss_gender"> <label class="checkbox-inline" for="id_gender_1"> <input type="checkbox" name="gender" id="id_gender_1" value="1" id="nearmiss_gender">Woman </label> <label class="checkbox-inline" for="id_gender_2"> <input type="checkbox" name="gender" id="id_gender_2" value="2" id="nearmiss_gender">Man </label> <label class="checkbox-inline" for="id_gender_3"> <input type="checkbox" name="gender" id="id_gender_3" value="3" id="nearmiss_gender">Non-binary </label> <label class="checkbox-inline" for="id_gender_4"> <input type="checkbox" name="gender" id="id_gender_4" value="4" id="nearmiss_gender">Genderfluid or Gender nonconforming </label> <label class="checkbox-inline" for="id_gender_5"> <input type="checkbox" name="gender" id="id_gender_5" value="5" id="nearmiss_gender">Two-Spirit </label> <label class="checkbox-inline" for="id_gender_6"> <input type="checkbox" name="gender" id="id_gender_6" value="6" id="nearmiss_gender">Transgender </label> <label class="checkbox-inline" for="id_gender_7"> <input type="checkbox" name="gender" id="id_gender_7" value="7" id="nearmiss_gender">Agender </label> <label class="checkbox-inline" for="id_gender_8"> <input type="checkbox" name="gender" id="id_gender_8" value="8" id="nearmiss_gender">Prefer not to say </label> <label class="checkbox-inline" for="id_gender_9"> <input type="checkbox" name="gender" id="id_gender_9" value="9" id="nearmiss_gender">Another option not listed here </label> </div> </div> <div id="div_id_gender_additional" class="form-group"> <label for="nearmiss_gender_additional" class="control-label "> If you selected 'another option', optionally describe here: </label> <div class="controls "> <textarea name="gender_additional" cols="40" rows="1" maxlength="100" id="nearmiss_gender_additional" class="textarea form-control"> </textarea> </div> </div> <div id="div_id_regular_cyclist" class="form-group"> <label for="nearmiss_regular_cyclist" class="control-label "> ¿Pedaleas al menos una vez a la semana? </label> <div class="controls "> <select name="regular_cyclist" id="nearmiss_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_helmet" class="form-group"> <label for="nearmiss_helmet" class="control-label "> ¿Estabas usando un casco? </label> <div class="controls "> <select name="helmet" id="nearmiss_helmet" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> </div> </div> </div> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="hazardReport"> <form action="/es/hazard_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-5676"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-5676" href="#detalles-del-peligro">Detalles del peligro</a> </h4> </div> <div id="detalles-del-peligro" class="panel-collapse collapse in" > <div class="panel-body"> <input type="hidden" name="geom" id="hazPoint"> <!-- Util from http://www.malot.fr/bootstrap-datetimepicker/demo.php --> <!-- Help from https://gist.github.com/eguevara2012/2821026 --> <!-- KNOWN ISSUES WHICH HAVE BEEN REPORTED: Calendar view 3 displays wrong month selection and end date (displays 2 months previous) --> <div id="div_id_date" class="form-group "> <label for="id_hazard_date" class="control-label requiredField"> ¿Cuándo fue el incidente?<span class="asteriskField">*</span> </label> <div class="controls"> <div class="input-group date form_datetime" id="hazard_date" data-date-format='yyyy-mm-dd hh:ii' data-link-field="id_date" > <input type="text" name="date" id="hazard_date" autocomplete="off" class="datetimeinput form-control" required> <!-- <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> --> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> <span class="add-on "></span> </div> </div> </div> <script type="text/javascript"> $('#hazard_date').datetimepicker({ autoclose: 1, todayBtn: 0, autoclose: 1, todayHighlight: 1, maxView: 2, startView: 2, forceParse: 0, showMeridian: 1, initialDate: "2025-02-17T12:00:08Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "es", }); </script> <input type="hidden" name="hazard_category" id="hazard-category"> <div id="div_id_i_type" class="form-group"> <label for="hazard-type" class="control-label requiredField"> ¿Qué tipo de peligro era?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="i_type" id="hazard-type" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Infrastructura"> <option value="Curb">Borde de la acera</option> <option value="Island">Isla</option> <option value="Train track">Vías de tren</option> <option value="Pothole">Bache</option> <option value="Road surface">Superficie de la calle</option> <option value="Poor signage">Mala señalización</option> <option value="Speed limits">Límites de velocidad</option> <option value="Blind corner">Esquina ciega o vuelta</option> <option value="Bike lane disappears">La ciclovía desaparece</option> <option value="Vehicles enter exit">Vehículos entrando/saliendo de la calzada</option> <option value="Dooring risk">Zona de riesgo por puertas</option> <option value="Vehicle in bike lane">Uso de vehículos en la ciclovía</option> <option value="Dangerous intersection">Intersección peligrosa</option> <option value="Dangerous vehicle left turn">Giro a la izquierda de vehículos peligroso</option> <option value="Dangerous vehicle right turn">Giro a la derecha de vehículos peligroso</option> <option value="Sensor does not detect bikes">El sensor no reconoce bicicletas.</option> <option value="Steep hill">Colina empinada - velocidad para bicicletas afectada</option> <option value="Narrow road">Camino estrecho</option> <option value="Pedestrian conflict zone">Zona de conflicto peatonal</option> <option value="Other infrastructure">Otro (por favor describe)</option> </optgroup> <optgroup label="Ambiental"> <option value="Icy/Snowy">Helado/Nevado</option> <option value="Poor visibility">Mala visibilidad (niebla, nieve, humo, etc.)</option> <option value="Broken glass">Vidrios rotos en el camino</option> <option value="Wet leaves">Hojas mojadas en el camino</option> <option value="Gravel rocks or debris">Gravel, rocks or debris on road/path</option> <option value="Construction">Construcción</option> <option value="Other">Otro (por favor describe)</option> </optgroup> <optgroup label="Comportamiento humano"> <option value="Poor visibility">Baja visibilidad</option> <option value="Parked car">Parked car</option> <option value="Traffic flow">Traffic flow</option> <option value="Driver behaviour">Driver behaviour</option> <option value="Cyclist behaviour">Cyclist behaviour</option> <option value="Pedestrian behaviour">Pedestrian behaviour</option> <option value="Congestion">Congestion</option> <option value="Other">Otro (por favor describe)</option> </optgroup> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="hazard_details" class="control-label "> Por favor proporciona una breve descripción del incidente </label> <div class="controls "> <textarea name="details" cols="40" rows="10" maxlength="500" id="hazard_details" placeholder="necesario" class="textarea form-control"> </textarea> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-5676" href="#hazard-personal-details">Detalles personales</a> </h4> </div> <div id="hazard-personal-details" class="panel-collapse collapse" > <div class="panel-body"> <a class="text-info" data-toggle="collapse" aria-expanded="false" aria-controls="why-personal" href=".tab-pane.active .why-personal"><span class="glyphicon glyphicon-question-sign"></span> <strong>¿Por qué pedimos datos personales?</strong></a><div class="why-personal collapse" > <div class="well" > Los datos personales, como la edad y el sexo, se recopilan de forma rutinaria en investigaciones de salud, incluidos estudios que examinan lesiones en bicicleta (por ejemplo, Cripton et al.2015). Además, se ha demostrado que detalles como la experiencia del conductor y el género son predictores importantes de la seguridad y el riesgo del ciclismo (Beck et al. 2007). El objetivo de BikeMaps.org es reunir datos más completos para evaluar mejor la seguridad y el riesgo del ciclismo. Proporcionar datos personales nos permitirá completar con mayor precisión estos vacíos de datos. </div> </div> <div id="div_id_source" class="form-group"> <label for="hazard_source" class="control-label "> ¿Dónde te enteraste por primera vez sobre BikeMaps.org? </label> <div class="controls "> <select name="source" id="hazard_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directamente por medio del equipo de BikeMaps.org</option> <option value="BikeMaps swag">Por los promocionales de BikeMaps.org swag (por ejemplo, el protector para asiento, botella de agua, etc.) sin haber conocido al equipo</option> <option value="Traditional media">Medios tradicionales (periódico, TV, radio)</option> <option value="Another website">Vinculo desde otro sitio web</option> <option value="Word of mouth">De boca en boca</option> <option value="Social media">Redes sociales (por ejemplo, Twitter, Instagram, Facebook)</option> <option value="Other">Otro</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_age" class="form-group"> <label for="hazard_age" class="control-label "> ¿Cuál es tu año de nacimiento? </label> <div class="controls "> <select name="age" id="hazard_age" class="select form-control"> <option value="" selected>---------</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> <option value="1979">1979</option> <option value="1978">1978</option> <option value="1977">1977</option> <option value="1976">1976</option> <option value="1975">1975</option> <option value="1974">1974</option> <option value="1973">1973</option> <option value="1972">1972</option> <option value="1971">1971</option> <option value="1970">1970</option> <option value="1969">1969</option> <option value="1968">1968</option> <option value="1967">1967</option> <option value="1966">1966</option> <option value="1965">1965</option> <option value="1964">1964</option> <option value="1963">1963</option> <option value="1962">1962</option> <option value="1961">1961</option> <option value="1960">1960</option> <option value="1959">1959</option> <option value="1958">1958</option> <option value="1957">1957</option> <option value="1956">1956</option> <option value="1955">1955</option> <option value="1954">1954</option> <option value="1953">1953</option> <option value="1952">1952</option> <option value="1951">1951</option> <option value="1950">1950</option> <option value="1949">1949</option> <option value="1948">1948</option> <option value="1947">1947</option> <option value="1946">1946</option> <option value="1945">1945</option> <option value="1944">1944</option> <option value="1943">1943</option> <option value="1942">1942</option> <option value="1941">1941</option> <option value="1940">1940</option> <option value="1939">1939</option> <option value="1938">1938</option> <option value="1937">1937</option> <option value="1936">1936</option> <option value="1935">1935</option> <option value="1934">1934</option> <option value="1933">1933</option> <option value="1932">1932</option> <option value="1931">1931</option> <option value="1930">1930</option> <option value="1929">1929</option> <option value="1928">1928</option> <option value="1927">1927</option> <option value="1926">1926</option> <option value="1925">1925</option> <option value="1924">1924</option> <option value="1923">1923</option> <option value="1922">1922</option> <option value="1921">1921</option> <option value="1920">1920</option> <option value="1919">1919</option> <option value="1918">1918</option> <option value="1917">1917</option> <option value="1916">1916</option> <option value="1915">1915</option> <option value="1914">1914</option> <option value="1913">1913</option> </select> </div> </div> <div id="div_id_birthmonth" class="form-group"> <label for="hazard_birthmonth" class="control-label "> ¿Cuál es tu mes de nacimiento? </label> <div class="controls "> <select name="birthmonth" id="hazard_birthmonth" class="select form-control"> <option value="" selected>---------</option> <option value="1">Enero</option> <option value="2">Febrero</option> <option value="3">Marzo</option> <option value="4">Abril</option> <option value="5">Mayo</option> <option value="6">Junio</option> <option value="7">Julio</option> <option value="8">Agosto</option> <option value="9">Septiembre</option> <option value="10">Octubre</option> <option value="11">Noviembre</option> <option value="12">Diciembre</option> </select> </div> </div> <div id="div_id_gender" class="form-group"> <label for="id_gender" class="control-label "> Please select your gender (choose all that apply) </label> <div class="controls " id="hazard_gender"> <label class="checkbox-inline" for="id_gender_1"> <input type="checkbox" name="gender" id="id_gender_1" value="1" id="hazard_gender">Woman </label> <label class="checkbox-inline" for="id_gender_2"> <input type="checkbox" name="gender" id="id_gender_2" value="2" id="hazard_gender">Man </label> <label class="checkbox-inline" for="id_gender_3"> <input type="checkbox" name="gender" id="id_gender_3" value="3" id="hazard_gender">Non-binary </label> <label class="checkbox-inline" for="id_gender_4"> <input type="checkbox" name="gender" id="id_gender_4" value="4" id="hazard_gender">Genderfluid or Gender nonconforming </label> <label class="checkbox-inline" for="id_gender_5"> <input type="checkbox" name="gender" id="id_gender_5" value="5" id="hazard_gender">Two-Spirit </label> <label class="checkbox-inline" for="id_gender_6"> <input type="checkbox" name="gender" id="id_gender_6" value="6" id="hazard_gender">Transgender </label> <label class="checkbox-inline" for="id_gender_7"> <input type="checkbox" name="gender" id="id_gender_7" value="7" id="hazard_gender">Agender </label> <label class="checkbox-inline" for="id_gender_8"> <input type="checkbox" name="gender" id="id_gender_8" value="8" id="hazard_gender">Prefer not to say </label> <label class="checkbox-inline" for="id_gender_9"> <input type="checkbox" name="gender" id="id_gender_9" value="9" id="hazard_gender">Another option not listed here </label> </div> </div> <div id="div_id_gender_additional" class="form-group"> <label for="hazard_gender_additional" class="control-label "> If you selected 'another option', optionally describe here: </label> <div class="controls "> <textarea name="gender_additional" cols="40" rows="1" maxlength="100" id="hazard_gender_additional" class="textarea form-control"> </textarea> </div> </div> <div id="div_id_regular_cyclist" class="form-group"> <label for="hazard_regular_cyclist" class="control-label "> ¿Pedaleas al menos una vez a la semana? </label> <div class="controls "> <select name="regular_cyclist" id="hazard_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> </div> </div> </div> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="theftReport"> <form action="/es/theft_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-7083"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-7083" href="#theft-details">Detalles de robo</a> </h4> </div> <div id="theft-details" class="panel-collapse collapse in" > <div class="panel-body"> <input type="hidden" name="geom" id="theftPoint"> <!-- Util from http://www.malot.fr/bootstrap-datetimepicker/demo.php --> <!-- Help from https://gist.github.com/eguevara2012/2821026 --> <!-- KNOWN ISSUES WHICH HAVE BEEN REPORTED: Calendar view 3 displays wrong month selection and end date (displays 2 months previous) --> <div id="div_id_date" class="form-group "> <label for="id_theft_date" class="control-label requiredField"> ¿Cuándo fue el incidente?<span class="asteriskField">*</span> </label> <div class="controls"> <div class="input-group date form_datetime" id="theft_date" data-date-format='yyyy-mm-dd hh:ii' data-link-field="id_date" > <input type="text" name="date" id="theft_date" autocomplete="off" class="datetimeinput form-control" required> <!-- <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> --> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> <span class="add-on "></span> </div> </div> </div> <script type="text/javascript"> $('#theft_date').datetimepicker({ autoclose: 1, todayBtn: 0, autoclose: 1, todayHighlight: 1, maxView: 2, startView: 2, forceParse: 0, showMeridian: 1, initialDate: "2025-02-17T12:00:08Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "es", }); </script> <div id="div_id_i_type" class="form-group"> <label for="theft_i_type" class="control-label requiredField"> ¿Qué fue robado?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="i_type" id="theft_i_type" class="select form-control" required> <option value="" selected>---------</option> <option value="Bike (value &lt; $1000)">Valor de la bicicleta &lt; $1000</option> <option value="Bike (value &gt;= $1000)">Valor de la bicicleta &lt;= $1000</option> <option value="Major bike component">Componente principal de la bicicleta (por ejemplo, llanta, asiento, manubrio, etc.)</option> <option value="Minor bike component">Componente menor de la bicicleta (por ejemplo, luces, relleno de la barra superior, campana, etc.)</option> </select> </div> </div> <div id="div_id_how_locked" class="form-group"> <label for="theft_how_locked" class="control-label requiredField"> ¿Tenías tu bicicleta con candado?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="how_locked" id="theft_how_locked" class="select form-control" required> <option value="" selected>---------</option> <optgroup label="Si"> <option value="Frame locked">Marco de la bicicleta asegurado con el candado</option> <option value="Frame and tire locked">Marco de la bicicleta y llanta asegurados con el candado</option> <option value="Frame and both tires locked">Marco de la bicicleta y ambas llantas asegurados con el candado</option> <option value="Tire(s) locked">Llantas aseguradas con el candado</option> </optgroup> <optgroup label="No"> <option value="Not locked">No asegurada con candado</option> </optgroup> </select> </div> </div> <div id="div_id_lock" class="form-group"> <label for="theft_lock" class="control-label requiredField"> ¿Qué tipo de candado estabas usando?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="lock" id="theft_lock" class="select form-control" required> <option value="" selected>---------</option> <option value="U-Lock">U-Lock</option> <option value="Cable lock">Candado de cable</option> <option value="U-Lock and cable">U-Lock y cable de candado</option> <option value="Padlock">Candado (normal)</option> <option value="NA">No asegurada con candado</option> </select> </div> </div> <div id="div_id_locked_to" class="form-group"> <label for="theft_locked_to" class="control-label requiredField"> ¿Dónde dejaste tu bicicleta?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="locked_to" id="theft_locked_to" class="select form-control" required> <option value="" selected>---------</option> <option value="Outdoor bike rack">En un estacionamiento para bicicletas afuera</option> <option value="Indoor bike rack">En un estacionamiento para bicicletas adentro</option> <option value="Bike locker">En el interior de un casillero para bicicletas</option> <option value="Street sign">Contra un señalamiento de calle</option> <option value="Fence/railing">Contra una valla o barandilla</option> <option value="Bench">Contra un banca pública </option> <option value="Indoors/lobby">Dentro de un edificio/lobby</option> <option value="Other">Otro (por favor describe)</option> </select> </div> </div> <div id="div_id_lighting" class="form-group"> <label for="theft_lighting" class="control-label requiredField"> ¿Cuál describe las condiciones de iluminación donde y cuando ocurrió el robo?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="lighting" id="theft_lighting" class="select form-control" required> <option value="" selected>---------</option> <option value="Good">Bien iluminado (por ejemplo, luz del día brillante)</option> <option value="Moderate">Moderadamente bien iluminado (por ejemplo, farolas, estacionamiento)</option> <option value="Poor">Poco iluminado (por ejemplo, noche, callejón sin luz)</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_traffic" class="form-group"> <label for="theft_traffic" class="control-label requiredField"> ¿Cuál describe mejor el tráfico en el área donde ocurrió el robo?<span class="asteriskField">*</span> </label> <div class="controls "> <select name="traffic" id="theft_traffic" class="select form-control" required> <option value="" selected>---------</option> <option value="Very High">Muy pesado ​​(peatones pasando en una corriente casi constante)</option> <option value="High">Pesado (peatones pasando regularmente)</option> <option value="Medium">Moderado (peatón irregular con un tráfico de vehículos cargado)</option> <option value="Low">Ligero (peatón irregular con un tráfico ligero a moderado de vehículos)</option> <option value="Very Low">Muy ligero (poco tráfico peatonal y vehicular).</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="theft_details" class="control-label "> Por favor proporciona una breve descripción del incidente </label> <div class="controls "> <textarea name="details" cols="40" rows="10" maxlength="500" id="theft_details" placeholder="required" class="textarea form-control"> </textarea> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-7083" href="#theft-personal-details">Detalles personales</a> </h4> </div> <div id="theft-personal-details" class="panel-collapse collapse" > <div class="panel-body"> <a class="text-info" data-toggle="collapse" aria-expanded="false" aria-controls="why-personal" href=".tab-pane.active .why-personal"><span class="glyphicon glyphicon-question-sign"></span> <strong>¿Por qué pedimos datos personales?</strong></a><div class="why-personal collapse" > <div class="well" > Los datos personales, como la edad y el sexo, se recopilan de forma rutinaria en investigaciones de salud, incluidos estudios que examinan lesiones en bicicleta (por ejemplo, Cripton et al.2015). Además, se ha demostrado que detalles como la experiencia del conductor y el género son predictores importantes de la seguridad y el riesgo del ciclismo (Beck et al. 2007). El objetivo de BikeMaps.org es reunir datos más completos para evaluar mejor la seguridad y el riesgo del ciclismo. Proporcionar datos personales nos permitirá completar con mayor precisión estos vacíos de datos. </div> </div> <div id="div_id_source" class="form-group"> <label for="theft_source" class="control-label "> ¿Dónde te enteraste por primera vez sobre BikeMaps.org? </label> <div class="controls "> <select name="source" id="theft_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directamente por medio del equipo de BikeMaps.org</option> <option value="BikeMaps swag">Por los promocionales de BikeMaps.org swag (por ejemplo, el protector para asiento, botella de agua, etc.) sin haber conocido al equipo</option> <option value="Traditional media">Medios tradicionales (periódico, TV, radio)</option> <option value="Another website">Vinculo desde otro sitio web</option> <option value="Word of mouth">De boca en boca</option> <option value="Social media">Redes sociales (por ejemplo, Twitter, Instagram, Facebook)</option> <option value="Other">Otro</option> <option value="Don&#x27;t remember">No me acuerdo</option> </select> </div> </div> <div id="div_id_regular_cyclist" class="form-group"> <label for="theft_regular_cyclist" class="control-label "> ¿Pedaleas al menos una vez a la semana? </label> <div class="controls "> <select name="regular_cyclist" id="theft_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Si</option> <option value="N">No</option> <option value="I don&#x27;t know">No lo sé</option> </select> </div> </div> <div id="div_id_police_report" class="form-group"> <label for="theft_police_report" class="control-label "> ¿Presentaste un reporte a la policía? </label> <div class="controls "> <select name="police_report" id="theft_police_report" class="select form-control"> <option value="" selected>---------</option> <option value="True">Si</option> <option value="False">No</option> </select> </div> </div> <div id="div_id_police_report_num" class="form-group"> <label for="theft_police_report_num" class="control-label "> Si presentaste un reporte policial, ¿cuál es el número del reporte? </label> <div class="controls "> <input type="text" name="police_report_num" maxlength="100" id="theft_police_report_num" class="textinput textInput form-control"> </div> </div> <div id="div_id_insurance_claim" class="form-group"> <label for="theft_insurance_claim" class="control-label "> ¿Presentaste una reclamación de seguro? </label> <div class="controls "> <select name="insurance_claim" id="theft_insurance_claim" class="select form-control"> <option value="" selected>---------</option> <option value="True">Si</option> <option value="False">No</option> </select> </div> </div> <div id="div_id_insurance_claim_num" class="form-group"> <label for="theft_insurance_claim_num" class="control-label "> Si presentaste una reclamación de seguro, ¿cuál es el número de reclamación? </label> <div class="controls "> <input type="text" name="insurance_claim_num" maxlength="100" id="theft_insurance_claim_num" class="textinput textInput form-control"> </div> </div> </div> </div> </div> </div> </form> </div> </div> </div> <div class="modal-footer"> <div class="col-xs-6"> <div class="text-left" style="text-indent: -16px; padding-left: 15px;"> <input type='checkbox' id='terms_checkbox'><strong> He leído y entendido los <a href='/es/terms_and_conditions/' target=_blank> términos y condiciones</a></strong> </div> </div> <div class="col-xs-6"> <button type="button" name="Cancel" class="btn btn-default cancel-btn" onclick="javascript:close_modal()">Cancelar</button> <button type="button" name="Submit" class="btn btn-primary submit-btn disabled" onclick="javascript:submit_form()">Enviar</button> </div> </div> </div> </div> </div> <script> $("#terms_checkbox").change(function() { if(this.checked) $(".submit-btn").removeClass("disabled"); else $(".submit-btn").addClass("disabled"); }); function toggle_ebike_fields() { if (this.value !== 'Yes') { $("#div_id_ebike_class, #div_id_ebike_speed").hide(); } else { $("#div_id_ebike_class, #div_id_ebike_speed").show(); } } // Hide follow up ebike questions unless ebike==yes $("#incident_ebike").change(toggle_ebike_fields); $("#nearmiss_ebike").change(toggle_ebike_fields); function close_modal(){ $('#incidentForm').modal('hide'); $('.modal-backdrop').hide(); } function validate_details() { // this is a client side validation of the form details // to maintain funtionality for the old version of the app var tabPane = $('.tab-pane.active'); var tabId = tabPane[0].id; if(tabId === 'incidentReport') { var details = $('#collision_details').val(); } else if(tabId === 'nearmissReport') { var details = $('#nearmiss_details').val(); } else if(tabId === 'hazardReport') { var details = $('#hazard_details').val(); } else if(tabId === 'theftReport') { var details = $('#theft_details').val(); } if(details != ""){ return true; } else { // styling to indicate required field if(tabId === 'incidentReport') { $("#collision_details").closest("#div_id_details").addClass("form-group has-error"); } else if(tabId === 'nearmissReport') { $("#near_miss_details").closest("#div_id_details").addClass("form-group has-error"); } else if(tabId === 'hazardReport') { $("#hazard_details").closest("#div_id_details").addClass("form-group has-error"); } else if(tabId === 'theftReport') { $("#theft_details").closest("#div_id_details").addClass("form-group has-error"); } return false; } } function submit_form(){ if(validate_details()){ $(".submit-btn").addClass("disabled"); $(".cancel-btn").addClass("disabled"); $('.tab-pane.active form').submit(); } } function showMessage(message){ $('#message').append('<div class="alert alert-success" role="alert">' + '<button type="button" class="close" data-dismiss="alert">&times;</button>' + message + '</div>' ); setTimeout(function(){ $('#message .alert').alert('close'); }, 7000); }; function showFollowUpInfo(message){ // remove any existing popups before adding a new one $('#popUpMessage').remove(); $('#followUpMsgPopUp').append( `<div id="popUpMessage" class="alert alert-default alert-dismissible" role="alert"> <button id="closeFollowUpButton" type="button" class="close leaflet-popup-close-button" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <div class="leaflet-popup-content"> ${message} </div> </div>` ); }; $(function(){ // Define ajax submit function $('.tab-pane form').submit(function (event){ $.ajax({ url: $(this).attr('action'), type: $(this).attr('method'), data: new FormData($('.tab-pane.active form').get(0)), dataType: "json", processData: false, contentType: false, success: function(data) { // Re-enable submit button $(".submit-btn").removeClass("disabled"); $(".cancel-btn").removeClass("disabled"); // Show errors or clean and reset form $('.tab-pane.active form div:first').replaceWith(data['form_html']); updateIncidentForm(); if (data['success']) { // Close modal $('#incidentForm').modal('hide'); // Add point to map var point = geojsonMarker((data['point']), data['point_type']) point.bindPopup(getPopup(point.getLayers()[0])); incidentAppliedLayers.addLayer(point); // Pan to point map.setView(point.getBounds().getCenter(), 18, {'animate': true}); setTimeout(function(){ point.openPopup(); }, 300); // Print success or failure message var message = "<strong>" + "Thank you!" + "</strong><br>" + "Your incident marker was successfully added."; showMessage(message); // Display follow up message in modal if available if (data['followUpMsg']){ showFollowUpInfo(data['followUpMsg']); } } } }); event.preventDefault(); }); // Dynamically change lock to "NA" if bike not locked $("#div_id_lock select option[value='NA']").hide(); $(document).on("change", "#div_id_how_locked select", function(){ if($(this).val() == 'Not locked'){ $("#div_id_lock select option").hide(); $("#div_id_lock select option[value='NA']").show(); $("#div_id_lock select").val('NA'); } else{ if($("#div_id_lock select").val() == 'NA'){ $("#div_id_lock select").val(''); } $("#div_id_lock select option").show(); $("#div_id_lock select option[value='NA']").hide(); } }); // Dynamically update questions for witnesses $(document).on("change", "#div_id_personal_involvement select", function(){ var tabPane = $('.tab-pane.active'); var tabId = tabPane[0].id; if(tabId === 'incidentReport') { var personalInvolvement = ($("#div_id_personal_involvement select").val()); } else if(tabId === 'nearmissReport') { var personalInvolvement = $('#nearmiss_personal_involvment').val(); } updateWitnessChoices(personalInvolvement); }); // Dynamically update questions for vehicles $(document).on("change", "#div_id_incident_with select", function(){ var tabPane = $('.tab-pane.active'); var tabId = tabPane[0].id; if(tabId === 'incidentReport') { var incident_with = ($("#div_id_incident_with select").val()); } else if(tabId === 'nearmissReport') { var incident_with = $('#nearmiss_incident_with').val(); } updateVehicleChoices(incident_with); }); // Change hazard options dynamically // Hacky bug fix for translated site - Previously the hazard-category was assigned based directly on the label of the optgroup. // This doesn't work when a translation is in use because the label is translated and we end up with invalid hazard categories. // Doing hardcoded comparison for now. $(document).on("change", "#hazardReport #div_id_i_type select", function(){ var optgroup = $(":selected", this).parent(); var optgroup_label = optgroup.attr("label"); if(optgroup_label === "Infrastructure" || optgroup_label === "Infrastruktur") { $("#hazard-category").val("infrastructure"); } else if(optgroup_label === "Environmental" || optgroup_label === "Umwelt") { $("#hazard-category").val("environmental"); } else { $("#hazard-category").val("human behaviour"); } }) // Only show collision options on Collision form and near miss options on Near Miss form // $('select optgroup[label="Near miss"]').hide(); // $('select optgroup[label^="Beinahzusammensto"]').hide(); // When the incident form is displayed, update the fields we want displayed $('#incidentForm').on('shown.bs.modal', function(e) { updateIncidentForm(); }); function updateIncidentForm() { var tabPane = $('.tab-pane.active'); var tabId = tabPane[0].id; if(tabId === 'hazardReport') { updateHazardChoices(); } else if(tabId === 'incidentReport') { updateIncidentChoices(); } else if(tabId === 'nearmissReport') { updateNearmissChoices(); } else if(tabId === 'theftReport') { updateTheftChoices(); } else{ updateIncidentChoices(); } } // updated choices and wording for witnesses (not directly invloved in the incident) function updateWitnessChoices(personalInvolvement) { if(personalInvolvement == 'No'){ $('#near-miss-details').find('#div_id_witness_vehicle').show(); $('#collision-details').find('#div_id_witness_vehicle').show(); $('#div_id_incident_with > label').text("What sort of object did the rider collide or nearly collide with?*"); $('#div_id_injury > label').text("Was the rider injured?*"); $('select optgroup[label="Unknown"]').show(); $('select option[label="Unknown"]').show(); $('#near-miss-details').find('#div_id_trip_purpose').hide(); $('#collision-details').find('#div_id_trip_purpose').hide(); $("#div_id_trip_purpose select").val('NA'); $('#near-miss-details').find('#div_id_impact').hide(); $('#collision-details').find('#div_id_impact').hide(); // add in the option for witnesses for impact var witness = new Option("I was not directly involved", "Witness"); $(witness).html("No estuve directamente involucrado(a)."); $("#div_id_impact select").append(witness); $("#div_id_impact select").val('Witness').change(); $('#div_id_bike_lights > label').text("Was the rider using bike lights?"); $('#div_id_direction > label').text("What direction was the rider heading?"); $('#div_id_turning > label').text("How was the rider moving?"); $('#div_id_bicycle_type > label').text("¿Qué tipo de bicicleta estuvo involucrada en el incidente?"); $('#div_id_helmet > label').text(gettext("Was the rider wearing a helmet?")); } else { $('#near-miss-details').find('#div_id_witness_vehicle').hide(); $('#collision-details').find('#div_id_witness_vehicle').hide(); $("#div_id_witness_vehicle select").val('NA'); $('#div_id_incident_with > label').text("What sort of object did you collide or nearly collide with?*"); $('#div_id_injury > label').text("Were you injured?*"); $('select optgroup[label="Unknown"]').hide(); $("#div_id_injury select").val('NA'); $('#near-miss-details').find('#div_id_trip_purpose').show(); $('#collision-details').find('#div_id_trip_purpose').show(); $('#near-miss-details').find('#div_id_impact').show(); $('#collision-details').find('#div_id_impact').show(); $("#div_id_impact select").val('NA'); $('select option[value="Witness"]').remove(); $('#div_id_bike_lights > label').text("¿Estabas usando luces de bicicleta?"); $('#div_id_direction > label').text("¿Hacia qué dirección te dirigías?"); $('#div_id_turning > label').text("¿Cómo te estabas moviendo?"); $('#div_id_bicycle_type > label').text("¿Qué tipo de bicicleta estabas usando?"); $('#div_id_helmet > label').text("¿Estabas usando un casco?"); } } //hide or show questions, depending if the incident involved another vehicle function updateVehicleChoices(incident_with) { if (typeof incident_with === 'undefined') { vehicle = 0; // if no answer for incident_with, no car involved yet } else { var vehicle = incident_with.search("Vehicle"); // if there is an answer, search for vehicle involvement } if(vehicle >= 0){ // vehicle involved $('#nearmiss-conditions').find('#div_id_aggressive').show(); $('#incident-conditions').find('#div_id_aggressive').show(); } else { // no vehicle involved $('#nearmiss-conditions').find('#div_id_aggressive').hide(); $('#incident-conditions').find('#div_id_aggressive').hide(); $("#div_id_aggressive select").val('NA'); } } // Hide/show appropriate options when selecting a report type $('a[href="#incidentReport"]').click( function() { updateIncidentChoices(); }); $('a[href="#nearmissReport"]').click( function() { updateNearmissChoices(); }); $('a[href="#hazardReport"]').click( function() { updateHazardChoices(); }); $('a[href="#theftReport"]').click( function() { updateTheftChoices(); }); // Hide hazards we don't want to display on the form function updateHazardChoices() { $('select optgroup[label="Human Behaviour"]').remove(); $('select optgroup[label="Comportement humain "]').remove(); $('select optgroup[label="Menschliches Verhalten"]').remove(); $('select option[value="Island"]').remove(); $('select option[value="Insel"]').remove(); $('#div_id_date > label').text("When did you notice the hazard?*"); } // Only display collision options on Collision form function updateIncidentChoices() { // toggle visibility for English labels $('select optgroup[label="Collision"]').show(); $('select optgroup[label="Fall"]').show(); $('select optgroup[label="Near miss"]').hide(); //toggle visibility for German labels $('select optgroup[label="Kollision"]').show(); $('select optgroup[label="Sturz"]').show(); $('select optgroup[label^="Beinahzusammensto"]').hide(); $('#div_id_date > label').text("When was the incident?*"); updateWitnessChoices($("#div_id_personal_involvement select").val()); updateVehicleChoices($("#div_id_incident_with select").val()); // hide old collision lables (to maintain compatibility with old version of the app) $('select option[value="Vehicle, side"]').remove(); $('select option[value="Vehicle, angle"]').remove(); } // Only display near miss options on near miss form function updateNearmissChoices() { // toggle visibility of English labels $('select optgroup[label="Near miss"]').show(); $('select optgroup[label="Collision"]').hide(); $('select optgroup[label="Fall"]').hide(); // toggle visibility of German labels $('select optgroup[label^="Beinahzusammensto"]').show(); $('select optgroup[label="Kollision"]').hide(); $('select optgroup[label="Sturz"]').hide(); $('#div_id_date > label').text("When was the incident?*"); updateWitnessChoices($('#nearmiss_personal_involvment').val()); updateVehicleChoices($('#nearmiss_incident_with').val()); // hide old collision lables (to maintain compatibility with old version of the app) $('select option[value="Vehicle, side"]').remove(); $('select option[value="Vehicle, angle"]').remove(); } function updateTheftChoices() { $('#div_id_date > label').text("When was the theft?*"); } }) </script> <!-- Add modal help html --> <!-- Modal popup that explains the alert areas (triggered from map legend) --> <div class="modal fade" id="about-alert-areas"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button> <h4 class="modal-title text-center">Receive monthly alerts for your riding area</h4> </div> <div class="modal-body"> To setup monitoring areas: <ol> <li>Login to your account <li>Trace areas on the map you would like to track using the <span class='poly-icon'></span> button. <br><small><em>note: tracing is currently not supported on mobile devices.</em></small> </ol> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <div class="btn-group"> <a href="/es/user/register/" type="button" class="btn btn-primary">Registrar</a> <a href="/es/user/login/" type="button" class="btn btn-primary">Iniciar sesión</a> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- Modal popup that explains strava (triggered from map legend) --> <div class="modal fade" id="about-strava"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button> <h4 class="modal-title text-center">Rider density</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-12"> <p style="text-indent: 2em"> Our rider density data comes directly from the Strava cycling and running mobile tracker application. Using Strava, you can track your cycling commutes and recreational rides using your Android or iPhone. <br><br> Street-level Heatmap data are available to registered users at the <a href="https://www.strava.com/heatmap">Strava Global Heatmap</a>. See the <a href="https://blog.strava.com/en/press/heatmap-updates/">Strava Blog</a> for more information. </p> </div> </div> <br> <div class="row"> <div class="text-center col-xs-12 col-sm-3 col-sm-offset-3"> <a href="https://play.google.com/store/apps/details?id=com.strava" target="_blank"> <img alt="Get it on Google Play" src="/static/mapApp/images/googleButton.png"/> </a> </div> <div class="text-center col-xs-12 col-sm-3"> <a href="https://itunes.apple.com/us/app/strava-running-cycling-gps/id426826309?mt=8&uo=4" target="itunes_store" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/htmlResources/assets/en_us//images/web/linkmaker/badge_appstore-lrg.png) no-repeat;width:135px;height:40px;@media only screen{background-image:url(https://linkmaker.itunes.apple.com/htmlResources/assets/en_us//images/web/linkmaker/badge_appstore-lrg.svg);}"></a> </div> </div> </div> <!-- <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- Modal popup that explains strava (triggered from map legend) --> <div class="modal fade" id="wpg-raffle"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button> <!--<h4 class="modal-title text-center">Bikemaps Winnipeg Raffle</h4>--> </div> <!-- <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- Add draw controls and actions --> <!-- Javascript saved as html to allow for use of Django template tags within the code --> <script> document.addEventListener('mapInitializedEvent', (e)=> { desktopDrawing(); }); function desktopDrawing() { /* DRAWING CONTROL TOOLTIPS */ L.drawLocal.draw.toolbar.actions.title = "Cancel drawing"; L.drawLocal.draw.toolbar.actions.text = "Cancelar"; L.drawLocal.draw.toolbar.undo.title = "Delete last point drawn"; L.drawLocal.draw.toolbar.undo.text = "Delete last point"; L.drawLocal.draw.toolbar.buttons.marker = "Agregar un nuevo marcador."; L.drawLocal.draw.toolbar.buttons.polygon = "Trace an area to receive incident alerts."; L.drawLocal.draw.handlers.marker.tooltip.start = "Colóqueme donde ocurrió el incidente, peligro o robo."; L.drawLocal.draw.handlers.polygon.tooltip.start = "Trace the area you would like to receive alerts for."; L.drawLocal.draw.handlers.polygon.tooltip.cont = "Click to continue drawing shape."; L.drawLocal.draw.handlers.polygon.tooltip.end = "Click first point to close this shape."; L.drawLocal.edit.toolbar.actions.save.title = "Save changes."; L.drawLocal.edit.toolbar.actions.save.text = "Save."; L.drawLocal.edit.toolbar.actions.cancel.title = "Cancel editing, discards all changes."; L.drawLocal.edit.toolbar.actions.cancel.text = "Cancel."; L.drawLocal.edit.toolbar.buttons.edit = "Edit alert area."; L.drawLocal.edit.toolbar.buttons.editDisabled = "No alert areas to edit."; L.drawLocal.edit.toolbar.buttons.remove = "Delete alert areas."; L.drawLocal.edit.toolbar.buttons.removeDisabled = "No alert areas to delete."; L.drawLocal.edit.handlers.edit.tooltip.text = "Drag handles to edit alert areas. Be sure to save your changes."; L.drawLocal.edit.handlers.edit.tooltip.subtext = "Click cancel to undo changes."; L.drawLocal.edit.handlers.remove.tooltip.text = "Click the alert areas to remove"; /* ADD THE CONTROL TO LEAFLET MAP */ const drawControl = new L.Control.Draw({ draw: { polyline: false, rectangle: false, circle: false, marker: false, circlemarker: false, polygon: false }, edit: false }) map.addControl(drawControl); /* ADD THE START REPORT BUTTON TO LEAFLET MAP */ // create a drawer that just creates markers const markerOptions = { icon: icons["bikeGreyIcon"] }; const markerControl = new L.Draw.Marker(map, markerOptions); let markerControlActive = false; // Move leaflet control bar down so that start button can be top left item (desktop only) $(".leaflet-top.leaflet-left").addClass("lower-toolbar"); // functions to start and stop drawing const enableMarkerDrawing = () => { markerControlActive = true; markerControl.enable(); map.removeControl(drawControl); $('#cancelDrawButton').css("display", "inline"); } const disableMarkerDrawing = () => { markerControlActive = false; markerControl.disable(); map.addControl(drawControl); $('#cancelDrawButton').css("display", "none"); } map.fire('drawControlReady'); $(document).ready(function(){ // activate drawing a marker when 'start report' button is clicked $('#startReportButton').click(function() { if (!markerControlActive){ enableMarkerDrawing(); } }); // activate drawing a marker when 'start report' button is clicked $('#cancelDrawButton').click(function() { if (markerControlActive){ disableMarkerDrawing(); } }); /* DEFINE ACTIONS TRIGGERED BY NEW DRAWINGS */ map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; if (type === 'marker') { disableMarkerDrawing(); // Set form geometry field to click location $('#incidentForm').modal('show'); var geom = JSON.stringify(layer.toGeoJSON().geometry); document.getElementById("point").value = geom; document.getElementById("nearmisspoint").value = geom; document.getElementById("hazPoint").value = geom; document.getElementById("theftPoint").value = geom; runConsentGeoLookup(layer.toGeoJSON().geometry); // FS 2023-04-30 This was commented out in f7a5dacadc84de49c4ea9f87821cbf75d9d8af34, unclear why? point geom not being passed into new infrastructure form, can't make submissions. Didn't find a quick fix. Uncommenting passed in "'{"type":"Point","coordinates":[-119.715754,34.421266]}'" instead of a Point objects as per other forms. // document.getElementById("newInfraPoint").value = geom; } if (type === 'polygon') { var fd = new FormData(); fd.append('csrfmiddlewaretoken', 'iBKrJzokrV3Fq5qQtGsJMWXDrcHRCbHzvGm6oKZ9he0JHWbxmnyRldIo9W2ZCKcn'); fd.append( 'geom', JSON.stringify(layer.toGeoJSON().geometry)) fd.append( 'email', "") // Ajax post request to server $.ajax({ url: "/es/poly_submit/", type: 'POST', data: fd, dataType: "json", processData: false, contentType: false, success: function(data) { if (data['success']) { // Add geom to map addAlertAreas(JSON.parse(data['polygon'])); // Print success message var message = "<strong>" + 'Success!' + "</strong><br>" + 'Your riding area was added.'; showMessage(message); } } }); } }); map.on('draw:edited', function(e) { editRidingArea(e, 'edit'); }); map.on('draw:deleted', function(e) { editRidingArea(e, 'delete'); }); function editRidingArea(e, type){ var editPk = "", editGeom = ""; e.layers.eachLayer(function (layer) { if(layer.options.pk){ editPk += (layer.options.pk + ';'); editGeom += (JSON.stringify(layer.toGeoJSON().geometry) + ";"); } }); var fd = new FormData(); fd.append('editType', type) fd.append('editPk', editPk) fd.append('editGeom', editGeom) // Ajax post request to server $.ajax({ url: "/es/edit/", type: 'POST', data: fd, dataType: "json", processData: false, contentType: false, success: function(data) { if (data['success']) { // Print success message var message = "<strong>" + 'Success!' + "</strong><br>" + 'Your riding area has been modified.'; showMessage(message); } } }); } }); }; function mobileDrawing(){ $(document).ready(function(){ $('#map').animate({marginTop: "+=23"}); $('.tip-msg').hide().animate({height:'show'}); $('.tip-msg .close').click(function(){ $('#map').animate({marginTop: "-=23"}); $('.tip-msg').animate({height:'hide'}); }); }); // Allow double click point adding for mobile users map.on('dblclick', function (e){ console.log("DOUBLE CLICK"); var geom = '{"type":"Point","coordinates":['+e.latlng.lng+','+e.latlng.lat+']}'; $('#incidentForm').modal('show'); document.getElementById("point").value = geom; document.getElementById("nearmisspoint").value = geom; document.getElementById("hazPoint").value = geom; document.getElementById("theftPoint").value = geom; }); } function runConsentGeoLookup(geom) { const multipolygon = turf.helpers.multiPolygon(US_Boundary.features[0].geometry.coordinates); const turfPoint = turf.helpers.point(geom.coordinates); const withinUS = turf.booleanWithin.default(turfPoint, multipolygon); if (withinUS) { const englishFormName = `Letter of informed consent.pdf` const spanishFormName = `Carta de consentimiento informado.pdf` termsConditionsText_EN = ` I am 13 years of age or older and have read and understood the <a href='/static/files/${englishFormName}' target='_blank'> terms and conditions</a>` termsConditionsText_ES = ` Tengo 13 años o más y he leído y entendido los <a href='/static/files/${spanishFormName}' target='_blank'> términos y condiciones</a>` termsConditionsText = LANGUAGE_CODE.toUpperCase() == 'ES' ? termsConditionsText_ES : termsConditionsText_EN $("#terms_checkbox").next().html(termsConditionsText); } } </script> <!-- Mobile tooltip to explain the double tapping --> <script src="/static/mapApp/js/geofence/US_Boundary.js"></script> <script type="text/javascript"> var LANGUAGE_CODE = "es"; </script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10