SvgmapAppLayers GitHub Pagesの利用
提供: svg2wiki
(版間での差分)
(→はじめに) |
(→使えるレイヤーの一覧) |
||
| 15行: | 15行: | ||
* corsRestricted がtrueのレイヤーはGitHub Pagesの直接参照では使えません | * corsRestricted がtrueのレイヤーはGitHub Pagesの直接参照では使えません | ||
* corsProxyRequired がtrueのレイヤーはプロキシーを用意する必要があります | * corsProxyRequired がtrueのレイヤーはプロキシーを用意する必要があります | ||
| + | |||
| + | == Container.svgの準備 == | ||
| + | [https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html こちらのページ]を表示し、表示したいレイヤーにチェックして、Container.svgを保存する（もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれていると思います。 | ||
| + | |||
| + | |||
| + | == プロキシの準備 == | ||
| + | * 本項はプロキシーを用意する必要がないレイヤーだけを使用する場合は不要です。 | ||
| + | * '''[[クロスオリジンアクセス|こちらの情報]]'''をもとに、プロキシを準備します。今回はphpが稼働するホスティングサービス上でページを構築し、簡易なphpのプロキシを構築してみます。 | ||
| + | * // Set acceptable referer criteria の行は、各自設置するサイトのホスト名に従って設定してください | ||
| + | <pre> | ||
| + | <?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']; | ||
| + | } | ||
| + | ?> | ||
| + | </pre> | ||
2025年7月7日 (月) 06:43時点における版
目次 |
はじめに
githubのsvgmapAppLayersリポジトリは、SVGMap.jsで利用できる様々な機能やコンテンツ提供するWebApp Layerを集めたものです。いずれもオープンソースとして公開されています。(ライセンスはMPL2 (日本語参考訳) (SVGMap.jsと同じ))
また、このリポジトリはGitHub Pagesとしてセットアップされています。リポジトリのルートは https://svgmap.github.io/svgmapAppLayers/ です。
そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。
制限事項
- データのソースにクロスオリジンアクセスするレイヤーでは、プロキシーを用意する必要があるものがあります
- いくつかのレイヤーはGitHub Pagesの直接参照では使えません
使えるレイヤーの一覧
- こちらのページを参照してください
- このページは https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg をもとに生成されています。
- corsRestricted がtrueのレイヤーはGitHub Pagesの直接参照では使えません
- corsProxyRequired がtrueのレイヤーはプロキシーを用意する必要があります
Container.svgの準備
こちらのページを表示し、表示したいレイヤーにチェックして、Container.svgを保存する（もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれていると思います。
プロキシの準備
- 本項はプロキシーを用意する必要がないレイヤーだけを使用する場合は不要です。
- こちらの情報をもとに、プロキシを準備します。今回は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'];
}
?>
