SvgmapAppLayers GitHub Pagesの利用

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(ページの作成:「= SvgmapAppLayers GitHub Pagesの利用 = githubの[https://github.com/svgmap/svgmapAppLayers svgmapAppLayers]リポジトリでオープンソースとして公開され...」)
 
(制限事項)
 
(1人の利用者による、間の37版が非表示)
1行: 1行:
= SvgmapAppLayers GitHub Pagesの利用 =
+
= はじめに =
githubの[https://github.com/svgmap/svgmapAppLayers svgmapAppLayers]リポジトリでオープンソースとして公開されている、SVGMap.jsで利用できる開発済みの様々な[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer]]を、直接参照して利用するウェブページを作成する方法を説明します。
+
githubの[https://github.com/svgmap/svgmapAppLayers svgmapAppLayers]リポジトリは、SVGMap.jsで利用できる様々な機能やコンテンツ提供する[[解説書#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|WebApp Layer]]を集めたものです。いずれもオープンソースとして公開されています。(ライセンスは[https://www.mozilla.org/en-US/MPL/2.0/ MPL2] ([https://www.mozilla.jp/documents/mpl/2.0/ 日本語参考訳]) (SVGMap.jsと同じ))
 +
 
 +
また、このリポジトリは[https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages GitHub Pages]としてセットアップされています。リポジトリのルートは https://svgmap.github.io/svgmapAppLayers/ です。
 +
 
 +
そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。
 +
 
 +
* 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html こちら]をクリック (プロキシをセットアップしたもの)
 +
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayers.zip ZIPアーカイブファイル]
 +
 
 +
== 制限事項 ==
 +
* データのソースにクロスオリジンアクセスするレイヤーでは、プロキシーを用意する必要があるものがあります(本省後半で解説)
 +
* いくつかのレイヤーはGitHub Pagesの直接参照では使えません(次章 クローンを作成して使用することで使用可能になります)
 +
 
 +
== 使えるレイヤーの一覧 ==
 +
* [https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html こちらのページ]を参照してください
 +
** このページは https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg をもとに生成されています。
 +
* corsRestricted がtrueのレイヤーはGitHub Pagesの直接参照では使えません
 +
* corsProxyRequired がtrueのレイヤーはプロキシーを用意する必要があります
 +
 
 +
= プロキシーが必要ないレイヤーだけを使ってみる =
 +
 
 +
* プロキシーが不要なレイヤーだけを使うページを作成してみます。プロキシの設定がないので簡単です。
 +
** 完全に静的なホスティングで運用可能です。( ご自身で構築したGitHub Pagesで公開することも可能です)
 +
* 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers.html こちら]をクリック
 +
 
 +
== コンテナ(Conainer.svg)の準備 ==
 +
* [https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html#withoutProxy こちらのページ]を表示
 +
** プロキシが必要なレイヤーはあらかじめチェックが外れています。(GitHub Pagesの直接参照ができないレイヤー含)
 +
* 表示したいレイヤーにチェックして、Container.svgを保存する(もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれたContainerが取得できます。
 +
 
 +
== 地図ページのhtml (ghAppLayers.html)==
 +
* これまでの章と特に内容に違いはありません。
 +
 
 +
<pre>
 +
<!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 { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
 +
  window.svgMap=svgMap
 +
</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="Conainer.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>
 +
</pre>
 +
 
 +
= プロキシーが必要なレイヤーも使えるようにセットアップする =
 +
 
 +
* プロキシーが必要なレイヤーも使うページを作成してみます。
 +
** プロキシーサービスの準備が必要です(PHPでも運用は可能(本チュートリアルではPHPを使用した例を提示))
 +
* 実際の動作は[https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html こちら]をクリック
 +
 
 +
== コンテナ(Container_wpxy.svg)の準備 ==
 +
* [https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html こちらのページ]を表示
 +
** プロキシが必要なレイヤーもチェックさています。(GitHub Pagesの直接参照ができないレイヤーはチェック外れています)
 +
* 表示したいレイヤーにチェックして、Container_wpxy.svgを保存する(もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれたContainerが取得できます。
 +
 
 +
== 地図ページのhtml (ghAppLayers_wpxy.html) ==
 +
* 違いはProxyを使用できるようにSVGMap.jsをセットアップしている点です。詳しくは'''[[クロスオリジンアクセス|こちらの情報]]'''を参照ください。
 +
** import { CorsProxy } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js'; でプロキシーを扱うライブラリを読み込み、
 +
** corsProxy.setServiceでセットアップし
 +
*** (この例では同じディレクトリに設置したPHPによるプロキシ(./simpleCORSproxy.php)を指定)
 +
** svgMap.setProxyURLFactoryで、SVGMap.jsに組み込んでいます。
 +
* 使用するコンテナsvgは"Container.svg"としています。
 +
 
 +
<pre>
 +
<!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をエンコードする
 +
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_wpxy.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>
 +
</pre>
 +
 
 +
== プロキシーの準備 ==
 +
今回はPHPが使えるホスティング上でPHPによる簡易プロキシーを設定することにします
 +
* // Set acceptable referer criteria の行は、このhtmlのあるドメイン(svgmap.org)からのアクセスみに受け付ける簡単な制限を設定しています。
 +
* 詳しくは[[単純なプロキシ実装例]]を参照ください。
 +
<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日 (月) 07:47時点における最新版

目次

[編集] はじめに

githubのsvgmapAppLayersリポジトリは、SVGMap.jsで利用できる様々な機能やコンテンツ提供するWebApp Layerを集めたものです。いずれもオープンソースとして公開されています。(ライセンスはMPL2 (日本語参考訳) (SVGMap.jsと同じ))

また、このリポジトリはGitHub Pagesとしてセットアップされています。リポジトリのルートは https://svgmap.github.io/svgmapAppLayers/ です。

そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。

[編集] 制限事項

  • データのソースにクロスオリジンアクセスするレイヤーでは、プロキシーを用意する必要があるものがあります(本省後半で解説)
  • いくつかのレイヤーはGitHub Pagesの直接参照では使えません(次章 クローンを作成して使用することで使用可能になります)

[編集] 使えるレイヤーの一覧

[編集] プロキシーが必要ないレイヤーだけを使ってみる

  • プロキシーが不要なレイヤーだけを使うページを作成してみます。プロキシの設定がないので簡単です。
    • 完全に静的なホスティングで運用可能です。( ご自身で構築したGitHub Pagesで公開することも可能です)
  • 実際の動作はこちらをクリック

[編集] コンテナ(Conainer.svg)の準備

  • こちらのページを表示
    • プロキシが必要なレイヤーはあらかじめチェックが外れています。(GitHub Pagesの直接参照ができないレイヤー含)
  • 表示したいレイヤーにチェックして、Container.svgを保存する(もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれたContainerが取得できます。

[編集] 地図ページのhtml (ghAppLayers.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 { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
  window.svgMap=svgMap
</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="Conainer.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を使用した例を提示))
  • 実際の動作はこちらをクリック

[編集] コンテナ(Container_wpxy.svg)の準備

  • こちらのページを表示
    • プロキシが必要なレイヤーもチェックさています。(GitHub Pagesの直接参照ができないレイヤーはチェック外れています)
  • 表示したいレイヤーにチェックして、Container_wpxy.svgを保存する(もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれたContainerが取得できます。

[編集] 地図ページのhtml (ghAppLayers_wpxy.html)

  • 違いはProxyを使用できるようにSVGMap.jsをセットアップしている点です。詳しくはこちらの情報を参照ください。
    • import { CorsProxy } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js'; でプロキシーを扱うライブラリを読み込み、
    • corsProxy.setServiceでセットアップし
      • (この例では同じディレクトリに設置したPHPによるプロキシ(./simpleCORSproxy.php)を指定)
    • svgMap.setProxyURLFactoryで、SVGMap.jsに組み込んでいます。
  • 使用するコンテナsvgは"Container.svg"としています。
<!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をエンコードする
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_wpxy.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 の行は、このhtmlのあるドメイン(svgmap.org)からのアクセスみに受け付ける簡単な制限を設定しています。
  • 詳しくは単純なプロキシ実装例を参照ください。
<?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