new legend

civicmapper · Nov 18, 2017 · 3c433db · 3c433db
1 parent 7f98227
commit 3c433db
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git a/project/static/css/style.css b/project/static/css/style.css
@@ -20,7 +20,7 @@ html,body,#map,#loadingScreen {
 	padding-top:6px;
 	padding-right:7px;
 }
-#credits, #titleBlock, #msg-results, #msg-error, #msg-tracing {
+#credits, #titleBlock, #msg-results, #msg-error, #msg-tracing, .legend-popover {
 	margin-top: 20px;
 	margin-right: 10px;
 	padding: 10px;
@@ -29,7 +29,7 @@ html,body,#map,#loadingScreen {
 	color: #fff;
 }
 
-@media (max-width: 992px) {
+@media (max-width: 768px) {
 	#titleBlock {
 		margin-top: 0px;
 		margin-right: -15px;
@@ -74,7 +74,7 @@ html,body,#map,#loadingScreen {
 	color: #D36122;
 }
 
-#aboutButton, #resetButton, .leaflet-control-zoom-in, .leaflet-control-zoom-out {
+#aboutButton, #resetButton, #legendButton, .leaflet-control-zoom-in, .leaflet-control-zoom-out {
 	color: #fff !important;
 	background-color: rgba(25,25,25,0.7) !important;
 	border-color: rgba(20,20,20,0.9) !important;
@@ -119,17 +119,14 @@ Color='#191919')";
   z-index: 1001;
 }
 
-@media (min-width: 992px) {
+@media (min-width: 768px) {
 	#messageControl {
 		width: 40%;
 		left: 30%;
 		top: 60%;		
 	}
 }
 
-
-
-
 #msg-loading {
   position: absolute;
   width: 50%;
@@ -217,6 +214,9 @@ Color='#191919')";
 .fa-minus {
 	font-stretch: ultra-expanded;
 }
+.legend-popover {
+	width: 200px;
+}
 
 /* Animated Line */
 

diff --git a/project/static/js/script.js b/project/static/js/script.js
@@ -481,39 +481,37 @@ function appInit() {
 	/** -------------------------------------------------------------------------
 	 * MAP CONTROLS
 	 */
-
-	//L.control.custom({
-	//	id: 'titleBlock',
-	//	position: 'topleft',
-	//	style: { width: '100%'},
-	//	content: '<h1 id="title">Flush the Toilet!<br><span id="subtitle">See where your wastewater goes when you flush!</span></h1>'
-	//}).addTo(map);
-
-	//L.control.custom({
-	//	id: 'credits',
-	//	position: 'topright',
-	//	content: '<p class="small"style="color:#fff;">A project by:</p><img class="credit-logos" src="static/resources/logo_alcosan.png"/><br><br><img class="credit-logos" src="static/resources/logo_3rww.png"/><br><br><img class="credit-logos" src="static/resources/logo_civicmapper.png"/>',
-	//	style: {
-	//		width: '220px',
-	//	}
-	//}).addTo(map);
-
-	//L.control.custom({
-	//	id: 'aboutButtonControl',
-	//		position: 'topright',
-	//	content: '<button id="aboutButton" class="btn btn-default" type="submit"><i class="fa fa-info"></i></button>',
-	//		events : {
-	//			click : function() {
-	//				messageControl.onAboutModalOpen();
-	//			}
-	//		}
-	//}).addTo(map);
+
 
 	L.control.attribution({prefix: "Not for official use or planning"})
 		.addAttribution(" Built by <a href='http://www.civicmapper.com'>CivicMapper</a> w/ <a href='http://www.3riverswetweather.org'>3RWW</a> | Powered by <a href='http://leafletjs.com'>Leaflet</a>, <a href='http://esri.github.io/esri-leaflet/'>Esri-Leaflet</a>, <a href='https://mapzen.com/'>Mapzen</a>")
 		.addTo(map);
 
 	L.control.zoom({position: 'bottomleft'}).addTo(map);
+
+	L.control.custom({
+		id: 'legendControl',
+		position: 'bottomleft',
+		//content: '<button id="legendButton" class="btn btn-default" type="submit"><i class="fa fa-info"></i></button>',
+		//content: '<a id="legendButton" tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus"><i class="fa fa-info"></i></a>'
+		content: '<button id="legendButton" type="button" class="btn btn-default" data-toggle="popover"><i class="fa fa-info"></i></button>'
+	}).addTo(map);
+
+
+
+	// add a row to the table in the GUI using a handlebars template.
+	// ...get the template from the page
+	var legendTemplate = $("#handlebars-legend").html();
+	// ...build the compiler
+	var legendCompiled = Handlebars.compile(legendTemplate);
+	// ...compile the result and append to the table
+	//$('#legendControl').html(legendCompiled());
+
+	$('#legendButton').popover({
+		html: true,
+		content: legendCompiled(),
+		template: '<div class="popover legend-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+	});	
 
 	/** -------------------------------------------------------------------------
 	 * MISC. MAP AND DOM EVENT LISTENERS

diff --git a/project/templates/pages/index.html b/project/templates/pages/index.html
@@ -53,7 +53,7 @@ <h3 class="title">Flush the Toilet!</h3>
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav navbar-right">
         <li id="aboutBlock">
-            <button id="aboutButton" type="button" class="btn btn-default"><i class="fa fa-question hidden-sm hidden-xs"></i> <span class="hidden-md hidden-lg">About Flush-It</span></button>
+            <button id="aboutButton" type="button" class="btn btn-default"><i class="fa fa-question hidden-xs"></i> <span class="hidden-sm hidden-md hidden-lg">About Flush-It</span></button>
             <!--<a id="aboutButton" href="#"><i class="fa fa-info"></i><span class="sr-only">About this thing</span></a>-->
         </li>
         <li id="credits">
@@ -183,6 +183,22 @@ <h4>Basemap data is &copy; <a href="https://www.mapbox.com/about/maps/" target="
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
+
+{% raw %}
+<script id="handlebars-legend" type="text/x-handlebars-template">
+    <div id="legend">
+        <div class="legend legend-line-2">
+            <p><i class="fa fa-minus"></i> ALCOSAN-owned infrastructure</p>
+        </div>
+        <div class="legend-line-3">
+            <p><i class="fa fa-minus"></i> Municipal-owned infrastructure</p>
+        </div>
+        <div class="legend-line-1">
+            <p><i class="fa fa-minus"></i> Regionalization Extents <small>(August 2017, Subject to Change)</small></p>
+        </div>        
+    </div>
+</script>
+{% endraw %}
 
 <div id="map"></div>