svgmap · ethanmci · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026 · Mar 4, 2026
diff --git a/docs/basic/tutorial-2c/index.md b/docs/basic/tutorial-2c/index.md
@@ -1,10 +1,10 @@
 # Tutorial 2c: OpenStreetMap and POI (airport) display (layering)
 
-## Introduction  
+## Introduction  {#introduction}
 
 In this tutorial, we will use OpenStreetMap as the background map to create a more practical page. [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html) to see it in action. This tutorial is the same as Tutorial 2b, except that it uses OpenStreetMap.svg as the background map.
 
-### File Structure
+### File Structure {#file-structure}
 
 The file structure is as follows:
 
@@ -14,13 +14,13 @@ The file structure is as follows:
   - dynamicOSM_r11.svg is a dynamic content (WebAppLayer) linked with JavaScript code. We will not go into that in this chapter, but will focus on practical layering.
     - Note: Dynamic content is explained in more detail in [the WebApp Layer section](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB#WebApp_Layer.E7.B7.A8).
 
-## Tutorial
+## Tutorial {#tutorial}
 
-### Files Used
+### Files Used {#files-used}
 
 - [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c.zip) of used files
 
-### Content Structure
+### Content Structure {#content-structure}
 
 ```plaintext
 tutorial2b.html
@@ -37,20 +37,20 @@ tutorial2b.html
      |
      +-Airport.svg (actual map layer content (airport points))
 ```
-### tutorial2c.html
+### tutorial2c.html {#tutorial2c-html}
 
 This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b#tutorial2b.html)
 
-### layerListStyle.css
+### layerListStyle.css {#layerlistsyle-css}
 
 This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b#tutorial2b.html)
 
-### Container.svg
+### Container.svg {#container-svg}
 
-- Load the SVG files for the two layers you want to display as layers.
+- Load the SVG files for the two layers you want to display [as layers](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB1#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0).
   - Coastline.svg
   - Airport.svg
-- The layer order is as follows: The lower the row, the higher the layer . SVG Painters Model
+- The layer order is as follows: The lower the row, the higher the layer . [SVG Painters Model](https://www.w3.org/TR/SVG11/render.html#PaintersModel)
 - Layer list UI can be grouped by specifying a class
 - Referencing layers by animation elements
 - Set the initial visibility state using the visibility attribute (if there is no layer list UI, it is impossible to change the initial visibility state)
@@ -69,47 +69,47 @@ This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E
 </svg>
 ```
 
-### dynamicOSM_r11.svg, (dynamicOSM_r11.html)
+### dynamicOSM_r11.svg, (dynamicOSM_r11.html) {#dynamicosm_r11-svg}
 
 - This is the default OpenStreetMap background map layer that replaces Coastline.svg.
 - This content is not just SVG content, but a WebAppLayer where content is dynamically generated using JavaScript.
   - dynamicOSM_r11.html is the WebApp content containing the javascript and is linked from dynamicOSM_r11.svg.
-  - WebAppLayer will be explained in more detail in Tutorial: WebAppLayer . For now, just think of it as a practical background map layer that can be easily used, where a detailed map will be displayed when zoomed in, by simply replacing Coastline.svg with this.
+  - WebAppLayer will be explained in more detail in [Tutorial: WebAppLayer](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB#WebApp_Layer.E7.B7.A8). For now, just think of it as a practical background map layer that can be easily used, where a detailed map will be displayed when zoomed in, by simply replacing Coastline.svg with this.
 
-### Airport.svg
+### Airport.svg {#airport-svg}
 
 This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b#tutorial2b.html)
 
-## Added: Allows you to choose background map
+## Added: Allows you to choose background map {#added}
 
 In the previous chapter, we replaced Coastline.svg with dynamicOSM_r11.svg, but by using the layer function, users can choose from multiple background maps from the UI.
 
 You can also use the same method to set up multiple add-on information items and switch between them.
 
-- Click here to see it in action .
+- Click [here](http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/tutorial2c_add.html) to see it in action .
   - If you click on the layer list UI in the upper left corner of the screen, you can choose from two background maps.
-- The file used is here
+- The file used is [here](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/)
 
 The difference is the contents of Container.svg
 
-### tutorial2c_add.html
+### tutorial2c_add.html {#tutorial2c_add-html}
 
 [This is the same as the html in the previous chapter](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2c#tutorial2c.html), except that the linked container svg is Container_add.svg .
 
-### Container_add.svg
+### Container_add.svg {#container_add-svg}
 
 **The key point is the animation** element (there are no other differences).
 
-- Set multiple animation elements for the background map content
+- Set multiple **animation** elements for the background map content
 - Give each background map a different title attribute
 - **Class** attribute
   - Set a common class name for the background map
     - The name specified in the class name will be the name of the group that appears in the layer list UI.
   - Additionally, add a switch to the class name so that only one of the background maps can be selected in the UI. (If you want to be able to display both at the same time, do not add a switch.)
-    - class="basemap switch"
-- Set everything except the background map you want to display by defaultvisibility="hidden"
+    - '''class="basemap switch"'''
+- Set everything except the background map you want to display by default '''visibility="hidden"'''
 
-#### Source code
+#### Source code {#source-code}
 
 ```svg
 <?xml version="1.0" encoding="UTF-8"?>
@@ -126,6 +126,6 @@ The difference is the contents of Container.svg
 </svg>
 ```
 
-### Coastline.svg
+### Coastline.svg {#coastline-svg}
 
 This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b#tutorial2b.html)
diff --git a/docs/basic/tutorial-3/index.md b/docs/basic/tutorial-3/index.md
@@ -1,10 +1,10 @@
 # Tutorial 3: Displaying a tiled coastline map
 
-## Introduction  
+## Introduction  {#introduction}
 
 This tutorial splits the content of Tutorial 1 into multiple tiles and displays them. [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html) to see it in action.
 
-### File Structure
+### File Structure {#file-structure}
 
 The file structure is as follows:
 
@@ -32,13 +32,13 @@ The file structure is as follows:
   - [3_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_2.svg)
   - [3_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_3.svg)
 
-## Tutorial
+## Tutorial {#tutorial}
 
-### Files Used
+### Files Used {#files-used}
 
 - [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip) file of used files
 
-### Essential differences from existing frameworks
+### Essential differences from existing frameworks {#essential-differences}
 
 SVGMap tiling is fundamentally different from other frameworks (openlayers, leaflet, googlemaps, etc.). Therefore, developers who are used to existing frameworks may be confused by the differences in the mechanism, so I would like to explain it here.
 
@@ -52,7 +52,7 @@ In this chapter, we will demonstrate the most basic static tiling using this fun
 
 One of the reasons for this structure of SVGMap is to allow it to be extended and implemented with more advanced and efficient tiling methods, such as those described in the above [reference material](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese).
 
-### Content Structure
+### Content Structure {#content-structure}
 
 ```plaintext
 tutorial1.html
@@ -82,7 +82,7 @@ tutorial1.html
        +-3_2.svg (actual tiled coastline content)
        +-3_3.svg (actual tiled coastline content)
 ```
-### tutorial3.html
+### tutorial3.html {#tutorial3-html}
 
 Basically the same as tutorial1.html used in Tutorial 1.
 
@@ -135,7 +135,7 @@ Basically the same as tutorial1.html used in Tutorial 1.
 </html>
 ```
 
-### Container.svg
+### Container.svg {#container-svg}
 
 - Load an SVG file for each layer you want to display (only Coastline.svg is loaded).
 
@@ -150,9 +150,9 @@ Basically the same as tutorial1.html used in Tutorial 1.
 </svg>
 ```
 
-### Coastline
+### Coastline {#coastline}
 
-#### Tiling
+#### Tiling {#tiling}
 
 This is an example of tiling using [the animation element](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB1#animation.E8.A6.81.E7.B4.A0) of SVGMap content .
 
@@ -165,7 +165,7 @@ Tiling consists of tile content, where the actual data is stored, and container
     - Tiles are loaded as needed based on this area information (the tiles are automatically loaded when their area is within the area displayed on the screen).
     - Note: ∴Unlike layering, the x, y, width, and height attributes are important in tiling.
 
-#### Placement of each tile
+#### Placement of each tile {#placement-of-each-tile}
 
 **Coastline.svg**
 | + | X coordinate small, Small Longitude | .. | .. | X coordinate large, Large Longitude
@@ -182,11 +182,11 @@ Tiling consists of tile content, where the actual data is stored, and container
 - Note: The Y coordinate is the opposite of the geographic coordinate (latitude and longitude coordinate), and the origin is at the top (north).
   - See the relationship between SVG coordinates and geographic coordinates (latitude and longitude coordinates) using [the globalCoordinateSystem element](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB1#.E5.BF.85.E9.A0.88.E3.81.AE.E6.8B.A1.E5.BC.B5_:_globalCoordinateSystem.E8.A6.81.E7.B4.A0).
 
-#### About svpMap Tools
+#### About svpMap Tools {#about-svgmap-tools}
 
 [svgMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials) has the ability to generate tiled SVGMap content from large geographical data (such as shapefiles), but also supports more advanced (highly efficient) tiling (Quad Tree Composite Tiling).
 
-#### Source code
+#### Source code {#source-code}
 
 ```svg
 <?xml version="1.0" encoding="UTF-8"?> 
@@ -216,7 +216,7 @@ Tiling consists of tile content, where the actual data is stored, and container
 </svg>
 ```
 
-### Split SVG files
+### Split SVG files {#split-svg-files}
 
 - 0_0.svg
 Areas without map data.

diff --git a/docs/basic/tutorial-3b/index.md b/docs/basic/tutorial-3b/index.md
@@ -1,11 +1,11 @@
 # Tutorial 3b: Tiling (Creating static tiles with svgMapTools)
 
-## Introduction  
+## Introduction  {#introduction}
 
 In the previous chapter, we used tiles that had already been created, but here we will use svgMapTools to create and display tile data from a shapefile.
 [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html) to see it in action.
 
-### File Structure
+### File Structure {#file-structure}
 
 The file structure is as follows:
 
@@ -15,28 +15,28 @@ The file structure is as follows:
   - For information on the tiling performed by svgMapTools (Quad Tree Composite Tiling), see [this document](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese).
 - Display converted content as a layer
 
-## Tutorial
+## Tutorial {#tutorial}
 
-### Files Used
+### Files Used {#files-used}
 
 - [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) file of used files
 
-### Preparing tiled content
+### Preparing tiled content {#preparing-tiled-content}
 
 - In this chapter, we will use [svgMapTools](https://github.com/svgmap/svgMapTools/) to prepare tiled map content from a shapefile and display it.
 Therefore, please [first follow the tutorial that includes setting up svgMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials).
 - In this tutorial, we will display data from [the Geospatial Information Authority of Japan's Global Map of Japan (file format: shapefile, vector geographic data)](https://www.gsi.go.jp/kankyochiri/gm_jpn.html).
   - This time, we will display the coastline (coasstl), road (roadl), and urban area (surfaces (builtupa) and points (builtupp)) data as layers.
 
-#### Configuring svgMapTools
+#### Configuring svgMapTools {#configuring-svgmaptools}
 
 - Complete [the tutorial](https://github.com/svgmap/svgMapTools/tree/master/tutorials) including setting up svgMapTools
 
-#### Download source data
+#### Download source data {#download-source-data}
 
 - Download and unzip [the zip file containing all layers](https://www1.gsi.go.jp/geowww/globalmap-gsi/download/data/gm-japan/gm-jpn-all_u_2_2.zip) from [the Global Map Japan website](https://www.gsi.go.jp/kankyochiri/gm_jpn.html).
 
-#### Transform data and save content
+#### Transform data and save content {#transform-data-and-save-content}
 
 Generates tiled content for an SVGMap from a Shapefile.
 
@@ -61,11 +61,11 @@ Note:
 - [PATH_TO_DATA] is the directory where you extracted the downloaded data
 - builtupp_jpn and builtupa_jpn do not generate bit image tiles for small scales because the data size is not large (tiling is not actually necessary).
 
-### tutorial3b.html
+### tutorial3b.html {#tutorial3b-html}
 
 It is essentially the same as [tutorial2b.html](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b#tutorial2b.html) used in [Tutorial 2b](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b).
 
-### Container.svg
+### Container.svg {#container-svg}
 
 - It is essentially the same as [Container.svg](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b#Container.svg) from [Tutorial 2b](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2b).
 - However, this time the coastline layer, road layer, and urban area (surface/point) layer are all tiled data.
@@ -94,7 +94,7 @@ It is essentially the same as [tutorial2b.html](https://www.svgmap.org/wiki/inde
 <animation xlink:href="builtup/builtupp_jpn.svg" x="-3000" y="-3000" width="6000" height="6000" title="Urban Area (Dot)" class="Global Map Japan clickable" visibility="visible"/>
 </svg>
 ```
-### The structure of tiled content generated by svgMapTools
+### The structure of tiled content generated by svgMapTools {#structure-of-tiled-content}
 
 - All vector data (.svg format - for large-scale display) and raster data (.png format - for small-scale display) are referenced hierarchically from the layer's root content (in this example, coastline data, coastl_jpn.svg).
 - Among .svg format data, those with the file name *cont* contain no vector graphics data and only reference data, referencing child and descendant content.

diff --git a/docs/basic/tutorial-4/index.md b/docs/basic/tutorial-4/index.md
@@ -1,11 +1,11 @@
 # Tutorial 4: Bitmap Image Map Display
 
-## Introduction  
+## Introduction  {#introduction}
 
 This is a tutorial that overlays some bitmap image maps onto the contents of Tutorial 1.
 [Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) to see it in action .
 
-### File Structure
+### File Structure {#file-structure}
 
 The file structure is as follows:
 
@@ -19,14 +19,14 @@ The file structure is as follows:
 - Bitmap image SVG file to overlay.
   - This was created using this tool: [a tool that layers bitmap map images onto SVGMap](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/).
 
-## Tutorial
+## Tutorial {#tutorial}
 
-### Files Used
+### Files Used {#files-used}
 
 - [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4.zip) of used files
 - Source: [Estimated damage from an earthquake directly beneath the capital, page 7](https://www.bousai.go.jp/kyoiku/bousai-vol/drill/h26/tokyo/tokyo03_kato.pdf#page=4)
 
-### tutorial4.html
+### tutorial4.html {#tutorial4-html}
 
 Basically the same as tutorial2b.html used in Tutorial 2b .
 
@@ -86,7 +86,7 @@ Basically the same as tutorial2b.html used in Tutorial 2b .
 </html>
 ```
 
-### Container.svg
+### Container.svg {#container-svg}
 
 - [As in Tutorial 2c](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2c), the bitmap images bitmapImage.svg and dynamicOSM_r11.svg are loaded as layers.
 - [As with the additional chapters in Tutorial 2c](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2c#.E8.BF.BD.E5.8A.A0.EF.BC.9A.E8.83.8C.E6.99.AF.E5.9C.B0.E5.9B.B3.E3.82.92.E9.81.B8.E3.81.B9.E3.82.8B.E3.82.88.E3.81.86.E3.81.AB.E3.81.99.E3.82.8B), you can choose from two background maps (OpenStreetMap and Coastline.svg).
@@ -106,13 +106,13 @@ Basically the same as tutorial2b.html used in Tutorial 2b .
 
 </svg>
 ```
-### bitmapImage.svg
+### bitmapImage.svg {#bitmapimage-svg}
 
 - Bitmap image SVG file to overlay.
   - Created using a [tool](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/) that layers bit-image map images into SVGMap.
   - The original bit image is extracted from the document at the beginning of this chapter.
 
-#### Relationship between longitude and latitude and XY coordinates of SVG content
+#### Relationship between longitude and latitude and XY coordinates of SVG content {#relationship-between-lon-lat-xy-coord}
 
 ```globalCoordinateSystem transform``` Specified by the element attributes (six values of the linear transformation matrix)
 
@@ -128,7 +128,7 @@ Xsvg = longitude
 Ysvg = -latitude
 ```
 
-#### Image element parameters
+#### Image element parameters {#image-element-parameters}
 
 - The bit image is placed using the image element.
   - ```xlink:href="[ビットイメージのURL]"``` URL of the bit image to be placed
@@ -155,10 +155,10 @@ Ysvg = -latitude
 </svg>
 ```
 
-### dynamicOSM_r11.svg (and dynamicOSM_r11.html)
+### dynamicOSM_r11.svg (and dynamicOSM_r11.html) {#dynamicosm-r11-svg}
 
 This is the same as [dynamicOSM_r11.svg from Tutorial 2c](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29).
 
-### Coastline.svg
+### Coastline.svg {#coastline-svg}
 
 This is the same one we have been using since [Tutorial 1](https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB1#Coastline.svg).