2025年7月7日 (月) 09:33時点における版

はじめに

本章では、svgmapAppLayersリポジトリを自分のホストにコピーして使用します。 前章の制限事項はありませんが、svgmapAppLayersリポジトリのアップデートの反映は自身で行う必要があります。

• 実際の動作はこちらをクリック
  • このサンプルでは、国交省道路交通情報系のレイヤーと、CSVオーサリングツールレイヤーのみを使用しています
• 使用ファイルのZIPアーカイブファイル

手順

• svgmapAppLayerの内容を複製します
  • https://github.com/svgmap/svgmapAppLayers の UIから、Download ZIPする(解凍はシンボリックリンクが使える環境(linux)で行ってください
  • gitコマンドでクローンする　git clone git@github.com:svgmap/svgmapAppLayers
• 使いたいレイヤー以外のディレクトリは消去して構いません
  • ただしcommonLibは共通ライブラリは各ディレクトリの中からシンボリックリンクが張られているファイルがあるので、慎重に扱ってください
• authoringLayers/bbsの内容はphpを使って、オーサリングしたものをサーバに保存する機能に関する実装です、このチュートリアルでは扱いませんので必ず消してください。
• 地図ページのhtmlを用意する（前章と同じです）
• プロキシーを構築する（前章と同じです）
• Container.svgは編集して必要なレイヤーのみを残します。

ディレクトリの構造

このサンプルでは、国交省道路交通情報系のレイヤーと、CSVオーサリングツールレイヤーのみを使用

|--Container.svg
|--appLayers
|  |--mlitRoad
|     |--...
|
|--authoringLayers
|  |--local
|  |  |--csvLayer
|  |     |--...
|  |
|  |--mappin.png
|  
|--basemaps
|  |--...
|  
|--commonLib
|  |--...
|  
|--ghAppLayers_clone.html
|--img
|  |--...
|  
|--js
|  |--...
|  
|--simpleCORSproxy.php

Container.svg

• このサンプルでは、国交省道路交通情報系のレイヤーと、CSVオーサリングツールレイヤーのみを使用

<?xml version="1.0" encoding="UTF-8"?>
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:go="http://purl.org/svgmap/profile" viewBox="123 -46 22 22" >

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1.0,0.0,0.0,-1.0,0.0,0.0)" />

<!-- Basemap Layers -->
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicWMTS.svg" title="sentinel2_2018_WMTS" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg#map=ort" title="DenshiKokudo:orthoPhoto" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg#map=pale" title="DenshiKokudo:淡色" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg#map=relief" title="DenshiKokudo:relief" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg" title="DenshiKokudo" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/osmTileProviders/osmtp.svg" title="OpenStreetMap Etc" class="basemap switch" visibility="hidden"/>
<animation x="-300" y="-300" width="600" height="600" xlink:href="./basemaps/dynamicOSM_r11.svg" title="OpenStreetMap(Global)" class="basemap switch" visibility="visible"/>

<!-- オーサリングツール的なもののグループ -->
<animation xlink:href="./authoringLayers/local/csvLayer/csvXhr_r20.svg" title="CSVデータ可視化" data-cross-origin-restricted="true" x="-30000" y="-30000" width="60000" height="60000" class="オーサリング・ファイル editable" opacity="0.75" visibility="hidden"/>

<!-- 国交省道路情報 -->
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/notoEQ2024/notoRoad.svg" title="令和６年能登半島地震　道路復旧状況" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch clickable" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/doroBosai/kinkyuYuso.svg" title="緊急輸送道路R" data-cross-origin-proxy-required="true" opacity="0.85" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=imusho" title="国道事務所等" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=station" title="道の駅R" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=kojiyotei" title="工事予定" data-cross-origin-proxy-required="true" opacity="0.8" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=expressway" title="高速道路事前通行規制区間" data-cross-origin-proxy-required="true" opacity="0.8" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=jizenkisei" title="事前通行規制区間R" data-cross-origin-proxy-required="true" opacity="0.8" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=weather" title="時間雨量" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=camera" title="ライブカメラ" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg" title="通行規制" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
</svg>