質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2371閲覧

leafletjs choroplethサンプルの改造について

oyatsu8

総合スコア97

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/01/01 17:29

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 &copy; <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 = '&copy; <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 ? '&ndash;' + 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 &copy; <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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

以下のように、choropleth01にstatesDataのデータを追加してあげれば、overlayaddイベントとかを使わなくてもいいのではないかと思いました。

javascript

1 geojson = L.geoJson(statesData, { 2 style: style, 3 onEachFeature: onEachFeature 4 }).addTo(choropleth01);

以下はコード全体です。

html

1<!DOCTYPE html> 2<html> 3<head> 4 5 <title>Choropleth Tutorial - Leaflet</title> 6 7 <meta charset="utf-8" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 10 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 11 12 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> 13 <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 14 15 16 <style> 17 #map { 18 width: 600px; 19 height: 400px; 20 } 21 </style> 22 23 <style>#map { width: 800px; height: 500px; } 24.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; } 25.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }</style> 26</head> 27<body> 28 29<div id='map'></div> 30 31<script type="text/javascript" src="us-states.js"></script> 32 33<script type="text/javascript"> 34 35 var choropleth01 = new L.LayerGroup(); 36 37 var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 38 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' 39+ 40 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 41 mbUrl ='https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', 42 osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 43 osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">' + 'OpenStreetMap</a> contributors'; 44 45 var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light',attribution: mbAttr}), 46 streets = L.tileLayer(mbUrl, {id: 'mapbox.streets',attribution: mbAttr}); 47 48 var map = L.map('map', { 49 center: [37.8, -96], 50 zoom: 4, 51 layers: [grayscale, choropleth01] 52 }); 53 var baseLayers = { 54 "Grayscale": grayscale, 55 "Streets": streets, 56 }; 57 var overlays = { 58 "Choropleth01" : choropleth01 59 }; 60 L.control.layers(baseLayers, overlays).addTo(map); 61 62 63 // control that shows state info on hover 64 var info = L.control(); 65 66 info.onAdd = function (map) { 67 this._div = L.DomUtil.create('div', 'info'); 68 this.update(); 69 return this._div; 70 }; 71 72 info.update = function (props) { 73 this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? 74 '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' 75 : 'Hover over a state'); 76 }; 77 78 info.addTo(map); 79 80 81 // get color depending on population density value 82 function getColor(d) { 83 return d > 1000 ? '#800026' : 84 d > 500 ? '#BD0026' : 85 d > 200 ? '#E31A1C' : 86 d > 100 ? '#FC4E2A' : 87 d > 50 ? '#FD8D3C' : 88 d > 20 ? '#FEB24C' : 89 d > 10 ? '#FED976' : 90 '#FFEDA0'; 91 } 92 93 function style(feature) { 94 return { 95 weight: 2, 96 opacity: 1, 97 color: 'white', 98 dashArray: '3', 99 fillOpacity: 0.7, 100 fillColor: getColor(feature.properties.density) 101 }; 102 } 103 104 105 var legend = L.control({position: 'bottomright'}); 106 107 legend.onAdd = function (map) { 108 109 var div = L.DomUtil.create('div', 'info legend'), 110 grades = [0, 10, 20, 50, 100, 200, 500, 1000], 111 labels = [], 112 from, to; 113 114 for (var i = 0; i < grades.length; i++) { 115 from = grades[i]; 116 to = grades[i + 1]; 117 118 labels.push( 119 '<i style="background:' + getColor(from + 1) + '"></i> ' + 120 from + (to ? '&ndash;' + to : '+')); 121 } 122 123 div.innerHTML = labels.join('<br>'); 124 return div; 125 }; 126 127 legend.addTo(map); 128 129 function highlightFeature(e) { 130 var layer = e.target; 131 132 layer.setStyle({ 133 weight: 5, 134 color: '#666', 135 dashArray: '', 136 fillOpacity: 0.7 137 }); 138 139 if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { 140 layer.bringToFront(); 141 } 142 143 info.update(layer.feature.properties); 144 } 145 146 var geojson; 147 148 function resetHighlight(e) { 149 geojson.resetStyle(e.target); 150 info.update(); 151 } 152 153 function zoomToFeature(e) { 154 map.fitBounds(e.target.getBounds()); 155 } 156 157 function onEachFeature(feature, layer) { 158 layer.on({ 159 mouseover: highlightFeature, 160 mouseout: resetHighlight, 161 click: zoomToFeature 162 }); 163 } 164 165 geojson = L.geoJson(statesData, { 166 style: style, 167 onEachFeature: onEachFeature 168 }).addTo(choropleth01); 169 170 map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>'); 171 172</script> 173 174 175 176</body> 177</html>

投稿2017/01/01 23:25

編集2017/01/02 00:10
popobot

総合スコア6586

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyatsu8

2017/01/02 01:53

ありがとうございます、チェックボックスはちゃんと機能するようになりました!しかし、何度かチェックボックスをon/offすると、どんどん色が濃くなってしまうのです、、(今は fillOpacity: 0.7なのであまり分からないのですが、0.2くらいにすると、それがよくわかります)、多分一度読み込んだスタイルが保存されたまま、チェックボックスで見えたり見えなくする事ができるため、何度も同じstyleが重なってしまっているような感じです。
popobot

2017/01/02 03:08

コード全体側を実行すると濃くはならないと思います。説明が足りてなくすみません... 実際にはoverlayaddイベントの処理なども削っています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問