HTML 、JS、CSS 添加控制面板例子---02

<div class='map-overlay-2' id='features'>
	<h2>US population density</h2>
	<div id='pd'>
		<p>Hover over a state!</p>
	</div>
</div>
<div class='map-overlay-2' id='legend'>
	<ul>
		<li><span class="legend-key" style="background-color:#FFEDA0"></span>
		<span class="legend-key">layer1</span>
		</li>
		<li><span class="legend-key" style="background-color:#FED976"></span>
		<span class="legend-key">layer2</span>
		</li>		
		<li><span class="legend-key" style="background-color:#FEB24C"></span>
		<span class="legend-key">layer3</span></li>
		<li><span class="legend-key" style="background-color:#FD8D3C"></span>
		<span class="legend-key">layer4</span></li>
		<li><span class="legend-key" style="background-color:#FC4E2A"></span>
		<span class="legend-key">layer5</span></li>
		<li><span class="legend-key" style="background-color:#E31A1C;border-radius: 90px;"></span>
		<span class="legend-key">layer6</span></li>
		<li><span class="legend-key" style="background-color:#BD0026;"></span>
		<span class="legend-key">layer7</span></li>
	</ul>
</div>

/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay-2 {
  position: absolute;
  
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  margin-right: 20px;
  font-family: Arial, sans-serif;
  overflow: auto;
  border-radius: 3px;
}

#features {
  top: 0;
  height: 100px;
  margin-top: 20px;
  width: 250px;
}

#legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 18px;
  margin-bottom: 40px;
  width: 200px;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

#legend ul {
  list-style-type:none;
}

#legend li {
  margin-left: -40px;
}

var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
for (i = 0; i < layers.length; i++) {
  var layer = layers[i];
  var color = colors[i];
  var item = document.createElement('div');
  var key = document.createElement('span');
  key.className = 'legend-key';
  key.style.backgroundColor = color;

  var value = document.createElement('span');
  value.innerHTML = layer;
  item.appendChild(key);
  item.appendChild(value);
  legend.appendChild(item);
}