Add CanBICs layer

locale/fr/LC_MESSAGES/django.po

@@ -1418,6 +1418,10 @@ msgstr "Volume de cyclistes"
 msgid "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."
 msgstr "Nos données sur le volume de cyclistes proviennent directement de l’application mobile de localisation de Strava pour les cyclistes et les coureurs. Grâce à Strava, vous pouvez suivre vos déplacements et vos promenades à vélo sur votre appareil Android ou votre iPhone."
 
+#: .\mapApp\templates\mapApp\util\tips.html:61
+msgid "The Canadian Bikeway Comfort and Safety Classification (<a href='https://chatrlab.ca/projects/the-canadian-bikeway-comfort-and-safety-can-bics-classification-system/' target='_blank' rel='noopener noreferrer'>Can-BICS</a>) assigns bicycling facilities into three categories (low, medium, or high) based on user comfort and safety."
+msgstr "Le Système de classification du confort et de la sécurité des voies cyclables canadiennes  (<a href='https://chatrlab.ca/projects/the-canadian-bikeway-comfort-and-safety-can-bics-classification-system/can-bics-francais/' target='_blank' rel='noopener noreferrer'>Can-BICS</a>) classe les installations cyclables en trois catégories (faible, moyen ou élevé) en fonction du confort et de la sécurité des cyclistes."
+
 #: .\mapApp\templates\mapApp\vis.html:8
 msgid "Bikemaps Data Visualization"
 msgstr "Visualisation des données de Bikemaps"

mapApp/static/mapApp/css/index.css

@@ -143,6 +143,13 @@ span.date{
     display: inline-block;
 }
 
+.canBICS-line {
+  border-bottom: 2px solid #386cb0;
+  height: 2px;
+  width: 150px;
+  display: inline-block;
+}
+
 .bikerack{
     display:inline-block;
     background: #666666;

mapApp/static/mapApp/js/index.js

@@ -16,7 +16,7 @@ var map = L.map('map', {
     minZoom: 2,
     zoom: 4,
     zoomControl: false,
-    layers: [OpenStreetMap, CyclOSM, stravaHM],
+    layers: [OpenStreetMap, CyclOSM, canBICS, stravaHM],
     worldCopyJump: true,
 });
 
@@ -28,7 +28,6 @@ var geocoder = L.Control.geocoder({
     placeholder: gettext('Search...'),
     errorMessage: gettext('Nothing found.')
 }).on('markgeocode', function(result) {
-  console.log(result.geocode);
   map.fitBounds(result.geocode.bbox);
   geocodeMarker && map.removeLayer(geocodeMarker); //remove old marker if it exists
   geocodeMarker = new L.Marker(result.geocode.center, {

mapApp/static/mapApp/js/map.js

@@ -11,6 +11,9 @@ var MapQuestOpen_OSM = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z
         minZoom: 14,
         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
     }),
+    canBICS = L.esri.featureLayer({
+      url: 'https://services.arcgis.com/E5vyYQKPMX5X3R3H/arcgis/rest/services/national/FeatureServer/0',
+    }),
     Mapnik_BW = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
       attribution: '<a href="https://openstreetmap.org/">&copy OpenStreetMap contributors, CC-BY-SA</a>',
       subdomains: '1234'

mapApp/templates/mapApp/index.html

@@ -53,6 +53,9 @@
   <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
     integrity="sha512-myckXhaJsP7Q7MZva03Tfme/MSF5a6HC2xryjAM4FxPLHGqlh5VALCbywHnzs2uPoF/4G/QVXyYDDSkp5nPfig=="
     crossorigin=""></script>
+  <!-- Load Esri Leaflet Renderers -->
+  <!-- This will hook into Esri Leaflet to get renderer info when adding a feature layer -->
+  <script src="https://unpkg.com/esri-leaflet-renderers@2"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
   <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
   <script type="text/javascript">

mapApp/templates/mapApp/map_legend.html

@@ -58,6 +58,15 @@
             </div>
           </div>
 
+          <div class="legend-group">
+            <input class="layer-toggle" id="canBICSCheckbox" type="checkbox" value="canBICS" checked>
+            {% trans "Can-BICS" %}
+            <a data-target="#about-canbics" data-toggle="modal" href="#"><i class="fa fa-question-circle fa-1x"></i></a><br>
+            <div class="legend-subtext collapse in">
+              <small class="canBICS-line"></small>
+            </div>
+          </div>
+
           <div class="legend-group">
             <input class="layer-toggle" type="checkbox" value="alertAreas" checked>
             {% trans "Alert Areas" %}

mapApp/templates/mapApp/util/tips.html

@@ -63,6 +63,27 @@ <h4 class="modal-title text-center">{% trans "Rider density" %}</h4>
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 
+<!-- Modal popup that explains canbics (triggered from map legend) -->
+<div class="modal fade" id="about-canbics">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{% trans "Close" context "close window button" %}</span></button>
+        <h4 class="modal-title text-center">{% trans "Can-BICS" %}</h4>
+      </div>
+      <div class="modal-body">
+          <div class="row">
+            <div class="col-xs-12">
+              <p>
+                {% blocktrans %}The Canadian Bikeway Comfort and Safety Classification (<a href='https://chatrlab.ca/projects/the-canadian-bikeway-comfort-and-safety-can-bics-classification-system/' target='_blank' rel='noopener noreferrer'>Can-BICS</a>) assigns bicycling facilities into three categories (low, medium, or high) based on user comfort and safety.{% endblocktrans %}
+              </p>
+            </div>
+          </div>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
 
 <!-- Modal popup that explains strava (triggered from map legend) -->
 <div class="modal fade" id="wpg-raffle">