Leafletのサンプルページにある、このページにある地図上のオーバーレイを、ON 表示/OFF 非表示で切り替える事がしたいのですが、
どうやったらいいか分かりません。
出来たらレイヤーとしてON/OFFしたいのですが、
ポップアップの例は多くあり、よくわかるのですが、
オーバーレイを切り替える事はできないのでしょうか?
(コードは公式サイトのサンプルをそのまま貼らせて頂きます。)
Javascript
1 2<!DOCTYPE html> 3<html> 4<head> 5 6 <title>Choropleth Tutorial - Leaflet</title> 7 8 <meta charset="utf-8" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 11 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 12 13 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> 14 <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 15 16 17 <style> 18 #map { 19 width: 600px; 20 height: 400px; 21 } 22 </style> 23 24 <style>#map { width: 800px; height: 500px; } 25.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; } 26.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style> 27</head> 28<body> 29 30<div id='map'></div> 31 32<script type="text/javascript" src="us-states.js"></script> 33 34<script type="text/javascript"> 35 36 var map = L.map('map').setView([37.8, -96], 4); 37 38 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 39 maxZoom: 18, 40 attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 41 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 42 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 43 id: 'mapbox.light' 44 }).addTo(map); 45 46 47 // control that shows state info on hover 48 var info = L.control(); 49 50 info.onAdd = function (map) { 51 this._div = L.DomUtil.create('div', 'info'); 52 this.update(); 53 return this._div; 54 }; 55 56 info.update = function (props) { 57 this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? 58 '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' 59 : 'Hover over a state'); 60 }; 61 62 info.addTo(map); 63 64 65 // get color depending on population density value 66 function getColor(d) { 67 return d > 1000 ? '#800026' : 68 d > 500 ? '#BD0026' : 69 d > 200 ? '#E31A1C' : 70 d > 100 ? '#FC4E2A' : 71 d > 50 ? '#FD8D3C' : 72 d > 20 ? '#FEB24C' : 73 d > 10 ? '#FED976' : 74 '#FFEDA0'; 75 } 76 77 function style(feature) { 78 return { 79 weight: 2, 80 opacity: 1, 81 color: 'white', 82 dashArray: '3', 83 fillOpacity: 0.7, 84 fillColor: getColor(feature.properties.density) 85 }; 86 } 87 88 function highlightFeature(e) { 89 var layer = e.target; 90 91 layer.setStyle({ 92 weight: 5, 93 color: '#666', 94 dashArray: '', 95 fillOpacity: 0.7 96 }); 97 98 if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { 99 layer.bringToFront(); 100 } 101 102 info.update(layer.feature.properties); 103 } 104 105 var geojson; 106 107 function resetHighlight(e) { 108 geojson.resetStyle(e.target); 109 info.update(); 110 } 111 112 function zoomToFeature(e) { 113 map.fitBounds(e.target.getBounds()); 114 } 115 116 function onEachFeature(feature, layer) { 117 layer.on({ 118 mouseover: highlightFeature, 119 mouseout: resetHighlight, 120 click: zoomToFeature 121 }); 122 } 123 124 geojson = L.geoJson(statesData, { 125 style: style, 126 onEachFeature: onEachFeature 127 }).addTo(map); 128 129 map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>'); 130 131 132 var legend = L.control({position: 'bottomright'}); 133 134 legend.onAdd = function (map) { 135 136 var div = L.DomUtil.create('div', 'info legend'), 137 grades = [0, 10, 20, 50, 100, 200, 500, 1000], 138 labels = [], 139 from, to; 140 141 for (var i = 0; i < grades.length; i++) { 142 from = grades[i]; 143 to = grades[i + 1]; 144 145 labels.push( 146 '<i style="background:' + getColor(from + 1) + '"></i> ' + 147 from + (to ? '–' + to : '+')); 148 } 149 150 div.innerHTML = labels.join('<br>'); 151 return div; 152 }; 153 154 legend.addTo(map); 155 156</script> 157 158 159 160</body> 161</html> 162
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/04 12:28
2016/12/04 12:48 編集
2016/12/04 15:34