SvgmapAppLayers GitHub Pagesの利用

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎プロキシーが必要ないレイヤーだけを使ってみる)
50行: 50行:
 
<!-- 地図SVGファイルを複数含むコンテナファイル(Container.svg)の読み込み -->
 
<!-- 地図SVGファイルを複数含むコンテナファイル(Container.svg)の読み込み -->
 
  <div id="mapcanvas" data-src="Conainer_npxy.svg"></div>
 
  <div id="mapcanvas" data-src="Conainer_npxy.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>
 +
 +
= プロキシーが必要なレイヤーも使えるようにセットアップする =
 +
 +
 +
== Container.svgの準備 ==
 +
* [https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html こちらのページ]を表示
 +
** プロキシが必要なレイヤーもチェックさています。(GitHub Pagesの直接参照ができないレイヤーはチェック外れています)
 +
* 表示したいレイヤーにチェックして、Container.svgを保存する（もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれたContainerが取得できます。
 +
 +
== 地図ページのhtml ==
 +
* 違いはProxyを使用できるようにSVGMap.jsをセットアップしている点です。詳しくは　を参照ください。
 +
** import { CorsProxy } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js';　でプロキシーを扱うライブラリを読み込み、
 +
** corsProxy.setServiceでセットアップし
 +
** svgMap.setProxyURLFactoryで、SVGMap.jsに組み込んでいます。
 +
 +
<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.svg"></div>
 
  <div id="gui">
 
  <div id="gui">
 
<!-- ズームアップボタン -->
 
<!-- ズームアップボタン -->

2025年7月7日 (月) 07:00時点における版

目次

はじめに

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

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

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

制限事項

  • データのソースにクロスオリジンアクセスするレイヤーでは、プロキシーを用意する必要があるものがあります
  • いくつかのレイヤーはGitHub Pagesの直接参照では使えません

使えるレイヤーの一覧

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

Container.svgの準備

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

地図ページの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_npxy.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>

プロキシーが必要なレイヤーも使えるようにセットアップする

Container.svgの準備

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

地図ページのhtml

  • 違いはProxyを使用できるようにSVGMap.jsをセットアップしている点です。詳しくは　を参照ください。 
<!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.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>
「https://www.svgmap.org/wiki/index.php?title=SvgmapAppLayers_GitHub_Pages%E3%81%AE%E5%88%A9%E7%94%A8&oldid=2277」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate