SvgmapAppLayers GitHub Pagesの利用
提供: svg2wiki
(版間での差分)
(→はじめに) |
(→はじめに) |
||
| 6行: | 6行: | ||
そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。 | そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。 | ||
| − | * 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ | + | * 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers.html こちら]をクリック |
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayers.zip ZIPアーカイブファイル] | * 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayers.zip ZIPアーカイブファイル] | ||
2025年7月7日 (月) 06:47時点における版
目次 |
はじめに
githubのsvgmapAppLayersリポジトリは、SVGMap.jsで利用できる様々な機能やコンテンツ提供するWebApp Layerを集めたものです。いずれもオープンソースとして公開されています。(ライセンスはMPL2 (日本語参考訳) (SVGMap.jsと同じ))
また、このリポジトリはGitHub Pagesとしてセットアップされています。リポジトリのルートは https://svgmap.github.io/svgmapAppLayers/ です。
そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。
- 実際の動作はこちらをクリック
- 使用ファイルのZIPアーカイブファイル
制限事項
- データのソースにクロスオリジンアクセスするレイヤーでは、プロキシーを用意する必要があるものがあります
- いくつかのレイヤーはGitHub Pagesの直接参照では使えません
使えるレイヤーの一覧
- こちらのページを参照してください
- このページは https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg をもとに生成されています。
- corsRestricted がtrueのレイヤーはGitHub Pagesの直接参照では使えません
- corsProxyRequired がtrueのレイヤーはプロキシーを用意する必要があります
Container.svgの準備
こちらのページを表示し、表示したいレイヤーにチェックして、Container.svgを保存する（もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれていると思います。
地図ページのhtmlの準備
<!DOCTYPE html>
<html>
<title>SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG</title>
<!-- viewport 知表示領域を画面全体とする定義 -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- SVGMapのコアAPIの読み込み -->
<script type="module">
import { CorsProxy } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js';
import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
window.svgMap=svgMap
var corsProxy = new CorsProxy();
// プロキシの設定
var proxyPath = new URL("./simpleCORSproxy.php",location.href).href + "?file=";
corsProxy.setService(proxyPath, null, true, true); // 第4パラメータをtrueにするとアクセス先URLをエンコードする
window.corsProxy = corsProxy;
svgMap.setProxyURLFactory(null,null,null, corsProxy.getURLfunction(), true); // ビットイメージ非線形図法変換の時のみプロキシを使う
</script>
<!-- レイヤーリストUIのスタイルシート読み込み -->
<link href="./js/layerListStyle.css" rel="stylesheet" type="text/css">
<body bgcolor="#ffffff" style="overflow:hidden;" >
<!-- 地図SVGファイルを複数含むコンテナファイル(Container.svg)の読み込み -->
<div id="mapcanvas" data-src="Container.svg"></div>
<div id="gui">
<!-- ズームアップボタン -->
<img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="./img/zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
<!-- ズームダウンボタン -->
<img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="./img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />
<!-- GPSボタン -->
<img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="./img/gps.png" onclick="svgMap.gps()" width="20" height="20" />
<!-- 画面右上に表示するタイトル -->
<font color="blue" style="right: 5px; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG</font>
<!-- 画面右下に表示する -->
<font color="blue" style="right: 5px; bottom: 5px; position: absolute;" size="-2" >by SVGMap tech.</font>
<!-- 中央に表示される十字マーク -->
<img id="centerSight" style="opacity:0.5" src="./img/Xcursor.png" width="15" height="15"/>
<!-- 画面左下に表示される十字マークの緯度・経度(タイトル) -->
<font id="posCmt" size="-2" color="brown" style="left: 5px; bottom: 5px; position: absolute;">Lat,Lng:</font>
<!-- 画面左下に表示される十字マークの緯度・経度(実際の値の初期表示) -->
<font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" >lat , lng</font>
<!-- レイヤーリストUIの表示 -->
<div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div>
</div>
</body>
</html>
プロキシの準備
- 本項はプロキシーを用意する必要がないレイヤーだけを使用する場合は不要です。
- こちらの情報をもとに、プロキシを準備します。今回はphpが稼働するホスティングサービス上でページを構築し、簡易なphpのプロキシを構築してみます。
- // Set acceptable referer criteria の行は、各自設置するサイトのホスト名に従って設定してください
<?php
function file_get_contents_curl($url) {
$headers = array(
"HTTP/1.0",
"Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
// "Accept-Encoding:gzip ,deflate",
"Accept-Language:ja,en-us;q=0.7,en;q=0.3",
"Connection:keep-alive",
"User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:26.0) Gecko/20100101 Firefox/26.0"
);
// **/
$ch = curl_init();
curl_setopt($ch, CURLOPT_AUTOREFERER, TRUE);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
if($_GET["file"]){
$referer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : null;
// accept only referrer within this site
header("Access-Control-Allow-Origin: " . "*"); // MUST SET for CORS
if (preg_match("|^https?://svgmap\.org|", $referer) || preg_match("|^https?://www\.svgmap\.org|", $referer)) { // Set acceptable referer criteria
if ( $_GET["type"]){
header("Content-type: " . $_GET["type"]);
} else {
if(strpos($_GET["file"],'png')){
header("Content-type: image/png");
} else {
header("Content-Type:image/jpeg;");
}
}
// echo file_get_contents_curl( urldecode($_GET["file"]), true);
echo file_get_contents_curl( ($_GET["file"]), true);
} else {
echo "ERR : referer : " . $referer;
}
} else {
foreach (getallheaders() as $name => $value) {
echo "$name: $value<br>";
}
foreach ($_GET as $key => $value) {
echo "GET Key:".$key.", Value:".$value."<br>";
}
echo "referrer: ".$_SERVER['HTTP_REFERER'];
}
?>
