市区町選択フォームの作成と市区町役場の表示
市区町のドロップダウンメニューを、HTMLの選択要素<select>を使って、<option>要素で定義される市区町選択肢を表示する。神戸市は、<option> 要素である「区」を <optgroup>要素の「神戸市」中に入れることで、ドロップダウンの中で選択肢をグループに分割している。
市区町選択フォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Reservoir&Municipalities 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=""/>
<link rel="stylesheet" href="./style-base-073.css"/>
<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_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="map"></div>
<script src="./index-base-073.js"></script>
</body>
</html>市区町役場データ（GeoJSON）
ドロップダウンメニューで選択した市区町に対し、それぞれの市役所、区役所、町役場の場所を地図の中心に移動しマーカーを表示する。マーカーをクリックすると所在地情報をポップアップ表示する。
市区庁舎の位置情報は、国土数値情報ダウンロードサービスの市区町村役場データで得たシェープファイルで、これをQGISで編集しGeoJson形式に変換した。（小野市役所移転更新済み）
{
"type": "FeatureCollection",
"name": "P34-14_2801",
"features": [
{ "type": "Feature", "properties": { "P34_001": "28100", "P34_002": "1", "P34_003": "神戸市役所", "P34_004": "神戸市中央区加納町6-5-1" }, "geometry": { "type": "Point", "coordinates": [ 135.195728, 34.689495 ] } },
{ "type": "Feature", "properties": { "P34_001": "28101", "P34_002": "1", "P34_003": "神戸市東灘区役所", "P34_004": "神戸市東灘区住吉東町5-2-1" }, "geometry": { "type": "Point", "coordinates": [ 135.265429, 34.720159 ] } },
{ "type": "Feature", "properties": { "P34_001": "28102", "P34_002": "1", "P34_003": "神戸市灘区役所", "P34_004": "神戸市灘区桜口町4-2-1" }, "geometry": { "type": "Point", "coordinates": [ 135.239571, 34.712356 ] } },
{ "type": "Feature", "properties": { "P34_001": "28105", "P34_002": "1", "P34_003": "神戸市兵庫区役所", "P34_004": "神戸市兵庫区荒田町1-21-1" }, "geometry": { "type": "Point", "coordinates": [ 135.165383, 34.680584 ] } },
{ "type": "Feature", "properties": { "P34_001": "28106", "P34_002": "1", "P34_003": "神戸市長田区役所", "P34_004": "神戸市長田区北町3-4-3" }, "geometry": { "type": "Point", "coordinates": [ 135.150854, 34.665686 ] } },
{ "type": "Feature", "properties": { "P34_001": "28107", "P34_002": "1", "P34_003": "神戸市須磨区役所", "P34_004": "神戸市須磨区大黒町4-1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.133702, 34.658634 ] } },
{ "type": "Feature", "properties": { "P34_001": "28108", "P34_002": "1", "P34_003": "神戸市垂水区役所", "P34_004": "神戸市垂水区日向1-5-1" }, "geometry": { "type": "Point", "coordinates": [ 135.056919, 34.63061 ] } },
{ "type": "Feature", "properties": { "P34_001": "28109", "P34_002": "1", "P34_003": "神戸市北区役所", "P34_004": "神戸市北区鈴蘭台西町1-25-1" }, "geometry": { "type": "Point", "coordinates": [ 135.144387, 34.727256 ] } },
{ "type": "Feature", "properties": { "P34_001": "28110", "P34_002": "1", "P34_003": "神戸市中央区役所", "P34_004": "神戸市中央区雲井通5-1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.197794, 34.695074 ] } },
{ "type": "Feature", "properties": { "P34_001": "28111", "P34_002": "1", "P34_003": "神戸市西区役所", "P34_004": "神戸市西区玉津町小山字川端180-3" }, "geometry": { "type": "Point", "coordinates": [ 134.981654, 34.68325 ] } },
{ "type": "Feature", "properties": { "P34_001": "28201", "P34_002": "1", "P34_003": "姫路市役所", "P34_004": "姫路市安田4-1" }, "geometry": { "type": "Point", "coordinates": [ 134.685458, 34.815496 ] } },
{ "type": "Feature", "properties": { "P34_001": "28202", "P34_002": "1", "P34_003": "尼崎市役所", "P34_004": "尼崎市東七松町1-23-1" }, "geometry": { "type": "Point", "coordinates": [ 135.406394, 34.733554 ] } },
{ "type": "Feature", "properties": { "P34_001": "28203", "P34_002": "1", "P34_003": "明石市役所", "P34_004": "明石市中崎1-5-1" }, "geometry": { "type": "Point", "coordinates": [ 134.997182, 34.643109 ] } },
{ "type": "Feature", "properties": { "P34_001": "28204", "P34_002": "1", "P34_003": "西宮市役所", "P34_004": "西宮市六湛寺町10-3" }, "geometry": { "type": "Point", "coordinates": [ 135.34183, 34.737691 ] } },
{ "type": "Feature", "properties": { "P34_001": "28205", "P34_002": "1", "P34_003": "洲本市役所", "P34_004": "洲本市本町3-4-10" }, "geometry": { "type": "Point", "coordinates": [ 134.895653, 34.342522 ] } },
{ "type": "Feature", "properties": { "P34_001": "28206", "P34_002": "1", "P34_003": "芦屋市役所", "P34_004": "芦屋市精道町7-6" }, "geometry": { "type": "Point", "coordinates": [ 135.304179, 34.726522 ] } },
{ "type": "Feature", "properties": { "P34_001": "28207", "P34_002": "1", "P34_003": "伊丹市役所", "P34_004": "伊丹市千僧1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.400933, 34.784295 ] } },
{ "type": "Feature", "properties": { "P34_001": "28208", "P34_002": "1", "P34_003": "相生市役所", "P34_004": "相生市旭1-1-3" }, "geometry": { "type": "Point", "coordinates": [ 134.468193, 34.803662 ] } },
{ "type": "Feature", "properties": { "P34_001": "28209", "P34_002": "1", "P34_003": "豊岡市役所", "P34_004": "豊岡市中央町2-4" }, "geometry": { "type": "Point", "coordinates": [ 134.820187, 35.544475 ] } },
{ "type": "Feature", "properties": { "P34_001": "28210", "P34_002": "1", "P34_003": "加古川市役所", "P34_004": "加古川市加古川町北在家2000" }, "geometry": { "type": "Point", "coordinates": [ 134.8409, 34.75662 ] } },
{ "type": "Feature", "properties": { "P34_001": "28212", "P34_002": "1", "P34_003": "赤穂市役所", "P34_004": "赤穂市加里屋81" }, "geometry": { "type": "Point", "coordinates": [ 134.390354, 34.754974 ] } },
{ "type": "Feature", "properties": { "P34_001": "28213", "P34_002": "1", "P34_003": "西脇市役所", "P34_004": "西脇市郷瀬町605" }, "geometry": { "type": "Point", "coordinates": [ 134.969284, 34.993428 ] } },
{ "type": "Feature", "properties": { "P34_001": "28214", "P34_002": "1", "P34_003": "宝塚市役所", "P34_004": "宝塚市東洋町1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.360098, 34.799817 ] } },
{ "type": "Feature", "properties": { "P34_001": "28215", "P34_002": "1", "P34_003": "三木市役所", "P34_004": "三木市上の丸町10-30" }, "geometry": { "type": "Point", "coordinates": [ 134.990188, 34.796922 ] } },
{ "type": "Feature", "properties": { "P34_001": "28216", "P34_002": "1", "P34_003": "高砂市役所", "P34_004": "高砂市荒井町千鳥1-1-1" }, "geometry": { "type": "Point", "coordinates": [ 134.790478, 34.766248 ] } },
{ "type": "Feature", "properties": { "P34_001": "28217", "P34_002": "1", "P34_003": "川西市役所", "P34_004": "川西市中央町12-1" }, "geometry": { "type": "Point", "coordinates": [ 135.417222, 34.830132 ] } },
{ "type": "Feature", "properties": { "P34_001": "28218", "P34_002": "1", "P34_003": "小野市役所", "P34_004": "小野市中島町531" }, "geometry": { "type": "Point", "coordinates": [ 134.939799, 34.857872 ] } },
{ "type": "Feature", "properties": { "P34_001": "28219", "P34_002": "1", "P34_003": "三田市役所", "P34_004": "三田市三輪2-1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.22529, 34.889672 ] } },
{ "type": "Feature", "properties": { "P34_001": "28220", "P34_002": "1", "P34_003": "加西市役所", "P34_004": "加西市北条町横尾1000" }, "geometry": { "type": "Point", "coordinates": [ 134.841819, 34.927811 ] } },
{ "type": "Feature", "properties": { "P34_001": "28221", "P34_002": "1", "P34_003": "篠山市役所", "P34_004": "篠山市北新町41" }, "geometry": { "type": "Point", "coordinates": [ 135.219002, 35.075673 ] } },
{ "type": "Feature", "properties": { "P34_001": "28222", "P34_002": "1", "P34_003": "養父市役所", "P34_004": "養父市八鹿町八鹿1675" }, "geometry": { "type": "Point", "coordinates": [ 134.767668, 35.40464 ] } },
{ "type": "Feature", "properties": { "P34_001": "28223", "P34_002": "1", "P34_003": "丹波市役所", "P34_004": "丹波市氷上町成松甲賀1" }, "geometry": { "type": "Point", "coordinates": [ 135.035816, 35.177259 ] } },
{ "type": "Feature", "properties": { "P34_001": "28224", "P34_002": "1", "P34_003": "南あわじ市役所", "P34_004": "南あわじ市市善光寺18-27" }, "geometry": { "type": "Point", "coordinates": [ 134.779083, 34.295807 ] } },
{ "type": "Feature", "properties": { "P34_001": "28225", "P34_002": "1", "P34_003": "朝来市役所", "P34_004": "朝来市和田山町東谷213-1" }, "geometry": { "type": "Point", "coordinates": [ 134.853117, 35.339835 ] } },
{ "type": "Feature", "properties": { "P34_001": "28226", "P34_002": "1", "P34_003": "淡路市役所", "P34_004": "淡路市生穂新島8" }, "geometry": { "type": "Point", "coordinates": [ 134.914633, 34.439847 ] } },
{ "type": "Feature", "properties": { "P34_001": "28227", "P34_002": "1", "P34_003": "宍粟市役所", "P34_004": "宍粟市山崎町中広瀬133-6" }, "geometry": { "type": "Point", "coordinates": [ 134.549377, 35.004435 ] } },
{ "type": "Feature", "properties": { "P34_001": "28228", "P34_002": "1", "P34_003": "加東市役所", "P34_004": "加東市社50" }, "geometry": { "type": "Point", "coordinates": [ 134.973345, 34.91737 ] } },
{ "type": "Feature", "properties": { "P34_001": "28229", "P34_002": "1", "P34_003": "たつの市役所", "P34_004": "たつの市龍野町富永1005-1" }, "geometry": { "type": "Point", "coordinates": [ 134.545397, 34.857847 ] } },
{ "type": "Feature", "properties": { "P34_001": "28301", "P34_002": "1", "P34_003": "猪名川町役場", "P34_004": "猪名川町上野字北畑11-1" }, "geometry": { "type": "Point", "coordinates": [ 135.376164, 34.894966 ] } },
{ "type": "Feature", "properties": { "P34_001": "28365", "P34_002": "1", "P34_003": "多可町役場", "P34_004": "多可町中区中村町123" }, "geometry": { "type": "Point", "coordinates": [ 134.923359, 35.050315 ] } },
{ "type": "Feature", "properties": { "P34_001": "28381", "P34_002": "1", "P34_003": "稲美町役場", "P34_004": "稲美町国岡1-1" }, "geometry": { "type": "Point", "coordinates": [ 134.913384, 34.748627 ] } },
{ "type": "Feature", "properties": { "P34_001": "28382", "P34_002": "1", "P34_003": "播磨町役場", "P34_004": "播磨町東本荘1-5-30" }, "geometry": { "type": "Point", "coordinates": [ 134.867911, 34.715302 ] } },
{ "type": "Feature", "properties": { "P34_001": "28442", "P34_002": "1", "P34_003": "市川町役場", "P34_004": "市川町西川辺165-3" }, "geometry": { "type": "Point", "coordinates": [ 134.763289, 34.989365 ] } },
{ "type": "Feature", "properties": { "P34_001": "28443", "P34_002": "1", "P34_003": "福崎町役場", "P34_004": "福崎町南田原3116-1" }, "geometry": { "type": "Point", "coordinates": [ 134.760245, 34.950319 ] } },
{ "type": "Feature", "properties": { "P34_001": "28446", "P34_002": "1", "P34_003": "神河町役場", "P34_004": "神河町寺前64" }, "geometry": { "type": "Point", "coordinates": [ 134.739856, 35.064235 ] } },
{ "type": "Feature", "properties": { "P34_001": "28464", "P34_002": "1", "P34_003": "太子町役場", "P34_004": "太子町鵤1369-1" }, "geometry": { "type": "Point", "coordinates": [ 134.57781, 34.833469 ] } },
{ "type": "Feature", "properties": { "P34_001": "28481", "P34_002": "1", "P34_003": "上郡町役場", "P34_004": "上郡町大持278" }, "geometry": { "type": "Point", "coordinates": [ 134.356098, 34.873583 ] } },
{ "type": "Feature", "properties": { "P34_001": "28501", "P34_002": "1", "P34_003": "佐用町役場", "P34_004": "佐用町佐用2611-1" }, "geometry": { "type": "Point", "coordinates": [ 134.355771, 35.004296 ] } },
{ "type": "Feature", "properties": { "P34_001": "28585", "P34_002": "1", "P34_003": "香美町役場", "P34_004": "香美町香住区香住870-1" }, "geometry": { "type": "Point", "coordinates": [ 134.629175, 35.632169 ] } },
{ "type": "Feature", "properties": { "P34_001": "28586", "P34_002": "1", "P34_003": "新温泉町役場", "P34_004": "新温泉町浜坂2673-1" }, "geometry": { "type": "Point", "coordinates": [ 134.448942, 35.623509 ] } }
]
}
市区町役場(庁舎)の表示
市区町を選択すると、対応する市区町役場(庁舎)の位置を地図の中心に移動し、マーカーをクリックすると所在地情報をポップアップする。併せて、選択市区町のポリゴンを赤色で囲み、区域内の薄青色を消す。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Municipal Office 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=""/>
<link rel="stylesheet" href="./style-practical-021.css"/>
<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_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="28101">神戸市東灘区</option>
<option value="28102">神戸市灘区</option>
<option value="28105">神戸市兵庫区</option>
<option value="28106">神戸市長田区</option>
<option value="28107">神戸市須磨区</option>
<option value="28108">神戸市垂水区</option>
<option value="28109">神戸市北区</option>
<option value="28110">神戸市中央区</option>
<option value="28111">神戸市西区</option>
</optgroup>
<option value="28202">尼崎市</option>
<option value="28204">西宮市</option>
<option value="28206">芦屋市</option>
<option value="28207">伊丹市</option>
<option value="28214">宝塚市</option>
<option value="28217">川西市</option>
<option value="28219">三田市</option>
<option value="28301">川辺郡猪名川町</option>
<option value="28203">明石市</option>
<option value="28210">加古川市</option>
<option value="28216">高砂市</option>
<option value="28381">加古郡稲美町</option>
<option value="28382">加古郡播磨町</option>
<option value="28213">西脇市</option>
<option value="28215">三木市</option>
<option value="28218">小野市</option>
<option value="28220">加西市</option>
<option value="28228">加東市</option>
<option value="28365">多可郡多可町</option>
<option value="28201">姫路市</option>
<option value="28442">神崎郡市川町</option>
<option value="28443">神崎郡福崎町</option>
<option value="28446">神崎郡神河町</option>
<option value="28208">相生市</option>
<option value="28212">赤穂市</option>
<option value="28229">たつの市</option>
<option value="28464">揖保郡太子町</option>
<option value="28227">宍粟市</option>
<option value="28481">赤穂郡上郡町</option>
<option value="28501">佐用郡佐用町</option>
<option value="28209">豊岡市</option>
<option value="28585">美方郡香美町</option>
<option value="28586">美方郡新温泉町</option>
<option value="28222">養父市</option>
<option value="28225">朝来市</option>
<option value="28221">丹波篠山市</option>
<option value="28223">丹波市</option>
<option value="28205">洲本市</option>
<option value="28224">南あわじ市</option>
<option value="28226">淡路市</option>
</select>
</form>
<div id="map"></div>
<script src="./index-practical-021.js"></script>
</body>
</html>let mymap = new L.map('map').setView([35.0, 135.09], 8);
L.control.scale({maxWidth:200,position:'bottomright',imperial:false}).addTo(mymap); // スケールを表示
mymap.zoomControl.setPosition('bottomright'); //ズームコントロール
mymap.addControl(new L.Control.Fullscreen({position:'topright'})); // フルスクリーン
let osm = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
});
//国土地理院地図
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 });
//GoogleMaps
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(mymap);
gsi.addTo(mymap); // 初期設定で地理院標準地図を表示
let border; //市区町界
let marker; //市区庁舎
function show() {
let selectCity = document.getElementById("city").value; //選択した市区町名を取得
if (selectCity=="－") {
mymap
}
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 code = feature.properties.N03_007; //市区町コード
let name = "";
if (country){
name = country+city;
}
else {
name = city;
}
layer.bindPopup(name);
if (code == selectCity) {
layer.setStyle({color: '#f00', weight: 2,opacity: 1,fillColor: '#f00',fillOpacity: 0});
}
}
}).addTo(mymap);
});
$.getJSON("../geojson/P34-14_2801.geojson",function(data) {
marker = L.geoJSON(data, {
style: function(feature) {return feature.properties;},
pointToLayer:function (feature, cordinates) {
let selectCity = document.getElementById("city").value; //選択した市区町名を取得
if (selectCity == feature.properties.P34_001) {
let marker = L.marker(cordinates);
const field =
`${feature.properties.P34_003} <br>
${feature.properties.P34_004}`;
lon = feature.geometry.coordinates[0];
lat = feature.geometry.coordinates[1];
marker.bindPopup(field); marker.on('mouseclick', function (e) {this.openPopup();});
marker.on('mouseclick', function (e) { this.closePopup(); });
return marker;
}
}
}).addTo(mymap);
mymap.setView([lat,lon],11);
});
}
};
function erase() {
if (border) border.remove(); //境界ポリゴンリセット
if (marker) marker.remove(); //市区町庁舎マーカーリセット
}#map {
width: 600px;
height: 400px;
}