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

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

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

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

Q&A

解決済

1回答

10568閲覧

Leafletの地図上に付けたオーバーレイをON/OFFしたい

oyatsu8

総合スコア97

JavaScript

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

0グッド

0クリップ

投稿2016/12/04 04:13

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

そもそもこのサンプルコードはオーバーレイを使っていないですよね...
オーバーレイ(レイヤー)のチュートリアルを参考に組み合わせたコードを書けば実現できると思いますよ
以下、簡単にやってみたサンプルを載せておきます。

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="http://leafletjs.com/examples/choropleth/us-states.js"></script> 32 33<script type="text/javascript"> 34 35 var map = L.map('map').setView([37.8, -96], 4); 36 37 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 38 maxZoom: 18, 39 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 40 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 41 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 42 id: 'mapbox.light' 43 }).addTo(map); 44 45 46 // control that shows state info on hover 47 var info = L.control(); 48 49 info.onAdd = function (map) { 50 this._div = L.DomUtil.create('div', 'info'); 51 this.update(); 52 return this._div; 53 }; 54 55 info.update = function (props) { 56 this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? 57 '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' 58 : 'Hover over a state'); 59 }; 60 61 info.addTo(map); 62 63 64 // get color depending on population density value 65 function getColor(d) { 66 return d > 1000 ? '#800026' : 67 d > 500 ? '#BD0026' : 68 d > 200 ? '#E31A1C' : 69 d > 100 ? '#FC4E2A' : 70 d > 50 ? '#FD8D3C' : 71 d > 20 ? '#FEB24C' : 72 d > 10 ? '#FED976' : 73 '#FFEDA0'; 74 } 75 76 function style(feature) { 77 return { 78 weight: 2, 79 opacity: 1, 80 color: 'white', 81 dashArray: '3', 82 fillOpacity: 0.7, 83 fillColor: getColor(feature.properties.density) 84 }; 85 } 86 87 function highlightFeature(e) { 88 var layer = e.target; 89 90 layer.setStyle({ 91 weight: 5, 92 color: '#666', 93 dashArray: '', 94 fillOpacity: 0.7 95 }); 96 97 if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { 98 layer.bringToFront(); 99 } 100 101 info.update(layer.feature.properties); 102 } 103 104 var geojson; 105 106 function resetHighlight(e) { 107 geojson.resetStyle(e.target); 108 info.update(); 109 } 110 111 function zoomToFeature(e) { 112 map.fitBounds(e.target.getBounds()); 113 } 114 115 function onEachFeature(feature, layer) { 116 layer.on({ 117 mouseover: highlightFeature, 118 mouseout: resetHighlight, 119 click: zoomToFeature 120 }); 121 } 122 123 var hoge = new L.LayerGroup(); 124 var none = new L.LayerGroup(); 125 geojson = L.geoJson(statesData, { 126 style: style, 127 onEachFeature: onEachFeature 128 }).addTo(hoge); 129 var overlays = { 130 "hoge": hoge, 131 "none": none, 132 }; 133 L.control.layers(overlays).addTo(map); 134 135 map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>'); 136 137 138 var legend = L.control({position: 'bottomright'}); 139 140 legend.onAdd = function (map) { 141 142 var div = L.DomUtil.create('div', 'info legend'), 143 grades = [0, 10, 20, 50, 100, 200, 500, 1000], 144 labels = [], 145 from, to; 146 147 for (var i = 0; i < grades.length; i++) { 148 from = grades[i]; 149 to = grades[i + 1]; 150 151 labels.push( 152 '<i style="background:' + getColor(from + 1) + '"></i> ' + 153 from + (to ? '&ndash;' + to : '+')); 154 } 155 156 div.innerHTML = labels.join('<br>'); 157 return div; 158 }; 159 160 legend.addTo(map); 161 162</script> 163</body> 164</html>

投稿2016/12/04 10:19

編集2016/12/04 10:54
popobot

総合スコア6586

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

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

oyatsu8

2016/12/04 12:28

ありがとうございます!!出来ました!形だからオーバーレイ出来るということに頭がこんがらがっていて分からなくなっていました!もう一つ質問したいのですが、 var overlays = { "hoge": hoge,    "hoge": hoge02, "none": none, }; として、hoge02の時に、http://leafletjs.com/examples/choropleth/us-states.jsの中にある、"density":のバリューを一括で入れ替えるようなことがしたいと考えており、別スレで質問させて頂きます。
popobot

2016/12/04 12:48 編集

その場合、statesDataを別の変数statesData02にコピーしてdensityを書き換えて、別途L.geojsonを実行すればできると思いますよ geojson = L.geoJson(statesData02, { style: style, onEachFeature: onEachFeature }).addTo(hoge02); あと、なるべくご自身で試行錯誤してどうしてもわからない場合、やってみたコードを記載して質問するようにしてください。
oyatsu8

2016/12/04 15:34

どうもありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問