ベースマップにため池をマーカー表示
ひょうごのため池【CSVからGeoJSONへ】で作成したGeoJSONファイルを使って、Leaflet Tutorials Using GeoJSON with Leaflet を参考に、神戸市須磨区及び垂水区の一部のため池をマーカー表示する。
ため池のポイントをクリックするとため池名がポップアップする。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Reservoir 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_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>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var mymap = new L.map('map').setView([34.67, 135.09], 12);
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 geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
let point; //ため池
$.getJSON("../geojson/hyogo_all210930_part01.geojson",function(data) {
point = L.geoJson(data,{
pointToLayer: function (feature,cordinate) {
return L.circleMarker(cordinate,geojsonMarkerOptions)},
onEachFeature: function(feature,layer){
let name = feature.properties.ため池名; //ため池名
layer.bindPopup(name);
}
}).addTo(mymap);
});
</script>
</body>
</html>
コメント