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">  <link rel="shortcut icon" type="image/x-icon" href="/static/mapApp/images/BikeMapsORG_Logo.ico" />  <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">  <meta name="google-site-verification" content="sHpQWUFpj7aSwFlam5B_xWmrBr_nEa49gu7IrFYe8aE" />  <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">  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>  <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">  <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"/>  <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" />  <link rel="stylesheet" href="/static/mapApp/css/index.css"> <link rel="stylesheet" href="/static/mapApp/css/forms.css">  <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" />  <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">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand"><img src="/static/mapApp/images/BikeMapsORG_Logo_notxt_sm.png"> BikeMaps.org</a> </div>   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" role="navigation"> <li class="active" ><a href="/">Home <span class="fa fa-map-marker"></span></a></li> <li ><a href="/vis/">Visualization <span class="fa fa-bar-chart"></span></a></li> <li ><a href="/blog/">Blog <span class="fa fa-newspaper-o"></span></a></li> <li ><a href="/about/">About <span class="fa fa-leaf"></span></a></li> </ul> <ul class="nav navbar-nav navbar-right">  <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-globe"></span> Language<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">Finnish</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>  <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>  <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-user"></span> Guest<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/user/login/?next=/">Log in</a></li> <li><a href="/user/register/">Register</a></li> </ul> </li> </ul> </div> </div> </nav>  <div id="message"> </div>  <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"> About </div> <div class="legend-group"> BikeMaps.org is a crowdsource tool for global mapping of cycling safety. Using the <span class="marker-icon"></span> button, add your own data on cycling crashes, near-misses, hazards, and thefts. <a href="/about/">More info</a> </div> </span> <div class="legend-group-title">Layers</div> <div class="legend-group"> <input class="layer-toggle" type="checkbox" value="incidentAppliedLayers" checked> Incidents <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> Citizen collision report</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> Citizen near miss report</small><br> <input type="checkbox" id="hazardCheckbox"checked> <i class="hazard fa fa-warning"></i><small> Cyclist hazard</small><br> <input type="checkbox" id="theftCheckbox"checked> <i class="theft fa fa-unlock"></i><small> Bike theft</small><br> <input type="checkbox" id="newInfrastructureCheckbox"checked> <i class="newInfrastructure fa fa-star"></i><small> New infrastructure</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> Strava ridership data <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">less</div> <div class="pull-right strava-gradient-label">more</div> </small> </div> </div> <div class="legend-group"> <input class="layer-toggle" type="checkbox" value="alertAreas" checked> Alert Areas <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="/disclaimer/" target="_blank ">Disclaimer</a> </div> </div> </div> </div> </form> </div> </div> </div>  <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"> Cancel </button> </div>   </div> </div>   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="/static/bootstrap/js/bootstrap.min.js"></script>  <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>  <script src="https://d3js.org/d3.v5.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>  <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>  <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>  <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="/jsi18n/"></script> <script type="text/javascript"> var LANGUAGE_CODE = "en-ca"; </script>  <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>   <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">×</button> <h4 class="modal-title" id="incidentForm">Submit a new report</h4> </div> <div class="modal-body"> <label class="control-label">What kind of report is this?</label>  <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#incidentReport" role="tab" data-toggle="tab">Collision or Fall</a></li> <li role="presentation"><a href="#nearmissReport" role="tab" data-toggle="tab">Near miss</a></li> <li role="presentation"><a href="#hazardReport" role="tab" data-toggle="tab">Hazard</a></li> <li role="presentation"><a href="#theftReport" role="tab" data-toggle="tab">Theft</a></li> </ul>  <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="incidentReport"> <form action="/incident_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-3482"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-3482" href="#collision-details">Collision Details</a> </h4> </div> <div id="collision-details" 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"> Were you directly involved in the incident?<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">Yes, this happened to me</option> <option value="No">No, I witnessed this happen to someone else</option> </select> </div> </div> <div id="div_id_witness_vehicle" class="form-group"> <label for="incident_witness_vehicle" class="control-label "> What were you riding? </label> <div class="controls "> <select name="witness_vehicle" id="incident_witness_vehicle" class="select form-control"> <option value="" selected>---------</option> <option value="Bicycle">Bicycle</option> <option value="E-scooter">E-scooter</option> <option value="Pedestrian">I was a pedestrian</option> <option value="Driving">I was driving</option> </select> </div> </div>    <div id="div_id_date" class="form-group "> <label for="id_incident_date" class="control-label requiredField"> When was the incident?<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-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: "2024-11-23T23:29:24Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "en-ca", }); </script> <div id="div_id_i_type" class="form-group"> <label for="incident_i_type" class="control-label requiredField"> What type of incident was it?<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="Collision"> <option value="Collision with stationary object or vehicle">Collision with a stationary object or vehicle</option> <option value="Collision with moving object or vehicle">Collision with a moving object or vehicle</option> </optgroup> <optgroup label="Near miss"> <option value="Near collision with stationary object or vehicle">Near miss with a stationary object or vehicle</option> <option value="Near collision with moving object or vehicle">Near miss with a moving object or vehicle</option> </optgroup> <optgroup label="Fall"> <option value="Fall">Lost control and fell</option> </optgroup> </select> </div> </div> <div id="div_id_incident_with" class="form-group"> <label for="incident_incident_with" class="control-label requiredField"> What sort of object did you collide or nearly collide with?<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="Vehicle"> <option value="Vehicle, head on">Head on</option> <option value="Vehicle, side">Side impact</option> <option value="Vehicle, angle">Angle impact</option> <option value="Vehicle, rear end">Rear end</option> <option value="Vehicle, turning right">Turning right</option> <option value="Vehicle, turning left">Turning left</option> <option value="Vehicle, passing">Passing</option> <option value="Vehicle, open door">Open vehicle door</option> </optgroup> <optgroup label="Person/animal"> <option value="Another cyclist">Another cyclist</option> <option value="Pedestrian">Pedestrian</option> <option value="Animal">Animal</option> <option value="E-scooter">E-scooter</option> </optgroup> <optgroup label="Infrastructure"> <option value="Curb">Curb</option> <option value="Train Tracks">Train Tracks</option> <option value="Pothole">Pothole</option> <option value="Lane divider">Lane divider</option> <option value="Sign/Post">Sign/Post</option> <option value="Roadway">Roadway</option> </optgroup> <option value="Other">Other (please describe)</option> </select> </div> </div> <div id="div_id_bicycle_type" class="form-group"> <label for="incident_bicycle_type" class="control-label "> What type of bicycle were you riding? </label> <div class="controls "> <select name="bicycle_type" id="incident_bicycle_type" class="select form-control"> <option value="" selected>---------</option> <option value="Personal">Personal (my own bicycle or a friend's)</option> <option value="Bike share">Bike share</option> <option value="Bike rental">Bike rental</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 "> Did the incident involve a pedal-assist electric bike (eBike)? </label> <div class="controls "> <select name="ebike" id="incident_ebike" class="select form-control"> <option value="" selected>---------</option> <option value="Yes">Yes</option> <option value="No">No</option> <option value="I don't know">I don't know</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"> Were you injured?<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="Yes"> <option value="Injury, no treatment">Medical treatment not required</option> <option value="Injury, saw family doctor">Saw a family doctor</option> <option value="Injury, hospital emergency visit">Visited the hospital emergency dept.</option> <option value="Injury, hospitalized">Overnight stay in hospital</option> </optgroup> <optgroup label="No"> <option value="No injury">No injury</option> </optgroup> <optgroup label="Unknown"> <option value="Unknown">I don't know</option> </optgroup> </select> </div> </div> <div id="div_id_impact" class="form-group"> <label for="incident_impact" class="control-label requiredField"> How did this incident impact your bicycling?<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">No impact</option> <option value="More careful">I'm now more careful about where/when/how I ride</option> <option value="Bike less">I bike less</option> <option value="More careful and bike less">I'm now more careful about where/when/how I ride AND I bike less</option> <option value="Stopped biking">I haven't biked since</option> <option value="Too soon">Too soon to say</option> <option value="Witness">I was not directly involved</option> </select> </div> </div> <div id="div_id_trip_purpose" class="form-group"> <label for="incident_trip_purpose" class="control-label "> What was the purpose of your trip? </label> <div class="controls "> <select name="trip_purpose" id="incident_trip_purpose" class="select form-control"> <option value="" selected>---------</option> <option value="Commute">To/from work or school</option> <option value="Exercise or recreation">Exercise or recreation</option> <option value="Social reason">Social reason (e.g., movies, visit friends)</option> <option value="Personal business">Personal business</option> <option value="During work">During work</option> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="collision_details" class="control-label "> Please give a brief description of the incident </label> <div class="controls "> <textarea name="details" cols="40" rows="10" maxlength="500" id="collision_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-3482" href="#incident-conditions">Conditions</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 "> What were the road conditions? </label> <div class="controls "> <select name="road_conditions" id="incident_road_conditions" class="select form-control"> <option value="" selected>---------</option> <option value="Dry">Dry</option> <option value="Wet">Wet</option> <option value="Loose sand, gravel, or dirt">Loose sand, gravel, or dirt</option> <option value="Icy">Icy</option> <option value="Snowy">Snowy</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_sightlines" class="form-group"> <label for="incident_sightlines" class="control-label "> How were the sight lines? </label> <div class="controls "> <select name="sightlines" id="incident_sightlines" class="select form-control"> <option value="" selected>---------</option> <option value="No obstructions">No obstructions</option> <option value="View obstructed">View obstructed</option> <option value="Glare or reflection">Glare or reflection</option> <option value="Obstruction on road">Obstruction on road</option> <option value="Don't Remember">Don'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 "> Were there cars parked on the roadside </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">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_bike_lights" class="form-group"> <label for="incident_bike_lights" class="control-label "> Were you using bike lights? </label> <div class="controls "> <select name="bike_lights" id="incident_bike_lights" class="select form-control"> <option value="" selected>---------</option> <option value="NL">No Lights</option> <option value="FB">Front and back lights</option> <option value="F">Front lights only</option> <option value="B">Back lights only</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_terrain" class="form-group"> <label for="incident_terrain" class="control-label "> What was the terrain like? </label> <div class="controls "> <select name="terrain" id="incident_terrain" class="select form-control"> <option value="" selected>---------</option> <option value="Uphill">Uphill</option> <option value="Downhill">Downhill</option> <option value="Flat">Flat</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_direction" class="form-group"> <label for="incident_direction" class="control-label "> What direction were you heading? </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">SW</option> <option value="W">W</option> <option value="NW">NW</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_turning" class="form-group"> <label for="incident_turning" class="control-label "> How were you moving? </label> <div class="controls "> <select name="turning" id="incident_turning" class="select form-control"> <option value="" selected>---------</option> <option value="Heading straight">Heading straight</option> <option value="Turning left">Turning left</option> <option value="Turning right">Turning right</option> <option value="I don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_intersection" class="form-group"> <label for="incident_intersection" class="control-label "> Did the incident occur at an intersection? </label> <div class="controls "> <select name="intersection" id="incident_intersection" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_aggressive" class="form-group"> <label for="incident_aggressive" class="control-label "> Was the driver aggressive? </label> <div class="controls "> <select name="aggressive" id="incident_aggressive" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</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-3482" href="#incident-personal-details">Personal Details</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>Why are we asking for personal details? </strong></a><div class="why-personal collapse" > <div class="well" > Personal details such as age and gender are routinely collected in health research including studies examining cycling injuries (e.g., Cripton et al. 2015). In addition, details such as rider experience and gender have been shown to be important predictors of cycling safety and risk (Beck et al. 2007). The goal of BikeMaps.org is to gather more comprehensive data to better assess cycling safety and risk. Providing personal details will allow us to more accurately fill in these data gaps. </div> </div> <div id="div_id_source" class="form-group"> <label for="incident_source" class="control-label "> Where did you first find out about BikeMaps.org? </label> <div class="controls "> <select name="source" id="incident_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directly from the BikeMaps.org team</option> <option value="BikeMaps swag">BikeMaps.org swag (e.g., seat cover, water bottle, etc.) without meeting the team</option> <option value="Traditional media">Traditional media (newspaper, TV, radio)</option> <option value="Another website">Link from another website</option> <option value="Word of mouth">Word of mouth</option> <option value="Social media">Social media (e.g., Twitter, Instagram, Facebook)</option> <option value="Other">Other</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_age" class="form-group"> <label for="incident_age" class="control-label "> What is your birth year? </label> <div class="controls "> <select name="age" id="incident_age" class="select form-control"> <option value="" selected>---------</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> <option value="1912">1912</option> </select> </div> </div> <div id="div_id_birthmonth" class="form-group"> <label for="incident_birthmonth" class="control-label "> What is your birth month? </label> <div class="controls "> <select name="birthmonth" id="incident_birthmonth" class="select form-control"> <option value="" selected>---------</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" id="incident_gender"> <label class="checkbox-inline" for="id_gender_1"> <input type="checkbox" name="gender" id="id_gender_1" value="1" choices="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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="[('F', 'Woman'), ('M', 'Man'), ('NBY', 'Non-binary'), ('GNC', 'Genderfluid or Gender nonconforming'), ('TS', 'Two-Spirit'), ('T', 'Transgender'), ('A', 'Agender'), ('P', 'Prefer not to say'), ('O', 'Another option not listed here')]" 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 "> Do you bike at least once a week? </label> <div class="controls "> <select name="regular_cyclist" id="incident_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_helmet" class="form-group"> <label for="incident_helmet" class="control-label "> Were you wearing a helmet? </label> <div class="controls "> <select name="helmet" id="incident_helmet" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> </div> </div> </div> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="nearmissReport"> <form action="/nearmiss_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-6698"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-6698" href="#near-miss-details">Near Miss Details</a> </h4> </div> <div id="near-miss-details" 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"> Were you directly involved in the incident?<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">Yes, this happened to me</option> <option value="No">No, I witnessed this happen to someone else</option> </select> </div> </div> <div id="div_id_witness_vehicle" class="form-group"> <label for="nearmiss_witness_vehicle" class="control-label "> What were you riding? </label> <div class="controls "> <select name="witness_vehicle" id="nearmiss_witness_vehicle" class="select form-control"> <option value="" selected>---------</option> <option value="Bicycle">Bicycle</option> <option value="E-scooter">E-scooter</option> <option value="Pedestrian">I was a pedestrian</option> <option value="Driving">I was driving</option> </select> </div> </div>    <div id="div_id_date" class="form-group "> <label for="id_nearmiss_date" class="control-label requiredField"> When was the incident?<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-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: "2024-11-23T23:29:24Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "en-ca", }); </script> <div id="div_id_i_type" class="form-group"> <label for="nearmiss_i_type" class="control-label requiredField"> What type of incident was it?<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="Collision"> <option value="Collision with stationary object or vehicle">Collision with a stationary object or vehicle</option> <option value="Collision with moving object or vehicle">Collision with a moving object or vehicle</option> </optgroup> <optgroup label="Near miss"> <option value="Near collision with stationary object or vehicle">Near miss with a stationary object or vehicle</option> <option value="Near collision with moving object or vehicle">Near miss with a moving object or vehicle</option> </optgroup> <optgroup label="Fall"> <option value="Fall">Lost control and fell</option> </optgroup> </select> </div> </div> <div id="div_id_incident_with" class="form-group"> <label for="nearmiss_incident_with" class="control-label requiredField"> What sort of object did you collide or nearly collide with?<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="Vehicle"> <option value="Vehicle, head on">Head on</option> <option value="Vehicle, side">Side impact</option> <option value="Vehicle, angle">Angle impact</option> <option value="Vehicle, rear end">Rear end</option> <option value="Vehicle, turning right">Turning right</option> <option value="Vehicle, turning left">Turning left</option> <option value="Vehicle, passing">Passing</option> <option value="Vehicle, open door">Open vehicle door</option> </optgroup> <optgroup label="Person/animal"> <option value="Another cyclist">Another cyclist</option> <option value="Pedestrian">Pedestrian</option> <option value="Animal">Animal</option> <option value="E-scooter">E-scooter</option> </optgroup> <optgroup label="Infrastructure"> <option value="Curb">Curb</option> <option value="Train Tracks">Train Tracks</option> <option value="Pothole">Pothole</option> <option value="Lane divider">Lane divider</option> <option value="Sign/Post">Sign/Post</option> <option value="Roadway">Roadway</option> </optgroup> <option value="Other">Other (please describe)</option> </select> </div> </div> <div id="div_id_bicycle_type" class="form-group"> <label for="nearmiss_bicycle_type" class="control-label "> What type of bicycle were you riding? </label> <div class="controls "> <select name="bicycle_type" id="nearmiss_bicycle_type" class="select form-control"> <option value="" selected>---------</option> <option value="Personal">Personal (my own bicycle or a friend's)</option> <option value="Bike share">Bike share</option> <option value="Bike rental">Bike rental</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 "> Did the incident involve a pedal-assist electric bike (eBike)? </label> <div class="controls "> <select name="ebike" id="nearmiss_ebike" class="select form-control"> <option value="" selected>---------</option> <option value="Yes">Yes</option> <option value="No">No</option> <option value="I don't know">I don't know</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"> Were you injured?<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="Yes"> <option value="Injury, no treatment">Medical treatment not required</option> <option value="Injury, saw family doctor">Saw a family doctor</option> <option value="Injury, hospital emergency visit">Visited the hospital emergency dept.</option> <option value="Injury, hospitalized">Overnight stay in hospital</option> </optgroup> <optgroup label="No"> <option value="No injury">No injury</option> </optgroup> <optgroup label="Unknown"> <option value="Unknown">I don't know</option> </optgroup> </select> </div> </div> <div id="div_id_impact" class="form-group"> <label for="nearmiss_impact" class="control-label requiredField"> How did this incident impact your bicycling?<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">No impact</option> <option value="More careful">I'm now more careful about where/when/how I ride</option> <option value="Bike less">I bike less</option> <option value="More careful and bike less">I'm now more careful about where/when/how I ride AND I bike less</option> <option value="Stopped biking">I haven't biked since</option> <option value="Too soon">Too soon to say</option> <option value="Witness">I was not directly involved</option> </select> </div> </div> <div id="div_id_trip_purpose" class="form-group"> <label for="nearmiss_trip_purpose" class="control-label "> What was the purpose of your trip? </label> <div class="controls "> <select name="trip_purpose" id="nearmiss_trip_purpose" class="select form-control"> <option value="" selected>---------</option> <option value="Commute">To/from work or school</option> <option value="Exercise or recreation">Exercise or recreation</option> <option value="Social reason">Social reason (e.g., movies, visit friends)</option> <option value="Personal business">Personal business</option> <option value="During work">During work</option> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="nearmiss_details" class="control-label "> Please give a brief description of the incident </label> <div class="controls "> <textarea name="details" cols="40" rows="10" maxlength="500" id="nearmiss_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-6698" href="#nearmiss-conditions">Conditions</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 "> What were the road conditions? </label> <div class="controls "> <select name="road_conditions" id="nearmiss_road_conditions" class="select form-control"> <option value="" selected>---------</option> <option value="Dry">Dry</option> <option value="Wet">Wet</option> <option value="Loose sand, gravel, or dirt">Loose sand, gravel, or dirt</option> <option value="Icy">Icy</option> <option value="Snowy">Snowy</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_sightlines" class="form-group"> <label for="nearmiss_sightlines" class="control-label "> How were the sight lines? </label> <div class="controls "> <select name="sightlines" id="nearmiss_sightlines" class="select form-control"> <option value="" selected>---------</option> <option value="No obstructions">No obstructions</option> <option value="View obstructed">View obstructed</option> <option value="Glare or reflection">Glare or reflection</option> <option value="Obstruction on road">Obstruction on road</option> <option value="Don't Remember">Don'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 "> Were there cars parked on the roadside </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">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_bike_lights" class="form-group"> <label for="nearmiss_bike_lights" class="control-label "> Were you using bike lights? </label> <div class="controls "> <select name="bike_lights" id="nearmiss_bike_lights" class="select form-control"> <option value="" selected>---------</option> <option value="NL">No Lights</option> <option value="FB">Front and back lights</option> <option value="F">Front lights only</option> <option value="B">Back lights only</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_terrain" class="form-group"> <label for="nearmiss_terrain" class="control-label "> What was the terrain like? </label> <div class="controls "> <select name="terrain" id="nearmiss_terrain" class="select form-control"> <option value="" selected>---------</option> <option value="Uphill">Uphill</option> <option value="Downhill">Downhill</option> <option value="Flat">Flat</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_direction" class="form-group"> <label for="nearmiss_direction" class="control-label "> What direction were you heading? </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">SW</option> <option value="W">W</option> <option value="NW">NW</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_turning" class="form-group"> <label for="nearmiss_turning" class="control-label "> How were you moving? </label> <div class="controls "> <select name="turning" id="nearmiss_turning" class="select form-control"> <option value="" selected>---------</option> <option value="Heading straight">Heading straight</option> <option value="Turning left">Turning left</option> <option value="Turning right">Turning right</option> <option value="I don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_intersection" class="form-group"> <label for="nearmiss_intersection" class="control-label "> Did the incident occur at an intersection? </label> <div class="controls "> <select name="intersection" id="nearmiss_intersection" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_aggressive" class="form-group"> <label for="nearmiss_aggressive" class="control-label "> Was the driver aggressive? </label> <div class="controls "> <select name="aggressive" id="nearmiss_aggressive" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</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-6698" href="#nearmiss-personal-details">Personal Details</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>Why are we asking for personal details?</strong></a><div class="why-personal collapse" > <div class="well" > Personal details such as age and gender are routinely collected in health research including studies examining cycling injuries (e.g., Cripton et al. 2015). In addition, details such as rider experience and gender have been shown to be important predictors of cycling safety and risk (Beck et al. 2007). The goal of BikeMaps.org is to gather more comprehensive data to better assess cycling safety and risk. Providing personal details will allow us to more accurately fill in these data gaps. </div> </div> <div id="div_id_source" class="form-group"> <label for="nearmiss_source" class="control-label "> Where did you first find out about BikeMaps.org? </label> <div class="controls "> <select name="source" id="nearmiss_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directly from the BikeMaps.org team</option> <option value="BikeMaps swag">BikeMaps.org swag (e.g., seat cover, water bottle, etc.) without meeting the team</option> <option value="Traditional media">Traditional media (newspaper, TV, radio)</option> <option value="Another website">Link from another website</option> <option value="Word of mouth">Word of mouth</option> <option value="Social media">Social media (e.g., Twitter, Instagram, Facebook)</option> <option value="Other">Other</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_age" class="form-group"> <label for="nearmiss_age" class="control-label "> What is your birth year? </label> <div class="controls "> <select name="age" id="nearmiss_age" class="select form-control"> <option value="" selected>---------</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> <option value="1912">1912</option> </select> </div> </div> <div id="div_id_birthmonth" class="form-group"> <label for="nearmiss_birthmonth" class="control-label "> What is your birth month? </label> <div class="controls "> <select name="birthmonth" id="nearmiss_birthmonth" class="select form-control"> <option value="" selected>---------</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</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 "> Do you bike at least once a week? </label> <div class="controls "> <select name="regular_cyclist" id="nearmiss_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_helmet" class="form-group"> <label for="nearmiss_helmet" class="control-label "> Were you wearing a helmet? </label> <div class="controls "> <select name="helmet" id="nearmiss_helmet" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> </div> </div> </div> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="hazardReport"> <form action="/hazard_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-7980"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-7980" href="#hazard-details">Hazard Details</a> </h4> </div> <div id="hazard-details" class="panel-collapse collapse in" > <div class="panel-body"> <input type="hidden" name="geom" id="hazPoint">    <div id="div_id_date" class="form-group "> <label for="id_hazard_date" class="control-label requiredField"> When was the incident?<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-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: "2024-11-23T23:29:24Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "en-ca", }); </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"> What type of hazard was it?<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="Infrastructure"> <option value="Curb">Curb</option> <option value="Island">Island</option> <option value="Train track">Train track</option> <option value="Pothole">Pothole</option> <option value="Road surface">Road surface</option> <option value="Poor signage">Poor signage</option> <option value="Speed limits">Speed limits</option> <option value="Blind corner">Blind corner or turn</option> <option value="Bike lane disappears">Bike lane disappears</option> <option value="Vehicles enter exit">Vehicles entering/exiting roadway</option> <option value="Dooring risk">Dooring risk zone</option> <option value="Vehicle in bike lane">Vehicle use of bike lane</option> <option value="Dangerous intersection">Dangerous intersection</option> <option value="Dangerous vehicle left turn">Dangerous vehicle left turn</option> <option value="Dangerous vehicle right turn">Dangerous vehicle right turn</option> <option value="Sensor does not detect bikes">Sensor does not pick up bikes</option> <option value="Steep hill">Steep hill - bike speed affected</option> <option value="Narrow road">Narrow road</option> <option value="Pedestrian conflict zone">Pedestrian conflict zone</option> <option value="Other infrastructure">Other (Please describe)</option> </optgroup> <optgroup label="Environmental"> <option value="Icy/Snowy">Icy/Snowy</option> <option value="Poor visibility">Poor visibility (fog, snow, smoke etc.)</option> <option value="Broken glass">Broken glass on road</option> <option value="Wet leaves">Wet leaves on road</option> <option value="Gravel rocks or debris">Gravel, rocks or debris on road/path</option> <option value="Construction">Construction</option> <option value="Other">Other (Please describe)</option> </optgroup> <optgroup label="Human Behaviour"> <option value="Poor visibility">Poor visibility</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">Other (Please describe)</option> </optgroup> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="hazard_details" class="control-label "> Please give a brief description of the incident </label> <div class="controls "> <textarea name="details" cols="40" rows="10" maxlength="500" id="hazard_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-7980" href="#hazard-personal-details">Personal Details</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>Why are we asking for personal details?</strong></a><div class="why-personal collapse" > <div class="well" > Personal details such as age and gender are routinely collected in health research including studies examining cycling injuries (e.g., Cripton et al. 2015). In addition, details such as rider experience and gender have been shown to be important predictors of cycling safety and risk (Beck et al. 2007). The goal of BikeMaps.org is to gather more comprehensive data to better assess cycling safety and risk. Providing personal details will allow us to more accurately fill in these data gaps. </div> </div> <div id="div_id_source" class="form-group"> <label for="hazard_source" class="control-label "> Where did you first find out about BikeMaps.org? </label> <div class="controls "> <select name="source" id="hazard_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directly from the BikeMaps.org team</option> <option value="BikeMaps swag">BikeMaps.org swag (e.g., seat cover, water bottle, etc.) without meeting the team</option> <option value="Traditional media">Traditional media (newspaper, TV, radio)</option> <option value="Another website">Link from another website</option> <option value="Word of mouth">Word of mouth</option> <option value="Social media">Social media (e.g., Twitter, Instagram, Facebook)</option> <option value="Other">Other</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_age" class="form-group"> <label for="hazard_age" class="control-label "> What is your birth year? </label> <div class="controls "> <select name="age" id="hazard_age" class="select form-control"> <option value="" selected>---------</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> <option value="1912">1912</option> </select> </div> </div> <div id="div_id_birthmonth" class="form-group"> <label for="hazard_birthmonth" class="control-label "> What is your birth month? </label> <div class="controls "> <select name="birthmonth" id="hazard_birthmonth" class="select form-control"> <option value="" selected>---------</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</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 "> Do you bike at least once a week? </label> <div class="controls "> <select name="regular_cyclist" id="hazard_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> </div> </div> </div> </div> </form> </div> <div role="tabpanel" class="tab-pane" id="theftReport"> <form action="/theft_submit/" method="POST" role="form" enctype="multipart/form-data"> <div class="panel-group" id="accordion-9317"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-9317" href="#theft-details">Theft Details</a> </h4> </div> <div id="theft-details" class="panel-collapse collapse in" > <div class="panel-body"> <input type="hidden" name="geom" id="theftPoint">    <div id="div_id_date" class="form-group "> <label for="id_theft_date" class="control-label requiredField"> When was the incident?<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-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: "2024-11-23T23:29:24Z", startDate: "-2y", endDate: new Date(), minuteStep: 5, pickerPosition: 'bottom-left', language: "en-ca", }); </script> <div id="div_id_i_type" class="form-group"> <label for="theft_i_type" class="control-label requiredField"> What was stolen?<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 < $1000)">Bike (value < $1000)</option> <option value="Bike (value >= $1000)">Bike (value >= $1000)</option> <option value="Major bike component">Major bike component (e.g. tire, seat, handlebars, etc.)</option> <option value="Minor bike component">Minor bike component (e.g. lights, topbar padding, bell, etc.)</option> </select> </div> </div> <div id="div_id_how_locked" class="form-group"> <label for="theft_how_locked" class="control-label requiredField"> Did you have your bike locked?<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="Yes"> <option value="Frame locked">Frame locked</option> <option value="Frame and tire locked">Frame and tire locked</option> <option value="Frame and both tires locked">Frame and both tires locked</option> <option value="Tire(s) locked">Tire(s) locked</option> </optgroup> <optgroup label="No"> <option value="Not locked">Not locked</option> </optgroup> </select> </div> </div> <div id="div_id_lock" class="form-group"> <label for="theft_lock" class="control-label requiredField"> What kind of lock were you using?<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">Cable lock</option> <option value="U-Lock and cable">U-Lock and cable</option> <option value="Padlock">Padlock</option> <option value="NA">Not locked</option> </select> </div> </div> <div id="div_id_locked_to" class="form-group"> <label for="theft_locked_to" class="control-label requiredField"> Where did you leave your bike?<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">At an outdoor bike rack</option> <option value="Indoor bike rack">At an indoor bike rack (e.g. parking garage, bike room)</option> <option value="Bike locker">Inside a bike locker</option> <option value="Street sign">Against street sign</option> <option value="Fence/railing">Against a fence or railing</option> <option value="Bench">Against a public bench</option> <option value="Indoors/lobby">Inside a building/lobby</option> <option value="Other">Other (please describe)</option> </select> </div> </div> <div id="div_id_lighting" class="form-group"> <label for="theft_lighting" class="control-label requiredField"> Which describes the lighting conditions where and when the theft occurred?<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">Well lit (e.g. bright daylight)</option> <option value="Moderate">Moderately well lit (e.g. streetlights, parking garage)</option> <option value="Poor">Poorly lit (e.g. night, unlit alleyway)</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_traffic" class="form-group"> <label for="theft_traffic" class="control-label requiredField"> Which best describes the traffic in the area where the theft occurred?<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">Very heavy (pedestrians passing by in a nearly constant stream)</option> <option value="High">Heavy (pedestrians passing by regularly)</option> <option value="Medium">Moderate (irregular pedestrian with busy vehicle traffic)</option> <option value="Low">Light (irregular pedestrian with light to moderate vehicle traffic)</option> <option value="Very Low">Very light (little pedestrian and vehicle traffic)</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_details" class="form-group"> <label for="theft_details" class="control-label "> Please give a brief description of the incident </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-9317" href="#theft-personal-details">Personal Details</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>Why are we asking for personal details?</strong></a><div class="why-personal collapse" > <div class="well" > Personal details such as age and gender are routinely collected in health research including studies examining cycling injuries (e.g., Cripton et al. 2015). In addition, details such as rider experience and gender have been shown to be important predictors of cycling safety and risk (Beck et al. 2007). The goal of BikeMaps.org is to gather more comprehensive data to better assess cycling safety and risk. Providing personal details will allow us to more accurately fill in these data gaps. </div> </div> <div id="div_id_source" class="form-group"> <label for="theft_source" class="control-label "> Where did you first find out about BikeMaps.org? </label> <div class="controls "> <select name="source" id="theft_source" class="select form-control"> <option value="" selected>---------</option> <option value="BikeMaps team">Directly from the BikeMaps.org team</option> <option value="BikeMaps swag">BikeMaps.org swag (e.g., seat cover, water bottle, etc.) without meeting the team</option> <option value="Traditional media">Traditional media (newspaper, TV, radio)</option> <option value="Another website">Link from another website</option> <option value="Word of mouth">Word of mouth</option> <option value="Social media">Social media (e.g., Twitter, Instagram, Facebook)</option> <option value="Other">Other</option> <option value="Don't remember">I don't remember</option> </select> </div> </div> <div id="div_id_regular_cyclist" class="form-group"> <label for="theft_regular_cyclist" class="control-label "> Do you bike at least once a week? </label> <div class="controls "> <select name="regular_cyclist" id="theft_regular_cyclist" class="select form-control"> <option value="" selected>---------</option> <option value="Y">Yes</option> <option value="N">No</option> <option value="I don't know">I don't know</option> </select> </div> </div> <div id="div_id_police_report" class="form-group"> <label for="theft_police_report" class="control-label "> Did you file a report with the police? </label> <div class="controls "> <select name="police_report" id="theft_police_report" class="select form-control"> <option value="" selected>---------</option> <option value="True">Yes</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 "> If you filed a police report, what is the report number? </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 "> Did you file an insurance claim? </label> <div class="controls "> <select name="insurance_claim" id="theft_insurance_claim" class="select form-control"> <option value="" selected>---------</option> <option value="True">Yes</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 "> If you filed an insurance claim, what is the claim number? </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> I have read and understand the <a href='/terms_and_conditions/' target=_blank> terms and conditions</a></strong> </div> </div> <div class="col-xs-6"> <button type="button" name="Cancel" class="btn btn-default cancel-btn" onclick="javascript:close_modal()">Cancel</button> <button type="button" name="Submit" class="btn btn-primary submit-btn disabled" onclick="javascript:submit_form()">Submit</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">×</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">×</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("I was not directly involved"); $("#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("What type of bicycle was involved in the incident?"); $('#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("Were you using bike lights?"); $('#div_id_direction > label').text("What direction were you heading?"); $('#div_id_turning > label').text("How were you moving?"); $('#div_id_bicycle_type > label').text("What type of bicycle were you riding?"); $('#div_id_helmet > label').text("Were you wearing a helmet?"); } } //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>   <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">×</span><span class="sr-only">Close</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">Close</button> <div class="btn-group"> <a href="/user/register/" type="button" class="btn btn-primary">Register</a> <a href="/user/login/" type="button" class="btn btn-primary">Login</a> </div> </div> </div> </div> </div>  <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">×</span><span class="sr-only">Close</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> </div> </div>  <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">×</span><span class="sr-only">Close</span></button>  </div>  </div> </div> </div>   <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 = "Cancel"; 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 = "Add a new marker."; L.drawLocal.draw.toolbar.buttons.polygon = "Trace an area to receive incident alerts."; L.drawLocal.draw.handlers.marker.tooltip.start = "Place me where the incident, hazard, or theft occurred."; 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', 'EVB2dbkDBfcIcAnWe8V34lpXkXtrEYHlpHiBHnqrOR6u1vEyfq9Es8HJki5aivmi'); fd.append( 'geom', JSON.stringify(layer.toGeoJSON().geometry)) fd.append( 'email', "") // Ajax post request to server $.ajax({ url: "/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: "/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>  <script src="/static/mapApp/js/geofence/US_Boundary.js"></script> <script type="text/javascript"> var LANGUAGE_CODE = "en-ca"; </script> </body> </html>

CINXE.COM

BikeMaps