チュートリアル2a - 版の履歴

Admin: /* tutorial2.html */

2024-09-12T09:45:19Z

‎tutorial2.html

Admin: /* tutorial2.html */

2024-09-12T09:44:39Z

‎tutorial2.html

Admin: /* チュートリアル2a 海岸線地図とPOI(空港)表示 */

2023-06-23T14:08:57Z

‎チュートリアル2a 海岸線地図とPOI(空港)表示

Admin: /* チュートリアル2a 海岸線地図とPOI(空港)表示 */

2023-04-11T09:24:43Z

‎チュートリアル2a 海岸線地図とPOI(空港)表示

Admin: /* ソースコード */

2023-04-11T03:29:32Z

‎ソースコード

Admin: /* Coastline_Airport.svg */

2023-04-11T02:59:58Z

‎Coastline_Airport.svg

Admin: /* use要素によるPOIデータの配置 */

2023-04-11T02:57:20Z

‎use要素によるPOIデータの配置

Admin: /* use要素によるPOIデータの配置 */

2023-04-11T02:56:29Z

‎use要素によるPOIデータの配置

Admin: /* use要素によるPOIデータの配置 */

2023-04-11T02:55:16Z

‎use要素によるPOIデータの配置

Admin: /* use要素によるPOIデータの配置 */

2023-04-11T02:52:51Z

‎use要素によるPOIデータの配置

@@ 38行目: / 38行目: @@
 <!-- SVGMapのコアAPIの読み込み -->
-<script type="text/javascript" src="./js/SVGMapLv0.1_r17.js"></script>
+<script type="module">
-<script type="text/javascript" src="./js/SVGMapLv0.1_LayerUI2_r4.js"></script>
+  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
 <body bgcolor="#ffffff" style="overflow:hidden;" >

@@ 19行目: / 19行目: @@
 基本的に、チュートリアル1で使用したtutorial1.htmlと同様。
-*SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.js, SVGMapLv0.1_LayerUI2_r4.js)を読み込み、SVGMapの各種APIを利用可能にする。
+*SVGMapのコアプログラムファイル(SVGMapLv0.1_r18module.js)を読み込み、SVGMapの各種APIを利用可能にする。
 *地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
 *ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。

@@ 1行目: / 1行目: @@
 = チュートリアル2a 海岸線地図とPOI(空港)表示 =
 * 実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
-* 使用ファイルは[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/ こちら]
+* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2.zip ZIPアーカイブファイル]
 ==コンテンツの構造==

@@ 1行目: / 1行目: @@
 = チュートリアル2a 海岸線地図とPOI(空港)表示 =
-* 実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
+* 実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html こちら]をクリック。
-* 使用ファイルは[https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2/ こちら]
+* 使用ファイルは[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/ こちら]
 ==コンテンツの構造==

@@ 127行目: / 127行目: @@
   <defs>
    <g id="syl5" >
-    <image xlink:href="../img/mappin1.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin1.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl6" >
-    <image xlink:href="../img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl7" >
-    <image xlink:href="../img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl8" >
-    <image xlink:href="../img/mappin3.png" preserveAspectRatio="none" x="-5.6" y="-17.5" width="13.3" height="18.9"/>
+    <image xlink:href="./img/mappin3.png" preserveAspectRatio="none" x="-5.6" y="-17.5" width="13.3" height="18.9"/>
    </g>
    <g id="syl9" >
-    <image xlink:href="../img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl10" >
-    <image xlink:href="../img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl11" >
-    <image xlink:href="../img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl12" >
-    <image xlink:href="../img/mappin5.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin5.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl13" >
-    <image xlink:href="../img/mappin3.png" preserveAspectRatio="none" x="-4" y="-12.5" width="9.5" height="13.5"/>
+    <image xlink:href="./img/mappin3.png" preserveAspectRatio="none" x="-4" y="-12.5" width="9.5" height="13.5"/>
    </g>
   </defs>

@@ 84行目: / 84行目: @@
 == Coastline_Airport.svg ==
 *チュートリアル1のCoastline.svgに空港情報を追加。
-*'''上の行から順に描画が進む'''ので、まずは背景ず（海岸線）を記述、その後にポイントデータ（上乗せ情報）を記述
+*'''上の行から順に描画が進む'''ので、まず背景（海岸線）を記述、その後にポイントデータ（上乗せ情報）を記述
 ===ポイントデータ(POI)の記述方法===

@@ 109行目: / 109行目: @@
 * Note:
-**use要素を'''a'''要素で包含させることで空港情報以外にhttpリンクも記述できる。この場合、以下の内容が実行可能になる。
+**use要素を'''a'''要素に包含させることで空港情報以外にハイパーリンクも記述できます。この場合、以下の内容が実行可能
 **空港イメージをクリックすると他のWebページに遷移する。
 **上記の内容を1つの空港に対して、設定することができる(クリック後に、空港情報表示かURL遷移かを選択するダイアログが表示される)

@@ 106行目: / 106行目: @@
 ** 空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。
 ** '''svg'''要素(documentElement)の'''property'''属性で、メタデータの属性名をcsvで記述すると、クリック時に整理された表示ができます。
-*** '''property'''属性のCSVの個数と'''content'''属性のCSVの個数は一致している必要がある
+*** '''property'''属性のCSV(メタデータの名称)の個数と、'''content'''属性のCSV(メタデータの値)の個数は一致している必要があります。
 * Note: