diff --git a/docs/basic/tutorial-2c/index.md b/docs/basic/tutorial-2c/index.md
new file mode 100644
index 0000000..9f392ae
--- /dev/null
+++ b/docs/basic/tutorial-2c/index.md
@@ -0,0 +1,131 @@
+# Tutorial 2c: OpenStreetMap and POI (airport) display (layering)
+
+## 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
+
+The file structure is as follows:
+
+- The tutrial2c directory contains the following files
+ - [tutorial2c.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html)
+- The background map referenced in Container.svg has been replaced from Coastline.svg to dynamicOSM_r11.svg.
+ - 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
+
+### Files Used
+
+- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c.zip) of used files
+
+### Content Structure
+
+```plaintext
+tutorial2b.html
+ |
+ +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png (images of map operation UI)
+ |
+ +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (Javascript library for displaying SVGMap)
+ |
+ +-Container.svg (An SVG file that holds various data (layers))
+ |
+ +-dynamicOSM_r11.svg (OpenStreetMap layer)
+ | |
+ | + dynamicOSM_r11.html (WebApp that dynamically generates OpenStreetMap layers)
+ |
+ +-Airport.svg (actual map layer content (airport points))
+```
+### 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
+
+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
+
+- Load the SVG files for the two layers you want to display as layers.
+ - Coastline.svg
+ - Airport.svg
+- The layer order is as follows: The lower the row, the higher the layer . SVG Painters Model
+- 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)
+- The x, y, width, and height values set the maximum possible area.
+
+```svg
+
+
+```
+
+### dynamicOSM_r11.svg, (dynamicOSM_r11.html)
+
+- 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.
+
+### 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
+
+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 .
+ - 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 difference is the contents of Container.svg
+
+### 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
+
+**The key point is the animation** element (there are no other differences).
+
+- 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"
+
+#### Source code
+
+```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)
\ No newline at end of file
diff --git a/docs/basic/tutorial-3/index.md b/docs/basic/tutorial-3/index.md
new file mode 100644
index 0000000..5c0c5ea
--- /dev/null
+++ b/docs/basic/tutorial-3/index.md
@@ -0,0 +1,3309 @@
+# Tutorial 3: Displaying a tiled coastline map
+
+## 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
+
+The file structure is as follows:
+
+- [The tutorial3 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/) contains the following files.
+ - [tutorial3.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html)
+ - HTML for Tutorial 3. Same content as tutrial1.html.
+ - [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/Container.svg)
+ - [Coastline.svg](https://www.svgmap.org//devinfo/devkddi/tutorials/tutorial3/Coastline.svg)
+ - An SVG that bundles the following 4x4 (total 16) split files.
+ - For information on tiling, see [the SVGMap tiling architecture](https://www.slideshare.net/totipalmate/tiling-51301496).
+ - [0_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_0.svg)
+ - [0_1.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_1.svg)
+ - [0_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_2.svg)
+ - [0_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/0_3.svg)
+ - [1_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_0.svg)
+ - [1_1.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_1.svg)
+ - [1_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_2.svg)
+ - [1_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/1_3.svg)
+ - [2_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_0.svg)
+ - [2_1.svg](https://www.svgmap.org//devinfo/devkddi/tutorials/tutorial3/2_1.svg)
+ - [2_2.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_2.svg)
+ - [2_3.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/2_3.svg)
+ - [3_0.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_0.svg)
+ - [3_1.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/3_1.svg)
+ - [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
+
+### Files Used
+
+- [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip) file of used files
+
+### Essential differences from existing frameworks
+
+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.
+
+Other map frameworks assume pre-defined tiling rules (such as [TMS](https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9)) **and these rules are hard-coded into the framework**. The system is designed to only specify parameters for accessing a server built based on those rules. While it is easy to introduce tiled content by simply setting parameters, there are issues with flexibility.
+
+On the other hand, SVGMap tiling is more primitive and does not have built-in tiling rules (although this can easily be implemented as a WebApp Layer, as explained in [Tutorial 5](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%AB5)), but instead provides the more basic functionality needed to make tiling work, allowing for a wide variety of tiling strategies to be achieved.
+
+In this chapter, we will demonstrate the most basic static tiling using this function. Static tiling is achieved by preparing an SVG file with inline layout information for the tiled data, and the viewer matching the viewport with its container to obtain the necessary tiles.
+
+[For](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english) an illustration of how this works, see [pages 14](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese/14) to [20](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese/20) of [this more advanced guide](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese).
+
+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
+
+```plaintext
+tutorial1.html
+ |
+ +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png (images of map operation UI)
+ |
+ +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (Javascript library for displaying SVGMap)
+ |
+ +-Contaiber.svg (Loads an SVG file that serves as a bundle of various data (layers))
+ |
+ +-Coastline.svg (Coastline layer: bundles tiled coastline content)
+ |
+ +-0_0.svg (actual tiled coastline content)
+ +-0_1.svg (actual tiled coastline content)
+ +-0_2.svg (actual tiled coastline content)
+ +-0_3.svg (actual tiled coastline content)
+ +-1_0.svg (actual tiled coastline content)
+ +-1_1.svg (actual tiled coastline content)
+ +-1_2.svg (actual tiled coastline content)
+ +-1_3.svg (actual tiled coastline content)
+ +-2_0.svg (actual tiled coastline content)
+ +-2_1.svg (actual tiled coastline content)
+ +-2_2.svg (actual tiled coastline content)
+ +-2_3.svg (actual tiled coastline content)
+ +-3_0.svg (actual tiled coastline content)
+ +-3_1.svg (actual tiled coastline content)
+ +-3_2.svg (actual tiled coastline content)
+ +-3_3.svg (actual tiled coastline content)
+```
+### tutorial3.html
+
+Basically the same as tutorial1.html used in Tutorial 1.
+
+- Loads the SVGMap core program file (SVGMapLv0.1_r18module.js) and makes various SVGMap APIs available.
+- Define the map display area (using a DIV) and load an SVG file (Containers.svg) that contains the layers to be displayed there (layers that are automatically made visible in the SVGMap core program above will be displayed).
+- Defines the display of the zoom up, zoom down, and GPS buttons and their behavior when clicked (calling the respective APIs of the SVGMap core program).
+ - Zoom up button: Zooms up the map by calling the svgMap.zoomup() API.
+ - Zoom down button: Zooms down the map by calling the svgMap.zoomdown() API.
+ - GPS button: Calls the svgMap.gps() API to zoom in on the current location (the location of your PC or smartphone, if it can be determined).
+- A cross mark indicating the center is displayed.
+- Displays the latitude and longitude on the map indicated by the cross mark above (actually, displays the latitude and longitude of the center of the map when moving the map).
+
+```html
+
+
+SVGMapLevel0.1-Rev14-Draft Tutorial3 Coastline Tiling
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Container.svg
+
+- Load an SVG file for each layer you want to display (only Coastline.svg is loaded).
+
+```svg
+
+
+```
+
+### Coastline
+
+#### 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 .
+
+Tiling consists of tile content, where the actual data is stored, and container content (this file) that integrates it.
+
+- In this example, the container content integrates each SVGMap file divided into 4x4 (16) tiles.
+- Referencing all 16 tiles using the animation element
+ - Write the link to the tile content in the xlink:href attribute
+ - Describe the area where the tile exists in the x, y, width, and height attributes
+ - 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
+
+**Coastline.svg**
+| + | X coordinate small, Small Longitude | .. | .. | X coordinate large, Large Longitude
+|---|---|---|---|---|
+| Small Y coordinate, large latitude | 0_0.svg | 1_0.svg | 2_0.svg | 3_0.svg
+| .. | 0_1.svg | 1_1.svg | 2_1.svg | 3_1.svg
+| .. | 0_2.svg | 1_2.svg | 2_2.svg | 3_2.svg
+| Large Y coordinate, small latitude | 0_3.svg | 1_2.svg | 2_2.svg | 3_2.svg
+
+- Width and height of each tile: width,height attribute values: width="659.2878" height="631.5991"
+- Origin of each tile (coordinates of the upper left corner of the tile): x, y attribute values
+ - x：12078.24557, 12737.53337, 13396.82117, 14056.10897
+ - y: -4750.342539, -4118.743422, -3487.144305, -2855.545188
+- 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
+
+[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
+
+```svg
+
+
+```
+
+### Split SVG files
+
+- 0_0.svg
+Areas without map data.
+
+```svg
+
+
+```
+
+- 0_1.svg
+Areas without map data.
+
+```svg
+
+
+```
+
+- 0_2.svg
+Areas without map data.
+
+```svg
+
+
+```
+
+- 0_3.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 1_0.svg
+Areas without map data.
+
+```svg
+
+
+```
+
+- 1_1.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 1_2.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 1_3.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 2_0.svg
+
+```svg
+
+
+```
+
+- 2_1.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 2_2.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 2_3.svg
+Areas without map data.
+
+```svg
+
+
+```
+
+- 3_0.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 3_1.svg
+
+
+Click see full SVG data
+
+```svg
+
+
+```
+
+
+- 3_2.svg
+Areas without map data.
+
+```svg
+
+
+```
+
+- 3_3.svg
+Areas without map data.
+
+```svg
+
+
+```
\ No newline at end of file
diff --git a/docs/basic/tutorial-3b/index.md b/docs/basic/tutorial-3b/index.md
new file mode 100644
index 0000000..cbb9487
--- /dev/null
+++ b/docs/basic/tutorial-3b/index.md
@@ -0,0 +1,131 @@
+# Tutorial 3b: Tiling (Creating static tiles with svgMapTools)
+
+## 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
+
+The file structure is as follows:
+
+- The [tutorial3b](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/) directory contains the following files:
+ - https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/
+- Using svgMapTools, some of the Global Map Japan data was converted into tiled SVGMap content.
+ - 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
+
+### Files Used
+
+- [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) file of used files
+
+### 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
+
+- Complete [the tutorial](https://github.com/svgmap/svgMapTools/tree/master/tutorials) including setting up svgMapTools
+
+#### 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
+
+Generates tiled content for an SVGMap from a Shapefile.
+
+Below is an example run on Windows.
+
+- ```cd [PATH_TO_DATA]```
+- ```mkdir roadl```
+- ```mkdir coastl```
+- ```mkdir builtup```
+- ```cd [PATH_TO_TOOLS]```
+- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#000000" [PATH_TO_DATA]\coastl_jpn.shp [PATH_TO_DATA]\coastl\coastl_jpn.svg```
+- ```Shape2ImageSVGMap [PATH_TO_DATA]\coastl\coastl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\coastl_jpn.shp "#000000" "#000000" 0 2```
+- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -showtile -densityControl 400 -lowresimage -strokefix 2 -color "#00ff00" [PATH_TO_DATA]\roadl_jpn.shp -[PATH_TO_DATA]\roadl\roadl_jpn.svg```
+- ```Shape2ImageSVGMap [PATH_TO_DATA]\roadl\roadl_jpn.svg -sumUp 16 -antiAlias [PATH_TO_DATA]\roadl_jpn.shp "#00ff00" "#00ff00" 0 2```
+- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupa_jpn.shp [PATH_TO_DATA]\builtup\builtupa_jpn.svg```
+- ```Shape2SVGMap.bat -micrometa2 -level 3 -limit 200 -strokefix 2 -color "#ff0000" [PATH_TO_DATA]\builtupp_jpn.shp [PATH_TO_DATA]\builtup\builtupp_jpn.svg```
+- ```Transfer all contents of [PATH_TO_DATA]\coastl, [PATH_TO_DATA]\roadl, [PATH_TO_DATA]\builtup to the host.```
+
+Note:
+
+- [PATH_TO_TOOLS] is the tools directory of svgMapTools
+- [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
+
+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
+
+- 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.
+- **The animation** elements representing each layer refer to the root file of the tiled SVGMap content generated by svgMapTools.
+- To make the vector data clickable, add **clickable** to **the class attribute**.
+- Additionally, OpenStreetMap has been added as a hidden layer at the bottom.
+
+```svg
+
+
+```
+### The structure of tiled content generated by svgMapTools
+
+- 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.
+
+```plaintext
+coastl_jpn.svg
+ |
+ +-coastl_jpn/lvl3/tile1_0.png
+ +-coastl_jpn/lvl3/tile0_1.png
+ +-coastl_jpn/lvl3/tile1_1.png
+ |
+ +-coastl_jpn/lvl4/tile1_2.png
+ +-coastl_jpn/lvl4/tile2_2.png
+ +-coastl_jpn/lvl4/tile2_3.png
+ |
+ +-coastl_jpn_l1_2-3.svg
+ |
+ +-coastl_jpn_cont_l1_1-2.svg
+ | |
+ | +-coastl_jpn/lvl5/tile3_4.png
+ |+-*.png ...
+ |+-coastl_jpn_l2_2-5.svg
+ |+-*.svg ...
+ | +-coastl_jpn_cont_l4_14-20.svg
+ | |
+ |+-*.png ...
+ |+-*.svg ...
+ |
+ +-coastl_jpn_cont_l1_2-2.svg
+ |
+ +-*.png ...
+ +-*.svg ...
+```
+
diff --git a/docs/basic/tutorial-4/index.md b/docs/basic/tutorial-4/index.md
new file mode 100644
index 0000000..1e27e19
--- /dev/null
+++ b/docs/basic/tutorial-4/index.md
@@ -0,0 +1,164 @@
+# Tutorial 4: Bitmap Image Map Display
+
+## 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
+
+The file structure is as follows:
+
+- [The tutrial4 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) contains the following files.
+ - [tutorial4.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html)
+ - HTML for Tutorial 4. Same content as tutrial1.html.
+ - [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/Container.svg)
+ - Load the bitmap image bitmapImage.svg to be displayed over the Coastline.svg file, which is the same as in Tutorial 1.
+ - [dynamicOSM_r11.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/dynamicOSM_r11.svg)
+ - The same OpenStreetMap layer as in Tutorial 2c
+- 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
+
+### 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
+
+Basically the same as tutorial2b.html used in Tutorial 2b .
+
+- Loads the SVGMap core program file (SVGMapLv0.1_r18module.js) and makes various SVGMap APIs available.
+- Load CSS for layer list UI
+- Define the map display area (using a DIV) and load an SVG file (Containers.svg) that contains the layers to be displayed there (layers that are automatically made visible in the SVGMap core program above will be displayed).
+- Defines the display of the zoom up, zoom down, and GPS buttons and their behavior when clicked (calling the respective APIs of the SVGMap core program).
+ - Zoom up button: Zooms up the map by calling the svgMap.zoomup() API.
+ - Zoom down button: Zooms down the map by calling the svgMap.zoomdown() API.
+ - GPS button: Calls the svgMap.gps() API to zoom in on the current location (the location of your PC or smartphone, if it can be determined).
+- A cross mark indicating the center is displayed.
+- Displays the latitude and longitude on the map indicated by the cross mark above (actually, displays the latitude and longitude of the center of the map when moving the map).
+- Place a div element (id="layerList") for the layer list UI.
+
+```html
+
+
+SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### 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).
+
+```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
+
+```globalCoordinateSystem transform``` Specified by the element attributes (six values of the linear transformation matrix)
+
+```
+Xsvg = a * longitude + c * latitude + e
+Ysvg = b * latitude + d * latitude + f
+```
+
+Since the values of the linear transformation matrices a, b, c, d, e, and f are 1, 0, 0, -1, 0, 0 respectively,
+
+```
+Xsvg = longitude
+Ysvg = -latitude
+```
+
+#### Image element parameters
+
+- The bit image is placed using the image element.
+ - ```xlink:href="[ビットイメージのURL]"``` URL of the bit image to be placed
+ - ```x="139.1063918412553"``` X origin of placement = western longitude (139.10°)
+ - ```y="-35.90355823638255"``` X origin to place = negative value of northernmost latitude (35.903°)
+ - ```width="0.8140711890480361"``` Width (0.81° longitude)
+ - ```height="0.41815015611484085"``` Height (0.41° latitude)
+ - ```preserveAspectRatio="none"``` Even if the aspect ratio of the actual size of the bit image is changed, it will be placed exactly in the specified area ([Reference: SVG spec](https://www.w3.org/TR/SVG2/coords.html#PreserveAspectRatioAttribute))
+
+```svg
+
+
+```
+
+### dynamicOSM_r11.svg (and dynamicOSM_r11.html)
+
+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
+
+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).
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f459325..4eb687f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
"": {
"name": "tutorials",
"version": "0.0.0",
+ "license": "MPL-2.0",
"dependencies": {
"@docusaurus/core": "3.9.2",
"@docusaurus/preset-classic": "3.9.2",
+
+ 
+
+ 
+
+ SVGMapLevel0.1 Rev14 Draft : Tutorial3 Coastline Tiling
+
+ by SVGMap tech.
+
+ 
+
+ Lat,Lng:
+
+ lat , lng
+