地図コンテンツコードコピー集

このファイルはＪＡ教育研究会発行の
中学・高校生のためのプログラミング学習教材

双方向性のあるWebページを作ろう
～地図コンテンツ編～

の購入者のみに発行しています。

2.Webページの基礎

3.地図を表示する

4.地図の種類を変えよう

5.地図コンテンツを飾る

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（タイトル）</title>
</head>
<body>
（表示内容）
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（タイトル）</title>
</head>
<body>
<div align="center")>
<p style="color:#FF0000;font-weight:bold;">ようこそ</p>
<p style="color:blue;">私のＷｅｂページへ</p>
</div>
<p style="font-size:1.5em;"> こんにちは</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（タイトル）</title>
<style type="text/css">
#idD {text-align:center;}
#idP1 {color:#FF0000;font-weight:bold;}
#idP2 {color:blue;}
#idP3 {font-size:1.5em;}
　　</style>
</head>
<body>
<div id="idD">
<p id="idP1">ようこそ </p>
<p id="idP2">私のＷＥＢページへ</p>
</div>
<p id="idP3">こんにちは</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（タイトル）</title>
</head>
<body>
<input type="submit" value="送信" onclick=funcN()>
<script>
function funcN(){
let res=prompt("お名前は？");
alert(res+"さん。");
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（タイトル）</title>
</head>
<body>
<input type="submit" value="送信" onclick=funcN()>
<script>
function funcN(){
let res=prompt("お名前は？");
document.write(res+"さん");
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（タイトル）</title>
</head>
<body>
お名前は
<input type="text" id="idT">
<input type="submit" value="送信" onclick=funcN()>
<p id="idM" style="color:#FF0000";></p>
<script>
function funcN(){
idM.innerText=idT.value+'さん';
}
</script>
</body>
</html>

const myCenterMarker=L.marker(myMap.getCenter(),{icon:centerIcon,zIndexOffset:1000,interactive:false}).addTo(myMap);
myMap.on('move',function(e){myCenterMarker.setLatLng(myMap.getCenter());});

//センターマークの表示／非表示の関数
function funcC(s){
if(s==true){
myMap.addLayer(myCenterMarker);
}else{
myMap.removeLayer(myCenterMarker);
}
}

//緯度、経度、倍率の表示関数
myMap.on('mousemove', function(e){
let lat=e.latlng.lat;
let lng=e.latlng.lng;
let gzm=myMap.getZoom();
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
})

X=,Y=,Z=<input type="radio" name="座標値" id="idXYZ" checked>
X,Y<input type="radio" name="座標値" id="idXY">

if(idXYZ.checked==true){
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
}else{
idText.textContent=lat+","+lng;
}

//マウスの位置の値をコピーする関数
myMap.on('click',function(e){idText.disabled=false;idText.select();document.execCommand('copy');idText.disabled=true;alert("マウスの位置の緯度、経度をクリップボードにコピーしました！");});

<input type="button" value="中心値" onclick=funcCenter()>

//地図の中心の値をコピーする関数
function funcCenter(){
let lat=myMap.getCenter().lat;
let lng=myMap.getCenter().lng;
let gzm=myMap.getZoom();
if(idXYZ.checked==true){
idText.textContent="x="+lat+",y="+lng+",z="+gzm;
}else{
idText.textContent=lat+","+lng;
}
idText.disabled=false;
idText.select();
document.execCommand('copy');
idText.disabled=true;
alert("地図中心の緯度、経度をクリップボードにコピーしました！"); }

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>地図タイル</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>

<div id="idMap" style="height:400px; width:400px;"></div>

<p>

中心表示<input type="checkbox" name="check" onclick=funcC(checked)>

X=,Y=,Z=<input type="radio" name="座標値" id="idXYZ" checked>
X,Y<input type="radio" name="座標値" id="idXY">

<input type="button" value="中心値" onclick=funcCenter()>
<br>

<textarea id="idText" cols=50 rows=1 disabled></textarea>
</p>
<script type="text/javascript">
//地図初期値　緯度、経度、倍率、種別、画像データの拡張子
let x=35,y=135,z=4,typeMap="std",typeGazou="png";
let myMap=L.map('idMap');
myMap.setView([x, y], z);
funcHyouji();
//国土地理院の地図
function funcHyouji(){
L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/' //地図データ
+typeMap //地図の種別
+'/{z}/{x}/{y}.' //倍率、緯度、経度
+typeGazou, //画像データの拡張子
//国土地理院の著作権表示
{attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}
).addTo(myMap);
}

//センターマークを表示する関数

<div>
<select id="idSyurui" onclick=funcSyurui(value)>
<option>標準</option> //ズームレベル5～18
<option>淡色</option> //ズームレベル5～18
<option>写真</option> //ズームレベル14～18
<option>白地図</option> //ズームレベル5～14
<option>英語</option> //ズームレベル5～11
<option>色別標高図</option> //ズームレベル5～15
<option>陰影起伏図</option> //ズームレベル2～16
<option>1974年～1978年</option> //ズームレベル10～17
</select>
</div>

//地図の種類の関数
function funcSyurui(){
const str=document.getElementById("idSyurui").value;
if(str=="標準"){typeMap="std";typeGazou="png";}
if(str=="淡色"){typeMap="pale";typeGazou="png";}
if(str=="写真"){typeMap="seamlessphoto";typeGazou="jpg";}
if(str=="白地図"){typeMap="blank";typeGazou="png";}
if(str=="英語"){typeMap="english";typeGazou="png";}
if(str=="色別標高図"){typeMap="relief";typeGazou="png";}
if(str=="陰影起伏図"){typeMap="hillshademap";typeGazou="png";}
if(str=="1974年～1978年"){typeMap="gazo1";typeGazou="jpg";}
funcHyouji();
}

<option>1974年～1978年</option> //ズームレベル10～17
<option>1979年～1983年</option> //ズームレベル10～17
<option>1984年～1986年</option> //ズームレベル10～17
<option>空中写真1961年～1969年</option> //ズームレベル10～17
<option>空中写真1945年～1950年</option> //ズームレベル10～17
<option>空中写真1936年～1942年頃</option> //ズームレベル13～18　東京、大阪
<option>空中写真1928年頃</option> //ズームレベル13～18　大阪

if(str=="1974年～1978年"){typeMap="gazo1";typeGazou="jpg";}
if(str=="1979年～1983年"){typeMap="gazo2";typeGazou="jpg";}
if(str=="1984年～1986年"){typeMap="gazo3";typeGazou="jpg";}
if(str=="空中写真1961年～1969年"){typeMap="ort_old10";typeGazou="png";}
if(str=="空中写真1945年～1950年"){typeMap="ort_USA10";typeGazou="png";}
if(str=="空中写真1936年～1942年頃"){typeMap="ort_riku10";typeGazou="png";}
if(str=="空中写真1928年頃"){typeMap="ort_1928";typeGazou="png";}

<input type="button" value="兵庫県" onclick=funcBasyo(1)>
<input type="button" value="神戸市" onclick=funcBasyo(2)>

//地域ボタンで地図を変える関数
function funcBasyo(b){
if (b==1){x=35;y=134.8;z=8;typeMap="blank";typeGazou="png";}
if (b==2){x=34.734,y=135.1316,z=10;typeMap="english";typeGazou="png";}
myMap.setView([x, y], z);
funcHyouji();
}

//ズームコントロールの表示
let myMap=L.map('idMap',{zoomControl:false});

//ズームコントロールを右上で追加
L.control.zoom({position:'topright'}).addTo(myMap);

//スケールバーの表示（メートル、マイル／フィート）
L.control.scale().addTo(myMap);

//スケールバーの表示
L.control.scale({
imperial:false, //メートルのみ
maxWidth:200, //幅2倍
position:'topleft' //左上
}).addTo(myMap);

//マーカーの表示 L.marker([26.2125,127.6809], {title:"沖縄県庁"}).addTo(myMap);

L.marker([34.6899,135.1834],{title:"兵庫県庁"}).addTo(myMap).bindPopup(myPopup);

//直線、多角形の表示
L.polyline([[38,139],[33,139],[34,132],[38,139],],{color:'blue',weight:5}).addTo(myMap);

//円(中塗りなし）
L.circle([35,135],{radius:500000,color:"red",weight:3,fill:false}).addTo(myMap);

//円(中塗り）
L.circle([35,139],{radius:100000,weight:5,color:"blue",opacity:0.5,fillColor:"red",fillopacity:0.5}).addTo(myMap);

//同心円（４つの円）
for (let i=1;i<5;i++){
L.circle([35,135],{radius:i*100000}).addTo(myMap);
}

//多角形
const myLine=L.polyline([[42,143],[30,142],[32,130],[38,132],[42,143],],{color:'blue',weight:4,});
const myLine2=L.polyline([[42,135],[28,144],[30,128],[39,130],[42,135],],{color:'green',weight:4,});
//マーカー
const myIconS=L.icon({iconUrl:'http://www.hidapio.jp/tizu/myIconS.png',iconSize:[24,30],iconAnchor:[20,30]}); const myIconY=L.icon({iconUrl:'http://www.hidapio.jp/tizu/myIconY.png',iconSize:[30,24],iconAnchor:[15,20]}); const mySendai=L.marker([38.2531,140.8559],{title:"仙台城",icon:myIconS}).addTo(myMap);
const myMatuyama=L.marker([33.8435,132.7660],{title:"松山城",icon:myIconS}).addTo(myMap);
const myDaisetsu=L.marker([43.6632,142.8548],{title:"大雪山",icon:myIconY});
const myAso=L.marker([32.8657,131.0669],{title:"阿蘇山",icon:myIconY});

//レイヤーグループに設定
const mySikaku = L.layerGroup([myLine,myLine2]);
const mySiro = L.layerGroup([mySendai,myMatuyama]).addTo(myMap);
const myYama = L.layerGroup([myDaisetsu,myAso]);
//オーバーレイヤーに設定
const myOverLayer={"四角":mySikaku,"城":mySiro,"山":myYama,};
//コントロールボックスを表示
const myControl=L.control.layers(null,myOverLayer).addTo(myMap);

//地図 const myMapStd=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}).addTo(myMap);
const myMapPale=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});
const myMapEng=L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png', {attribution:"<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});

//ベースレイヤーに設定
const myBaseLayer={"標準":myMapStd,"淡色":myMapPale,"英語":myMapEng,};
//コントロールボックスの表示
const myControl2=L.control.layers(myBaseLayer,null).addTo(myMap);

//OpenStreetMapの地図表示関数
function funcHyouji(){
L.tileLayer(
'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution:'Map data ©<a href="http://openstreetmap.org">OpenStreetMap</a>contributors, '}
).addTo(myMap);
}

2-1 　　(1)Webページとファイル
2-2-1 　　(2)スタイルシート(タグ内)
2-2-2 　　(2)スタイルシート(ヘッド要素の中)
2-3-1 　　(3)JavaScript（関数１）
2-3-2 　　(3)JavaScript（関数２）
2-3-3 　　(3)JavaScript（関数３）

（インターネット上）	jaera	hidapio
（コンピュータ内）	同一フォルダ	imgフォルダ

実習3-1 　　地図の表示
実習3-2 　　地図の初期値を変える
実習3-3 　　センターマークの表示		</script>の上に挿入
実習3-4 　　センターマークの表示／非表示	<script>の上に挿入	</script>の上に挿入
研究1 　　JavaScriptのif文
実習3-5　　　緯度・経度・倍率の表示	</p>の上に挿入	</script>の上に挿入
実習3-6 　　緯度・経度・倍率の表示選択	<br>の上に挿入	idText.textContent=… と入れ替える
実習3-7 　　マウスの位置の値をクリップボードに保存		</script>の上に挿入
実習3-7_2　（省略可）　　地図の中心の値をクリップボードに保存	<br>の上に挿入	</script>の上に挿入
実習3-8 　　地図の初期値を変える
実習3のまとめ

実習4-1 　　いろいろな種類の地図を表示	<p>の上に挿入	</script>の上に挿入
実習4-2 　　最初の地図の種類を変える
研究2 　　年代別の写真	</select>の上に挿入	function funcSyurui()の中の funcHyouji()の上に挿入

実習5-1 　　地域の表示用のボタン	</div>の上に挿入	</script>の上に挿入
実習5-2 　　ズームコントロールの非表示		let myMap=…と入れ替え
実習5-2_2 　　ズームコントロールの右上表示		</script>の上に挿入
実習5-3 　　スケールバーの表示		</script>の上に挿入
研究3 　　スケールバーの変更		//スケールバーの表示　～　 .addTo(myMap);と入れ替え
実習5-4 　　マーカーの表示		</script>の上に挿入
実習5-4_2 　　自作マーカーの表示		</script>の上に挿入
研究4 　　マーカーとポップアップ		</script>の上に挿入
実習5-5 　　多角形の表示		</script>の上に挿入
実習5-5_2 　　円の表示		</script>の上に挿入
実習5-5_3 　　円（中塗り）の表示		</script>の上に挿入
研究5 　　同心円を描く		</script>の上に挿入
実習5-6 　　オーバーレイヤーの表示／非表示		</script>の上に挿入
研究6 　　ベースレイヤーの選択		</script>の上に挿入
研究7 　　オープンストリートの地図		国土地理院の地図表示関数と入れ替え