Update resilientCommunity.html

latest working version
dpinney · May 13, 2024 · 70f3aa1 · 70f3aa1
1 parent 723b8a5
commit 70f3aa1
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/omf/models/resilientCommunity.html b/omf/models/resilientCommunity.html
@@ -108,7 +108,8 @@
 			var iframe = document.createElement('iframe');
 			iframe.style = 'width:1000px; height:1000px; border-radius:8px;'
 			//document.getElementById('resilienceMap').innerHTML = '<div class="img-div" style="position:relative;left:0;bottom:-800px;"><img style="position:relative" src="{{allOutputDataDict["legend_path"]}}"></div>';
-			document.getElementById('resilienceMap').innerHTML = "<div class='my-legend' style='position:relative;left:0;bottom:-1000px;'><div class='legend-title' style='position:relative'>Social Vulnerability Legend</div> <div class='legend-scale'> <ul class='legend-labels'> <li><span style='background:#0000FF;'></span>Very High</li> <li><span style='background:#ADD8E6;'></span>Rel. High</li> <li><span style='background:#90EE90;'></span>Rel. Moderate</li> <li><span style='background:#FFFF00;'></span>Rel. Low</li> <li><span style='background:#808080;'></span>Very Low</li> <li><span style='background:#000000;'></span>Data Unavailable </li> </ul> </div> <style type='text/css'> .my-legend .legend-title { text-align: left; margin-bottom: 8px; font-weight: bold; font-size: 90%; } .my-legend .legend-scale ul { margin: 0; padding: 0; float: left; list-style: none; } .my-legend .legend-scale ul li { display: block; float: left; width: 50px; margin-bottom: 6px; text-align: center; font-size: 70%; list-style: none; } .my-legend ul.legend-labels li span { display: block; float: left; height: 15px; width: 50px; } .my-legend .legend-source { font-size: 70%; color: #999; clear: both; } .my-legend a { color: #777; } </style> "
+			//document.getElementById('resilienceMap').innerHTML = "<div class='my-legend' style='position:relative;left:0;bottom:-1000px;'><div class='legend-title' style='position:relative'>Social Vulnerability Legend</div> <div class='legend-scale'> <ul class='legend-labels'> <li><span style='background:#0000FF;'></span>Very High</li> <li><span style='background:#ADD8E6;'></span>Rel. High</li> <li><span style='background:#90EE90;'></span>Rel. Moderate</li> <li><span style='background:#FFFF00;'></span>Rel. Low</li> <li><span style='background:#808080;'></span>Very Low</li> <li><span style='background:#000000;'></span>Data Unavailable </li> </ul> </div> <style type='text/css'> .my-legend .legend-title { text-align: left; margin-bottom: 8px; font-weight: bold; font-size: 90%; } .my-legend .legend-scale ul { margin: 0; padding: 0; float: left; list-style: none; } .my-legend .legend-scale ul li { display: block; float: left; width: 50px; margin-bottom: 6px; text-align: center; font-size: 70%; list-style: none; } .my-legend ul.legend-labels li span { display: block; float: left; height: 15px; width: 50px; } .my-legend .legend-source { font-size: 70%; color: #999; clear: both; } .my-legend a { color: #777; } </style> "
+			document.getElementById('resilienceMap').innerHTML = "<div class='my-legend' style='position:relative;left:0;bottom:-1000px;'><div class='legend-title' style='position:relative'><p style='color:black; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;'>Social Vulnerability Legend</p></div> <div class='legend-scale'> <ul class='legend-labels'> <li><span style='background:#0000FF;'></span><p style='color:black; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;'>Very High</p></li> <li><span style='background:#ADD8E6;'></span><p style='color:black; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;'>Rel. High</p></li> <li><span style='background:#90EE90;'></span><p style='color:black; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;'>Rel. Moderate</p></li> <li><span style='background:#FFFF00;'></span><p style='color:black; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;'>Rel. Low</p></li> <li><span style='background:#808080;'></span><p style='color:black; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;'>Very Low</p></li> <li><span style='background:#000000;'></span><p style='color:black; text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;'>Data Unavailable</p> </li> </ul> </div> <style type='text/css'> .my-legend .legend-title { text-align: left; margin-bottom: 8px; font-weight: bold; font-size: 90%; } .my-legend .legend-scale ul { margin: 0; padding: 0; float: left; list-style: none; } .my-legend .legend-scale ul li { display: block; float: left; width: 50px; margin-bottom: 6px; text-align: center; font-size: 70%; list-style: none; } .my-legend ul.legend-labels li span { display: block; float: left; height: 15px; width: 50px; } .my-legend .legend-source { font-size: 70%; color: #999; clear: both; } .my-legend a { color: #777; } </style> "
 			document.getElementById('resilienceMap').appendChild(iframe);
 			iframe.contentWindow.document.open();
 			iframe.contentWindow.document.write(mapContent);
@@ -138,4 +139,3 @@
 		</div>
 	{% endif %}
 </body>
-