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の直接参照では使えません

使えるレイヤーの一覧

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'];
}
?>
個人用ツール
名前空間

変種
操作
案内
ツール
Translate