Add link to Help, add colored lines to layer titles, add map title

Author: ilyankou

index.html

@@ -74,6 +74,7 @@
 	contents += '<p>Distributed as-is with no warranty</p>';
 	contents += '<p>Stop your bike in a safe place before using</p>';
 	contents += '<p>Requires internet access to view maps and location</p>';
+  contents += '<p><a href="https://github.com/JackDougherty/bikemapcode">This is a link!</a></p>';
 	contents += '<p>Allow smartphone browser to show your location<br> - iPhone > Settings > Privacy > Location Services (On) > Safari (While Using)<br> - Android (to come)</p>';
 	contents += '<p>Click OK if browser asks permission to show your location</p>';
 	contents += '<img src="images/AllowCurrentLocation.png" alt="Allow Current Location screen" width="200" height="123">';
@@ -117,19 +118,19 @@
 		color: 'blue',
 		distanceMarkers: { showAll: 11, offset: 1609, bgcolor: 'bg-blue'} // meters per mile; bgcolor defined in style.css
 	}).addTo(map);
-	controlLayers.addOverlay(WeHa11, 'West Hartford 11 mile (blue)');
+	controlLayers.addOverlay(WeHa11, 'West Hartford 11 mile <i class="color-line bg-blue"></i>');
 
 	var WeHa25 = new L.GPX("routes/WeHa2015-25.gpx", {
 		color: 'green',
 		distanceMarkers: { showAll: 11, offset: 1609, bgcolor: 'bg-green'} // meters per mile; bgcolor defined in style.css
 	});
-	controlLayers.addOverlay(WeHa25, 'West Hartford 25 mile (green)');
+	controlLayers.addOverlay(WeHa25, 'West Hartford 25 mile <i class="color-line bg-green"></i>');
 
 	var WeHa50 = new L.GPX("routes/WeHa2015-50.gpx", {
 		color: '#ff3399',
 		distanceMarkers: { showAll: 11, offset: 1609, bgcolor: 'bg-pink'} // meters per mile; bgcolor defined in style.css
 	});
-	controlLayers.addOverlay(WeHa50, 'West Hartford 50 mile (pink)');
+	controlLayers.addOverlay(WeHa50, 'West Hartford 50 mile <i class="color-line bg-pink"></i>');
 
 	// Thanks @ilyankou for gatherBounds function; update layer names
 	function gatherBounds() {
@@ -157,8 +158,11 @@
 
 	map.on('layerremove', function() {
 		gatherBounds();
+
 	});
 
+  $('<h3 id="mapTitle">Putin</h3>').insertBefore('div.leaflet-control-layers-base');
+
 	</script>
 </body>
 </html>

src/L.Control.SlideMenu.css

@@ -1,27 +1,28 @@
-.leaflet-control-slidemenu{
+.leaflet-control-slidemenu {
     cursor: pointer;
 }
 
-.leaflet-menu{
+.leaflet-menu {
     position: absolute;
-    background-color: rgba(255, 255, 255, 255);
+    background-color: rgba(255, 255, 255, 1);
     overflow: auto;
     cursor: default;
     z-index: 9999;
+    overflow-x: hidden;
 }
 
-.leaflet-menu::-webkit-scrollbar{
+.leaflet-menu::-webkit-scrollbar {
     width: 7px;
     height: 7px;
     background: #f2f2f2;
 }
 
-.leaflet-menu::-webkit-scrollbar-thumb{
+.leaflet-menu::-webkit-scrollbar-thumb {
     border-radius: 2px;
     background: #777;
 }
 
-.leaflet-menu-close-button{
+.leaflet-menu-close-button {
     background-color: transparent;
     border: none;
     font-size: 2em;
@@ -30,10 +31,10 @@
     cursor: pointer;
 }
 
-.leaflet-menu-close-button:hover{
+.leaflet-menu-close-button:hover {
     color: #4285F4;
 }
 
-.leaflet-menu-contents{
+.leaflet-menu-contents {
       margin: 16px 10px 10px 10px;
 }

style.css

@@ -17,8 +17,7 @@ body {
     line-height: 36px;
 }*/
 
-/* slide menu button with question circle
-   and locate button */
+/* Slide menu button with question circle and locate button */
 .leaflet-control-slidemenu a,
 .leaflet-control-locate a,
 .leaflet-control-layers a {
@@ -28,16 +27,17 @@ body {
   font-size: 2em;
 }
 
-/* locate button */
+/* Locate button color */
 .leaflet-control-locate a {
   color: #00f !important;
 }
 
+/* Gray outline to compass icon for mobile devices */
 .leaflet-touch .leaflet-compass {
-  border: 2px solid rgba(0,0,0,0.2);
+  border: 2px solid rgba(0, 0, 0, 0.1);
 }
 
-/*line mileage distance markers and colors*/
+/* Line mileage distance markers and colors */
 .dist-marker {
 	font-size: 14px;
   line-height: 18px;
@@ -49,15 +49,21 @@ body {
   border-radius: 9px;
 }
 
-/* Remove borders around controls in mobile view
-.leaflet-touch .leaflet-bar {
-    box-shadow: none;
-    border: 2px solid green;
-} */
-
 /* Background colors of distance markers */
-.bg-blue { background: blue; }
-.bg-green { background: green; }
+.bg-blue { background: blue; color: blue}
+.bg-green { background: green; color: green;}
 .bg-black { background: black; }
 .bg-yellow { background: #fc0; }
 .bg-pink { background: #f39; }
+
+/* Colored line in layer control title */
+.color-line {
+  display: inline-block;
+  vertical-align: middle;
+  height: 5px;
+  width: 50px;
+}
+
+#mapTitle {
+  margin: 5px 0 5px 0;
+}