SvgmapAppLayers GitHub Pagesの利用
提供: svg2wiki
目次 |
はじめに
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']; } ?>