SvgmapAppLayers GitHub Pagesの利用
提供: svg2wiki
目次 |
はじめに
githubのsvgmapAppLayersリポジトリは、SVGMap.jsで利用できる様々な機能やコンテンツ提供するWebApp Layerを集めたものです。いずれもオープンソースとして公開されています。(ライセンスはMPL2 (日本語参考訳) (SVGMap.jsと同じ))
また、このリポジトリはGitHub Pagesとしてセットアップされています。リポジトリのルートは https://svgmap.github.io/svgmapAppLayers/ です。
そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。
- 実際の動作はこちらをクリック
- 使用ファイルのZIPアーカイブファイル
制限事項
- データのソースにクロスオリジンアクセスするレイヤーでは、プロキシーを用意する必要があるものがあります
- いくつかのレイヤーはGitHub Pagesの直接参照では使えません
使えるレイヤーの一覧
- こちらのページを参照してください
- このページは https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg をもとに生成されています。
- corsRestricted がtrueのレイヤーはGitHub Pagesの直接参照では使えません
- corsProxyRequired がtrueのレイヤーはプロキシーを用意する必要があります
プロキシーが必要ないレイヤーだけを使ってみる
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>