Leaflet.jsのサンプルで、
http://leafletjs.com/examples/choropleth/
を改造しようとしているのですが、チェックボックスのON/OFFで表示・非表示をしたいのですが、何度かチェックボックスをON/OFFするとどんどん色が濃くなって行くため、
一度しか読み込まないようにしたつもりなのですが、うまく行きません。
1つは、map.removeLayer(choropleth01);が出来ない事、
もう1つは、色がどんどん濃くなって行く事です。
アドバイスを頂けたら幸いです。
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 choropleth01 = new L.LayerGroup(); 37 38 var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 39 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' 40+ 41 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 42 mbUrl ='https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', 43 osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 44 osmAttrib = '© <a href="http://openstreetmap.org/copyright">' + 'OpenStreetMap</a> contributors'; 45 46 var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light',attribution: mbAttr}), 47 streets = L.tileLayer(mbUrl, {id: 'mapbox.streets',attribution: mbAttr}); 48 49 var map = L.map('map', { 50 center: [37.8, -96], 51 zoom: 4, 52 layers: [grayscale, choropleth01] 53 }); 54 var baseLayers = { 55 "Grayscale": grayscale, 56 "Streets": streets, 57 }; 58 var overlays = { 59 "Choropleth01" : choropleth01 60 }; 61 L.control.layers(baseLayers, overlays).addTo(map); 62 63 64 // control that shows state info on hover 65 var info = L.control(); 66 67 info.onAdd = function (map) { 68 this._div = L.DomUtil.create('div', 'info'); 69 this.update(); 70 return this._div; 71 }; 72 73 info.update = function (props) { 74 this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? 75 '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' 76 : 'Hover over a state'); 77 }; 78 79 info.addTo(map); 80 81 82 // get color depending on population density value 83 function getColor(d) { 84 return d > 1000 ? '#800026' : 85 d > 500 ? '#BD0026' : 86 d > 200 ? '#E31A1C' : 87 d > 100 ? '#FC4E2A' : 88 d > 50 ? '#FD8D3C' : 89 d > 20 ? '#FEB24C' : 90 d > 10 ? '#FED976' : 91 '#FFEDA0'; 92 } 93 94 function style(feature) { 95 return { 96 weight: 2, 97 opacity: 1, 98 color: 'white', 99 dashArray: '3', 100 fillOpacity: 0.7, 101 fillColor: getColor(feature.properties.density) 102 }; 103 } 104 105 106 var legend = L.control({position: 'bottomright'}); 107 108 legend.onAdd = function (map) { 109 110 var div = L.DomUtil.create('div', 'info legend'), 111 grades = [0, 10, 20, 50, 100, 200, 500, 1000], 112 labels = [], 113 from, to; 114 115 for (var i = 0; i < grades.length; i++) { 116 from = grades[i]; 117 to = grades[i + 1]; 118 119 labels.push( 120 '<i style="background:' + getColor(from + 1) + '"></i> ' + 121 from + (to ? '–' + to : '+')); 122 } 123 124 div.innerHTML = labels.join('<br>'); 125 return div; 126 }; 127 128 legend.addTo(map); 129 130 131 var keep_on = "keep_off"; 132 133 134 map.on('overlayadd', function(a) { 135 136 137 138 139 function highlightFeature(e) { 140 var layer = e.target; 141 142 layer.setStyle({ 143 weight: 5, 144 color: '#666', 145 dashArray: '', 146 fillOpacity: 0.7 147 }); 148 149 if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { 150 layer.bringToFront(); 151 } 152 153 info.update(layer.feature.properties); 154 } 155 156 var geojson; 157 158 function resetHighlight(e) { 159 geojson.resetStyle(e.target); 160 info.update(); 161 } 162 163 function zoomToFeature(e) { 164 map.fitBounds(e.target.getBounds()); 165 } 166 167 function onEachFeature(feature, layer) { 168 layer.on({ 169 mouseover: highlightFeature, 170 mouseout: resetHighlight, 171 click: zoomToFeature 172 }); 173 } 174 175 if(keep_on = "keep_off"){ 176 geojson = L.geoJson(statesData, { 177 style: style, 178 onEachFeature: onEachFeature 179 }).addTo(map); 180 181 keep_on = "keep_on"; 182 } 183 184 185 map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>'); 186 }); 187 188 map.on('overlayremove', function(a) { 189 map.removeLayer(choropleth01); 190 }); 191 192</script> 193 194 195 196</body> 197</html> 198
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/02 01:53
2017/01/02 03:08
2017/01/02 04:29