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

 

	
US population density
	

		
Hover over a state!
	


	

		

		layer1
		
		

		layer2
		
		
		

		layer3
		

		layer4
		

		layer5
		

		layer6
		

		layer7
	

/**
* 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);
}