市区町選択フォームとカテゴリーに応じたマーカー表示を組み合わせる。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hyogo Reservoirs Map - Leaflet</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Google Maps API を利用 -->
<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_key"></script>
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant@latest/dist/Leaflet.GoogleMutant.js"></script>
<!-- plugin fullscreen-->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
</head>
<body>
<form>
<select id="city" onchange = "erase();show()">
<option value="－">市区町</option>
<optgroup label="神戸市">
<option value="神戸市須磨区">神戸市須磨区</option>
<option value="神戸市垂水区">神戸市垂水区</option>
<option value="神戸市北区">神戸市北区</option>
<option value="神戸市西区">神戸市西区</option>
</optgroup>
<option value="尼崎市">尼崎市</option>
<option value="西宮市">西宮市</option>
<option value="伊丹市">伊丹市</option>
<option value="宝塚市">宝塚市</option>
<option value="川西市">川西市</option>
<option value="三田市">三田市</option>
<option value="川辺郡猪名川町">川辺郡猪名川町</option>
<option value="明石市">明石市</option>
<option value="加古川市">加古川市</option>
<option value="高砂市">高砂市</option>
<option value="加古郡稲美町">加古郡稲美町</option>
<option value="加古郡播磨町">加古郡播磨町</option>
<option value="西脇市">西脇市</option>
<option value="三木市">三木市</option>
<option value="小野市">小野市</option>
<option value="加西市">加西市</option>
<option value="加東市">加東市</option>
<option value="多可郡多可町">多可郡多可町</option>
<option value="姫路市">姫路市</option>
<option value="神崎郡市川町">神崎郡市川町</option>
<option value="神崎郡福崎町">神崎郡福崎町</option>
<option value="神崎郡神河町">神崎郡神河町</option>
<option value="相生市">相生市</option>
<option value="赤穂市">赤穂市</option>
<option value="たつの市">たつの市</option>
<option value="揖保郡太子町">揖保郡太子町</option>
<option value="宍粟市">宍粟市</option>
<option value="赤穂郡上郡町">赤穂郡上郡町</option>
<option value="佐用郡佐用町">佐用郡佐用町</option>
<option value="豊岡市">豊岡市</option>
<option value="美方郡香美町">美方郡香美町</option>
<option value="美方郡新温泉町">美方郡新温泉町</option>
<option value="養父市">養父市</option>
<option value="朝来市">朝来市</option>
<option value="丹波篠山市">丹波篠山市</option>
<option value="丹波市">丹波市</option>
<option value="洲本市">洲本市</option>
<option value="南あわじ市">南あわじ市</option>
<option value="淡路市">淡路市</option>
</select>
</form>
<div id="myMap" style="width: 720px; height: 385px; border: solid 1px"></div>
<div style="display:inline-block;margin:4px;font-size:11px;">
<span>
<img src="../picture/circle-dredred10px.png"> 特定(農業用)ため池＆防災重点農業用ため池
<img src="../picture/circle-greenlime10px.png"> 特定(農業用)ため池
<img src="../picture/circle-purpleviolet10px.png"> 防災重点農業用ため池
<img src="../picture/circle-navyblue10px.png"> 左記以外のため池
<img src="../picture/square-red12px.png"> 要監視ため池
</span>
</div>
<script src="./index-practical-06.js"></script>
</body>
</html>let pmarker = [];
let mapobj = new L.map('myMap', {preferCanvas: true }).setView( [35.0,135.0],8); //図中心 西脇市へそ
L.control.scale({maxWidth:200,position:'bottomright',imperial:false}).addTo(mapobj); //スケールを表示
mapobj.zoomControl.setPosition('bottomright'); //ズームコントロール
mapobj.addControl(new L.Control.Fullscreen({position:'topright'})); //フルスクリーン
let gsiattr = "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>";
let gsiattrLF = '<a href="http://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>';
let gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { minZoom:5, attribution: gsiattr });
let gsipale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { minZoom:5, attribution: gsiattr });
let gsiphot = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', { minZoom:5, attribution: gsiattr });
let osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{ minZoom:5, attribution: "©<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
let GmapsROA = L.gridLayer.googleMutant({ maxZoom: 24, type:'roadmap' }); //地図
let GmapsSAT = L.gridLayer.googleMutant({ minZoom:5, type:'satellite' }); //航空写真
let GmapsHYB = L.gridLayer.googleMutant({ minZoom:5, type:'hybrid' }); //航空写真&ラベル
let GmapsTER = L.gridLayer.googleMutant({ minZoom:5, type:'terrain' }); //地形地図
//オーバーレイ用のタイル
let gsirelief = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png', { opacity: 0.4, maxNativeZoom: 15, minZoom:5, attribution: gsiattr });
let gsirehillshademap = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', { opacity: 0.35, maxNativeZoom: 16, attribution: gsiattr });
//地図の照応
let baseMaps = {
"地理院標準地図": gsi,
"地理院淡色地図": gsipale,
"地理院写真": gsiphot,
"OpenStreetMap": osm,
'Google Roadmap':GmapsROA,
'Google Satellite':GmapsSAT,
'Google Hybrid':GmapsHYB,
'Google Terrain':GmapsTER
};
let overlayMaps = {
"色別標高図": gsirelief,
"陰影起伏図": gsirehillshademap
};
L.control.layers(baseMaps,overlayMaps,{maxWidth:200,position:'topright',imperial:false}).addTo(mapobj);
gsi.addTo(mapobj); // 初期設定で地理院標準地図を表示
let border; //市区町界
function show() {
let selectCity = document.getElementById("city").value; //選択した市区町名を取得
if (selectCity=="－") {
mapobj.setView([35,135],8)
}
else {
$.getJSON("../geojson/hyogo_areas021.geojson",function(data) {
border = L.geoJson(data,{
style: {
"color": "#00f",
"weight": 2,
"opacity": 0.7,
"fillColor": "#00f",
"fillOpacity": 0.1,
},
onEachFeature: function(feature,layer){
let pref = feature.properties.N03_001; //都道府県名（使用せず）
let country = feature.properties.N03_003; //政令指定都市及び郡部
let city = feature.properties.N03_004; //市区町名
let name = "";
if (country){
name = country+city;
}
else {
name = city;
}
layer.bindPopup(name);
if (name==selectCity) {
layer.setStyle({color: '#f00', weight: 2,opacity: 1,fillColor: '#f00',fillOpacity: 0});
}
}
}).addTo(mapobj);
});
$.getJSON("../geojson/hyogo_all210930.geojson",function(data) {
L.geoJSON(data, {
style: function(feature) {return feature.properties;},
pointToLayer:function (feature, cordinates) {
let kanshi = feature.properties.要監視; //要監視対象ため池の判定
let boujuu = feature.properties.防災重点農業用ため池指定日; //防災重点ため池指定日欄で指定判定
let tokutei = feature.properties['特定(農業用)ため池指定日']; //特定ため池指定日欄で指定判定
let iconopt;
let iconBT = L.icon({iconUrl:"../picture/circle-dredred10px.png"});
let iconKBT = L.icon({iconUrl:"../picture/sqcir-red12px.png"});
let iconBB = L.icon({iconUrl:"../picture/circle-purpleviolet10px.png"});
let iconKBB = L.icon({iconUrl:"../picture/sqcir-purple12px.png"});
let iconTT = L.icon({iconUrl:"../picture/circle-greenlime10px.png"});
let iconNBT = L.icon({iconUrl:"../picture/circle-navyblue10px.png"});
let selectCity = document.getElementById("city").value; //選択した市区町名を取得
if (boujuu == "" && tokutei == "") iconopt = iconNBT; //特定外ため池を青丸表示
else if(boujuu == "" && tokutei != "") iconopt = iconTT; //特定ため池を緑丸表示
else if(boujuu != "" && tokutei == "" && kanshi == "") iconopt = iconBB; //防災重点ため池を紫丸表示
else if(boujuu != "" && tokutei == "" && kanshi != "") iconopt = iconKBB; //防災重点ため池+要監視を赤角紫丸表示
else if(boujuu != "" && tokutei != "" && kanshi == "") iconopt = iconBT; //防災重点ため池&特定ため池を赤丸表示
else if(boujuu != "" && tokutei != "" && kanshi != "") iconopt = iconKBT; //防災重点ため池&特定ため池+要監視を赤角赤丸表示
if (selectCity == feature.properties.市町) {
let marker = L.marker(cordinates,{icon:iconopt});
pmarker.push(marker);
const field =
`名 称: ${feature.properties.ため池名} <br>
所在地: ${feature.properties['市町']+feature.properties['町域名、番地']} <br>
北 緯: ${feature.geometry.coordinates[1]+"°"+" ["+Math.floor(feature.geometry.coordinates[1])+"°"
+Math.floor((feature.geometry.coordinates[1]-Math.floor(feature.geometry.coordinates[1]))*60)+"′"
+Math.round(((((feature.geometry.coordinates[1] - Math.floor(feature.geometry.coordinates[1]))*60)-Math.floor((feature.geometry.coordinates[1]-Math.floor(feature.geometry.coordinates[1]))*60))*60)*10)/10+"″"+"]"} <br>
東 経: ${feature.geometry.coordinates[0]+"°"+" ["+Math.floor(feature.geometry.coordinates[0])+"°"
+Math.floor((feature.geometry.coordinates[0]-Math.floor(feature.geometry.coordinates[0]))*60)+"′"
+Math.round(((((feature.geometry.coordinates[0] - Math.floor(feature.geometry.coordinates[0]))*60)-Math.floor((feature.geometry.coordinates[0]-Math.floor(feature.geometry.coordinates[0]))*60))*60)*10)/10+"″"+"]"} <br>
管理者: ${feature.properties.管理者名} <br>
所有者: ${feature.properties.所有者名} <br>
届出日: ${feature.properties.届出日} <br>
堤 高: ${feature.properties['堤高(ｍ)']+' m'} <br>
堤 長: ${feature.properties['堤長(ｍ)']+' m'} <br>
貯水量: ${feature.properties['貯水量(千m3)']+' 千m3'} <br>
特定(農業用)ため池指定日: ${feature.properties['特定(農業用)ため池指定日']} <br>
特定(農業用)ため池指定区分: ${feature.properties['特定(農業用)ため池指定区分']} <br>
防災重点農業用ため池指定日: ${feature.properties.防災重点農業用ため池指定日} <br>
国ｺｰﾄﾞ: ${feature.properties.国コード} <br>
県ID : ${feature.properties.県ID} <br>
要監視: ${feature.properties.要監視}`;
marker.bindPopup(field); marker.on('mouseover', function (e) { this.openPopup(); }); //マウスオーバーで情報ウインドウ表示
marker.on('mouseout', function (e) { this.closePopup(); }); //マウスアウトで情報ウインドウ消去
return marker;
}
}
}).addTo(mapobj)
let group = L.featureGroup(pmarker).addTo(mapobj);
mapobj.fitBounds(group.getBounds());
});
}
};
function erase() {
if (border) border.remove(); //境界ポリゴンリセット
for (let i = 0; i < pmarker.length; i++) {
pmarker[i].remove(); //ポイントマーカーリセット
}
pmarker = [];
}