From b7c482826755ba3f87ef30906e5b4ebc43094c93 Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Tue, 17 Mar 2026 21:21:42 -0400 Subject: [PATCH 1/9] english web pages --- docs/{basic => 1-basic}/index.md | 0 docs/1-basic/tutorial-1/index.md | 2924 +++++++++++++++++ docs/1-basic/tutorial-2a/index.md | 448 +++ docs/1-basic/tutorial-2b/index.md | 401 +++ docs/{basic => 1-basic}/tutorial-2c/index.md | 0 docs/{basic => 1-basic}/tutorial-3/index.md | 0 docs/{basic => 1-basic}/tutorial-3b/index.md | 2 +- docs/{basic => 1-basic}/tutorial-4/index.md | 2 +- docs/2-webapp-layer-edition/index.md | 10 + .../tutorial-5/index.md | 411 +++ .../tutorial-6/index.md | 221 ++ .../cross-origin-access/index.md | 119 + docs/3-web-service-integration/index.md | 7 + .../tutorial-12/index.md | 114 + .../tutorial-13/index.md | 128 + .../tutorial-14/index.md | 219 ++ .../tutorial-15/index.md | 213 ++ .../index.md | 3 + .../index.md | 114 + .../index.md | 239 ++ .../current/basic/tutorial-2c/index.md | 4 +- .../current/basic/tutorial-3/index.md | 174 +- .../current/basic/tutorial-3b/index.md | 93 +- .../current/basic/tutorial-4/index.md | 123 +- 24 files changed, 5769 insertions(+), 200 deletions(-) rename docs/{basic => 1-basic}/index.md (100%) create mode 100644 docs/1-basic/tutorial-1/index.md create mode 100644 docs/1-basic/tutorial-2a/index.md create mode 100644 docs/1-basic/tutorial-2b/index.md rename docs/{basic => 1-basic}/tutorial-2c/index.md (100%) rename docs/{basic => 1-basic}/tutorial-3/index.md (100%) rename docs/{basic => 1-basic}/tutorial-3b/index.md (98%) rename docs/{basic => 1-basic}/tutorial-4/index.md (98%) create mode 100644 docs/2-webapp-layer-edition/index.md create mode 100644 docs/2-webapp-layer-edition/tutorial-5/index.md create mode 100644 docs/2-webapp-layer-edition/tutorial-6/index.md create mode 100644 docs/3-web-service-integration/cross-origin-access/index.md create mode 100644 docs/3-web-service-integration/index.md create mode 100644 docs/3-web-service-integration/tutorial-12/index.md create mode 100644 docs/3-web-service-integration/tutorial-13/index.md create mode 100644 docs/3-web-service-integration/tutorial-14/index.md create mode 100644 docs/3-web-service-integration/tutorial-15/index.md create mode 100644 docs/4-utilizing-existing-webapp-layers/index.md create mode 100644 docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md create mode 100644 docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md diff --git a/docs/basic/index.md b/docs/1-basic/index.md similarity index 100% rename from docs/basic/index.md rename to docs/1-basic/index.md diff --git a/docs/1-basic/tutorial-1/index.md b/docs/1-basic/tutorial-1/index.md new file mode 100644 index 0000000..a6cbfb8 --- /dev/null +++ b/docs/1-basic/tutorial-1/index.md @@ -0,0 +1,2924 @@ +# Tutorial 1: Coastal Map Display + +## Introduction {#introduction} + +This is a tutorial for displaying Japan's coastline. [Click here to see it in action](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html). + +### File Structure {#file-structure} + +The following files are present in the tutorial1 directory. This section explains how to download the files used in the tutorial. + +- [tutorial1.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html) + - Loads the SVGMap core program files (SVGMapLv0.1_r17.js and SVGMapLv0.1_LayerUI2_r4.js) to enable the use of SVGMap's various APIs. + - Defines the map display area (using a DIV element) and loads the SVG file (Containers.svg) that groups the layers to be displayed (the layers automatically set to Visible by the SVGMap core program above will be displayed). + - Zoom up, zoom down, and GPS buttons are displayed and clicked (calling the respective API of the SVGMap core program). + - Zoom up the map by calling the svgMap.zoomup() API. + - Zoom down the zoom down button: svgMap.zoomdown() Zoom down the map by calling the API. + - GPS button: svgMap.gps() By calling the API, zoom up and display around the current location (only if the position of the PC or smartphone can be identified). + - Displays a cross mark representing the center. + - Latitude and longitude display on the map shown by the cross mark above (actually, the latitude and longitude of the center of the map are displayed when the map is moved). +- [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Container.svg) + - Loads the SVG files for each layer to be displayed (only Coastline.svg is loaded) +- [Coastline.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Coastline.svg) + - Defines Japan's coastline data using numerous lines. + +## Tutorial {#tutorial} + +### Files Used {#files-used} + +The files used in this tutorial can be obtained from the following locations: + +- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1.zip) +- [https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/) : HTML page for displaying the map and map content + - [img directory](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/img/) : Images and icons + - [js directory](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/js) : SVGMap framework library and stylesheets (SVGMap.js) + - Note: The SVGMap.js open-source repository is here ([GitHub](https://github.com/svgmap/svgMapLv0.1)) + +#### Content Structure {#content-structure} + +```plaintext +tutorial1.html + | | + +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png + | | + +-js/layerListStyle.css (default style sheet for map display page) (Note: The javascript library for displaying SVGMap is registered in jedelivr (CDN that publishes open source javascript library on the Internet). + | | + +-Container.svg (one SVG file with a role to bind various data (layers) is loaded) + | | + +-Coastline.svg (map content (climbing content (clicoastia)) that is actually displayed) +``` + +#### Note: Downloading the content used in this tutorial {#downloading-content} + +- Download the ZIP archive file mentioned above, or +- Download directly from the sample source directory + - Use the wget (wget2) command with the -r option + - `wget -r https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/` + - `wget2 --http2=off -timeout=60 --max-threads=1 -r https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/` + - `index.html*` There is no need to create a directory for each download. + +##### Windows (using wget2) {#wget2} + +[wget2](https://gitlab.com/gnuwget/wget2/) is also available for Windows. Locate and download the Windows executable: wget2.zip from the [wget2 release URL](https://gitlab.com/gnuwget/wget2/-/releases). + +- Use it in Command Prompt or PowerShell. +- Since the wget2.exe file is contained within the zip archive, either add it to your path or navigate to the directory where you saved the exe file using `cd` before executing it. + +### Placing content files on the server {#content-files-on-server} + +This tutorial runs on a classic static web host (such as Apache). + +- Place the tutorial distribution files in a directory on your static web host, using a suitable name. + - Open the placed content in a web browser (such as Chrome) using the URL provided for the static web host. + - **Important**: Browser caching can cause confusion during trial and error. Practice with Developer Tools open and the cache clearing option enabled in their settings. (Cache disabling applies to the window where DevTools is open) + - Chrome setup method: From the window displaying the practice content, open DevTools (CTRL+SHIFT+I, Settings menu (︙) - More Tools - Developer Tools) ⇒ Settings (gear icon top-right) ⇒ Network (while DevTools is open) ⇒ Disable cache. + +Standalone execution is also possible on the terminal PC (though an internet connection is required). + +- Note: Insufficient validation +- Place the tutorial distribution files in an appropriate directory (folder). +- **Important**: Open a Chrome browser with the `--allow-file-access-from-files` option and open index.html here to enable operation. + - The `--allow-file-access-from-files` option is a development launch option that allows Chrome to read local files. If Chrome is already running, you must close it completely before launching again. + - Windows: `start chrome --allow-file-access-from-files --auto-open-devtools-for-tabs` + - linux: `google-chrome --allow-file-access-from-files --auto-open-devtools-for-tabs` + - macos: `open -a “Google Chrome” --args --allow-file-access-from-files --auto-open-devtools-for-tabs` (unverified) + - Disable the browser cache beforehand. + +### tutorial1.html {#tutorial1-html} + +- Accessing this HTML file in a web browser displays map content with a user interface. +- **SCRIPT** element + - SVGMap uses a library (SVGMap.js) to display map content. + - Load the SVGMap.js program file (SVGMapLv0.1_r18module.js) from the CDN (jsdelivr) to enable SVGMap's various APIs. + - Adds the svgMap object as a member of the window global object. + - If you want to load the library from your own host instead of the CDN, copy and use the svgmapjs repository. +- **mapcanvas** Defines the map display area (using a DIV) with the ID “mapcanvas”. The data-src attribute specifies the SVG file (Containers.svg) that SVGMap.js loads. +- Define the display and click actions for the zoom up, zoom down, and GPS buttons (each calls the corresponding API in SVGMap's core program). + - img element with id="zoomupButton": Zoom up button: Calls the svgMap.zoomup() API to zoom up the map. + - img element with id="zoomdownButton": Zoom Down Button: Calls the svgMap.zoomdown() API to zoom out the map. + - img element with id="gpsButton": Calls the svgMap.gps() API to zoom in and center the map on the current location (the position of the PC or smartphone, if detectable). +- img element with id="centerSight": Displays a crosshair mark indicating the center. +- (Optional) span element with id="centerPos": Displays the latitude and longitude on the map where the crosshair mark is pointing (actually displays the latitude and longitude of the map's center when the map moves). + +```html + + + SVGMapLevel0.1-Rev14-Draft Tutorial1 Coastline + + + + + + + + + + +
+
+ + + + + + + + SVGMap.js : Tutorial1 Coastline + + by SVGMap tech.< + /font> + + + + Lat,Lng: + + lat ,lng +
+ + +``` + +### Container.svg {#container-svg} + +The single SVG content loaded first by SVGMap.js. This content does not contain actual map data itself; its role is to reference various map contents (called layers) and bundle them together into a single map. + +It loads the SVG files (in SVGMap content format) for each layer to be displayed using the [animation element](#animation) (here, only Coastline.svg is loaded). + +```svg + + + + + + + + +``` + +#### SVGMap content format {#svgmap-content-format} + +The SVGMap content format is essentially SVG format data, with some extensions (one of which is required): + +##### Required extension: globalCoordinateSystem element {#container-svg} + +The following globalCoordinateSystem element is required. (The SVGMap content must describe its relationship to the geographic coordinate system as a map.) + +`` + +##### srsName {#srs-name} + +Specify the spatial reference system (geographic coordinate system) via URL. Enter ‘[http://purl.org/crs/84](http://purl.org/crs/84)’. (Indicates WGS84 system) (Effectively fixed at this value). + +##### transform {#transform} + +The coordinate transformation coefficients between geographic coordinates and the SVG coordinates of this content are described by a linear coordinate transformation matrix (values a, b, c, d, e, f). The format follows that of an SVG transformation matrix (matrix(a,b,c,d,e,f)). (geo denotes the geographic coordinate system, svg denotes the coordinate system of the SVG document) + +```plaintext +svgX = a * geoX + c * geoY + e +svgY = b * geoX + d * geoY + f +``` + +Note that in computer graphics coordinate systems like SVG, the Y-axis points downwards, whereas in geographic coordinates, the Y-axis (latitude axis) generally points upwards. Consequently, the coordinate transformation coefficient b value will be negative.　Longitude is treated as geoX, latitude as geoY. + +Describing the coordinates of SVG content in the form longitude,-latitude is the simplest approach. In that case, it would be written as matrix(1,0,0,-1,0,0). + +##### animation element {#animation-element} + +- The [SVG1.2Tiny animation element](https://www.w3.org/TR/SVGTiny12/multimedia.html#AnimationElement) is used to load SVG content. + - Note: This is not the [animate element](https://www.w3.org/TR/SVGTiny12/animate.html). +- There are two patterns for loading SVG content: layering and tiling. + - xlink:href attribute: Sets the link to the SVG content to be loaded. + +##### Layering {#layering} + +- [Tutorial 2b](../tutorial-2b/index.md): Specific Examples + - `x, y, width, height` attributes: Set the maximum area a layer can occupy (mandatory attributes) + - In layering, you needn't concern yourself too much with this; simply set very large areas such as -30000,-30000,60000,60000. + - `title` attribute: Layer name. Layer names must not duplicate those of other layers. (Required attribute) + - `visibility` attribute: Sets the display state (cannot be changed from the initial state unless a layer list UI is implemented). Visible by default. + - `class` attribute: Enables grouping in the layer list UI. Also controls clickable functionality for other vector shapes. [Please refer to the manual](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B). (Optional). + - The order of layers is such that layers in lower rows appear above layers in higher rows. SVG Painters Model + +##### Tiling {#tiling} + +Explained in [Tutorial 3](../tutorial-3/index.md). + +##### Other enhancements {#other-enhancements} + +- Non-scaling object (representation of Point Geometry) explained in [Tutorial 2](../tutorial-2a/index.md/#) + +### Coastline.svg {#coastline-svg} + +- The Japanese coastline data is defined by numerous lines. +- Since the transform of the globalCoordinateSystem is matrix(100,0,0,-100,0,0), the values described are multiplied by 100 for latitude and longitude (latitude is -100). + +The method for creating this data itself will be explained in a separate tutorial. + +
+Click to expand and see full SVG source code + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < +path +d="M13113.7497,-3475.8469L13113.7497,-3475.8469"/> d="M13457.0007,-3476.0265L13476.0803,-3476.2066"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + d="M13411.7096,-3447.2866L13411.7096,-3447.2866"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < +path +d="M13339.8499,-3437.7602L13339.8499,-3437.7602"/> d="M13358.5602,-3437.7468L13358.5602,-3437.7468"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < +path +d="M13273.7701,-3415.8001L13273.7701,-3415.8001"/> d="M13481.16,-3415.6467L13481.16,-3415.6467"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < +path +d="M13399.2401,-3342.7601L13399.6796,-3342.6399"/> d="M13399.6796,-3342.6399L13401.0696,-3342.1867"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + < +path +d="M13183.8104,-3317.5602L13183.8104,-3317.5602"/> d="M13025.7401,-3319.7933L13027.7298,-3316.9132"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +
diff --git a/docs/1-basic/tutorial-2a/index.md b/docs/1-basic/tutorial-2a/index.md new file mode 100644 index 0000000..e6eb71e --- /dev/null +++ b/docs/1-basic/tutorial-2a/index.md @@ -0,0 +1,448 @@ +# Tutorial 2a: Coastline Map and Airport POI Display + +## Introduction + +This is a tutorial that adds airport POIs [(Points of Interest)](https://ja.wikipedia.org/wiki/Point_of_interest) to the content of [Tutorial 1](../tutorial-1/). + +[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html) to see it in action. + +### File Structure + +The [tutorial2 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2) contains the following files. The file structure is as follows: + +- [tutorial2.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html) + - HTML for Tutorial 2. Same content as tutorial1.html. +- Container.svg + - Load an SVG file for each layer you want to display (only Coastline_Airport.svg is loaded) +- [Coastline_Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/Coastline_Airport.svg) + - Adds airport information to Coastline.svg in Tutorial 1. + - Defines the airport display image and describes the actual airport information (latitude/longitude, image used, title, information displayed upon clicking). + - HTTP links can also be described alongside airport information. In this case, the following actions become possible: + - Clicking an airport image navigates to another webpage. + - Adding a hash to the current URL changes the map display position. + - The above settings can be configured for a single airport (a dialogue box appears after clicking, allowing selection between displaying airport information or navigating to the URL). + +## Tutorial + +### Files Used + +[ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2.zip) of the files used in this tutorial. + +### Content Structure + +```plaintext +tutorial2.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 (Loads an SVG file that serves as a bundle for various data (layers)) + | + +-Coastline_Airport.svg (actual map content (coastline and airport points)) +``` + +### tutorial2.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. +- Defines the map display area (using a DIV) and loads an SVG file (Containers.svg) that contains the layers to be displayed (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 the map by calling the svgMap.zoomup() API. + - Zoom down the zoom down button: svgMap.zoomdown() Zoom down the map by calling the API. + - GPS button: svgMap.gps() By calling the API, zoom up and display around the current location (only if the position of the PC or smartphone can be identified). +- 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 Tutorial2 Coastline & Air Port + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng +
+ + +``` + +### Container.svg + +Load an SVG file for each layer you want to display (only Coastline_Airport.svg is loaded). + +```svg + + + + + + + + +``` + +### Coastline_Airport.svg + +- Added airport information to Coastline.svg in Tutorial 1. +- **Drawing proceeds from the top row**, so first write the background (coastline), then write the point data (additional information). + +#### How to write point data (POI) + +##### Defining icons using the defs element + +- **Within the defs element**, define the icons to be used within that SVG file. +- Each individual icon is defined using a **g** element placed as its child element. + - Assign an ID to the g element to reference the icon. + - Describe the actual icon within the g element. Here, an image element is used to employ a bitmap image as the icon. +- For bitmap icons using the image element: + - Specify the icon size using the width and height attributes. + - Use the x and y attributes to define the origin (anchor point). + - This determines which part of the bitmap icon corresponds to the point geometry's coordinates. For instance, when using an icon shaped like a pin, it is advisable to set the pin's tip as the origin. + - Specifies the shift amount of the POI icon's origin relative to the bitmap image's origin (top-left). The shift value is typically negative. + - In this sample, for an icon size of 19x27, specifying x="-8" y="-25" sets the origin to (almost) the bottom-left corner, centred. + +##### Placing POI data using the use element + +- References the icon defined by the **xlink:href** attribute. +- Coordinates for point data are set in the **transform** attribute for use with the feature described later (Non-scaling Object) (set x and y attributes to 0). +- Describe metadata in the **content** attribute, separated by commas. This metadata is displayed when the icon is clicked. + - Define the airport display image and describe the actual airport information (latitude/longitude, image used, title, information displayed on click). + - Using the **property** attribute of the **svg** element (documentElement), metadata attribute names can be specified in CSV format to enable organised display upon clicking. + - The number of entries in the CSV for the **property** attribute (metadata names) must match the number of entries in the CSV for the **content** attribute (metadata values). + +- Note: + - By embedding the use element within the **a** element, hyperlinks can be described alongside airline information. In this case, the following functionality is possible: + - Clicking the airport image will navigate to another webpage. + - The above functionality can be configured for a single airport (a dialogue box will appear after clicking, allowing selection between displaying airline information or navigating to the URL). + +#### Source Code + +
+Expand to see source code + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +
diff --git a/docs/1-basic/tutorial-2b/index.md b/docs/1-basic/tutorial-2b/index.md new file mode 100644 index 0000000..1a7fd26 --- /dev/null +++ b/docs/1-basic/tutorial-2b/index.md @@ -0,0 +1,401 @@ +# Tutorial 2b: Displaying Coastline Maps and POIs (Airports) (Layering) + +## Introduction + +This tutorial demonstrates how to separate POI (airport) and coastline maps into distinct files and display them using layering. + +[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html) to see it in action. + +### File Structure + +The [tutorial2b directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/) contains the following files. The file structure is as follows: + +- [tutorial2b.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html) + - HTML for Tutorial 2b. Compared to tutorial1.html, it incorporates a layer list and On/Off UI (the div element with id="layerList"). +- [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Container.svg) + - Loads the SVG files for each layer to be displayed (loads two files/layers: Airport.svg and Coastline.svg). +- [Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Airport.svg) + - Airport information added as a separate file. +- [Coastline.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Coastline.svg) + - Coastline.svg from Tutorial 1 + +## Tutorial + +Implementing layering enables users to toggle the visibility of each layer as required. It also facilitates the encapsulation and organisation of data per layer, thereby improving development efficiency. In this chapter, we shall attempt layering by treating the background map and overlay information (airport POI) as separate layers. + +### Files Used + +[ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b.zip) of used files. + +### Content Structure + +```plaintext +tutorial2b.html + | + +-img/zoomup.png, img/zoomdown.png, im/gps.png, im/Xcursor.png (Images of the map operation UI) + | + +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (JavaScript library for displaying SVGMap) + | + +-Container.svg (A single SVG file that bundles various data (layers). Unlike 2a, this references two layers) + | + +-Coastline.svg (Actual map layer content (coastline)) + | + +-Airport.svg (Actual map layer content (airport points)) +``` + +### tutorial2b.html + +Add a layer list display and control UI to tutorial1.html used in Tutorial 1. (Note: Layering itself remains possible without this UI; only the layer visibility toggle UI becomes unavailable.) + +- Place the layer list UI + - Place an empty div element with id="layerList" (the id name is defined by the framework) + - Load the stylesheet for this layerList div element (#layerListStyle.css) + +#### Source code + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### layerListStyle.css + +Stylesheet for the div element (id:layerList) for the layer list UI. + +#### Source Code + +```css +/** Layer List UI Stylesheet **/ + body { + font-family: Meiryo; + } + #layerTable{ + background:#ffE0E0; + border: 2px solid #bbb; + } + .layerItem{ + background-color: white; + } + .noGroup{ + background-color: #fff0f0; + } + #layerList{ + background-color: #ffff80;opacity:0.8;font-size:12px; + } + + #layerList button{ + padding: 1px 3px; + } + +``` + +### Container.svg + +- Load the SVG files for the two layers to be displayed as layers: + - Coastline.svg + - Airport.svg +- The layer order is such that layers listed lower appear above those listed higher. SVG Painters Model +- Layer grouping is possible via the class specification in the layer list UI +- Layers are referenced via the animation element +- The initial display state is set via the visibility attribute (If no layer list UI is present, the initial display state cannot be altered) +- Set x, y, width, and height values to the maximum possible area + +```svg + + + + + + + + + + +``` + +### Coastline.svg + +Coastline.svg is identical to [Tutorial 1's Coastline.svg](../tutorial-2a/#containersvg) (Reusing the same data improves development efficiency). + +### Airport.svg + +This SVG file was created by extracting only the airport point section from the Coastline_Airport.svg used in Tutorial 2a. + +#### Source Code + +
+Expand to see source code + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +
\ No newline at end of file diff --git a/docs/basic/tutorial-2c/index.md b/docs/1-basic/tutorial-2c/index.md similarity index 100% rename from docs/basic/tutorial-2c/index.md rename to docs/1-basic/tutorial-2c/index.md diff --git a/docs/basic/tutorial-3/index.md b/docs/1-basic/tutorial-3/index.md similarity index 100% rename from docs/basic/tutorial-3/index.md rename to docs/1-basic/tutorial-3/index.md diff --git a/docs/basic/tutorial-3b/index.md b/docs/1-basic/tutorial-3b/index.md similarity index 98% rename from docs/basic/tutorial-3b/index.md rename to docs/1-basic/tutorial-3b/index.md index 1357c0c..f10dafe 100644 --- a/docs/basic/tutorial-3b/index.md +++ b/docs/1-basic/tutorial-3b/index.md @@ -2,7 +2,7 @@ ## 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. +In the previous chapter, we used tiles that had already been created, but here we will use [svgMapTools](https://github.com/svgmap/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} diff --git a/docs/basic/tutorial-4/index.md b/docs/1-basic/tutorial-4/index.md similarity index 98% rename from docs/basic/tutorial-4/index.md rename to docs/1-basic/tutorial-4/index.md index 90a5347..5379e3a 100644 --- a/docs/basic/tutorial-4/index.md +++ b/docs/1-basic/tutorial-4/index.md @@ -28,7 +28,7 @@ The file structure is as follows: ### tutorial4.html {#tutorial4-html} -Basically the same as tutorial2b.html used in Tutorial 2b . +Basically 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) 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 diff --git a/docs/2-webapp-layer-edition/index.md b/docs/2-webapp-layer-edition/index.md new file mode 100644 index 0000000..8aa572d --- /dev/null +++ b/docs/2-webapp-layer-edition/index.md @@ -0,0 +1,10 @@ +# Part 2: WebApp Layer Edition + +SVGMap has the unique feature of not only allowing simple static SVGMap content as layers, but also enabling the use of [the WebApp Layer mechanism (Layers as Web Apps: LaWA)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0), which allows you to dynamically control and modify the SVGMap content (DOM) of a layer using JavaScript code by associating it with a web application. ([What is a Web Application](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3)?) + +This mechanism essentially does not affect other layers ([encapsulation](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%82%BB%E3%83%AB%E5%8C%96)), thus preventing the application from [becoming spaghetti code](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%91%E3%82%B2%E3%83%86%E3%82%A3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0). + +The WebApp Layer section involves coding a WebApp that utilizes this functionality. However, as with the basic section, no dynamic mechanisms need to be built on the server side. (Still, only static content and WebApp files (html and js) are placed on the server; no DBMS or dynamic mechanisms ([web services](https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9)) are built on the server.) + +Furthermore, SVGMap.js can also be used to connect to and operate dynamic servers ([web services](https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9)) that use mechanisms for dynamically distributing map and geographic information, such as WMS and WFS, or DBMS . Please refer to [the Web Service Integration 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#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.B5.E3.83.BC.E3.83.93.E3.82.B9.E7.B5.90.E5.90.88.E7.B7.A8). + diff --git a/docs/2-webapp-layer-edition/tutorial-5/index.md b/docs/2-webapp-layer-edition/tutorial-5/index.md new file mode 100644 index 0000000..13f3f43 --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-5/index.md @@ -0,0 +1,411 @@ +# Tutorial 5: WebApp Layer - Tile Pyramid + +## Introduction {#introduction} + +This tutorial demonstrates how to create a layer using [OpenStreetMap's tile pyramid](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames) that displays the appropriate map ([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) as it expands and scrolls, utilizing SVGMap's [WebApp Layer mechanism](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0). + +[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html) to see how it works . + +### File Structure {#file-structure} + +The file structure is as follows: + +- [the tutorial5](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5) directory contains the following files. + - [Tutorial5.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html) + - HTML for Tutorial 5. Same content as tutorial2b.html. + - [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/Container.svg) + - Load dynamicOSM_r11.svg to display an external OpenStreetMap. + - [dynamicOSM_r11.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.svg) + - A layer containing SVGMap content that displays an external OpenStreetMap (it's empty inside, and the underlying web application dynamically constructs the DOM). + - [dynamicOSM_r11.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.html) + - The HTML of the web application associated with the above dynamicOSM_r11.svg + - [dynamicOSM_r11.js](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.js) + - The JavaScript code for the web application linked to the above dynamicOSM_r11.svg file. + +## Tutorial {#tutorial} + +SVGMap.js allows layers to be more than just content (SVG files); they can also provide a WebApp that dynamically generates SVGMap content via JavaScript. ([Dynamic Layers by WebApp (WebApp Layer)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0)) ([Layer-Specific UI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI)) + +As the name WebApp Layer suggests, it can associate not only with JavaScript code but also with UI elements (Window objects) created using HTML and CSS. + +From Tutorial 5 onwards, we will primarily use this WebApp Layer functionality to implement features that display various data and provide a user interface specific to each layer. + +Here, we'll use this feature to build a layer that uses OpenStreetMap's tile pyramid to quickly display the appropriate map as you zoom in and out. + +Note that Tutorial 5 contains a fair amount of code, so if you want to try out the WebApp Layer's features with less code, [Tutorial 6](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%AB6) might be easier. + +[Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html) to see how it works . +The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5.zip). + +### Tutorial5.html {#tutorial5-html} + +- This loads the core SVGMap program file (SVGMapLv0.1_r18module.js) and makes the various SVGMap APIs available. +- The map display area is defined (using a DIV), and an SVG file (Containers.svg) containing the layers to be displayed is loaded into it (the layers that are automatically made visible by the SVGMap core program mentioned above will be displayed). +- Define the display and actions of the zoom up, zoom down, and GPS buttons (calling the respective APIs of the SVGMap core program). + - Zoom-up button: Zooms in on 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 and display the current location (PC or smartphone location, only if it can be identified). +- A cross symbol is displayed to indicate the center. +- The crosshairs above indicate the latitude and longitude displayed on the map (in reality, the latitude and longitude of the map's center are displayed when the map is moved). + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial5 DynamicContents + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial5 DynamicContents + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng +
+ + +``` + +### Container.svg {#container-svg} + +- Load the SVG files for each layer to be displayed (only dynamicOSM_r10.svg is loaded). + +```svg + + + + + + + + +``` + +### dynamicOSM_r11.svg + +An SVG map content layer file with a web application linked to display an external OpenStreetMap. + +We will utilize [the WebApp Layer mechanism](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) provided by SVGMap.js . + +- By referencing the web application (HTML content containing JavaScript code) in the data-controller attribute of the SVG content's document element (svg element), the web application is linked to the SVGMap content layer. + - The #exec=hiddenOnLayerLoad hash will launch the web application in a hidden state. See [the documentation](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) for details on layer-specific UI. +- Because the DOM is generated directly in the web application, the content is mostly empty. + +```svg + + + + + + +``` + +### dynamicOSM_r11.html, dynamicOSM_r11.js {#dynamicosm-r11} + +[This](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) is a webApp ( layer-specific UI ) linked to dynamicOSM_r11.svg . WebApps linked to layers allow the use of [their own APIs](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E6.8B.A1.E5.BC.B5API). + + +[OpenStreetMap](https://www.openstreetmap.org/) (OSM) delivers a [pyramidal image](https://satakagi.github.io/mapsForWebWS2020-docs/imgs/tile_pyramid.png) divided into 256x256 pixel tiles according to the map scale . ([OSM Slippy map tilenames](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames),[OSM ZoomLevels](https://wiki.openstreetmap.org/wiki/Zoom_levels)) + +This will be used to implement a feature ([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) that dynamically retrieves and displays tiles appropriate to the display range and zoom level from the OpenStreetMap server . + +*Note: The OpenStreetMap tiles used here are uniform mesh tiles on the so-called Web Mercator projection. On the other hand, the SVGMap content used in this tutorial uses the [azimuthal equidistant projection](https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95) (Plate Caree: a projection that directly plots longitude and latitude on the X,Y plane, commonly used in business and technical fields). Therefore, projection conversion is necessary, but for simplicity, this tutorial only uses a linear conversion of the tiles. At small scales, such as the size of the Japanese archipelago, you may see some discrepancies due to the difference in projections. (SVGMap.js also supports [more accurate projection conversion](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.A1.E3.83.AB.E3.82.AB.E3.83.88.E3.83.AB.E5.9B.B3.E6.B3.95.E3.82.92.E5.90.AB.E3.82.80.E4.BB.BB.E6.84.8F.E3.81.AE.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E3.81.9D.E3.81.AE.E5.90.88.E6.88.90.E6.A9.9F.E8.83.BD.28.EF.BC.9Erev16.29).)* + +#### dynamicOSM_r11.html + +The HTML consists of a [common library](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AEhtml.E6.96.87.E6.9B.B8.28webApp.29.E3.81.AE.E6.A7.8B.E9.80.A0.E3.83.BB.E4.BD.9C.E6.B3.95) (svgMapLayerLib.js) for initializing the layer-specific UI , a script code section describing the layer-specific processing ```dynamicOSM_r11.js```, and the UI (HTML, CSS, etc.). + +dynamicOSM_r11.html + +```html + + + + +OpenStreerMap Dynamic Layer + + + + + + +

OpenStreerMap Dynamic Layer

+ + +``` + +#### dynamicOSM_r11.js + +- ```onload``` Similar to a regular web application, this function is executed after the loading of the HTML-related resources is complete. + - ```svgMap``` [Core Framework Instance](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMap) + - ```svgMap.refreshScreen()``` If the DOM needs to be redrawn at a time other than during scaling/scrolling, you must [explicitly request a redraw](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen). + - [Reference information](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) +- ```preRenderFunction()``` When this function is defined, it will be [executed immediately](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#preRenderFunction) before each screen redraw. + - ```svgImagesProps``` [Various information](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgImageProps) about SVG content linked to a web app. + - [See explanatory manual](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgImageProps), [see reference 2](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.AA.E3.82.B9.E3.83.88) + - ```svgImageProps.scale``` The scale of the SVG content's coordinate system relative to the screen's coordinate system (Note: This is different from a geographic coordinate system) ([Reference Information](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.AA.E3.82.B9.E3.83.88)) + - ```svgMap.getGeoViewBox()``` Obtain the display area using [geographic coordinates](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getGeoViewBox). + - ```getTileSet``` Obtain a list of tiles to display (associative array) (details below). + - ```svgImage``` The DOM of the [linked SVGMap content](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgImage) + - OSM tiles are placed in the SVG DOM as SVG image elements. Additionally, the tile number (key in the associative array) of each tile obtained with getTileSet is set in the metadata attribute. + - When this function (preRenderFunction) is called again after scrolling, it uses the value of this metadata to ensure that tiles that have already been drawn up to the previous step and should be drawn again after scrolling remain in place. + - ```getTile``` Based on the information (ZoomLevel, X, Y) in the tile list's associative array, obtain the image element for the tile to be retrieved. + - OSM bit image tiles are pasted as SVG image elements. + - getURLA function that generates the URL of an actual OSM tile from ZoomLevel, X, and Y. + - ```XY2latLng``` A function that obtains the geographic coordinate region of a tile from ZoomLevel, X, and Y. +- ```getTileSet```A function that lists the tiles to be displayed at the current zoom level and display area. + - [This function](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Zoom_levels) retrieves the Zoom and [XY coordinates](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#X_and_Y) of an OSM Slippy Map Tile and returns an associative array using these coordinates as keys. + - OSM Slippy Map Tiles are tile pyramids that are recursively divided into 2x2 sections on the [Web Mercator projection](https://en.wikipedia.org/wiki/Mercator_projection#Web_Mercator). + - The Web Mercator projection constructs a square map over a range of (longitude ±180 degrees, latitude ±85.05113 degrees). + - ```latLng2XY``` This method calculates the coordinates of a specified latitude and longitude on a bit image, assuming the entire Earth is represented as a single large square bit image on the Web Mercator projection at a specified zoom level. + - ```lvl2Res``` Calculate the width of the corresponding bit image of the entire Earth from the ZoomLevel (Level0: 256px) + - ```XY2TileXY``` From the XY coordinates on a large square bit image of the Earth shown above, when it is tiled, the tile number (tile's X number, Y number) to which those coordinates belong can be obtained. + + dynamicOSM_r11.js + +
+Click see full JS data + +```js +// Dynamic OpenStreetMap Layer for SVGMap Sample for SVGMapLevel0 > r10 +// Programmed by Satoru Takagi +// Copyright (C) 2013 by Satoru Takagi @ KDDI CORPORATION +// +// License: +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License version 3 as +// published by the Free Software Foundation. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with this program. If not, see (http://www.gnu.org/licenses/). + +// Prototype of a dynamic layer intended for iframe implementation +// (Allows you to place JavaScript imports in the SVG content.) +// OpenStreetMap is used as the map data (it can be replaced with other data relatively easily) +// +// +// In the environment in which this code operates, the following are set by default: +// document: This document itself +// svgImage: The SVGMap content associated with this document +// svgMap.getGeoViewBox(): Geographic viewbox +// svgImageProps: Various properties of the SVGMap content associated with this document +// svgImageProps.scale: Scale (scale of the coordinates of this svg content relative to the screen coordinates) +// +// 2013/01/24: 1st ver. +// 2022/01/31: Ported to WebApp layer // +Onload = function () + +to be executed when this file is loaded { + // Immediately after this script is loaded, refreshScreen() is called, + // The following preRenderFunction is executed for the first time + svgMap.refreshScreen(); +}; +function preRenderFunction() { // Callback function + var level + that is executed just before redrawing = 8; + // Calculate zoom level (3 to 18) + var level = Math.floor(Math.LOG2E * Math.log(svgImageProps.scale) + 7.5); + if (level > 18) { + level = 18; + } else if (level < 3) { + level = 3; + } + // Get the XY coordinates and HashKey of the tile to be displayed in the viewBox in the geographic coordinates of this map + var tileSet = getTileSet(svgMap.getGeoViewBox(), level); + // Get the element with the tag name "image" (image for each map tile) that is currently loaded + console.log("tileSet:", tileSet); + var currentTiles = svgImage.getElementsByTagName("image"); + // Repeat the following for each tile obtained, reusing those that have already been loaded and deleting those that are outside the display range + for (var i = currentTiles.length - 1; i >= 0; i--) { + var oneTile = currentTiles[i]; + var qkey = oneTile.getAttribute("metadata"); + if (tileSet[qkey]) { + // Set a flag to skip as it already exists. + tileSet[qkey].exist = true; + } else { + // Since it doesn't exist, remove it + oneTile.parentNode.removeChild(oneTile); + } + + + + + } + + // Repeat the following for the number of tiles to be displayed, and add any unloaded files to the loaded element + for (var tkey in tileSet) { + if (!tileSet[tkey].exist) { + var addTile = getTile(tileSet[tkey].x, tileSet[tkey].y, level, this.CRS); + svgImage.getElementsByTagName("svg")[0].appendChild(addTile); + } + } +} + +// Get the tile (divided map image) at the specified location +function getTile(tileX, tileY, level, crs) { + // Get the URL of the tile with coordinates tileX, tileY and zoom level. + var tileURL = getURL(tileX, tileY, level); + + // Get bbox in SVG of tile + var tLatLng = XY2latLng(tileX * tilePix, tileY * tilePix, level); + var tSvg = svgMap.transform(tLatLng.lng, tLatLng.lat, crs); + var tLatLngBR = // + ​ + ​ + ​ + ​ + ​ + ​Inefficient...improvement postponed + tSvg.height = tSvgBR.y - tSvg.y; + + // Create the tile element to be retrieved and set its attributes. + var cl = svgImage.createElement("image"); + cl.setAttribute("x", tSvg.x); + cl.setAttribute("y", tSvg.y); + cl.setAttribute("width", tSvg.width); + cl.setAttribute("height", tSvg.height); + cl.setAttribute("xlink:href", tileURL.URL); + cl.setAttribute("metadata", tileURL.Key); + + return cl; +} + +// A function that returns the XY set of tiles required when displaying a map at level zoom level in a geoViewBox with the specified map coordinates. +getTileSet(geoViewBox, level) { + var TileSet = new Object(); + if (geoViewBox.y + geoViewBox.height > 85.05113) { + geoViewBox.height = 85.05113 - geoViewBox.y; + } + + if (geoViewBox.y < -85.05113) { + } + // + + Returns the XY coordinates and HashKey of the tile in the specified area + var tlxy = latLng2XY(geoViewBox.y + geoViewBox.height, geoViewBox.x, level); + var tileTLxy = XY2TileXY(tlxy); + var brxy = latLng2XY(geoViewBox.y, geoViewBox.x + geoViewBox.width, level); + var tileBRxy = XY2TileXY(brxy); + + // Repeat the following for the number of tiles equal to the required height and width + for (var i = tileTLxy.y; i <= tileBRxy.y; i++) { + for (var j = tileTLxy.x; j <= tileBRxy.x; j++) { + // Get the HashKey from the tile's XY coordinates and zoom level + var qkey = getKey(j, i, level); + // Set the necessary tile information for each HashKey obtained above. + TileSet[qkey] = new Object(); + TileSet[qkey].x = j; + TileSet[qkey].y = i; + } + } + return TileSet; +} + +// Convert latitude and longitude to XY +function latLng2XY(lat, lng, lvl) { + var size = lvl2Res(lvl); + var sinLat = Math.sin((lat * Math.PI) / 180.0); + var pixelX = ((lng + 180.0) / 360.0) * size; + var pixelY = + (0.5 - Math.log((1 + sinLat) / (1.0 - sinLat)) / (4 * Math.PI)) * size; + return { + x: pixelX, + y: pixelY, + }; +} + +// Convert from XY to tile's XY +function XY2TileXY(xy) { + var tileX = Math.floor(xy.x / tilePix); + var tileY = Math.floor(xy.y / tilePix); + return { + x: tileX, + y: tileY, + }; +} + +var tilePix = 256; +// Return the size of a tile piece from the zoom level +function lvl2Res(lvl) { + var j = 1; + for (var i = 0; i < lvl; i++) { + j = j * 2; + } + return + j * tilePix; +} // Convert + from + +XY to latitude/ + longitude +function + var lat = 90 - (360 * Math.atan(Math.exp(-y * 2 * Math.PI))) / Math.PI; + var lng = 360 * x; + return { + lat: lat, + lng: lng, + }; +} +var sva = new Array("a", "b", "c"); +var svNumb = 0; +var culture = "en-US"; +var bingRoadSearchPart = ".jpeg?g=849&mkt=" + culture + "&shading=hill"; // +function getURL(tx, ty, lvl) that +returns a URL from the tile's XY and zoom level { + // Get a HashKey from the XY and zoom level + var tile_ans = getKey(tx, ty, lvl); + // Assemble an OpenStreetMap URL + var mapServerURL = + "http://" + + sva[svNumb] + + ".tile.openstreetmap.org/" + + lvl + + "/" + + tx + + "/" + + ty + + ".png"; + // Load balancing is performed when acquiring map images by sequentially switching between multiple similar servers. + ++svNumb; + if (svNumb > 2) { + svNumb = 0; + } + return { + URL: mapServerURL, + Key: tile_ans, + }; +} // +function getKey(tx, ty, lvl) +that generates and returns a HashKey { + return tx + "_" + ty + "_" + lvl; +} +``` + +
\ No newline at end of file diff --git a/docs/2-webapp-layer-edition/tutorial-6/index.md b/docs/2-webapp-layer-edition/tutorial-6/index.md new file mode 100644 index 0000000..0402226 --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-6/index.md @@ -0,0 +1,221 @@ +# Tutorial 6: WebApp Layer geoJSON + +## Introduction {#introduction} + +This tutorial shows how to load [GeoJSON](https://ja.wikipedia.org/wiki/GeoJSON) data asynchronously in a web application , convert it into an SVGMap DOM using the SVGMap framework library, and then display it. + +To see the actual operation, click on [geojson1.html](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html). + +### File Structure {#file-structure} + +- [Tutorial 6 directories](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/) +- geojson1.html: Loading of related libraries (SVGMapGIS) +- Container.svg: Clickable layering settings +- geoJsonExample1.svg: How to specify a web app that manipulates a layer with a UI. +- geoJsonExample1.html: +- geoJsonExample1.js: Converting GeoJSON data into SVGMap content using svgMapGIStool + +## Tutorial {#tutorial} + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html) to see how it works. +The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/geojson1.zip). + +### geojson1.html {#geojson1-html} + +The only difference from the HTML 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) is the [SVG content](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/Container.svg) that is loaded. + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### Container.svg {#container-svg} + +- The [theme layer displaying GeoJSON](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geoJsonExample1.svg) and the background map (OpenStreetMap) are loaded using the animation element. +- Since GeoJSON data is vector data, the [`clickable`](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B) attribute is specified in the `class` attribute. +- For everything else, I'm using layering techniques based on [these key points](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). + +```svg + + + + + + + + + + +``` + +### geoJsonExample1.svg {#geo-json-example1-svg} + +- The `data-controller` attribute of the document root element (the `svg` element) specifies [the webApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) that will operate this layer . + - ```data-controller="geoJsonExample1.html#exec=appearOnLayerLoad``` + - ```exec=appearOnLayerLoad``` This setting causes the webApp window to appear when the layer becomes visible. ([See here for details](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0)) +- The `defs` element defines the markers (icons) used when visualizing point features in geoJSON. + +```svg + + + + + + + + + + + + +``` + +### geoJsonExample1.html, geoJsonExample1.js {#geo-json-example1} + +[This](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) is a webApp ( layer-specific UI ) linked to geoJsonExample1.svg . WebApps linked to layers allow you to use [their own APIs](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E6.8B.A1.E5.BC.B5API). + +#### geoJsonexample1.html + +The HTML consists of a [common library](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AEhtml.E6.96.87.E6.9B.B8.28webApp.29.E3.81.AE.E6.A7.8B.E9.80.A0.E3.83.BB.E4.BD.9C.E6.B3.95) (svgMapLayerLib.js) for initializing the layer-specific UI , a script code section describing the layer-specific processing ```geoJsonExample1.js```, and the UI (HTML, CSS, etc.). + +```html + + + + + A sample demonstrating how to render geoJSON in the webApp layer of an SVGMap + + + + +

area layer

+

Visualizing geoJSON

+ + + +``` + +#### geoJsonExample1.js + +- [Layer-specific UI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E6.8B.A1.E5.BC.B5API): As described in the extended API documentation, svgImage and svgMapGIStool objects are automatically incorporated into the window. +- A web app that is linked to geoJsonExample1.svg and can [control its DOM](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI). +- This app has a simple UI and ```dataPaths``` allows you to select from several geoJSON data sets that you have configured. +- ```loadJSON(url)``` Asynchronous loading of [GeoJSON](https://ja.wikipedia.org/wiki/GeoJSON) data using [await](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function[) [fetch](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch) +- This code uses functions from the [SVGMap GIS library (svgMapGIStool)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI) ```drawGeoJson``` to convert geoJSON to SVGMap content (its DOM). + - The variable `layerID` is a built-in variable (see [the documentation #layerID](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#layerID)). + - While it is certainly possible to convert geoJSON to SVGMap content DOM manually, Tutorial 6 uses a library. + - ```drawGeoJson``` For details on the function, please refer to the [documentation #drawGeoJson](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#drawGeoJson). +- ```svgMap.refreshScreen()``` If the DOM needs to be redrawn at a time other than during scaling/scrolling, you must [explicitly request a redraw](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen). + - [Reference information](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```js +var dataPaths = { + "A34b-180316.geojson": "World Heritage Site Component Area Polygon (Representative Point)", + "A34a-180316.geojson": "World Heritage Site Component Area Polygon Data", + "A34d-180316.geojson": "World Heritage Site Component Boundary Line (Representative Point)", + "A34c-180316.geojson": "World Heritage Site Component Boundary Line Data", + "A34e-180316.geojson":"World Heritage Component", + "A34f-180316.geojson": "World Heritage Buffer Zone Polygon Data", + "A34g-180316.geojson":"World Heritage Buffer Zone Polygon (Representative Point)", + "C28-20_Airport.geojson":"Airport Data Airport", + "C28-20_AirportReferencePoint.geojson":"Airport data reference point", + "C28-20_SurveyContent.geojson": "Airport Data Survey Content", + "C28-20_TerminalBuilding.geojson":"Airport Data Terminal Building", + "N02-20_RailroadSection.geojson":"Railway Data Railway", + "N02-20_Station.geojson":"Railway data station" +}; + +addEventListener("load", function(){ + buildDataSelect(); + changeData(); +}); + +function changeData(){ + var path = dataSelect.options[dataSelect.selectedIndex].value; + loadAndDrawGeoJson(path); +} + +async function loadAndDrawGeoJson(dataPath){ + var gjs = await loadJSON(dataPath); + var parentElm = svgImage.getElementById("mapContents"); + removeChildren(parentElm); + svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm); + svgMap.refreshScreen(); +} + +function buildDataSelect(){ + var first = true; + for ( var dataPath in dataPaths){ + dataSelect.insertAdjacentHTML('beforeend', ''); + } +} + +async function loadJSON(url){ + var dt = getDateStr(new Date(),10); + var response = await fetch(url+"?time="+dt); // Add some dummy query part to always get the latest data. Bad Tips... + // https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice + // https://stackoverflow.com/questions/9692665/cache-busting-via-params + var json = await response.json(); + return ( json ); +} + +function getDateStr(dateData , tStep){ + var mind = tStep * Math.floor( dateData.getUTCMinutes() / tStep ); + var ans = dateData.getUTCFullYear()+ pad(dateData.getUTCMonth() + 1) + pad(dateData.getUTCDate()) + pad(dateData.getUTCHours()) + pad(mind); + return ( ans ); +} +function pad( inp ){ + return (("0"+inp).slice(-2)); +} + +function removeChildren(element){ + while (element.firstChild) element.removeChild(element.firstChild); +} +``` \ No newline at end of file diff --git a/docs/3-web-service-integration/cross-origin-access/index.md b/docs/3-web-service-integration/cross-origin-access/index.md new file mode 100644 index 0000000..dba0a80 --- /dev/null +++ b/docs/3-web-service-integration/cross-origin-access/index.md @@ -0,0 +1,119 @@ +# Cross-origin access + +When integrating with external web services, you need to understand and handle cross-origin access depending on the external service. + +If a bit image map layer requires projection conversion, or if you access a web service (webapi) on a different domain from the site where the webapp is located using XMLHttpRequest or fetch, an error may occur due to cross-origin access restrictions. This error cannot be resolved on the WebApp side alone, and requires adjustment of the server-side settings. + +## Overview {#overview} + +Because SVGMap has a hyper-layering architecture, the client SVGMap framework web app consisting of [the root html document](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) basically needs to access a server of a different origin. This means that a process commonly known as " [Cross-Origin Resource Sharing](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS) (CORS)" may be performed, and at this time, [CORS errors](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors) may occur due to the native functionality of the web browser. + +The table below shows cross-origin access cases and the possibility of CORS errors occurring. + +**Error due to cross-origin access in svgmapjs** +| Types of content accessed cross-origin | Content Processing | Possible CORS error | +|---|---|---| +|Bitimage (including tiles)|Overlay|Does not occur| +|Bitimage (including tiles)|Overlay with [nonlinear projection transformation](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#.E9.9D.9E.E7.B7.9A.E5.BD.A2.E5.9B.B3.E6.B3.95.E5.A4.89.E6.8F.9B)|Possible occurrence| +|Bitimage (including tiles)|Geospatial information processing, etc.|Possible occurrence| +|Data other than bit images, such as vector data and JSON|Overlay|Possible occurrence| +|Data other than bit images, such as vector data and JSON|Geospatial information processing, etc.|Possible occurrence| +|All types of content and data|[3D display using Cesium extension](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMapCesiumWrapper..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI)|Possible occurrence| + +## How to check for errors {#how-to-check-errors} + +Open the SVGMap page in a web browser and check the console or network screen of the developer tools to see if there is an error (such as a message about being blocked by CORS policy). + +## Server (service side): Configure to return CORS response headers {#server} + +- Configure your server to return an Access-Control-Allow-Origin * (or a specified origin) response header. + - [Apache example](https://phaier.github.io/school/engineering/platform/server/apache/how-to/cors.html) + - [etc](https://enable-cors.org/server.html) +- Services that are designed to be accessed from outside have this setting (e.g., Geospatial Information Authority maps and gitHubPages sites), so there is no need to use the proxy below. + +## Prepare a proxy service and route traffic through it {#prepare-proxy} + +- Implementation using node.js + - [CORS Anywhere](https://github.com/Rob--W/cors-anywhere) ( [Setup Notes](https://www.svgmap.org/wiki/index.php?title=CORS_Anywhere_setup_notes) ) +- Implementation using php + - [php-cross-domain-proxy](https://github.com/softius/php-cross-domain-proxy) ( [fork](https://github.com/softius/php-cross-domain-proxy) of svgmap.org ) + - [Simple proxy implementation example](https://www.svgmap.org/wiki/index.php?title=%E5%8D%98%E7%B4%94%E3%81%AA%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E5%AE%9F%E8%A3%85%E4%BE%8B) + +#### SVGMap.js support for easier cross-origin access through proxies + +SVGMap.js has several features that make it easier to support cross-origin access through proxies. + +There are three main cases where SVGMap.js requires cross-origin access: + +1. Projection conversion of bit image (including tiles) data +2. Raster GIS +3. Proprietary communication in the webApp layer + +(1) and (2) require cross-origin access to be performed under the management of SVGMap.js, and an API is provided to configure cross-origin access (proxy settings for cross-origin access) when SVGMap.js is initialized. + +- [Manual#Proxy settings](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A) +- [Reference#setProxyURLFactory](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#setProxyURLFactory) +- [Manual#setImageProxy](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#setImageProxy) + +[Examples of initialization](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#SVGMap.js.E3.81.AE.E5.88.9D.E6.9C.9F.E5.8C.96) using these APIs are explained in the next chapter. + +**Cross-Origin Access in the WebApp Layer** + +On the other hand, case 3 is a case where each layer's webApp ( [webApp Layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) ) performs cross-origin access (using fetch, XMLHttpRequest, etc.) to obtain data (for example, custom data in JSON format) to generate the layer's content, and strictly speaking, this is a process that does not involve SVGMap.js. Care for this type of cross-origin access must basically be taken by the developer of each individual layer's webApp. + +However, when accessing via a proxy, it is possible that the proxy used for cases 1 and 2 above will also be used as a proxy common to all layers, and in this case there is a function that can call the proxy set during SVGMap.js initialization using a common function. + +- [Reference#getCORSURL](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getCORSURL) + +We will show how to use getCORSURL [in a later chapter](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#webApp.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A7.E3.81.AE.E3.82.AF.E3.83.AD.E3.82.B9.E3.82.AA.E3.83.AA.E3.82.B8.E3.83.B3.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9). + +#### Initializing SVGMap.js + +- Using the above mentioned functions, we will introduce the steps to initialize [the root HTML document](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) to easily enable cross-origin access . See the next chapter for corsProxy.js. + - Full implementation of the root HTML document: [GitHub](https://github.com/svgmap/svgMapDemo/blob/main/index.html) + +```html + + +... + +... + +``` + +**corsProxyMoule.js** + +Here is a library to make initialization easier. [gitHub](https://github.com/svgmap/svgmapjs/blob/main/CorsProxyModule.js) +- corsProxy.setService(pxUrl , directURLls , useAnonProxy, requireEncoding) + - pxUrl: Proxy URL + - directURLls: [List of URLs that do not use the proxy] + - useAnonProxy: Whether to assign anonymous attribute + - requireEncoding: Whether to URL encode the URL passed to the proxy service +- corsProxy.getURLfunction : Gets the function to get the URL via the proxy + +#### Cross-origin access at the webApp layer + +[The getCORSURL API](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getCORSURL) can be used in webApps of each layer that are registered in [the root HTML document (SVGMap page)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) where SVGMap.js has been initialized [for cross-origin access](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#SVGMap.js.E3.81.AE.E5.88.9D.E6.9C.9F.E5.8C.96). + +This API is a function that allows you to obtain a URL that enables access to the URL of the service you want to access via a commonly prepared cross-origin access server. For example, it can be used as follows: + +```var dataResponse = await fetch( svgMap.getCORSURL( serviceURL ) );``` + +[On the other hand, if the root HTML document (SVGMap page)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) does not initialize cross-origin access , the webApps in each layer must resolve cross-origin access independently. For example, if ```https://[myproxy.mydomain.com]/proxy/``` a proxy is provided as a proxy for cross-origin access and ```?targetURL=serviceURL``` the destination service is accessed with a query parameter, it would look like this: +```var dataResponse = await fetch( "https://[myproxy.mydomain.com]/proxy/?targetURL=" + serviceURL );``` + +#### Nonlinear projection transformation + +Projection conversions between Mercator projection and equirectangular projection, etc., involve coordinate transformations that cannot be performed using a linear affine transformation (matrix (a, b, c, d, e, f)). \ No newline at end of file diff --git a/docs/3-web-service-integration/index.md b/docs/3-web-service-integration/index.md new file mode 100644 index 0000000..ae83033 --- /dev/null +++ b/docs/3-web-service-integration/index.md @@ -0,0 +1,7 @@ +# Part 3: Web Service Integration + +SVGMap.js's advanced and flexible tiling mechanism allows for a wide range of Jamstack patterns , significantly reducing the need for dynamic web services with high server overhead compared to traditional frameworks. (References: Tutorial using SVGMapTools , Quad Tree Composite Tiling and the standardization of tiling ) + +However, there are still many cases where dynamic service integration is required, so here we will implement a method to do this as a webApp layer that uses existing public web services. (Therefore, this tutorial will only cover using dynamic services and will not go into building the dynamic service itself. GeoServer , MapServer , PostgREST + PostGIS, etc. can be used for this implementation. SVGMap.org also publishes code for building a high-performance dynamic service called redisSvgMap. ) + +Because services are connected as individual layers, and the individual layers are composed (loosely coupled) into encapsulated applications ( Layers as WebApps ), this pattern can be considered a kind of micro-frontend (or composite UI ) type of microservices applied to maps. diff --git a/docs/3-web-service-integration/tutorial-12/index.md b/docs/3-web-service-integration/tutorial-12/index.md new file mode 100644 index 0000000..85a93c7 --- /dev/null +++ b/docs/3-web-service-integration/tutorial-12/index.md @@ -0,0 +1,114 @@ +# Tutorial 12 Using WMS + +## Introduction {#introduction} + +We will display the [Web Map Service (WMS)](https://ja.wikipedia.org/wiki/Web_Map_Service) service , a web service specification that outputs bit image map data according to specified parameters, as an SVGMap layer. + +Let's try using the [GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/) ( [global topographic map including the ocean floor](https://ja.wikipedia.org/wiki/%E5%A4%A7%E6%B4%8B%E6%B0%B4%E6%B7%B1%E7%B7%8F%E5%9B%B3) ). + +First, let's simply display the map content, regardless of the elastic scrolling. This is basically the same as what we did in [Tutorial 4](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%AB4). We just set the query part of the URL according to the WMS specifications. + +- Click [wms1.html](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html) to see it in action . + - (Note: It may take some time for the WMS to generate and distribute the map.) + +## Source Code Directory {#source-code-directory} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/wms1/) +- Understand the relationship between WMS parameters and SVGMap content bit image alignment parameters +- The image element places the data retrieved from the WMS. + +## Tutorial {#tutorial} + +This section explains the most basic method of connecting to [the GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/) , which distributes map data based on [the WMS (Web Map Service)](https://en.wikipedia.org/wiki/Web_Map_Service) specification, which dynamically generates map data for a specified area , and displaying map data. + +On the client side, there is no dynamic code implemented, such as JavaScript, and it simply displays a static bit image. Therefore, there is almost no difference from [Tutorial 4](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%AB4). + +- Click [here](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html) to see it in action. +- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/wms1.zip) of used files + +### [wms1.html](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html) {#wms1-html} + +There's nothing particularly different from before. + +### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms1/Container.svg) {#container-svg} + +There's nothing particularly different from before. + +### [wms_static.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms_static.svg) {#wms-static-svg} + +As in [Tutorial 4](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%AB4) , we use the image element to place a bit image in the SVGMap content . + +In [Tutorial 4](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%AB4), we only briefly explained the relationship between image region information and image element parameters, but here we will provide a detailed explanation of the relationship between image region information and image element parameters. + +#### WMS query parameters + +For details about WMS, please [refer to the specifications](https://www.ogc.org/standards/wms) . Here we will provide the main points. + +- Fixed parameters The following are parameters that basically never change when obtaining a bit image of a map. + - ```request=GetMap``` + - ```service=WMS``` + - ```version=1.1.1``` + - ```format=image/png``` PNG is generally the best data format for most situations. (Lossless, transparent pixels (where there is no data, etc.)) +- ```layers=GEBCO_LATEST``` To see what layers are available in GEBCO WMS, use [GEBCO's getcapabilities](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?request=getcapabilities&service=wms&version=1.1.1). +- ```srs=EPSG:4326``` The spatial reference system (a concept that combines a geographic coordinate system and a projection) is specified as [EPSG:4326 (WGS84 coordinate system)](https://spatialreference.org/ref/epsg/wgs-84/). + - Data in the WGS84 coordinate system (World Geodetic System of X: longitude, Y: latitude) is plotted on a plane linear to that coordinate system (i.e., [equirectangular projection](https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95)). +- ```bbox=120,20,150,50``` Specify the area to be plotted using the coordinate system (longitude and latitude) specified above. + - Specify the coordinates of two diagonal points in the order X1, Y1, X2, Y2. Note: Not X, Y, Width, Height. + - Data is requested for the diagonal regions of 120° longitude, 20° latitude and 150°, 50° latitude. +- ```width=600&height=600``` The size of the bit image to be plotted + - You are requesting a PNG image with a size of 600 x 600 px. + - WMS does not maintain the aspect ratio, but outputs a bit image with a changed aspect ratio so that the area specified by the bbox fits exactly within the specified size. + +#### Image element properties + +Place the bit image obtained via WMS in the SVG image element. + +globalCoordinateSystem element description + +`````` + +From this, we can see that the relationship between SVG coordinates (Xsvg, Ysvg) and geographic coordinates (WGS84 system: Xgeo (longitude), Ygeo (latitude)) is as follows. + +``` +Xsvg = 1 * Xgeo + 0 * Ygeo + 0 ⇒ Xsvg = Xgeo +Ysvg = 0 * Xgeo - 1 * Ygeo + 0 ⇒ Ysvg = -Ygeo +``` + +The Y axis is important to note. It is inverted (the Y axis in computer graphics points downward, whereas the normal Y axis points upward). This means that when placing graphics in SVG coordinates, the origin position is also reversed (in geographic coordinates, the origin is at the southern end, but in SVG coordinates, the origin is at the northern end). + +With that in mind, let's look at the properties of the image element. + +- ```xlink:href="[WMSクエリパラメータが設定されたGEVBCO WMSのURL]"``` +- ```x="120"``` Origin of the X axis = Longitude of the easternmost point (easternmost point is 120°) +- ```y="-50"``` Origin of the Y axis = negative latitude of the northernmost point (northernmost point is 50°) +- ```width="30"``` Width in X direction = (West end - East end = 150 - 120 = 30°) +- ```height="30"``` Height in Y direction = (North end - South end = 50 - 20 = 30°) +- ```preserveAspectRatio="none"``` In accordance with the WMS bit image generation policy, the aspect ratio is not maintained when placing bit images. +- ```opacity="0.5"``` The transparency is set to 50% to allow some of the background map to be seen. + +#### Sauce + +```svg + + + + + +``` \ No newline at end of file diff --git a/docs/3-web-service-integration/tutorial-13/index.md b/docs/3-web-service-integration/tutorial-13/index.md new file mode 100644 index 0000000..2308e30 --- /dev/null +++ b/docs/3-web-service-integration/tutorial-13/index.md @@ -0,0 +1,128 @@ +# Tutorial 13 WebApp Layer WMS Display according to elastic scrolling + +## Introduction {#introduction} + +[Using the WebApp Layer mechanism](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0), you can connect to a web service and dynamically display map content according to the display area. We will use the same [GEBCO Web Service as in Tutorial 12](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/). + +- Click on [wms2.html](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html) to see it in action . + - (Note: It may take some time for the WMS to generate and distribute the map.) + +## Source Code Directory {#source-code-directory} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/wms2/) +- Gets the display area parameters each time you scroll. +- Use this parameter to construct a query URL to the WMS. +- The image element places the data retrieved from the WMS. +- The previous image element is deleted. + +## Tutorial {#tutorial} + +We will use a [WMS (Web Map Service)](https://en.wikipedia.org/wiki/Web_Map_Service) to implement a layer as a [WebApp Layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) that can display a map of the displayed area in response to elastic scrolling . As a WMS, we will continue to use [the GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/) from [Tutorial 12](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%AB12). + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html) to see it in action. +- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/wms2.zip) of used files + +### [wms2.html](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html) {#wms2-html} + +There's nothing particularly different from before. + +### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms2/Container.svg) {#container-svg} + +There's nothing particularly different from before. + +### [wms_dynamic.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms_dynamic.svg) {#wms-dynamic-svg} + +- ```data-controller="wmsController.html"``` This layer is linked to the WebApp ("wmsController.html"). + - The WebApp performs DOM manipulation to display WMS content every time you scroll. +- The image element is a dummy (it is not displayed because it does not have an xlink:href attribute). + +```svg + + + + + +``` + +### [wmsController.html](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html), [wmsController.js](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.js) {#wms-controller} + +- ```onload``` A function called immediately after the webApp is loaded. + - ```svgMap.refreshScreen()``` preRenderFunctionThis will cause the map to be refreshed immediately after the webapp is loaded . +- ```preRenderFunction``` [This is a callback function that is executed when redrawing occurs](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#preRenderFunction). It is also called when redrawing occurs during elastic scrolling. + - ```prevImageElement.remove()``` Delete the image from WMS one step before (just before the telescopic scroll occurs) + - ```svgMap.getGeoViewBox()``` [Get the display area in geographic coordinates](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getGeoViewBox) + - ```getScreenSize()``` Get the size of the map display screen + - ```getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize)``` + - A function that generates a request URL to GEBCO WMS based on parameters such as display area and screen size. + - For details on how to set query parameters, see [the explanation about WMS in Tutorial 12](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%AB12#WMS.E3.81.AE.E3.82.AF.E3.82.A8.E3.83.AA.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF). + - ```getSvgImage(req, geoViewBox)``` A function that generates an image element based on the request URI to the WMS generated above and the area information of the map data. + - For details on property settings, see [the explanation of the image element in Tutorial 12](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%AB12#image.E8.A6.81.E7.B4.A0.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3). + - ```svgImage.documentElement.appendChild(newImage)``` Place the generated Image element in the SVG content + +wmsController.js + +```js +onload=function(){ + svgMap.refreshScreen(); +} + +var GEBCOurl="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv"; +was GEBCOlayer="GEBCO_LATEST"; + +where crsAD=1; + +function preRenderFunction(){ + var prevImageElement = svgImage.getElementById("wmsImage"); + prevImageElement.remove(); + + var geoViewBox = svgMap.getGeoViewBox(); + var screenSize = getScreenSize(); + var req = getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize); + + var newImage = getSvgImage(req, geoViewBox); + svgImage.documentElement.appendChild(newImage); +} + +function getSvgImage( imageUrl, geoViewBox){ + var imageElement = svgImage.createElement("image"); + imageElement.setAttribute("opacity", 0.5); + imageElement.setAttribute("preserveAspectRatio", "none"); + imageElement.setAttribute("id", "wmsImage"); + imageElement.setAttribute("xlink:href", imageUrl); + imageElement.setAttribute("x", geoViewBox.x * crsAD); + imageElement.setAttribute("y", -(geoViewBox.y+geoViewBox.height) * crsAD); // Set north edge for axis inversion + imageElement.setAttribute("width", geoViewBox.width * crsAD); + imageElement.setAttribute("height", geoViewBox.height * crsAD); + return(imageElement); +} + +function getWMSreq(baseUrl, layerName, geoArea, screenSize){ + var wmsArea_x0=geoArea.x; + var wmsArea_y0=geoArea.y; + var wmsArea_x1=geoArea.x+geoArea.width; + var wmsArea_y1=geoArea.y+geoArea.height; + + var ans = `${baseUrl}? + request=GetMap& + service=WMS& + version=1.1.1& + layers=${layerName}& + srs=EPSG:4326& + bbox=${wmsArea_x0},${wmsArea_y0},${wmsArea_x1},${wmsArea_y1}& + width=${screenSize.width}& + height=${screenSize.height}& + format=image%2Fpng`; + + ans = ans.replace(/\s/g,""); // Remove blank text (including line breaks) + return ( ans ); +} + +function getScreenSize(){ + var gvb = svgMap.getGeoViewBox(); + var scale = svgImageProps.scale; + return { + width : Math.round(gvb.width * scale), + height: Math.round(gvb.height * scale), + } +} + ``` \ No newline at end of file diff --git a/docs/3-web-service-integration/tutorial-14/index.md b/docs/3-web-service-integration/tutorial-14/index.md new file mode 100644 index 0000000..cafa889 --- /dev/null +++ b/docs/3-web-service-integration/tutorial-14/index.md @@ -0,0 +1,219 @@ +# Tutorial 14: WebApp Layer Vector Geographic Information Service Integration + +## Introduction {#introduction} + +We will integrate a service that dynamically generates and distributes vector data into SVGMap.js. Here, we will integrate the [global earthquake occurrence data (GeoJSON version) distributed by the USGS Hazards Program](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php). + +Although it connects to dynamic services, there is no fundamental difference from [Tutorial 6](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#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON). + +- To see it in action, click [geojson2.html](https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html). + +## Source Code {#source-code} + +[Compared to Tutorial 6](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#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON), the following differences apply: + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/geojson2/) +- geoJsonExample2.html: + - Generates a URL for GeoJson requests based on [the USGS Earthquake Hazards Program Feed specification and provides a UI for doing so](https://earthquake.usgs.gov/earthquakes/feed/). + - Metadata display settings based on the same specifications + - Updated every 10 minutes + +## Tutorial {#tutorial} + +We will integrate a service that dynamically generates and distributes vector data into SVGMap.js. Here, we will integrate [real-time global earthquake occurrence data (GeoJSON Real-time Feeds)](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) (GeoJSON version) distributed by the USGS Hazards Program. There are basically no differences from [Tutorial 6](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%AB14#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON). + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html) to see it in action . +- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/geojson2.zip) of used files + +### geojson1.html {#geojson-html} + +- There is no particular difference from [Tutorial 6](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%AB6). + +### Container.svg {#container-svg} + +- There is no particular difference from [Tutorial 6](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%AB6). + +### geoJsonExample2.svg {#geojsonexample2} + +- The data-controller attribute of the document root element (svg element) specifies [the webApp that controls this layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI). + - ```data-controller="geoJsonExample2.html#exec=appearOnLayerLoad``` + - ```exec=appearOnLayerLoad``` This setting causes the webApp window to appear when the layer is displayed. ( [For more information, click here](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0) ) +- The defs element defines the marker (POI icon). + - The marker color is left undefined here because it will change depending on the magnitude. + +```svg + + + + + + + + + + + + +``` + +### geoJsonExample2.html, geoJsonExample2.js {#geojsonexample2} + +#### About [the USGS Earthquake GeoJSON Real-time Feeds Service](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) + +This service delivers real-time updates of earthquake occurrences around the world at one-minute intervals. The output format is GeoJson, and output data can be selected from several options based on time interval and earthquake scale. There is no query part in the request, and updated data is always delivered via the same URL. + +#### Code + +- A webApp that is linked to geoJsonExample2.svg and can control its DOM +- The following are the differences from Tutorial 6#geoJsonExample1.html +- ```addEventListener("load", function(){..})``` + - ```changeData()``` A function to request and visualize earthquake data based on UI settings. + - ```getUSGSURL()``` Generate a GET request to retrieve earthquake data from the USGS. + - We are making a request that performs cross-origin access. The USGS Earthquake GeoJSON Real-time Feeds is access-control-allow-origin: *accessible because it has a response header. + - ```loadAndDrawGeoJson()``` A function that asynchronously retrieves and renders JSON data + - ```loadJSON()``` To prevent browser caching, we add a query part that is constantly changing ( there are getTime() better ways to do this , but this is a classic bad tip). + - ```buildSchema()``` + - When visualizing with the svgMapGIStool.drawGeoJson function, schema data is constructed to adapt to the metadata display framework of SVGMap.js , and is set as the document root element of the SVGMap content. + - Generates the final argument (metaSchema) passed to the svgMapGIStool.drawGeoJson function. + - ```setMagColors()``` + - Use the svgMapGIStool.drawGeoJson function's ability to set styles using the properties of each feature to color point features based on their magnitude values. + - ```svgMapGIStool.drawGeoJson()``` + - ```buildSchema()``` The generated schema ( metaSchema) is given, and the metadata can be displayed properly using the SVGMap.js metadata display framework. + - ```setInterval(function(){..}..)``` A function that updates periodically at specified intervals (since earthquake data is updated in real time) + +geoJsonExample2.html + +```html + + + + + Sample of drawing geoJson in an SVGMap webApp layer + + + + +

area layer

+USGS Earthquake Hazards Program Feed

+Period
+Scale +
+ + +``` +geoJsonExample2.js + +```js +var usgsEarthquakeService="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/"; +var timeSpanKeys=["hour","day","week","month"]; // Selection for setting the period of distributed data +var timeSpanDefault=2; // Display data for the past week by default +var levelKeys=["significant","4.5","2.5","1.0","all"]; // Selection for distributed data by magnitude +var levelDefault=2; // Display earthquakes of M2.5 or higher by default +var intervalMinutes=10; // Update every 10 minutes +var metaSchema; // Store the normalized schema for the metadata display UI when selecting geometry, which is provided as standard in SVGMap.js + +addEventListener("load", function(){ + buildDataSelect(); + changeData(); + setInterval(function(){ + changeData(); + messageDiv.innerText=new Date().toLocaleString() + " update"; + } ,intervalMinutes * 60 * 1000); +}); + +function changeData(){ + var param1 = dataSelect1.selectedIndex; + var param2 = dataSelect2.selectedIndex; + var path = getUSGSURL(param1,param2); + loadAndDrawGeoJson(path); +} + +async function loadAndDrawGeoJson(dataPath){ + var gjs = await loadJSON(dataPath); + buildSchema(gjs.features); + setMagColors(gjs.features); + console.log("geoJson:",gjs); + var parentElm = svgImage.getElementById("mapContents"); + removeChildren(parentElm); + svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm, metaSchema); + svgMap.refreshScreen(); +} + +function buildDataSelect(){ + var first=true; + for ( var i = 0 ; i < timeSpanKeys.length; i++){ + var timeSpanKey = timeSpanKeys[i]; + var selectedOpt=""; + if ( timeSpanDefault == i){ + selectedOpt="selected"; + } + dataSelect1.insertAdjacentHTML('beforeend', ``); + } + for ( var i = 0 ; i < levelKeys.length ; i++){ + var levelKey = levelKeys[i]; + var selectedOpt=""; + if ( levelDefault == i){ + selectedOpt="selected"; + } + dataSelect2.insertAdjacentHTML('beforeend', ``); + } +} + +async function loadJSON(url){ + var response = await fetch(url+"?time="+new Date().getTime()); // To always get the latest data, add a dummy query part. Bad Tips... + // https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice + // https://stackoverflow.com/questions/9692665/cache-busting-via-params + var json = await response.json(); + return ( json ); +} + +function removeChildren(element){ + while (element.firstChild) element.removeChild(element.firstChild); +} + +function getUSGSURL(timeSpan, level){ + if (!timeSpanKeys[timeSpan]){return}; + if (!levelKeys[level]){return}; + var ans = `${usgsEarthquakeService}${levelKeys[level]}_${timeSpanKeys[timeSpan]}.geojson`; + console.log("getUSGSURL:",ans); + return (ans); +} + +function buildSchema(features){ // Generate a normalized schema from the property name of the geojson feature + metaSchema={}; + for ( var feature of features){ // Trace all data just in + case for ( var propName in feature.properties){ + if (!metaSchema[propName]){ + metaSchema[propName]=true; + } + } + } + metaSchema=Object.keys(metaSchema); + svgImage.documentElement.setAttribute("property",metaSchema.join()); +} + +function setMagColors(features){ // Use the styling specifications from [[Guide#drawGeoJson]] to assign colors according to magnitude + features.sort(function(a,b){ // Sort by ascending magnitude + return(a.properties.mag - b.properties.mag); + }); + + for ( var feature of features){ + var cmag = feature.properties.mag; + // Clip at magnitude 3...7 + cmag = Math.max(3,cmag); + cmag = Math.min(7,cmag); + // Convert to hue and generate an RGB color from it + var hue = (7-cmag)/(4)*240; + var rgb = svgMapGIStool.hsv2rgb(hue,100,100); + console.log(rgb); + if ( } } + console.log( + features + ) + ; +} +``` + +### Appendix: Cross-origin access + +[Cross-origin access](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9) ( now a [separate page](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9) ) \ No newline at end of file diff --git a/docs/3-web-service-integration/tutorial-15/index.md b/docs/3-web-service-integration/tutorial-15/index.md new file mode 100644 index 0000000..3bb33af --- /dev/null +++ b/docs/3-web-service-integration/tutorial-15/index.md @@ -0,0 +1,213 @@ +# Tutorial 15: WebApp Layer Elastic Scrolling Compatible Vector Geographic Information Service Integration + +## Introduction {#introduction} + +We will connect a service that dynamically generates and distributes vector data to SVGMap.js. Unlike the previous chapter, each time you scroll, the data corresponding to the display area is retrieved from the service and displayed. + +Here we will integrate [the Geoname Service API](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) (Canadian place name data service) provided by Natural Resources Canada . + +- To see it in action, click on [vectorService1.html](https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html). + - (Note: It may take some time for the service to generate and distribute the data.) + +## Source Code {#source-code} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/) +- Gets the display area parameters each time you scroll. +- Use these parameters to construct a query URL to the service based on [your specifications](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) and retrieve the CSV. +- Visualize point data as an SVG use element. +- The data from one step before will be erased. + +## Tutorial {#tutorial} + +This example integrates a service that dynamically generates and distributes vector data into SVGMap.js. Unlike [Tutorial 14](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%AB14) , this example retrieves and displays data from the service according to the display area each time you scroll. While [Tutorial 14](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%AB14) used a geoJson data service, this example uses CSV data. + +[The service to be combined is the Geoname Service API](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) (Canadian geographic name data service) provided by Natural Resources Canada . + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html) to see it in action . +- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/vectorService1.zip) of used files + +### vectorService1.html {#vector-service-1} + +- There is no particular difference from [Tutorial 14](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%AB14). + +### Container.svg {#container-svg} + +- There is no particular difference from [Tutorial 14](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%AB14). + +### CanadianGeoNames.svg {#canadian-geo-names-svg} + +- There are no particular differences from [Tutorial 14](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%AB14). The icon color is also fixed to red. + +```svg + + + + + + + + + +``` + +### CanadianGeoNames.html, CanadianGeoNames.js {#canadian-geo-names-js} + +#### REST API + +This is a bit complicated, so I will summarize the parts of the API provided by [Geographical names in Canada: Geoname Service that we will use this time](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249). + +**Query parameters to use** + +This time we will use the following two. + +- bbox West, South, East, and North coordinates (World Geodetic System degrees) separated by commas +- num Maximum number to output +- .csv extension Although it is not strictly a query parameter, specifying the extension in the path will allow the specified media to be delivered. (The default is html.) In this example, we will use CSV. +- Cross-origin settings This time, we will be accessing a service on another domain, so the web service must allow cross-origin access. [Geographical names in Canada: Geoname Service](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) appears to be allowed. + +**Data delivered** + +CSV data based on the query parameters will be returned. The first line is the schema line, and data follows on the second line. It appears to have the following columns. The latitude and longitude columns can be used to place point features on the map, and the name column can be used to set their titles. The other columns can be displayed as properties when you click on a symbol. When retrieving the data, it appears that data containing commas may be escaped with double quotes. + +- id +- name +- language.code +- language.href +- syllabic +- feature.id +- feature.href +- category +- status.code +- status.href +- concise.code +- concise.href +- generic.code +- generic.href +- location +- province.code +- province.href +- map +- relevance +- accuracy +- Latitude +- longitude +- decision + +#### Code + +- ```addEventListener("zoomPanMap", getGeoNames)``` : Each time a zoom scroll occurs, the service is queried, a DOM of the SVGMap content for the associated layer is constructed, and it is visualized. + - Even if data from the previous step (before the elastic scroll) exists in the current step, it is simply erased and then relocated (more advanced mechanisms such as tiling are not implemented). +- ```getGeoNames()``` : Asynchronous functions visualized along with the service + - ```svgMap.getGeoViewBox()``` : Get the geographical display area + - ```getCanadianGeoNamesReq()``` : Construct a query to the service based on the display area + - ```await getCsv()``` : Asynchronously retrieve and parse CSV using a query + - ```line.split(...)``` : Parsing with double quotation escape based on this article + - ```drawPoints()``` : Visualize the retrieved data. In this example, we create an SVG use element directly from the CSV and visualize it. + - ```svgImage``` : The SVGMap document object for the layer embedded in the webApp associated with the layer + - Reference: Manual#svgImage + - ```schema``` : Place a schema in the property of the document element of the associated layer's SVGMap content + - Reference: SVGMap.js metadata framework + - ```"transform", `ref(svg,${lng},${-lat})` ```: Using TransformRef in svg1.2 , we have placed an icon that does not change size. + - Reference: Supported attributes + - ```"content"``` : Metadata is set in CSV format + - ```"xlink:href", "#p0"``` : Refer to the symbol (red circle) with id:p0 in the defs element + - ```svgMap.refreshScreen();``` : Redraw the SVGMap content once the DOM is created + - Reference: Redraw Limit + +CanadianGeoNames.html + +```html + + + +basic dynamic wms layer controller + + + + +

Canadian GeoNames layer controller

+

Get Canadian GeoNames Features from Canadian GeoNames Search Service

+
-
+ + +``` + +CanadianGeoNames.js + +```js +var canadianGeoNamesService = "https://geogratis.gc.ca/services/geoname/en/geonames.csv"; + +onload=function(){ + addEventListener("zoomPanMap", getGeoNames); + getGeoNames(); +} + + +var crsAD=1; +var maxItems=100; + +async function getGeoNames(){ + var geoViewBox = svgMap.getGeoViewBox(); // Get the geographic view box + var req = getCanadianGeoNamesReq(geoViewBox); // Build a query to the service based on the view box + var csv = await getCsv(req); // Get CSV asynchronously using a query + if (csv.length > maxItems){ // Display a message if the number is greater than the maximum + messageDiv.innerText="Exceeded maximum number. Please zoom in."; + }else{ + messageDiv.innerText=""; + } + drawPoints(csv); // Visualize the acquired data +} + +function getCanadianGeoNamesReq(geoArea){ + var area_x0=geoArea.x; + var area_y0=geoArea.y; + var area_x1=geoArea.x+geoArea.width; + var area_y1=geoArea.y+geoArea.height; + var ans = `${canadianGeoNamesService}?bbox=${area_x0},${area_y0},${area_x1},${area_y1}&num=${maxItems}`; + return ( ans ); +} + +async function getCsv(url){ + var response = await fetch(url); + var txt = await response.text(); + txt = txt.split("\n"); + var ans = []; + for ( var line of txt ){ + // https://www.ipentec.com/document/csharp-read-csv-file-by-regex CSV parsing with double quote escaping + line = line.split(/,(?=(?:[^"]*"[^"]*")*[^"]*$)/); + if (line.length > 1){ + ans.push(line); + } + } + return ( ans ); +} + +function drawPoints(csv){ + removeUses(); + var schema = csv[0].join(); + var latCol=csv[0].indexOf("latitude"); + var lngCol=csv[0].indexOf("longitude"); + svgImage.documentElement.setAttribute("property",schema); + for ( var i = 1 ; i < csv.length ; i++){ + var point = csv[i]; + var meta = point.join(); + var lat = Number(point[latCol]); + var lng = Number(point[lngCol]); + var use=svgImage.createElement("use"); + use.setAttribute("xlink:href","#p0"); + use.setAttribute("content",meta); + use.setAttribute("x",0); + use.setAttribute("y",0); + use.setAttribute("transform",`ref(svg,${lng},${-lat})`); + svgImage.documentElement.appendChild(use); + } + svgMap.refreshScreen(); +} + +function removeUses(){ + var uses = svgImage.getElementsByTagName("use"); + for ( var i = uses.length-1 ; i >=0 ; i--){ + uses[i].remove(); + } +} +``` \ No newline at end of file diff --git a/docs/4-utilizing-existing-webapp-layers/index.md b/docs/4-utilizing-existing-webapp-layers/index.md new file mode 100644 index 0000000..1d194a2 --- /dev/null +++ b/docs/4-utilizing-existing-webapp-layers/index.md @@ -0,0 +1,3 @@ +# Part 4: Utilizing Existing WebApp Layers + +This document explains how to use the various pre-developed [WebApp Layers](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) available for SVGMap.js, which are open source in the svgmapAppLayers repository on GitHub . diff --git a/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md new file mode 100644 index 0000000..b4d3f36 --- /dev/null +++ b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md @@ -0,0 +1,114 @@ +# Copy svgmapAppLayers to your own host and use it + +## Introduction {#introduction} + +Download the contents of [svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) and copy (clone) them to a host you have prepared yourself for use. The limitations that existed when referencing GitHub Pages in the previous chapter do not apply. + +- [Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayersClone/ghAppLayers_clone.html) to see the actual operation. + - (This sample uses only the Ministry of Land, Infrastructure, Transport and Tourism's road traffic information layers, the CSV authoring tool layer, and basemaps.) + +In this chapter, we will copy [the svgmapAppLayers repository](https://github.com/svgmap/svgmapAppLayers) to your own host and use it. There are no [limitations](https://www.svgmap.org/wiki/index.php?title=SvgmapAppLayers_GitHub_Pages%E3%81%AE%E5%88%A9%E7%94%A8#.E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85) as in the previous chapter, but you will need to be responsible for reflecting updates to the svgmapAppLayers repository yourself. + +- [Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayersClone/ghAppLayers_clone.html) to see the actual operation. + - This sample uses only the Ministry of Land, Infrastructure, Transport and Tourism's road traffic information layers, the CSV authoring tool layer, and basemaps. +- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayersClone.zip). + +### Synopsis {#synopsis} + +- Download (or clone) [https://github.com/svgmap/svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers). + - [Download](https://github.com/svgmap/svgmapAppLayers/archive/refs/heads/main.zip) as a zip file (requires extraction). + - For git clone:　git clone git@github.com:svgmap/svgmapAppLayers.git +- Copy the content to the host you operate. +- Edit Container.svg and select the layers you want to include. +- Build a proxy if necessary. + +### Procedire {#procedure} + +- Duplicate the contents of [svgmapAppLayer](https://github.com/svgmap/svgmapAppLayers). + - You can download it from the UI at [https://github.com/svgmap/svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) (```<>```Code button ⇒ [Download ZIP](https://github.com/svgmap/svgmapAppLayers/archive/refs/heads/main.zip)) (unzipping should be done in an environment where symbolic links are enabled (such as Linux)), or Clone using the git command　```git clone git@github.com:svgmap/svgmapAppLayers``` +- You can delete directories for layers other than the one you want to use. + - However, the common library (common library) consists of files linked by symbolic links within each directory, so it cannot be deleted in principle. (It is possible to delete files that are not referenced from the directory of the layer being used.) +- The bbs directory within authoringLayers (authoringLayers/bbs) is an implementation of the function to save authored files to the server using PHP. This tutorial will not cover it, so please delete it to prevent unintended server operation. +- Prepare the HTML for the map page (same as in the previous chapter). +- Place the img and js directories and their contents there. +- Set up a proxy service (same as in the previous chapter) +- Edit Container.svg and keep only the necessary layers. + +### Directory Structure {#directory-structure} + +This sample uses only the Ministry of Land, Infrastructure, Transport and Tourism's road traffic information layers, the CSV authoring tool layer, and basemaps. + +```svg +|--Container.svg +|--appLayers +| |--mlitRoad +| |--... +| +|--authoringLayers +| |--local +| | |--csvLayer +| | |--... +| +| +| +--mappin.png +| +|--basemaps +| +|--... +| +| +--commonLib +| |--... +| +|--js +| |--... +| +|--simpleCORSproxy.php +``` + +### Container.svg {#container-svg} + +This sample uses only the Ministry of Land, Infrastructure, Transport and Tourism's road traffic information layers, the CSV authoring tool layer, and basemaps. + +```svg + + + + + + + + + + + + + + + + + + + + + + + + < + animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=camera" title="Live Camera" data-cross-origin-proxy-required="true" opacity="0.75" class="Ministry of Land, Infrastructure, Transport and Tourism Road Information batch" + +``` + +## Reference information: Structure of a map page that loads svgmap.js {#reference-information} + +By cloning the contents of the following GitHub repository, you can easily create a map web application page using svgmap.js as described in this tutorial. This repository is a GitHub page that publishes one of the official demo pages from svgmap.org, and it comes pre-configured with the extended features of svgmapjs, such as 3D visualization and custom layer management. + +[https://github.com/svgmap/svgMapDemo](https://github.com/svgmap/svgMapDemo) + +However, the CORS proxy in the source code of the GitHub repository mentioned above is configured specifically for the official demo system of svgmap.org. Therefore, please edit the relevant section of the HTML source code to use a CORS proxy that you have prepared separately for your own site. For information on configuring a CORS proxy, please refer to [this link](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#.E3.82.AF.E3.83.AD.E3.82.B9.E3.82.AA.E3.83.AA.E3.82.B8.E3.83.B3.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9). + +Reference: [Official SVGMap demo page from the above GitHub repository](https://svgmap.github.io/svgMapDemo/) \ No newline at end of file diff --git a/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md new file mode 100644 index 0000000..fcde03e --- /dev/null +++ b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md @@ -0,0 +1,239 @@ +# Using svgmapAppLayers on GitHub Pages + +## Introduction {#introduction} + +[The svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) GitHub repository has a [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages) setup. Therefore, some layers can be used simply by linking to the URL published on GitHub Pages. + +To see the actual operation, click on [ghAppLayers_wpxy.html](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html). + +[The svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) repository on GitHub is a collection of [WebApp Layers](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) that provide various features and content usable with SVGMap.js . All are released as open source. (The license is [MPL2](https://www.mozilla.org/en-US/MPL/2.0/) ( [Japanese reference translation](https://www.mozilla.jp/documents/mpl/2.0/) ) (same as SVGMap.js)) + +This repository is also set up as a [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages). The repository root is [https://svgmap.github.io/svgmapAppLayers/](https://svgmap.github.io/svgmapAppLayers/). + +Therefore, in this chapter, we will try to build a map page by directly referencing the layers of svgmapAppLayers, which are published as GitHub Pages. + +[Click here](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html) for actual operation (with proxy set up) +The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayers.zip). + +### Synopsis {#synopsis} + +- The GitHub Pages URL for the root directory of svgmapAppLayers is [https://svgmap.github.io/svgmapAppLayers/](https://svgmap.github.io/svgmapAppLayers/) +- You can check the list of layers registered in svgmapAppLayers in [the source code of Container.svg](https://github.com/svgmap/svgmapAppLayers/blame/main/Container.svg). + - Layers in svgmapAppLayers that cannot directly reference a GitHub Pages webApp have the data-cross-origin-restricted attribute. + - Layers that require cross-origin access proxy configuration have the `data-cross-origin-proxy-required` attribute. + - Using the [Container SVG Generation Support WebApp](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html), you can easily generate Container.svg. +- Build a proxy if necessary. + +### Restrictions {#restrictions} + +- Some layers that perform cross-origin access to data sources require the provision of proxies (explained later in this document). +- Some layers cannot be used with direct references to GitHub Pages (they become available after cloning and using them, as explained in the next chapter). + +### List of Available Layers {#list-of-available-layers} + +- Please refer to [this page](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html). + - This page was generated based on [https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg](https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg). +- Layers with `corsRestricted` set to true cannot be used with direct references to GitHub Pages. +- Layers where corsProxyRequired is true require a proxy to be provided. + +## Try using only the layers that don't require proxies {#try-using-only-the-layers-that-dont-require-proxies} + +- Let's try creating a page that only uses layers that don't require proxies. It's easy because there are no proxy settings. + - It can be operated entirely with static hosting. (It can also be published using a GitHub Pages instance that you have built yourself.) +- Click [here](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers.html) to see the actual operation. + +### Preparing the container (conainer.svg) {#preparing-container-svg} + +- Show [this page](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html#withoutProxy) + - Layers that require a proxy are automatically unchecked. (This includes layers that cannot directly reference GitHub Pages.) +- You can obtain Container.svg by checking the layers you want to display and pressing the Save (or Display) button for Container.svg. This will retrieve a Container with embedded links for direct reference. + +### HTML for the map page (ghAppLayers.html) {#html-for-map-page} + +- There are no significant differences in content compared to previous chapters. + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +## Set up so that layers requiring proxies can also be used {#set-up-so-that-layers-requiring-proxies-can-also-be-used} + +- Let's try creating a page that uses layers that require proxies. + - A proxy service needs to be prepared (it can also be run using PHP; this tutorial provides an example using PHP). +- Click here to see the actual operation. + +### Preparing the container (Container_wpxy.svg) {#preparing-the-container-wpxy-svg} + +- Show [this page](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html) +- Layers that require a proxy are also checked. (Layers that cannot be directly referenced from GitHub Pages are unchecked.) +- Check the layers you want to display, and then press the Save (or Display) button for Container_wpxy.svg to obtain Container.svg. You will get a Container with links that directly reference it. + +### The HTML file for the map page (ghAppLayers_wpxy.html) {#the-html-file-for-the-map-page} + +- The difference is that SVGMap.js is set up to allow the use of a proxy. Please refer to this information for more details. + - The library for handling proxies is imported with `import { CorsProxy } from ' https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js' ;`. + - Set it up with corsProxy.setService + - (In this example, a PHP proxy (./simpleCORSproxy.php) located in the same directory is specified.) + - It's integrated into SVGMap.js using svgMap.setProxyURLFactory. +- The container SVG used is named "Container.svg". + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG + + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### Preparing a proxy {#preparing-a-proxy} + +This time, we'll set up a simple proxy using PHP on a hosting service that supports PHP. + +- The line // Set acceptable referer criteria sets a simple restriction that only allows access from the domain where this HTML is located (svgmap.org). +- For more details, please refer to [the simple proxy implementation example](https://www.svgmap.org/wiki/index.php?title=%E5%8D%98%E7%B4%94%E3%81%AA%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E5%AE%9F%E8%A3%85%E4%BE%8B). + +```php + $value) { + echo "$name: $value
"; + } + foreach ($_GET as $key => $value) { + echo "GET Key:".$key.", Value:".$value."
"; + } + echo "referrer: ".$_SERVER['HTTP_REFERER']; +} +?> +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md index 3ce4297..a9589bc 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md @@ -106,8 +106,8 @@ This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E - 背景地図に共通のクラス名を設定しておく - クラス名で指定した名前がレイヤーリストUIに現れるグループの名前になります。 - さらに、UIでどちらかの背景地図だけが選ばれるようにクラス名にswitchも追加する。(同時に両方とも表示できるようにしたい場合はswitchを追加しない) - - '''class="basemap switch"''' -- デフォルトで表示状態にしたい背景地図以外は'''visibility="hidden"'''を設定する + - ```class="basemap switch"``` +- デフォルトで表示状態にしたい背景地図以外は```visibility="hidden"```を設定する #### ソースコード {#source-code} diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md index 39ffebe..1dc82eb 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md @@ -2,19 +2,19 @@ ## はじめに {#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. +チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html)をクリック。 ### ファイル構造 {#file-structure} -The file structure is as follows: +ファイル構造は以下の通りです： -- [The tutorial3 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/) contains the following files. +- [tutorial3 ディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/) には以下のファイルが含まれています。 - [tutorial3.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html) - - HTML for Tutorial 3. Same content as tutrial1.html. + - チュートリアル3用のhtml。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). + - 以下の4×4(全16)分割したファイルを束ねるsvg。 + - タイリングについては、[SVGMapのタイリングアーキテクチャ](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) @@ -32,103 +32,103 @@ 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 +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip) -### Essential differences from existing frameworks {#essential-differences} +### 既存のフレームワークとの本質的違い {#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. +SVGMapのタイリングは他のフレームワーク(openlayersやleaflet,googlemapsなど)と本質的に考え方が異なっています。そのため既存のフレームワークに慣れた開発者は、その仕組みの違いに戸惑うかもしれませんので、ここで説明したいと思います。 -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. +他の地図フレームワークはあらかじめ決め打ちされたタイリング規則([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)など)を前提とし**フレームワークにこの規則がハードコード**されています。その規則に基づいて構築されたサーバへのアクセスのためのパラメータだけを指定する仕組みとなっています。パラメータを設定すればタイリングされたコンテンツを導入できるので簡単ですが柔軟性に課題があります。 -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. +一方、SVGMapのタイリングはよりプリミティブなもので、タイリング規則は内蔵されていません。(ただしそれは[チュートリアル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)で解説するWebApp Layerとして容易に実装可能です)。それに対して、タイリングの動作を起こすために必要な より基本的な機能が提供され、これを利用して多様なタイリング方式が実現可能です。 -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. +本章では、この機能を用いた最も基本的な静的タイリングを実践してみます。タイル分割ざれたデータの配置情報をインラインで展開したsvgを用意し、ビューアはビューポートとそのコンテナを照合して必要なタイルを取得することで静的なタイリング動作が実現されます。 -[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). +この仕組みの図解は、[こちらのより高度な解説資料](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-in-english) の の[14ページ](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese/14) から [20ページ](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese/20) までを参照してください。[(英語版の資料はこちら)](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). +SVGMapがこのような構成をとっている理由の一つは、上記の [解説資料](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese)にあるような、より高度で効率的なタイリング方式を拡張・実装可能にすることです。 -### Content Structure {#content-structure} +### コンテンツの構造 {#content-structure} ```plaintext tutorial1.html | - +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png (images of map operation UI) + +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png (地図操作UIのイメージ類) | - +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (Javascript library for displaying SVGMap) + +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (SVGMapを表示するjavascriptライブラリ) | - +-Contaiber.svg (Loads an SVG file that serves as a bundle of various data (layers)) + +-Contaiber.svg (様々なデータ(レイヤー)を束ねるための役割を持つ一個のSVGファイルを読み込む) | - +-Coastline.svg (Coastline layer: bundles tiled coastline content) + +-Coastline.svg (海岸線レイヤー：タイル分割された海岸線コンテンツを束ねている） | - +-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) + +-0_0.svg (タイル分割された実際の海岸線コンテンツ） + +-0_1.svg (タイル分割された実際の海岸線コンテンツ） + +-0_2.svg (タイル分割された実際の海岸線コンテンツ） + +-0_3.svg (タイル分割された実際の海岸線コンテンツ） + +-1_0.svg (タイル分割された実際の海岸線コンテンツ） + +-1_1.svg (タイル分割された実際の海岸線コンテンツ） + +-1_2.svg (タイル分割された実際の海岸線コンテンツ） + +-1_3.svg (タイル分割された実際の海岸線コンテンツ） + +-2_0.svg (タイル分割された実際の海岸線コンテンツ） + +-2_1.svg (タイル分割された実際の海岸線コンテンツ） + +-2_2.svg (タイル分割された実際の海岸線コンテンツ） + +-2_3.svg (タイル分割された実際の海岸線コンテンツ） + +-3_0.svg (タイル分割された実際の海岸線コンテンツ） + +-3_1.svg (タイル分割された実際の海岸線コンテンツ） + +-3_2.svg (タイル分割された実際の海岸線コンテンツ） + +-3_3.svg (タイル分割された実際の海岸線コンテンツ） ``` ### tutorial3.html {#tutorial3-html} -Basically the same as tutorial1.html used in Tutorial 1. +基本的に、チュートリアル1で使用したtutorial1.htmlと同様。 -- 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). +- SVGMapのコアプログラムファイル(SVGMapLv0.1_r18module.js)を読み込み、SVGMapの各種APIを利用可能にする。 +- 地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。 +- ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。 + - ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。 + - ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。 + - GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。 +- 中心を表す十字マークを表示。 +- 上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。 ```html SVGMapLevel0.1-Rev14-Draft Tutorial3 Coastline Tiling - + - + - +
- + - + - + - + SVGMapLevel0.1 Rev14 Draft : Tutorial3 Coastline Tiling - + by SVGMap tech. - + - + Lat,Lng: - + lat , lng
@@ -137,14 +137,14 @@ Basically the same as tutorial1.html used in Tutorial 1. ### Container.svg {#container-svg} -- Load an SVG file for each layer you want to display (only Coastline.svg is loaded). +- 表示する各レイヤ用のSVGファイルを読み込む(Coastline.svgのみを読み込んでいる)。 ```svg - + @@ -152,41 +152,41 @@ Basically the same as tutorial1.html used in Tutorial 1. ### 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 . +SVGMapコンテンツの [animation要素](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)によるタイリングを実施している例になります。 -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. +- この例では、4×4(16)にタイル分割したそれぞれのSVGMapファイルを統合しているコンテナコンテンツ。 +- **animation要素**を使用して16個全てのタイルを参照 + - xlink:href属性にタイルコンテンツのリンクを記述 + - x,y,width,height属性にタイルの存在領域を記述 + - この存在領域情報をもとに必要に応じてタイルが読み込まれます(画面で表示している領域にタイルの存在領域が入ると自動的に読み込まれる) + - Note: ∴レイヤリングと異なり、タイリングでのx,y,width,height属性は重要な意味を持ちます。 -#### Placement of each tile {#placement-of-each-tile} +#### 各タイルの配置 {#placement-of-each-tile} **Coastline.svg** -| + | X coordinate small, Small Longitude | .. | .. | X coordinate large, Large Longitude +| + | X座標小 経度小 | .. | .. | X座標小 経度小 |---|---|---|---|---| -| Small Y coordinate, large latitude | 0_0.svg | 1_0.svg | 2_0.svg | 3_0.svg +| Y座標小、緯度大 | 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 +| Y座標大、緯度小 | 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 +- 各タイルの幅、高さ：width,height属性値：width="659.2878" height="631.5991" +- 各タイルの原点（タイル左上隅の座標）：x,y属性値 - 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). +- 注意点：Y座標は地理座標(緯度経度座標)と逆向き、原点位置が上端(北) + - [globalCoordinateSystem要素](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)によるSVG座標と地理座標(緯度経度座標)との関係を参照 -#### About svpMap Tools {#about-svgmap-tools} +#### svgMapToolsについて {#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). +[svgMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials)は大きな地理情報(shapefileなど)からタイリングされたSVGMapコンテンツを生成する機能を持っています。ただし　より高度（高効率）なタイル分割（Quad Tree Composite Tiling）にも対応しています。 -#### Source code {#source-code} +#### ソースコード {#source-code} ```svg @@ -216,10 +216,10 @@ Tiling consists of tile content, where the actual data is stored, and container ``` -### Split SVG files {#split-svg-files} +### 分割されたSVGファイル {#split-svg-files} - 0_0.svg -Areas without map data. +地図データのない部分 ```svg @@ -229,7 +229,7 @@ Areas without map data. ``` - 0_1.svg -Areas without map data. +地図データのない部分。 ```svg @@ -239,7 +239,7 @@ Areas without map data. ``` - 0_2.svg -Areas without map data. +地図データのない部分。 ```svg @@ -367,7 +367,7 @@ Areas without map data. - 1_0.svg -Areas without map data. +地図データのない部分。 ```svg @@ -2840,7 +2840,7 @@ Areas without map data. - 2_3.svg -Areas without map data. +地図データのない部分。 ```svg @@ -3289,7 +3289,7 @@ Areas without map data. - 3_2.svg -Areas without map data. +地図データのない部分。 ```svg @@ -3299,7 +3299,7 @@ Areas without map data. ``` - 3_3.svg -Areas without map data. +地図データのない部分。 ```svg diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md index 1357c0c..00c204d 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md @@ -1,46 +1,45 @@ -# Tutorial 3b: Tiling (Creating static tiles with svgMapTools) +# チュートリアル3b タイリング (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. +前章ではすでに作成済みのタイルを用いていましたが、ここでは [svgMapTools](https://github.com/svgmap/svgMapTools)を用いて、shapefileからタイルデータを作成し表示してみます。実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html)をクリック。 -### File Structure {#file-structure} +### ファイル構造 {#file-structure} -The file structure is as follows: +ファイル構造は以下の通りです： -- The [tutorial3b](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/) directory contains the following files: +- ファイル構成は[tutorial3bディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/)ディレクトリに以下のファイルがあります。 - 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 +- svgMapToolsを使って、地球地図 日本のデータのうちいくつかをタイリングされたSVGMapコンテンツに変換。 + - svgMapToolsが行うタイリング(Quad Tree Composite Tiling)については、[こちらの資料](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese)を参照。 +- 変換したコンテンツを、レイヤーとして表示 -## Tutorial {#tutorial} +## チュートリアル {#tutorial} -### Files Used {#files-used} +### 使用ファイル {#files-used} -- [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) file of used files +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) -### 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. +- この章では、[svgMapTools](https://github.com/svgmap/svgMapTools/) を用いて、shapefileからタイリングされた地図コンテンツを準備し、それを表示します。 +そのため、svgMapToolsの設定を含む[チュートリアルを先ず実施](https://github.com/svgmap/svgMapTools/tree/master/tutorials)してください。 +- 本チュートリアルでは、[国土地理院の地球地図](https://www.gsi.go.jp/kankyochiri/gm_jpn.html)日本のデータ（ファイル形式：shapefile、ベクトル地理データ）を表示してみます。 + - 今回は、海岸線(coasstl)、道路(roadl)、市街地(面(builtupa)と点(builtupp))のデータを　それぞれレイヤーとして表示してみます。 -#### Configuring svgMapTools {#configuring-svgmaptools} +#### svgMapToolsの設定 {#configuring-svgmaptools} -- Complete [the tutorial](https://github.com/svgmap/svgMapTools/tree/master/tutorials) including setting up svgMapTools +- svgMapToolsの設定を含む[チュートリアル](https://github.com/svgmap/svgMapTools/tree/master/tutorials)を実施 -#### 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). +- [地球地図日本サイト](https://www1.gsi.go.jp/geowww/globalmap-gsi/download/data/gm-japan/gm-jpn-all_u_2_2.zip) から、 [全レイヤの入ったzipファイル](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. +Shapefileから、SVGMapのタイリングされたコンテンツを生成します。 -Below is an example run on Windows. +以下はWindowsで実行した例です。 - ```cd [PATH_TO_DATA]``` - ```mkdir roadl``` @@ -53,51 +52,51 @@ Below is an example run on Windows. - ```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.``` +- ```[PATH_TO_DATA]\coastl, [PATH_TO_DATA]\roadl, [PATH_TO_DATA]\builtupの内容を、全てホストに転送``` 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). +- [PATH_TO_TOOLS]はsvgMapToolsのtoolsディレクトリ +- [PATH_TO_DATA]はダウンロードしたデータを解凍したディレクトリ +- builtupp_jpnおよびbuiltupa_jpnは、データサイズが大きくないので、小縮尺用のビットイメージタイルを生成していません。（タイリングも実際には不要です） ### 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). +基本的に、[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](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} -- 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. +- [チュートリアル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](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)と基本的に違いはありません。 +- ただし、今回は海岸線レイヤー、道路レイヤー、市街地(面・点)レイヤーとも、タイリングされたデータになっています。 +- 各レイヤーを表す**animation要素**の参照先は、svgMapToolsで生成されたタイリングされたSVGMapコンテンツのルートのファイルになります。 +- ベクトルデータをクリッカブルにするために、**class**属性に、**clickable**を加えています。 +- 加えて、OpenStreetMapも非表示状態のレイヤーとして一番下に追加してあります。 ```svg - + - - + + - - + + - - + + - - + + ``` -### The structure of tiled content generated by svgMapTools {#structure-of-tiled-content} +### 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. +- レイヤーのルートとなるコンテンツ(この例では海岸線データで、coastl_jpn.svg)から、階層的に全てのベクトルデータ(.svg形式～大縮尺表示用)とラスターデータ(.png形式～小縮尺表示用)が参照されています。 +- .svg形式のデータのうち、ファイル名が*cont*のものはベクトルグラフィックスデータはなく参照データだけとなっており、子・孫のコンテンツが参照されています。 ```plaintext coastl_jpn.svg diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md index 90a5347..e58b59b 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md @@ -1,85 +1,84 @@ -# Tutorial 4: Bitmap Image Map Display +# チュートリアル4 Bitmapイメージ地図表示 -## 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 . +チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html)をクリック。 -### File Structure {#file-structure} +### ファイル構造 {#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. +- ファイル構成は[tutrial4ディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html)ディレクトリに以下のファイルがあります。 - [tutorial4.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) - - HTML for Tutorial 4. Same content as tutrial1.html. + - チュートリアル4用のhtml。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. + - チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む - [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/). + - チュートリアル2cと同様のOpenStreetMapレイヤー +- 重ね合わせるビットマップイメージSVGファイル。 + - こちらのツールを使用して作成したもの。[ビットイメージの地図画像を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) +- 実際の動作は[こちら](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4.zip)をクリック。 +- 出典：[首都直下地震の被害想定 7ページ](https://www.bousai.go.jp/kyoiku/bousai-vol/drill/h26/tokyo/tokyo03_kato.pdf#page=4) ### tutorial4.html {#tutorial4-html} -Basically the same as tutorial2b.html used in Tutorial 2b . +基本的に[チュートリアル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と同様。 -- 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. +- SVGMapのコアプログラムファイル(SVGMapLv0.1_r18module.js)を読み込み、SVGMapの各種APIを利用可能にする。 +- レイヤーリストUI用のCSSを読み込み +- 地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。 +- ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。 + - ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。 + - ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。 + - GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。 +- 中心を表す十字マークを表示。 +- 上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。 +- レイヤーリストUI用のdiv要素(id="layerList"を設置) ```html SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG - + - + - + - +
- + - + - + - + SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG - + by SVGMap tech. - + - + Lat,Lng: - + lat , lng - +
@@ -88,8 +87,8 @@ Basically the same as tutorial2b.html used in Tutorial 2b . ### 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). +- [チュートリアル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)と同様に、ビットマップイメージのbitmapImage.svg、dynamicOSM_r11.svgをレイヤーとして読み込んでいます。 +- [チュートリアル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)と同様に背景地図を2つ(OpenStreetMapとCoastline.svg)選べるようにしています。 ```svg @@ -108,35 +107,35 @@ Basically the same as tutorial2b.html used in Tutorial 2b . ``` ### 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. +- 重ね合わせるビットマップイメージSVGファイル。 + - ビットイメージの地図画像をSVGMapのレイヤー化するツールを使用して作成。[こちらのツール](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/) + - オリジナルのビットイメージは本章冒頭記載の文書から抽出 -#### Relationship between longitude and latitude and XY coordinates of SVG content {#relationship-between-lon-lat-xy-coord} +#### 経度緯度とSVGコンテンツのXY座標との関係 {#relationship-between-lon-lat-xy-coord} -```globalCoordinateSystem transform``` Specified by the element attributes (six values ​​of the linear transformation matrix) +```globalCoordinateSystem``` 要素の ```transform``` 属性（一次変換マトリクスの６つの値）で指定されます ``` -Xsvg = a * longitude + c * latitude + e -Ysvg = b * latitude + d * latitude + f +Xsvg = a * 経度 + c * 緯度 + e +Ysvg = b * 緯度 + d * 緯度 + f ``` -Since the values ​​of the linear transformation matrices a, b, c, d, e, and f are 1, 0, 0, -1, 0, 0 respectively, +一次変換マトリクスa,b,c,d,e,fの値がそれぞれ1,0,0,-1,0,0であることから、 ``` -Xsvg = longitude -Ysvg = -latitude +Xsvg = 経度 +Ysvg = -緯度 ``` -#### Image element parameters {#image-element-parameters} +#### image要素のパラメータ {#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)) +- image要素によってビットイメージを配置しています + - ```xlink:href="[ビットイメージのURL]"``` 配置するビットイメージのURL + - ```x="139.1063918412553"``` 配置するX原点＝西端の経度（139.10..°） + - ```y="-35.90355823638255"``` 配置するX原点＝北端の緯度（35.903..°）をマイナスにした値 + - ```width="0.8140711890480361"``` 幅（経度で0.81°） + - ```height="0.41815015611484085"``` 高さ (緯度で0.41°） + - ```preserveAspectRatio="none"``` ビットイメージの実際のサイズのアスペクト比を変えてでも上記指定領域にぴったりと配置する　([参考：SVG spec](https://www.w3.org/TR/SVG2/coords.html#PreserveAspectRatioAttribute)) ```svg @@ -155,10 +154,10 @@ Ysvg = -latitude ``` -### dynamicOSM_r11.svg (and dynamicOSM_r11.html) {#dynamicosm-r11-svg} +### dynamicOSM_r11.svg (および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). +[チュートリアル2cのdynamicOSM_r11.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%AB2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29)と同じものです。 ### 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). \ No newline at end of file +[チュートリアル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 From 4cb1ce5b386b812c3b66fe885669f5fb29971d5e Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Tue, 17 Mar 2026 22:09:20 -0400 Subject: [PATCH 2/9] renaming scheme --- .../current/{basic => 1-basic}/index.md | 0 .../current/{basic => 1-basic}/tutorial-1/index.md | 0 .../current/{basic => 1-basic}/tutorial-2a/index.md | 0 .../current/{basic => 1-basic}/tutorial-2b/index.md | 0 .../current/{basic => 1-basic}/tutorial-2c/index.md | 0 .../current/{basic => 1-basic}/tutorial-3/index.md | 0 .../current/{basic => 1-basic}/tutorial-3b/index.md | 0 .../current/{basic => 1-basic}/tutorial-4/index.md | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/index.md (100%) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/tutorial-1/index.md (100%) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/tutorial-2a/index.md (100%) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/tutorial-2b/index.md (100%) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/tutorial-2c/index.md (100%) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/tutorial-3/index.md (100%) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/tutorial-3b/index.md (100%) rename i18n/ja/docusaurus-plugin-content-docs/current/{basic => 1-basic}/tutorial-4/index.md (100%) diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/index.md diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-1/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-1/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2a/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2a/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2a/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2a/index.md diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2b/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2b/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2b/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2b/index.md diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2c/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-2c/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2c/index.md diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3/index.md diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3b/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-3b/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3b/index.md diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-4/index.md similarity index 100% rename from i18n/ja/docusaurus-plugin-content-docs/current/basic/tutorial-4/index.md rename to i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-4/index.md From c83b02486e84aae6bbc867e4cf5064068f93517d Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Tue, 17 Mar 2026 22:29:36 -0400 Subject: [PATCH 3/9] removed folder --- docs/basic/tutorial-1/index.md | 2924 ------------------------------- docs/basic/tutorial-2a/index.md | 455 ----- docs/basic/tutorial-2b/index.md | 401 ----- 3 files changed, 3780 deletions(-) delete mode 100644 docs/basic/tutorial-1/index.md delete mode 100644 docs/basic/tutorial-2a/index.md delete mode 100644 docs/basic/tutorial-2b/index.md diff --git a/docs/basic/tutorial-1/index.md b/docs/basic/tutorial-1/index.md deleted file mode 100644 index 8799b7e..0000000 --- a/docs/basic/tutorial-1/index.md +++ /dev/null @@ -1,2924 +0,0 @@ -# Tutorial 1: Coastal Map Display - -## Introduction {#introduction} - -This is a tutorial for displaying Japan's coastline. [Click here to see it in action](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html). - -### File Structure {#file-structure} - -The following files are present in the tutorial1 directory. This section explains how to download the files used in the tutorial. - -- [tutorial1.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html) - - Loads the SVGMap core program files (SVGMapLv0.1_r17.js and SVGMapLv0.1_LayerUI2_r4.js) to enable the use of SVGMap's various APIs. - - Defines the map display area (using a DIV element) and loads the SVG file (Containers.svg) that groups the layers to be displayed (the layers automatically set to Visible by the SVGMap core program above will be displayed). - - Zoom up, zoom down, and GPS buttons are displayed and clicked (calling the respective API of the SVGMap core program). - - Zoom up the map by calling the svgMap.zoomup() API. - - Zoom down the zoom down button: svgMap.zoomdown() Zoom down the map by calling the API. - - GPS button: svgMap.gps() By calling the API, zoom up and display around the current location (only if the position of the PC or smartphone can be identified). - - Displays a cross mark representing the center. - - Latitude and longitude display on the map shown by the cross mark above (actually, the latitude and longitude of the center of the map are displayed when the map is moved). -- [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Container.svg) - - Loads the SVG files for each layer to be displayed (only Coastline.svg is loaded) -- [Coastline.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Coastline.svg) - - Defines Japan's coastline data using numerous lines. - -## Tutorial {#tutorial} - -### Files Used {#files-used} - -The files used in this tutorial can be obtained from the following locations: - -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1.zip) -- [https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/) : HTML page for displaying the map and map content - - [img directory](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/img/) : Images and icons - - [js directory](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/js) : SVGMap framework library and stylesheets (SVGMap.js) - - Note: The SVGMap.js open-source repository is here ([GitHub](https://github.com/svgmap/svgMapLv0.1)) - -#### Content Structure {#content-structure} - -```plaintext -tutorial1.html - | | - +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png - | | - +-js/layerListStyle.css (default style sheet for map display page) (Note: The javascript library for displaying SVGMap is registered in jedelivr (CDN that publishes open source javascript library on the Internet). - | | - +-Container.svg (one SVG file with a role to bind various data (layers) is loaded) - | | - +-Coastline.svg (map content (climbing content (clicoastia)) that is actually displayed) -``` - -#### Note: Downloading the content used in this tutorial {#downloading-content} - -- Download the ZIP archive file mentioned above, or -- Download directly from the sample source directory - - Use the wget (wget2) command with the -r option - - `wget -r https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/` - - `wget2 --http2=off -timeout=60 --max-threads=1 -r https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/` - - `index.html*` There is no need to create a directory for each download. - -##### Windows (using wget2) {#wget2} - -[wget2](https://gitlab.com/gnuwget/wget2/) is also available for Windows. Locate and download the Windows executable: wget2.zip from the [wget2 release URL](https://gitlab.com/gnuwget/wget2/-/releases). - -- Use it in Command Prompt or PowerShell. -- Since the wget2.exe file is contained within the zip archive, either add it to your path or navigate to the directory where you saved the exe file using `cd` before executing it. - -### Placing content files on the server {#content-files-on-server} - -This tutorial runs on a classic static web host (such as Apache). - -- Place the tutorial distribution files in a directory on your static web host, using a suitable name. - - Open the placed content in a web browser (such as Chrome) using the URL provided for the static web host. - - **Important**: Browser caching can cause confusion during trial and error. Practice with Developer Tools open and the cache clearing option enabled in their settings. (Cache disabling applies to the window where DevTools is open) - - Chrome setup method: From the window displaying the practice content, open DevTools (CTRL+SHIFT+I, Settings menu (︙) - More Tools - Developer Tools) ⇒ Settings (gear icon top-right) ⇒ Network (while DevTools is open) ⇒ Disable cache. - -Standalone execution is also possible on the terminal PC (though an internet connection is required). - -- Note: Insufficient validation -- Place the tutorial distribution files in an appropriate directory (folder). -- **Important**: Open a Chrome browser with the `--allow-file-access-from-files` option and open index.html here to enable operation. - - The `--allow-file-access-from-files` option is a development launch option that allows Chrome to read local files. If Chrome is already running, you must close it completely before launching again. - - Windows: `start chrome --allow-file-access-from-files --auto-open-devtools-for-tabs` - - linux: `google-chrome --allow-file-access-from-files --auto-open-devtools-for-tabs` - - macos: `open -a “Google Chrome” --args --allow-file-access-from-files --auto-open-devtools-for-tabs` (unverified) - - Disable the browser cache beforehand. - -### tutorial1.html {#tutorial1-html} - -- Accessing this HTML file in a web browser displays map content with a user interface. -- **SCRIPT** element - - SVGMap uses a library (SVGMap.js) to display map content. - - Load the SVGMap.js program file (SVGMapLv0.1_r18module.js) from the CDN (jsdelivr) to enable SVGMap's various APIs. - - Adds the svgMap object as a member of the window global object. - - If you want to load the library from your own host instead of the CDN, copy and use the svgmapjs repository. -- **mapcanvas** Defines the map display area (using a DIV) with the ID “mapcanvas”. The data-src attribute specifies the SVG file (Containers.svg) that SVGMap.js loads. -- Define the display and click actions for the zoom up, zoom down, and GPS buttons (each calls the corresponding API in SVGMap's core program). - - img element with id="zoomupButton": Zoom up button: Calls the svgMap.zoomup() API to zoom up the map. - - img element with id="zoomdownButton": Zoom Down Button: Calls the svgMap.zoomdown() API to zoom out the map. - - img element with id="gpsButton": Calls the svgMap.gps() API to zoom in and center the map on the current location (the position of the PC or smartphone, if detectable). -- img element with id="centerSight": Displays a crosshair mark indicating the center. -- (Optional) span element with id="centerPos": Displays the latitude and longitude on the map where the crosshair mark is pointing (actually displays the latitude and longitude of the map's center when the map moves). - -```html - - - SVGMapLevel0.1-Rev14-Draft Tutorial1 Coastline - - - - - - - - - - -
-
- - - - - - - - SVGMap.js : Tutorial1 Coastline - - by SVGMap tech.< - /font> - - - - Lat,Lng: - - lat ,lng -
- - -``` - -### Container.svg {#container-svg} - -The single SVG content loaded first by SVGMap.js. This content does not contain actual map data itself; its role is to reference various map contents (called layers) and bundle them together into a single map. - -It loads the SVG files (in SVGMap content format) for each layer to be displayed using the [animation element](#animation-element) (here, only Coastline.svg is loaded). - -```svg - - - - - - - - -``` - -#### SVGMap content format {#svgmap-content-format} - -The SVGMap content format is essentially SVG format data, with some extensions (one of which is required): - -##### Required extension: globalCoordinateSystem element {#container-svg} - -The following globalCoordinateSystem element is required. (The SVGMap content must describe its relationship to the geographic coordinate system as a map.) - -`` - -##### srsName {#srs-name} - -Specify the spatial reference system (geographic coordinate system) via URL. Enter ‘[http://purl.org/crs/84](http://purl.org/crs/84)’. (Indicates WGS84 system) (Effectively fixed at this value). - -##### transform {#transform} - -The coordinate transformation coefficients between geographic coordinates and the SVG coordinates of this content are described by a linear coordinate transformation matrix (values a, b, c, d, e, f). The format follows that of an SVG transformation matrix (matrix(a,b,c,d,e,f)). (geo denotes the geographic coordinate system, svg denotes the coordinate system of the SVG document) - -```plaintext -svgX = a * geoX + c * geoY + e -svgY = b * geoX + d * geoY + f -``` - -Note that in computer graphics coordinate systems like SVG, the Y-axis points downwards, whereas in geographic coordinates, the Y-axis (latitude axis) generally points upwards. Consequently, the coordinate transformation coefficient b value will be negative.　Longitude is treated as geoX, latitude as geoY. - -Describing the coordinates of SVG content in the form longitude,-latitude is the simplest approach. In that case, it would be written as matrix(1,0,0,-1,0,0). - -##### animation element {#animation-element} - -- The [SVG1.2Tiny animation element](https://www.w3.org/TR/SVGTiny12/multimedia.html#AnimationElement) is used to load SVG content. - - Note: This is not the [animate element](https://www.w3.org/TR/SVGTiny12/animate.html). -- There are two patterns for loading SVG content: layering and tiling. - - xlink:href attribute: Sets the link to the SVG content to be loaded. - -##### Layering {#layering} - -- [Tutorial 2b](../tutorial-2b/): Specific Examples - - `x, y, width, height` attributes: Set the maximum area a layer can occupy (mandatory attributes) - - In layering, you needn't concern yourself too much with this; simply set very large areas such as -30000,-30000,60000,60000. - - `title` attribute: Layer name. Layer names must not duplicate those of other layers. (Required attribute) - - `visibility` attribute: Sets the display state (cannot be changed from the initial state unless a layer list UI is implemented). Visible by default. - - `class` attribute: Enables grouping in the layer list UI. Also controls clickable functionality for other vector shapes. [Please refer to the manual](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B). (Optional). - - The order of layers is such that layers in lower rows appear above layers in higher rows. SVG Painters Model - -##### Tiling {#tiling} - -Explained in [Tutorial 3](../tutorial-3/index.md). - -##### Other enhancements {#other-enhancements} - -- Non-scaling object (representation of Point Geometry) explained in [Tutorial 2](../tutorial-2a/#non-scaling-object) - -### Coastline.svg {#coastline-svg} - -- The Japanese coastline data is defined by numerous lines. -- Since the transform of the globalCoordinateSystem is matrix(100,0,0,-100,0,0), the values described are multiplied by 100 for latitude and longitude (latitude is -100). - -The method for creating this data itself will be explained in a separate tutorial. - -
-Click to expand and see full SVG source code - -```svg - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < -path -d="M13113.7497,-3475.8469L13113.7497,-3475.8469"/> d="M13457.0007,-3476.0265L13476.0803,-3476.2066"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - d="M13411.7096,-3447.2866L13411.7096,-3447.2866"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < -path -d="M13339.8499,-3437.7602L13339.8499,-3437.7602"/> d="M13358.5602,-3437.7468L13358.5602,-3437.7468"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < -path -d="M13273.7701,-3415.8001L13273.7701,-3415.8001"/> d="M13481.16,-3415.6467L13481.16,-3415.6467"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < -path -d="M13399.2401,-3342.7601L13399.6796,-3342.6399"/> d="M13399.6796,-3342.6399L13401.0696,-3342.1867"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - < -path -d="M13183.8104,-3317.5602L13183.8104,-3317.5602"/> d="M13025.7401,-3319.7933L13027.7298,-3316.9132"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -
diff --git a/docs/basic/tutorial-2a/index.md b/docs/basic/tutorial-2a/index.md deleted file mode 100644 index 75b4de6..0000000 --- a/docs/basic/tutorial-2a/index.md +++ /dev/null @@ -1,455 +0,0 @@ -# Tutorial 2a: Coastline Map and Airport POI Display - -## Introduction {#introduction} - -This is a tutorial that adds airport POIs [(Points of Interest)](https://ja.wikipedia.org/wiki/Point_of_interest) to the content of [Tutorial 1](../tutorial-1/). - -[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html) to see it in action. - -### File Structure {#file-structure} - -The [tutorial2 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2) contains the following files. The file structure is as follows: - -- [tutorial2.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html) - - HTML for Tutorial 2. Same content as tutorial1.html. -- Container.svg - - Load an SVG file for each layer you want to display (only Coastline_Airport.svg is loaded) -- [Coastline_Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/Coastline_Airport.svg) - - Adds airport information to Coastline.svg in Tutorial 1. - - Defines the airport display image and describes the actual airport information (latitude/longitude, image used, title, information displayed upon clicking). - - HTTP links can also be described alongside airport information. In this case, the following actions become possible: - - Clicking an airport image navigates to another webpage. - - Adding a hash to the current URL changes the map display position. - - The above settings can be configured for a single airport (a dialogue box appears after clicking, allowing selection between displaying airport information or navigating to the URL). - -## Tutorial {#tutorial} - -### Files Used {#files-used} - -[ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2.zip) of the files used in this tutorial. - -### Content Structure {#content-structure} - -```plaintext -tutorial2.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 (Loads an SVG file that serves as a bundle for various data (layers)) - | - +-Coastline_Airport.svg (actual map content (coastline and airport points)) -``` - -### tutorial2.html {#tutorial2-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. -- Defines the map display area (using a DIV) and loads an SVG file (Containers.svg) that contains the layers to be displayed (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 the map by calling the svgMap.zoomup() API. - - Zoom down the zoom down button: svgMap.zoomdown() Zoom down the map by calling the API. - - GPS button: svgMap.gps() By calling the API, zoom up and display around the current location (only if the position of the PC or smartphone can be identified). -- 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 Tutorial2 Coastline & Air Port - - - - - - - - - - -
-
- - - - - - - - SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port - - by SVGMap tech. - - - - Lat,Lng: - - lat , lng -
- - -``` - -### Container.svg {#container-svg} - -Load an SVG file for each layer you want to display (only Coastline_Airport.svg is loaded). - -```svg - - - - - - - - -``` - -### Coastline_Airport.svg {#coastline-airport-svg} - -- Added airport information to Coastline.svg in Tutorial 1. -- **Drawing proceeds from the top row**, so first write the background (coastline), then write the point data (additional information). - -#### How to write point data (POI) {#how-to-write-point-data} - -##### Defining icons using the defs element {#defining-using-defs-element} - -- **Within the defs element**, define the icons to be used within that SVG file. -- Each individual icon is defined using a **g** element placed as its child element. - - Assign an ID to the g element to reference the icon. - - Describe the actual icon within the g element. Here, an image element is used to employ a bitmap image as the icon. -- For bitmap icons using the image element: - - Specify the icon size using the width and height attributes. - - Use the x and y attributes to define the origin (anchor point). - - This determines which part of the bitmap icon corresponds to the point geometry's coordinates. For instance, when using an icon shaped like a pin, it is advisable to set the pin's tip as the origin. - - Specifies the shift amount of the POI icon's origin relative to the bitmap image's origin (top-left). The shift value is typically negative. - - In this sample, for an icon size of 19x27, specifying x="-8" y="-25" sets the origin to (almost) the bottom-left corner, centred. - -##### Placing POI data using the use element {#poi-data-use-element} - -- References the icon defined by the **xlink:href** attribute. -- Coordinates for point data are set in the **transform** attribute for use with the feature described later (Non-scaling Object) (set x and y attributes to 0). -- Describe metadata in the **content** attribute, separated by commas. This metadata is displayed when the icon is clicked. - - Define the airport display image and describe the actual airport information (latitude/longitude, image used, title, information displayed on click). - - Using the **property** attribute of the **svg** element (documentElement), metadata attribute names can be specified in CSV format to enable organised display upon clicking. - - The number of entries in the CSV for the **property** attribute (metadata names) must match the number of entries in the CSV for the **content** attribute (metadata values). - -- Note: - - By embedding the use element within the **a** element, hyperlinks can be described alongside airline information. In this case, the following functionality is possible: - - Clicking the airport image will navigate to another webpage. - - The above functionality can be configured for a single airport (a dialogue box will appear after clicking, allowing selection between displaying airline information or navigating to the URL). - -##### Non-scaling Object {#non-scaling-object} - -- The non-scaling object notation (objects whose size on screen remains unchanged when scaled) [specified in SVG 1.2 Tiny](https://www.w3.org/TR/SVGTiny12/coords.html#transform-ref) is supported. This is used for describing POIs (point geometries). -- Using the syntax `transform=‘ref(svg,x,y)’`, an object with this transform becomes a non-scaling object. The referenced icon is then placed at the specified x,y coordinates as a non-scaling object. - - In this example, the globalCoordinateSystem element has `transform="matrix(100,0,0,-100,0,0)"` set, establishing the relationship `x = 100 * longitude, y = -100 * latitude`. ([Reference](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)) - - Therefore, `transform=‘ref(svg,14179.54536,-4539.8095)’` corresponds to point data with latitude = 45.398095 and longitude = 141.7954536. - -#### Source Code {#source-code} - -
-Expand to see source code - -```svg - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -
diff --git a/docs/basic/tutorial-2b/index.md b/docs/basic/tutorial-2b/index.md deleted file mode 100644 index c8e126c..0000000 --- a/docs/basic/tutorial-2b/index.md +++ /dev/null @@ -1,401 +0,0 @@ -# Tutorial 2b: Displaying Coastline Maps and POIs (Airports) (Layering) - -## Introduction {#introduction} - -This tutorial demonstrates how to separate POI (airport) and coastline maps into distinct files and display them using layering. - -[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html) to see it in action. - -### File Structure {#file-structure} - -The [tutorial2b directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/) contains the following files. The file structure is as follows: - -- [tutorial2b.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html) - - HTML for Tutorial 2b. Compared to tutorial1.html, it incorporates a layer list and On/Off UI (the div element with id="layerList"). -- [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Container.svg) - - Loads the SVG files for each layer to be displayed (loads two files/layers: Airport.svg and Coastline.svg). -- [Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Airport.svg) - - Airport information added as a separate file. -- [Coastline.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Coastline.svg) - - Coastline.svg from Tutorial 1 - -## Tutorial {#tutorial} - -Implementing layering enables users to toggle the visibility of each layer as required. It also facilitates the encapsulation and organisation of data per layer, thereby improving development efficiency. In this chapter, we shall attempt layering by treating the background map and overlay information (airport POI) as separate layers. - -### Files Used {#files-used} - -[ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b.zip) of used files. - -### Content Structure {#content-structure} - -```plaintext -tutorial2b.html - | - +-img/zoomup.png, img/zoomdown.png, im/gps.png, im/Xcursor.png (Images of the map operation UI) - | - +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (JavaScript library for displaying SVGMap) - | - +-Container.svg (A single SVG file that bundles various data (layers). Unlike 2a, this references two layers) - | - +-Coastline.svg (Actual map layer content (coastline)) - | - +-Airport.svg (Actual map layer content (airport points)) -``` - -### tutorial2b.html {#tutorial2b-html} - -Add a layer list display and control UI to tutorial1.html used in Tutorial 1. (Note: Layering itself remains possible without this UI; only the layer visibility toggle UI becomes unavailable.) - -- Place the layer list UI - - Place an empty div element with id="layerList" (the id name is defined by the framework) - - Load the stylesheet for this layerList div element ([#layerListStyle.css](#layer-list-style-css)) - -#### Source code {#source-code} - -```html - - -SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port - - - - - - - - - - - - - -
-
- - - - - - - - SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port - - by SVGMap tech. - - - - Lat,Lng: - - lat , lng - -
-
- - -``` - -### layerListStyle.css {#layer-list-style-css} - -Stylesheet for the div element (id:layerList) for the layer list UI. - -#### Source Code {#source-code} - -```css -/** Layer List UI Stylesheet **/ - body { - font-family: Meiryo; - } - #layerTable{ - background:#ffE0E0; - border: 2px solid #bbb; - } - .layerItem{ - background-color: white; - } - .noGroup{ - background-color: #fff0f0; - } - #layerList{ - background-color: #ffff80;opacity:0.8;font-size:12px; - } - - #layerList button{ - padding: 1px 3px; - } - -``` - -### Container.svg {#container-svg} - -- Load the SVG files for the two layers to be displayed as layers: - - Coastline.svg - - Airport.svg -- The layer order is such that layers listed lower appear above those listed higher. SVG Painters Model -- Layer grouping is possible via the class specification in the layer list UI -- Layers are referenced via the animation element -- The initial display state is set via the visibility attribute (If no layer list UI is present, the initial display state cannot be altered) -- Set x, y, width, and height values to the maximum possible area - -```svg - - - - - - - - - - -``` - -### Coastline.svg {#coastline-svg} - -Coastline.svg is identical to [Tutorial 1's Coastline.svg](../tutorial-1/#coastline-svg) (Reusing the same data improves development efficiency). - -### Airport.svg {#airport-svg} - -This SVG file was created by extracting only the airport point section from the Coastline_Airport.svg used in Tutorial 2a. - -#### Source Code {#source-code} - -
-Expand to see source code - -```svg - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -
\ No newline at end of file From dc8664dbc1a80c315982f79ffd8d4943b4a364ad Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Thu, 19 Mar 2026 21:12:47 -0400 Subject: [PATCH 4/9] all english --- .../tutorial-10/index.md | 266 ++++++++ .../tutorial-11/index.md | 157 +++++ .../tutorial-5/index.md | 4 + .../tutorial-6/index.md | 4 + .../tutorial-7/index.md | 365 +++++++++++ .../tutorial-8/index.md | 495 +++++++++++++++ .../tutorial-9/index.md | 584 ++++++++++++++++++ .../tutorial-9b/index.md | 111 ++++ docs/intro.md | 2 +- src/images/800px-Raster.png | Bin 0 -> 35959 bytes 10 files changed, 1987 insertions(+), 1 deletion(-) create mode 100644 docs/2-webapp-layer-edition/tutorial-10/index.md create mode 100644 docs/2-webapp-layer-edition/tutorial-11/index.md create mode 100644 docs/2-webapp-layer-edition/tutorial-7/index.md create mode 100644 docs/2-webapp-layer-edition/tutorial-8/index.md create mode 100644 docs/2-webapp-layer-edition/tutorial-9/index.md create mode 100644 docs/2-webapp-layer-edition/tutorial-9b/index.md create mode 100644 src/images/800px-Raster.png diff --git a/docs/2-webapp-layer-edition/tutorial-10/index.md b/docs/2-webapp-layer-edition/tutorial-10/index.md new file mode 100644 index 0000000..af0267e --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-10/index.md @@ -0,0 +1,266 @@ +--- +sidebar_position: 10 +--- + +# Tutorial 10: Converting WebApp Layer Mesh Data to Bit Image + +## Introduction {#introduction} + +Mesh data (grid data), also known as [raster data](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%AB8#Raster), is almost equivalent to bit image data used as web content. Therefore, we will build a web application that dynamically converts mesh data into bit image content (PNG format) and displays it on a map screen. This offers performance advantages. + +To actually do it, click on [mesh3.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html). + +### Source Code {#source-code} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/) +- [The geoid height data](https://fgd.gsi.go.jp/download/geoid.php) (TEXT data) published by the Geospatial Information Authority of Japan is read using the fetch API and stored in a variable (Object). +- Construct a bit image using the canvas element API. +- Convert it to a dataURI, turn it into an SVG image element, and place it on the map. + +## Tutorial {#tutorial} + +Mesh data (Grid data),also known as [raster data](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%AB8#Raster), is in a format almost identical to the bit image data formats (such as PNG and JPEG) commonly used for web content. Therefore, we will build a web application that dynamically converts mesh data into bit image content (PNG format) and displays it on a map screen. This offers performance advantages. + +The distinctive code is found in the webApp linked to the layer. + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh3.zip). + +### Data to Use {#data-to-use} + +We will use the geoid height data (TEXT data) published by the Geospatial Information Authority of Japan on [this page](https://fgd.gsi.go.jp/download/geoid.php). + +[Actual data to be used](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/gsigeo2011_ver2_1.asc) + +The detailed specifications of this data are described in the package documentation (**asc_instruction_sheet.pdf**) distributed on the above website , but it is basically in text [Raster format](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%AB8#Raster). + +Note that the data format uses spaces as delimiters, not commas, and each Raw (column) does not end on a single line, but rather breaks every 255 characters. + +Regarding the data itself, it's important to note the difference between the definition of the grid data's origin and the origin when it's visualized as a bit image. (See the two points below) + +- Because the Y (latitude) axis is oriented in the opposite direction, the origin of the original raster data is at the southern end, and the origin of the bit image is at the top end. +- The origin of raster data is the center position of the pixel when it is visualized as a bit image, whereas the origin when positioning a bit image is the upper left corner of the pixel. + +![Explination Diagram](../../../src/images/800px-Raster.png) + +[Explination Diagram](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3_raster_exp.svg) + +### [mesh3.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html) {#mesh3-html} + +Nothing has changed from before. + +### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/Container.svg) {#container-svg} + +Nothing has changed from before. + +### [rasterMesh.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.svg) {#raster-mesh-svg} + +- The WebApp is blank content linked to (rasterMesh.html below). +- This specifies that the webApp window should appear along with the display. +- Nothing has changed from before. + +```svg + + + + + +``` + +### [rasterMesh.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.html), [rasterMesh.js](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.js) {#raster-mesh} + +This process dynamically generates a bit image using the raster data of the loaded text, and then visualizes it by pasting it onto the associated rasterMesh.svg file. + +- ```onload=async function()``` + - ```await buildData()``` Asynchronous function that reads mesh data and saves it to a global variable. + - ```var duri = buildImage()``` + - Use the specified Canvas element for the task, generate a bit image from the loaded data, and output it as a [dataURI](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs). + - ```canvas.toDataURL()``` The [toDataURL](https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL) method of the canvas object generates a PNG bit image as the DataURL. + - ```imageGeoArea``` As noted in the [data precautions](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%AB10#.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B.E3.83.87.E3.83.BC.E3.82.BF), we are calculating the area information needed to map the bit image to SVG coordinates. + - ```buildSvgImage()``` The generated bit image (dataURI) and its region information are used to embed the bit image into the SVG DOM associated with the webApp. + - ```svgImage``` The DOM (Document object) of the SVG content associated with this web application is predefined. + - ```svgMap.refreshScreen()``` Once asynchronous loading, data generation, and SVGMap DOM editing are complete, explicitly trigger a redraw to reflect the changes on the screen. ([Reference](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90)) + +rasterMesh.js + +```js +// Description: +// MeshData Visualizer. +// +// History: +// 2022/02/14 : 1st rev. + +// Global variable to hold the read ASCII data +var geoidGrid=[]; +var dataProps; + +onload = async function(){ + // Read mesh data and save it to a global variable + await buildData(); + // Generate a bit image as a dataURI from the loaded data. + var duri = buildImage(geoidGrid,document.getElementById("geoidCanvas")); + // Geographic range of the generated image + // Note that when it becomes an image, the grid points become the centers of the pixels in the image! + var imageGeoArea={ + lng0: dataProps.glomn - dataProps.dglo/2, + lat0: dataProps.glamn - dataProps.dgla/2, + lngSpan: dataProps.nlo * dataProps.dglo, + latSpan: dataProps.nla * dataProps.dgla + } + if ( typeof(svgMap)=="object" ){ + buildSvgImage(duri,imageGeoArea); // Generate SVG content + svgMap.refreshScreen(); + } +} + +async function buildData(){ + var gtxt = await loadText("gsigeo2011_ver2_1.asc"); + + gtxt = gtxt.split("\n"); + + dataProps = getHeader(gtxt[0]); + var gx=0, gy=0; + var geoidGridLine=[]; + for ( var i = 1 ; i < gtxt.length ; i++){ + var na = getNumberArray(gtxt[i]); + gx += na.length; + geoidGridLine = geoidGridLine.concat(na); + if ( gx >= dataProps.nlo ){ + geoidGrid.push(geoidGridLine); + geoidGridLine=[]; + gx=0; + } + } +} + +function buildImage(geoidGrid, canvas){ + // + screen.width = dataProps.nlo; + canvas.height=dataProps.nla; + var context = canvas.getContext('2d'); + var imageData = context.getImageData(0, 0, canvas.width, canvas.height); + var pixels = imageData.data; + for ( var py = 0 ; py < dataProps.nla ; py++ ){ + var dy = dataProps.nla - 1 - py + for ( var px = 0 ; px < dataProps.nlo ; px++ ){ + var base = (dy * dataProps.nlo + px) * 4; + if (geoidGrid[py][px]!=999){ + + var hue = (1-(geoidGrid[py][px]-dataProps.minVal)/(dataProps.maxVal-dataProps.minVal))*270; + var rgb = HSVtoRGB(hue,255,255); + + pixels[base + 0] = rgb.r; // Red + pixels[base + 1] = rgb.g; // Green + pixels[base + 2] = rgb.b; // Blue + pixels[base + 3] = 255; // Alpha + } + } + } + context.putImageData(imageData, 0, 0); + + var duri = canvas.toDataURL('image/png'); + return ( duri ); +} + +function getHeader(line){ + var datas = parseLine(line); + return { + glamn:Number(datas[0]), + glomn:Number(datas[1]), + dgla:Number(datas[2]), + dglo:Number(datas[3]), + nla:Number(datas[4]), + nlo:Number(datas[5]), + ikind:Number(datas[6]), + vern:datas[7], + minVal:9e99, + maxVal:-9e99 + } +} + +function getNumberArray(line){ + var ans = []; + var lineArray = parseLine( line ); + for (var col of lineArray){ + var val = Number(col); + if (val != 999){ + if ( val > dataProps.maxVal){ + dataProps.maxVal = val; + } + if ( val < dataProps.minVal){ + dataProps.minVal=val; + } + } + ans.push(val); + } + return ( ans ); +} + +function parseLine(line){ + var ans = line.trim().split(/\s+/) + return (ans); +} + + +async function loadText(url){ // Read text data using fetch + messageDiv.innerText="Loading geoid high data"; + var response = await fetch(url); + var txt = await response.text(); + messageDiv.innerText=""; + return ( txt ); +} + +function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341 + var r, g, b; // 0..255 + while (h < 0) { + h += 360; + } + h = h % 360; + + // Special case: saturation = 0 + if (s == 0) { + // → RGB is equal to V + v = Math.round(v); + return {'r': v, 'g': v, 'b': v}; + } + s = s / 255; + + var i = Math.floor(h / 60) % 6, + f = (h / 60) - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i) { + case 0: + r = v; g = t; b = p; break; + Case 1: + r = q; g = v; b = p; break; + Case 2: + r = p; g = v; b = t; break; + Case 3: + r = p; g = q; b = v; break; + Case 4: + r = t; g = p; b = v; break; + Case 5: + r = v; g = p; b = q; break; + } + return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)}; +} + + +// The following functions are effective when run as an SVGMap layer. +var CRSad = 100; // Hardcode the CRS of the svgmap content... +function buildSvgImage(imageDataUri,imageParam){ + //Receives a data URL and pastes the image into the SVGMap content. + var rct = svgImage.createElement("image"); + rct.setAttribute("x", imageParam.lng0 * CRSad); + rct.setAttribute("y", -(imageParam.lat0 + imageParam.latSpan) * CRSad); + rct.setAttribute("width", imageParam.lngSpan * CRSad); + rct.setAttribute("height", imageParam.latSpan * CRSad); + rct.setAttribute("xlink:href",imageDataUri); + rct.setAttribute("style", "image-rendering:pixelated"); // Since it's mesh data, sharpen the pixels of the enlarged image. + var root = svgImage.documentElement; + root.appendChild(rct); +} +``` \ No newline at end of file diff --git a/docs/2-webapp-layer-edition/tutorial-11/index.md b/docs/2-webapp-layer-edition/tutorial-11/index.md new file mode 100644 index 0000000..6d60924 --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-11/index.md @@ -0,0 +1,157 @@ +--- +sidebar_position: 11 +--- + +# Tutorial 11: WebApp Layer - Location-Specification UI Using Maps + +## Introduction {#introduction} + +Based on [Tutorial 10](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%AB10), we will build an interactive application that allows you to specify a location on a map and calculates and displays the geoid elevation for that location. + +To see the actual operation, click on [mesh3b.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html). + +### Source Code {#source-code} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/) +- Calculation of values ​​​​at arbitrary positions using mesh data via bilinear interpolation +- Select any point on the map to display the geoid elevation at that location. + +## Tutorial {#tutorial} + +Based on [Tutorial 10](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%AB10), we will build an interactive application that calculates and displays the geoid elevation at a specified location on a map. The distinctive code is located in the webApp linked to the layer. + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh3b.zip). + +### [mesh3b.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html) {#mesh3b-html} + +There aren't any major differences from before. + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/Container.svg) {#container-svg} + +There are no significant differences from before. + +### [rasterMeshI.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/rasterMeshI.svg) {#raster-meshi-svg} + +There aren't any major differences from [Tutorial 10](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%AB10#Container.svg). + +### [rasterMeshI.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/rasterMeshI.html), [geoidCalc.js](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/geoidCalc.js) {#raster-mesh-geoid-calc} + +The code from [Tutorial 10](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%AB10#rasterMesh.html) now includes a UI for specifying a location on a map and a function to calculate the geoid height at that location. + +- The UI for specifying locations on the map uses an additional library for SVGMap.js called SVGMapAuthoring.js. +- Geoid high-level calculation: Using [bilinear interpolation](https://en.wikipedia.org/wiki/Bilinear_interpolation), values ​​​​at arbitrary positions are calculated using grid data. + - For bilinear interpolation, please refer to the documentation (**asc_instruction_sheet.pdf**) **included with the** geoid height data (TEXT data) package published by the Geospatial Information Authority of Japan on [this page](https://fgd.gsi.go.jp/download/geoid.php), as it contains the calculation formula. ( The function in this tutorial is based on the formula in that document.) ```getGeoidHeight(lng,lat)``` +- ```initPOIUI``` Initialize the UI for specifying a location on the map when the page loads. + - ```svgMapAuthoringTool.initPOIregistTool``` + - ```id="pointInputUI"``` In the div element, + - This tool registers a UI element for placing point information on a map, which can be used with [svgMapAuthoringTool](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMapAuthoringTool). ([initPOIregistTool](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#initPOIregistTool)) + - ```POIUIcbFunc``` This is a callback function that is called when the operation to set a point is performed. It obtains latitude and longitude information from the UI, getGeoidHeightpasses it to a function that calculates geoid height, and displays the answer. +- ```getGeoidHeight``` A function to calculate geoid height from grid data. + - Bilinear interpolation is used to calculate the geoid height at any given latitude and longitude (within the range of grid data). + +geoidCalc.js + +```js +... +... +onload = async function(){ + initPOIUI(); + ... + ... +} +... +... +function getGeoidHeight(lng,lat){ + // Bilinear interpolation is used to calculate the geoid height at any given latitude and longitude (real numbers) (World Geodetic System). + var px = Math.floor((lng-dataProps.glomn)/dataProps.dglo); + var py = Math.floor((lat-dataProps.glamn)/dataProps.dgla); + + if ( px < 0 || px > dataProps.nlo -1 || py < 0 || py > dataProps.nla ){ + return ( null ); + } + + var lng0 = dataProps.glomn + px * dataProps.dglo; + var lat0 = dataProps.glamn + py * dataProps.dgla; + var lng1 = lng0 + dataProps.dglo; + var lat1 = lat0 + dataProps.dgla; + + var Z00 = geoidGrid[py][px]; + var Z10 = geoidGrid[py][px+1]; + var Z01 = geoidGrid[py+1][px]; + var Z11 = geoidGrid[py+1][px+1]; + + + if ( Z00 == 999 || Z10 == 999 || Z01 == 999 || Z11 == 999 ){ + return ( null ); + } + + var u = (lng - lng0)/(lng1 - lng0); + var t = (lat - lat0)/(lat1 - lat0); + var Z = (1 - t) * (1 - u) * Z00 + (1 - t) * u * Z10 + t * (1 - u) * Z01 + t * u * Z11; + + return ( Z ); +} +... +... +var poiUI; +function initPOIUI() { + poiUI=document.getElementById("pointInputUI"); + var getPointOnly = false; + svgMapAuthoringTool.initPOIregistTool(poiUI,svgImageProps.rootLayer,"targetPoint","p0","targetPoint","",POIUIcbFunc,"cbFuncParam",getPointOnly); +} + +function POIUIcbFunc(){ + var latlngs=(poiUI.getElementsByTagName("input")[2].value).split(","); + console.log(latlngs); + var lat = Number(latlngs[0]); + var lng = Number(latlngs[1]); + var geoidHeight = getGeoidHeight(lng,lat); + messageDiv.innerText=geiodHeight+" m"; +} +``` \ No newline at end of file diff --git a/docs/2-webapp-layer-edition/tutorial-5/index.md b/docs/2-webapp-layer-edition/tutorial-5/index.md index 13f3f43..7bc2daa 100644 --- a/docs/2-webapp-layer-edition/tutorial-5/index.md +++ b/docs/2-webapp-layer-edition/tutorial-5/index.md @@ -1,3 +1,7 @@ +--- +sidebar_position: 5 +--- + # Tutorial 5: WebApp Layer - Tile Pyramid ## Introduction {#introduction} diff --git a/docs/2-webapp-layer-edition/tutorial-6/index.md b/docs/2-webapp-layer-edition/tutorial-6/index.md index 0402226..c42fec3 100644 --- a/docs/2-webapp-layer-edition/tutorial-6/index.md +++ b/docs/2-webapp-layer-edition/tutorial-6/index.md @@ -1,3 +1,7 @@ +--- +sidebar_position: 6 +--- + # Tutorial 6: WebApp Layer geoJSON ## Introduction {#introduction} diff --git a/docs/2-webapp-layer-edition/tutorial-7/index.md b/docs/2-webapp-layer-edition/tutorial-7/index.md new file mode 100644 index 0000000..ca21076 --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-7/index.md @@ -0,0 +1,365 @@ +--- +sidebar_position: 7 +--- + +# Tutorial 7: WebApp Layer Vector Tiles + +## Introduction {#introduction} + +This tutorial demonstrates how to load a tiled CSV Point geometry file into a web application using asynchronous loading, convert it to an SVGMap DOM using the SVGMap framework library, and then display it. + +- To see the actual operation, click on [tiling1.html](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/tiling1.html). + +### Source Code {#source-code} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/) +- tiling1.html: Loading of related libraries (SVGMapGIS) +- Container.svg: Setting up clickable layering ( almost the same as [Tutorial 6](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%AB6)) +- simpleTiling.svg: Almost identical to webApp [tutorial 6](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%AB6), which manipulates layers with a UI. +- simpleTiling.html: +- simpleTiling.js: + - Reading GeoJSON is the same as in [Tutorial 6](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%AB6). + - Dynamically load GeoJSON based on the display area. + - When displaying a small scale (wide area), if too many tiles need to be loaded, the loading process will stop and the tiles will not be displayed. + +## Tutorial {#tutorial} + +This approach avoids using dynamic mechanisms like a DBMS in the backend, instead tiling relatively large vector data (in this case, point geometry data) to create content that can be comfortably used as a WebMap/GIS. This type of design is called [vector tiling](https://en.wikipedia.org/wiki/Vector_tiles) in the GIS world, but it's more commonly known as a [Jamstack pattern](https://en.wikipedia.org/wiki/Jamstack). + +[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/tiling1.html) to see how it works . +The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tiling1.zip). + +#### Note + +Furthermore, SVGMap.js can implement tiling for larger datasets that are not possible with other frameworks, or that would normally require connecting to a DBMS to [achieve more efficient distribution](https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html). For example, this can be easily achieved using [SVGMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials). SVGMap possesses characteristics that allow for a wider application of the [Jamstack pattern](https://en.wikipedia.org/wiki/Jamstack). + +### Format of Tiled CSV Data {#format-of-tiled-csv-data} + +- Both latitude and longitude are divided into 1-degree x 1-degree tiles. + - tile_[longitude]_[latitude].csv + +#### Example data (tile_125_24.csv) + +``` +X,Y,P27_001,P27_002,P27_003,P27_004,P27_005,P27_006,P27_007,P27_008,P27_009 +125.317688,24.796933,47214,3,03002,03002,Miyakojima City Museum,1166-287 Higashi Nakasonezoe, Hirara,3,-99,1989 +125.282787,24.806925,47214,3,03003,03003,Miyakojima City Hirara Library North Branch,42 Higashi Nakasonezoe, Hirara,3,-99,9999 +125.393222,24.753839,47214,3,03003,03003,Miyakojima City Gusukube Library, 377-1,3,-99,9999 +Miyakojima City Hirara Library, 187,3,-99,9999 Hirara Library, 187,3,-99,9999 +Sarahama Sports Center, 248-1,3,3,9999 +125.195077,24.83307,47214,3,99999,03104,Irabu Sports Park, Irabu-aza Maezatozoe 945,4,3,9999 +125.325478,24.740085,47214,3,99999,03109,Ueno Gymnasium, Ueno-aza Miyakuni 1746-2,4,3,9999 +125.387054,24.756012,47214,3,99999,03129,Gusukube Training Center, Gusukube-aza Fukusato 579,4,3,9999 +125.299712,24.803737,47214,3,99999,03109,Miyakojima City General Gymnasium,676-1 Higashinakasone, Hirara,4,3,9999 +125.328061,24.758818,47214,3,99999,03104,Otake Castle Ruins Park Multipurpose Plaza,1190-134 Nohara, Ueno,4,3,9999 +125.405059,24.764564,47214,3,99999,03104,Gusukube Sports Park Multipurpose Plaza,245-1 Fukusato, Gusukube,4,3,9999 +125.407091,24.764468,47214,3,99999,03102, Gusukube Sports Park Multipurpose Field, 245-1 Fukusato, Gusukube, 4,3,9999 +125.404346,24.76409,47214,3,99999,03115, Gusukube Sports Park Multipurpose Field, 245-1 Fukusato, Gusukube, 4,3,9999 +125.281412,24.729776,47214,3,99999,03102, Shimoji Park (Multipurpose Field), 1590 Yonaha, Shimoji, 4,3,9999 +125.280271,24.730391,47214,3,99999,03104,Shimoji Park (Multipurpose Plaza),Shimoji Yonaha 1590,4,3,9999 +125.263557,24.735081,47214,3,99999,03104,Fureai no Maehama Plaza,Shimoji Yonaha 1199-1,4,3,9999 +125.299657,24.801104,47214,3,99999,03101,Miyakojima City Athletics Stadium,Hirara Higashi Nakasone 935-1,3,3,9999 +125.301632,24.805759,47214,3,99999,03102,Miyakojima City Citizens' Baseball Stadium, Hirara Aza Nishinakasone 1574-1,3,3,9999 +125.301437,24.804417,47214,3,99999,03104,Maefuku Multipurpose Indoor Gymnasium, Hirara Aza Nishinakasone 1574-7,3,3,9999 +125.302217,24.804102,47214,3,99999,03102,Multipurpose Maefuku Sports Ground, Hirara Aza Nishinakasone,3,3,9999 +125.302178,24.803613,47214,3,99999,03104,Multipurpose Maefuku Sports Ground, Hirara-aza Nishinakasone,3,3,9999 +125.389757,24.75579,47214,3,99999,03101,Gusukube Athletic Stadium, Gusukube-aza Fukusato 616,3,3,9999 +125.283694,24.729841,47214,3,99999,03101,Shimoji Athletic Stadium, Shimoji-aza Yonaha 1590,3,3,9999 +125.282256,24.729096,47214,3,99999,03109,Shimoji Gymnasium,Shimoji Yonaha 1590,3,3,9999 +125.326167,24.740636,47214,3,99999,03101,Ueno Athletic Stadium,Ueno Miyakuni 1746-2,3,3,9999 +125.162675,24.835657,47214,3,99999,03109,Irabu Workers' Gymnasium,Irabu Nagahama 1542-5,3,3,9999 +125.161233,24.835137,47214,3,99999,03109,Irabu B&G Marine Center,Irabu-aza Nagahama 1822-5,3,3,9999 +125.161328,24.834684,47214,3,99999,03106,Irabu B&G Marine Center,Irabu-aza Nagahama 1822-5,3,3,9999 +125.262975,24.734973,47214,3,99999,03148,Yonaha Maehama,Shimoji Yonaha 1199-1,3,3,9999 +125.271057,24.802628,47214,3,99999,03148,Painagama,Hirara Shimosato 338-3,3,3,9999 +125.443114,24.74628,47214,3,99999,03148,Aragusuku Coast,Shirobe Aza Aragusuku,3,3,9999 +125.447629,24.741724,47214,3,99999,03148,Yoshino Coast,Shirobe Bora,3,3,9999 +125.432329,24.729739,47214,3,99999,03148,Bora River Beach, Shirobe Bora 591-1,3,3,9999 +125.257704,24.797368,47214,3,99999,03148,Sunset Beach, Hirara Kugai 643-3,3,3,9999 +125.156941,24.857008,47214,3,99999,03148,Sawada Beach,Irabu Sawada,3,3,9999 +125.181135,24.81205,47214,3,99999,03148,Wataguchi Beach,Irabu Town Irabu,3,3,9999 +``` + +### Original data and splitting program {#original-data-and-splitting-program} + +#### Download location for the original data + +- Download and unzip the "Nationwide" section of the [National Land Numerical Information Cultural Facilities website](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P27.html#prefecture00). + +#### Shapefile to CSV conversion + +- Convert using OGR2OGR + - command:　```ogr2ogr -lco GEOMETRY=AS_XY P27-13.csv P27-13.shp``` + - [Optional information](https://qiita.com/tohka383/items/d3d1bf80db2cfb416330#csv) + +#### Notes + +- OGR2OGR: + - ogr2ogr is a vector data conversion tool included in [GDAL](https://gdal.org/), a well-known open-source GIS toolset. + - For Windows, pre-compiled binaries are available at [gisinternals.com](https://www.gisinternals.com/), as described [here](https://gdal.org/download.html#windows). + - Installation/Windows + - [Stable Releases](https://www.gisinternals.com/release.php)　⇒ MSVC 2017 x64 (other compilation environments are also supported) ⇒ Generic installer for the GDAL core components (gdal-*-core.msi) + - How to run ogr2ogr / Windows + - Windows Menu ⇒ All Apps ⇒ GDAL ⇒ GDAL * Run in the command prompt launched via Command Prompt. +- CSV header row: + - The header row of the National Land Numerical Information consists of mechanically assigned numbers (such as P27_001). It will be easier to understand if you refer to the explanation of the attribute information in the [National Land Numerical Information](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P27.html) and rewrite the CSV header row with feature names before tile division. + +#### CSV Tiling + +- [I've prepared a file called simpleTiling.py](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/simpleTiling.py), so we'll use that. +- tilesCreate a directory in the working directory. +- command:　```python simpleTiling.py P27-13.csv 0 1``` + - Reference: [Installing Python for Windows](https://www.python.jp/install/windows/install.html) + +### tiling1.html {#tiling1-html} + +- There are no significant differences from the HTML in [Tutorial 6](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%AB6). + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### Container.svg {#container-svg} + +- There are no significant differences from the HTML in [Tutorial 6](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%AB6). + - Since GeoJSON data is vector tile data, the class attribute is specified as [clickable](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B). + +```svg + + + + + + + + + + +``` + +### simpleTiling.svg {#simple-tiling-svg} + +- The icon is defined using the `defs` element. +- The actual data is not located here; it is dynamically generated in the web application. +- Within the group with id="mapTiles", a subgroup is created for each tile, and icons (Points) are placed within that subgroup. + +```svg + + + + + + + + + + + +``` + +### simpleTiling.html, simpleTiling.js {#simple-tiling} + +- A web app that can be linked to simpleTiling.svg and [control its DOM](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI). +- system dynamically loads GeoJSON data that has been tiled according to the display area. This is similar to [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). +- Since it doesn't have a pyramidal structure that scales down, this tutorial is simpler. +- Instead, because loading too much data would be required at a small scale (reduced display), the data is not loaded, the rendering is cleared, ```removeAllTiles()``` and a message prompting zooming in is displayed on the webApp window. +- ```addEventListener("zoomPanMap",zpmFunc)``` When scaling scroll occurs, call zpmFunc(). +- ```zpmFunc()``` Selects and displays tiles to load based on the display area. +- ```svgMap.getGeoViewBox()``` Get geographical display area +- ```getTileList(geoViewBox)``` List the tiles to be displayed. +- ```delete tiles[tileKey]``` Delete groups of tiles that are outside the display area. +- ```await loadCSV()``` Load the tile data (CSV) to be displayed, excluding those already loaded. +- ```drawTiles()```: Displays the loaded CSV data +- Create a group to display tiles +- ```csv2geojson``` Generate geoJSON from the imported CSV file. +- ```svgMapGIStool.drawGeoJson()``` Generate an SVG DOM from geoJSON. +- ```svgMap.refreshScreen()``` If the DOM needs to be redrawn at a time other than during scaling/scrolling, you must [explicitly request a redraw](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen). +- [Reference information](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```html + + + +Simple Tiling Tutorial + + + + + +

Displaying CSV Tile Data

+
-
+ + +``` + +```js +addEventListener("load",init); +addEventListener("zoomPanMap",zpmFunc); + +var latCol=10; +var lngCol=9; +var tilesTh=8; // Threshold for the number of tiles that fit on the screen (prevents the system from becoming too slow when zooming out due to too many tiles being loaded) + +function init(){ + zpmFunc(); +} + +function getTileList(geoViewBox){ + var tileNames={}; + for ( var ty = Math.floor(geoViewBox.y) ; ty<= Math.floor(geoViewBox.y+geoViewBox.height) ; ty++){ + for ( var tx = Math.floor(geoViewBox.x) ; tx <= Math.floor(geoViewBox.x+geoViewBox.width) ; tx++){ + var tile="tile_" + tx + "_" + ty; + } + } + return ( tileNames); + } +var +tiles={}; // Variable to store data (CSV as an array) for each tile +async function zpmFunc(){ + var geoViewBox = svgMap.getGeoViewBox(); + var tileList=getTileList(geoViewBox); + if (Object.keys(tileList).length < tilesTh ){ + for ( var tileKey in tiles ){ // Delete unnecessary data + if ( !tileList[tileKey]){ + delete tiles[tileKey]; + } + } + for ( var tileKey in tileList ){ // Load missing data + if ( !tiles[tileKey] ){ + tiles[tileKey]=await loadCSV(`tiles/${tileKey}.csv`); // Template literal + } + } + message.innerText="-"; + drawTiles(tileList); + } else { + message.innerText="Too many tiles, Please zoom in."; + removeAllTiles(); + } +} +function removeAllTiles(){ + tiles={}; + var groups = svgImage.getElementById("mapTiles").children; + for ( var i = groups.length -1 ; i >= 0 ; i-- ){ + groups[i].remove(); + } + svgMap.refreshScreen(); +} +function drawTiles(tileList){ + // tileList: Associative array of tile keys (IDs) to display + var tileGroup = svgImage.getElementById("mapTiles"); + var groups = tileGroup.children; + for ( var i = groups.length -1 ; i >= 0 ; i-- ){ + var groupKey = groups[i].getAttribute("id"); + if ( !tileList[groupKey]){ + groups[i].remove(); // Remove groups that do not need to be displayed + } else { + delete tileList[groupKey]; // Remove from tileList as it has already been drawn + } + } + // tileList is now a list of tiles to be drawn + for ( var tileKey in tileList){ + var grp = svgImage.createElement("g"); + grp.setAttribute("id",tileKey); + tileGroup.appendChild(grp); + if ( tiles[tileKey] ){ + var geoJson = csv2geojson(tiles[tileKey], lngCol, latCol); + svgMapGIStool.drawGeoJson(geoJson, layerID, "",0, "", "p0", "poi", "", grp); + } + + + + + + + } + svgMap.refreshScreen(); +} + +var schema; + +async function loadCSV(url){ + var response = await fetch(url); + if ( response.ok ){ + var txt = await response.text(); + txt=txt.split("\n"); + var csv=[]; + var schemaLine = true; + for ( line of txt){ + line = line.trim(); + if ( schemaLine ){ + schema = line; + svgImage.documentElement.setAttribute("property",schema); + } else { + if ( line !=""){ + line=line.split(","); + csv.push(line); + } + } + schemaLine = false; + } + return ( csv ); + } else { + return ( null ); + } +} + +function csv2geojson(csvArray, lngCol, latCol){ + var geoJson = {type: "FeatureCollection", features: []} + for ( var csvRecord of csvArray){ + var lng = Number(csvRecord[lngCol]); + var lat = Number(csvRecord[latCol]); + var feature = { type: "Feature", + geometry: { + type: "Point", + "coordinates": [lng, lat] + }, + "properties": { + "csvMetadata": csvRecord.toString() // This process is very rough. + } + } + geoJson.features.push(feature); + } + return(geoJson); +} +``` \ No newline at end of file diff --git a/docs/2-webapp-layer-edition/tutorial-8/index.md b/docs/2-webapp-layer-edition/tutorial-8/index.md new file mode 100644 index 0000000..424ea5a --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-8/index.md @@ -0,0 +1,495 @@ +--- +sidebar_position: 8 +--- + +# Tutorial 8: WebApp Layer Mesh Data + +## Introduction {#introduction} + +This tutorial demonstrates how to asynchronously load a CSV file containing mesh data in a 2D array format (also known as grid data or raster data) into a web application, convert it to an SVGMap DOM element, and display it. + +To actually do it, click on [mesh1.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html). + +### Source Code {#source-code} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh1/) +- Determine the format of the mesh data you will be using in this tutorial. +- Container.svg: Specifies a clickable layer. +- ArrayMesh.svg: Layer associated with webApp +- ArrayMesh.html: +- ArrayMesh.js: Reads mesh data and visualizes each individual mesh as an SVG rect element. + +## Tutorial {#tutorial} + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh1.zip). + + +### What is mesh data? {#what-is-mesh-data} + +Mesh data has a data structure in which data is arranged on an equally spaced grid, and is also called grid data. In a program, it can be treated as two-dimensional array data and its metadata (such as information about the origin and grid spacing). + +In Japan, regional standard meshes are commonly used for determining mesh intervals, origins, and numbering rules for each mesh. ( [See References 1](https://www.biodic.go.jp/kiso/col_mesh.html) , [2](https://www.stat.go.jp/data/mesh/m_tuite.html) , [and 3](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5). Note that regional standard meshes are not a data format for mesh data.) + +**10x8 meshData (X0=xx,Y0=yy,interval=ii)** +|---|---|---|---|---|---|---|---|---|---| +|---|---|---|---|---|---|---|---|---|---| +| Val0,0 | Val1,0 | Val2,0 | Val3,0 | Val4,0 | Val5,0 | Val6,0 | Val7,0 | Val8,0 | Val9,0| +| Val0,1 | Val1,1 | Val2,1 | Val3,1 | Val4,1 | Val5,1 | Val6,1 | Val7,1 | Val8,1 | Val9,1| +| Val0,2 | Val1,2 | Val2,2 | Val3,2 | Val4,2 | Val5,2 | Val6,2 | Val7,2 | Val8,2 | Val9,2| +| Val0,3 | Val1,3 | Val2,3 | Val3,3 | Val4,3 | Val5,3 | Val6,3 | Val7,3 | Val8,3 | Val9,3| +| Val0,4 | Val1,4 | Val2,4 | Val3,4 | Val4,4 | Val5,4 | Val6,4 | Val7,4 | Val8,4 | Val9,4| +| Val0,5 | Val1,5 | Val2,5 | Val3,5 | Val4,5 | Val5,5 | Val6,5 | Val7,5 | Val8,5 | Val9.5| +| Val0,6 | Val1,6 | Val2,6 | Val3,6 | Val4,6 | Val5,6 | Val6,6 | Val7,6 | Val8,6 | Val9,6| +| Val0,7 | Val1,7 | Val2,7 | Val3,7 | Val4,7 | Val5,7 | Val6,7 | Val7,7 | Val8,7 | Val9,7| + +In the diagram above, each square represents a single mesh, the number inside the square is the mesh number (the number in the two-dimensional array), and each square contains a value. The metadata X0, Y0, and interval in parentheses represent the coordinates of the origin and the mesh interval. (Metadata may also include data units, coordinate systems, and descriptions.) + +#### Types of mesh data formats + +There are two main types of data format structures that are known: + +#### Raster + +- The mesh data shown in the diagram above has been directly converted into data. +- Commonly used ASCII (text) encoding formats: [AAIGrid (Wikipedia](https://en.wikipedia.org/wiki/Esri_grid) - [GDAL explanation)](https://gdal.org/en/stable/drivers/raster/aaigrid.html) +- Because the data is easily compressed, differential encoding and binary encoding are frequently used. Sometimes, the bit image data format (however, a lossless format) is used as is. + - [Rough TIFF](https://ja.wikipedia.org/wiki/GeoTIFF) + - [Example of elevation](https://maps.gsi.go.jp/development/demtile.html) tiles from the Geospatial Information Authority of Japan (encoded in PNG format) + - [List of GDAL raster drivers](https://gdal.org/drivers/raster/index.html) + +#### [Gridded XYZ](https://gdal.org/drivers/raster/xyz.html) +- The data is encoded using the Point feature format, but with the constraint that the Point coordinates must always lie on the grid. +- The difference from a Raster is that each record contains coordinate values ​​​​(X,Y). + +``` +X0,Y0,interval +Value00,Value10,Value20 +Value01,Value11,Value21 +Value02,Value12,Value22 +``` + +This type of raster data can be described using Gridded XYZ as follows: + +``` +X0,Y0,Value00 +X1,Y0,Value10 +X2,Y0,Value20 +X0,Y1,Value01 +.... +X2,Y2,Value22 + +``` + +Note that in Gridded XYZ, the order of the records does not matter. Additionally, if there is no data at a grid point, that record can be omitted. Depending on the data, records with duplicate X and Y values (i.e., unnormalized data) may be swapped. A key feature of this format is that it allows for such representation even when the data is not normalized. + +- [Please also refer to the following](https://gdal.org/drivers/raster/xyz.html): + +Example of a data format conversion tool: [https://gdal.org/programs/gdal_grid.html](https://gdal.org/programs/gdal_grid.html) + +#### Data formats used in this tutorial + +We will use a text-encoded raster format. + +- Header row (first row) +- Comma-separated, two-dimensional array data (second row onwards) + - Each mesh cell contains a single value [real number] (multiple values, such as temperature and humidity, are not allowed) + - Column (row) direction: X-direction + - The direction in which the number of columns increases is the same as the direction in which the X grid coordinates increase + - Row direction: Y-direction + - The direction in which the number of rows increases is the same as the direction in which the Y grid coordinates decrease + +#### Header row + +- List pairs of [attribute name]:[attribute value] separated by commas. +- Attribute Name + - minX : Minimum X (longitude) value of the mesh area [real number] (coordinate of the left edge of the rectangle enclosing the entire area in the figure above) + - maxX : Maximum X (longitude) value of the mesh area [real number] (coordinate of the right edge of the rectangle enclosing the entire area in the figure above) + - minY: Minimum Y (latitude) value of the mesh area [real number] (the bottom-left coordinate of the rectangle enclosing the entire area shown above) + - maxY: Maximum Y (latitude) value of the mesh area [real number] (the top-right coordinate of the rectangle enclosing the entire area shown above) + - partX: Number of meshes in the X (longitude) direction of the mesh area [natural number] + - partY: Number of meshes in the Y (latitude) direction of the mesh area [natural number] + - valName: Unit of the mesh value [string] + - minVal: Minimum value of the mesh [real number] + - maxVal: Maximum value of the mesh [real number] + +#### Sample data for practical use + +[Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh.csv) for the sample data (density of shrines and temples in Japan) + +``` +minX:124.1539312,maxX:145.7870748,minY:24.33444293,maxY:45.51431213,partX:100,partY:98,valName:count/km2,minVal:1.95645299200927E-03,maxVal:2.86870067881484 +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.97412404320488E-02,2.4676550540061E-03,2.4676550540061E-03,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.37480244978236E-03,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.89797155921526E-03,,4.89797155921526E-03,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.43980848573941E-03,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.29220251762907E-03,,,1.21536708627151E-02,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.68704575374383E-03,9.68704575374383E-03,,,2.17958529459236E-02,4.84352287687192E-03,,,2.17958529459236E-02,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.41288890872148E-03,2.65417779959363E-02,,,1.44773334523289E-02,,7.23866672616444E-03,,,1.68902223610504E-02,9.65155563488592E-03,,,,4.82577781744296E-03,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.40411523496203E-02,4.80823046992406E-03,1.44246914097722E-02,2.40411523496203E-03,9.37604941635191E-02,1.92329218796962E-02,1.20205761748101E-02,,,1.20205761748101E-02,7.21234570488609E-03,3.12534980545064E-02,1.20205761748101E-02,4.80823046992406E-03,1.68288066447342E-02,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.39543909437019E-03,,2.39543909437019E-03,5.74905382648847E-02,0.011977195471851,0.150912662945322,4.79087818874039E-03,2.39543909437019E-03,,,7.18631728311058E-03,7.18631728311058E-03,4.79087818874039E-03,2.39543909437019E-03,,,,4.79087818874039E-03,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.38685918921668E-03,,,,2.38685918921668E-03,,9.54743675686673E-03,7.87663532441505E-02,4.05766062166836E-02,1.67080143245168E-02,,,,,,,,,9.54743675686673E-03,,7.16057756765004E-03,7.16057756765004E-03,2.38685918921668E-03,,2.38685918921668E-03 +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37837424625475E-03,2.37837424625475E-03,4.28107364325854E-02,0.152215951760304,0.019026993970038,3.56756136938212E-02,1.66486197237832E-02,7.84863501264066E-02,3.32972394475665E-02,,1.66486197237832E-02,,,4.75674849250949E-03,2.37837424625475E-03,2.37837424625475E-03,,,,2.37837424625475E-03,2.37837424625475E-03,,,2.37837424625475E-03,,2.61621167088022E-02 +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.021329847145445,4.7399660323211E-03,4.7399660323211E-03,2.36998301616055E-02,0.350757486391762,8.76893715979404E-02,7.10994904848165E-02,5.68795923878532E-02,,,,1.65898811131239E-02,1.42198980969633E-02,3.79197282585688E-02,2.84397961939266E-02,,,1.18499150808028E-02,8.53193885817798E-02,,0.021329847145445,1.42198980969633E-02,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.59785270028783E-02,9.44673709195576E-03,4.25103169138009E-02,1.88934741839115E-02,,,3.54252640948341E-02,2.36168427298894E-02,2.36168427298894E-03,7.08505281896682E-03,,,,2.83402112758673E-02,4.25103169138009E-02,7.08505281896682E-03,4.72336854597788E-03,2.36168427298894E-03,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.64743376955089E-02,2.35347681364414E-03,2.82417217637296E-02,7.06043044093241E-03,9.41390725457654E-03,7.06043044093241E-03,0.035302152204662,,2.11812913227972E-02,4.70695362728827E-03,,,,4.70695362728827E-03,1.17673840682207E-02,,4.70695362728827E-03,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.40721567441894E-02,4.69071891472979E-03,2.34535945736489E-03,,,9.85050972093256E-02,3.98711107752032E-02,,,,2.34535945736489E-03,9.38143782945958E-03,4.69071891472979E-03,,,,4.69071891472979E-03,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.33733104522365E-03,2.33733104522365E-03,1.40239862713419E-02,1.16866552261183E-02,2.10359794070129E-02,2.57106414974602E-02,4.6746620904473E-03,,,,,,,,,1.16866552261183E-02,2.10359794070129E-02,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.56232948360314E-02,1.16469521981961E-02,,5.12465896720628E-02,1.39763426378353E-02,,,,,,,,,,1.16469521981961E-02,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.64307304780522E-03,,6.96460957170783E-03,0.176436775816598,1.62507556673183E-02,1.85722921912209E-02,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.85101456137249E-02,9.25507280686246E-03,4.62753640343123E-03,,2.08239138154405E-02,2.31376820171562E-03,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.30608439674165E-03,,1.15304219837082E-02,3.68973503478663E-02,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.60893883651801E-02,6.89545215650575E-03,1.14924202608429E-02,2.29848405216858E-03,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.20735258239644E-02,0.107675408123309,8.70567129507605E-02,1.83277290422654E-02,6.87289839084951E-03,4.58193226056634E-03,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.13411844822654E-03,2.28352961205663E-03,6.8505888361699E-03,0.2580388461624,3.19694145687929E-02,,4.11035330170194E-02,4.11035330170194E-02,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.27617349674119E-03,,9.10469398696478E-03,4.55234699348239E-03,,0.011380867483706,6.14566844120122E-02,0.106980154346836,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.80669040443137E-02,3.85712456251111E-02,7.94113880516994E-02,6.57980072428366E-02,2.26889680147712E-03,2.26889680147712E-03,5.89913168384052E-02,4.53779360295425E-03,4.08401424265882E-02,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84488755354706E-02,8.36828467536713E-02,4.52339712182007E-03,9.04679424364014E-03,2.26169856091003E-03,,1.35701913654602E-02,2.26169856091003E-03,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.80366226145447E-02,0.24800356094999,1.12728891340905E-02,2.25457782681809E-03,,,0.137529247435904,,,4.50915565363619E-03,2.25457782681809E-03,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.04556060194795E-02,5.16932743582237E-02,8.31587457067078E-02,6.74260100324658E-03,,7.64161447034612E-02,6.74260100324658E-03,,2.24753366774886E-03,0.047198207022726,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.96226067466189E-03,0.116509388770605,6.72169550599642E-03,0.255424429227864,6.72169550599642E-03,6.72169550599642E-03,0.177004648324572,1.79245213493238E-02,5.37735640479714E-02,3.58490426986476E-02,1.79245213493238E-02,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.35050714590285E-02,1.78693714448152E-02,4.46734286120379E-03,0.125085600113706,2.2336714306019E-03,,0.154123328711531,0.022336714306019,0.022336714306019,3.35050714590285E-02,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.273902743150215,3.11759219845773E-02,1.33611094219617E-02,,,2.00416641329426E-02,0.104662023805367,4.45370314065391E-02,8.46203596724242E-02,8.90740628130781E-03,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5.32825132804057E-02,0.419599792083195,3.10814660802366E-02,9.54645029607268E-02,3.55216755202704E-02,1.11005236000845E-02,9.32443982407099E-02,0.104344921840794,5.55026180004226E-02,1.77608377601352E-02,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.4268600538726E-03,3.32014504040445E-02,6.64029008080891E-03,4.4268600538726E-03,0.159366961939414,9.96043512121336E-02,1.10671501346815E-02,0.150513241831669,0.11952522145456,0.152726671858605,8.85372010774521E-03,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.41365330625383E-03,4.41365330625383E-03,,,,0.139030079146996,0.024275093184396,,5.51706663281728E-02,0.518604263484825,5.51706663281728E-02,7.50321062063151E-02,0.470054077116033,0.024275093184396,4.41365330625383E-03,8.82730661250765E-03,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.171622914458144,4.62061692771927E-02,,,2.42032315261486E-02,9.24123385543855E-02,1.32017626506265E-02,1.32017626506265E-02,0.215628789960233,0.132017626506265,6.60088132531325E-03,0.134217920281369,0.101213513654803,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.38766116712541E-03,2.19383058356271E-03,,,,,,3.29074587534406E-02,8.77532233425083E-03,1.75506446685017E-02,0.482642728383795,0.361982046287847,0.118466851512386,,2.19383058356271E-03,0.23473987244121,8.77532233425083E-03,0.263259670027525,6.58149175068812E-02,6.36210869233185E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.209993883176214,0.441862129183284,0.120308995569706,1.74994902646845E-02,3.06241079631979E-02,0.109371814154278,1.53120539815989E-02,4.37487256617113E-03,0.201244138043872,2.84366716801123E-02,5.46859070771391E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.07010733990224E-02,8.07010733990224E-02,0.148315486246852,,,,,,0.185394357808565,0.377332045892726,0.170126587165507,,6.54333027559641E-03,1.52677706430583E-02,0.174488807349238,1.30866605511928E-02,8.72444036746188E-02,0.141772155971256,0.037078871561713,3.92599816535785E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.52239586900056E-02,0.154414438141486,0.121791669520045,,,,8.6994049657175E-03,3.69724711042994E-02,0.45019420697588,8.91689008986043E-02,7.17700909671694E-02,8.26443471743162E-02,,2.17485124142937E-03,1.30491074485762E-02,0.017398809931435,8.6994049657175E-03,0.143540181934339,7.39449422085987E-02,2.17485124142937E-02,8.48191984157456E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.279757007951887,0.201685284802523,,0.134456856535016,2.38552487400834E-02,0.117107584724046,2.16865897637122E-02,0.17783003606244,3.68672025983107E-02,3.90358615746819E-02,1.30119538582273E-02,,,2.16865897637122E-03,6.50597692911366E-03,8.24090411021063E-02,2.16865897637122E-02,3.68672025983107E-02,4.77104974801668E-02,0.210359920708008,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37878580950012E-02,0.363305469087291,0.899613542501863,0.635784570902759,0.183815267097736,,1.08126627704551E-02,0.155702343894553,0.348167741208654,2.16253255409102E-03,,5.62258464063664E-02,1.73002604327281E-02,2.16253255409102E-03,0.116776757920915,5.40633138522754E-02,0.118939290475006,2.81129232031832E-02,1.29751953245461E-02,5.19007812981844E-02,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37211836899434E-02,1.02216736991211,0.295436560502023,0.204864768231329,0.183300055785926,2.15647124454031E-03,,4.52858961353465E-02,0.338565985392829,0.090571792270693,1.29388274672419E-02,0.028034126179024,0.174674170807765,3.01905974235643E-02,0.034503539912645,5.39117811135078E-02,0.232898894410354,0.116449447205177,4.31294248908062E-02,9.91976772488543E-02,0.034503539912645,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.15047432997382E-03,,,,,,,,,,,,,7.74170758790576E-02,0.217197907327356,2.79561662896597E-02,1.29028459798429E-02,2.15047432997382E-02,6.66647042291885E-02,2.15047432997382E-03,,0.154834151758115,4.08590122695026E-02,0.217197907327356,0.103222767838743,9.03199218589006E-02,0.462351980944372,0.408590122695026,0.550521428473299,0.339774944135864,0.249455022276963,0.165586523407984,0.111824665158639,0.133329408458377,4.30094865994765E-03,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.28908220941427E-03,6.4336233141214E-03,4.28908220941427E-03,,,,,,,,,,,,0.032168116570607,0.604760591527412,0.177996911690692,9.00707263976997E-02,,4.28908220941427E-03,0.137250630701257,6.4336233141214E-03,2.14454110470713E-03,9.22152675024068E-02,0.111516137444771,1.07227055235357E-02,3.64571987800213E-02,0.032168116570607,7.07698564553354E-02,0.300235754658999,0.482521748559105,0.529701652862662,0.216598651575421,0.195153240528349,0.167274206167156,8.57816441882854E-02,4.28908220941427E-03,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84960757478439E-02,0.650155945963586,0.10265620199425,0.115488227243532,5.77441136217658E-02,3.84960757478439E-02,2.56640504985626E-02,,2.13867087488022E-02,9.19628476198493E-02,8.55468349952087E-02,8.12694932454482E-02,1.92480378739219E-02,2.13867087488022E-03,3.63574048729637E-02,0.160400315616016,0.530390376970294,0.780614869331279,0.970956577195618,0.303691264232991,0.134736265117454,0.160400315616016,6.62987971212867E-02,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.5314518329066E-03,2.13286295822665E-03,,,,2.13286295822665E-03,4.47901221227596E-02,3.83915332480797E-02,7.25173405797061E-02,0.138636092284732,6.18530257885728E-02,,,6.61187517050261E-02,0.191957666240398,1.49300407075865E-02,8.5314518329066E-03,0.042657259164533,7.46502035379327E-02,2.13286295822665E-02,1.49300407075865E-02,2.13286295822665E-02,6.18530257885728E-02,2.13286295822665E-03,1.91957666240398E-02,0.531082876598436,0.279405047527691,9.81116960784258E-02,0.296467951193504,0.897935305413419,2.26296759867847,2.86870067881484,0.499089932225036,0.245279240196065,0.219684884697345,7.03844776214794E-02,4.47901221227596E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.189313384862506,0.176550684759416,0.295669219054925,0.176550684759416,4.89236837285128E-02,0.136135467766297,7.65762006185418E-02,0.195694734914051,4.25423336769677E-02,0.082957550670087,0.246745535326413,0.110610067560116,0.229728601855626,0.104228717508571,0.242491301958716,0.163787984656326,0.336084436048045,0.323321735944954,0.431804686821222,0.60622825489679,0.357355602886529,0.102101600824722,0.125499884347055,1.48898167869387E-02,0.112737184243964,2.12711668384838E-03,0.027652516890029,0.14464393450169,0.114864300927813,0.104228717508571,0.193567618230203,0.687058688883028,1.2528717267867,0.146771051185539,0.238237068591019,0.2637624687972,5.10508004123612E-02,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.152743060223704,0.120921589343766,0.146378766047716,4.03071964479218E-02,5.51572161918931E-02,1.69714511359671E-02,1.27285883519753E-02,2.33357453119548E-02,3.60643336639301E-02,3.60643336639301E-02,4.24286278399177E-02,0.171835942751667,0.273664649567469,0.163350217183683,9.12215498558231E-02,3.18214708799383E-02,0.112435863775782,0.642793711774754,0.286393237919445,0.352157611071317,1.77139521231657,0.948279832222161,0.116678726559774,5.30357847998972E-02,1.06071569599794E-02,0.019092882527963,,1.48500197439712E-02,0.239721747295535,0.214264570591585,0.1548644916157,0.473079200415083,0.267300355391482,0.56217931887891,0.163350217183683,8.27358242878396E-02,0.201535982239609,0.038185765055926,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.46322573541403E-03,0.131179998898918,0.118485160295796,7.40532251848728E-02,1.90422579046816E-02,2.32738707723886E-02,4.65477415447772E-02,0.112137740994236,8.88638702218474E-02,0.184075159745255,6.98216123171658E-02,8.88638702218474E-02,9.09796766557009E-02,0.192538385480669,0.139643224634332,0.190422579046816,0.296212900739491,2.13273288532434,0.768037735488824,0.693984510303951,9.94429023911149E-02,0.389308383829046,0.421045480336848,0.738416445414875,0.44643515754309,6.55899994494588E-02,5.28951608463377E-02,4.02003222432167E-02,1.69264514708281E-02,0.39777160956446,0.32583419081344,0.141759031068185,0.514140963426403,8.04006444864333E-02,,6.34741930156053E-03,0.181959353311402,0.148106450369746,2.53896772062421E-02,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.11024117132996E-03,,,2.95433763986194E-02,0.168819293706397,4.43150645979291E-02,6.75277174825587E-02,4.43150645979291E-02,0.149827123164427,5.90867527972389E-02,8.01891645105385E-02,0.111842782080488,6.11969939685688E-02,6.75277174825587E-02,6.75277174825587E-02,0.253228940559595,0.316536175699494,0.314425934528164,0.179370499563047,0.576095839773079,1.51937364335757,0.835655503846664,8.22994056818684E-02,0.293323522814864,0.208913875961666,0.225795805332306,0.151937364335757,0.51278860463318,0.183590981905706,0.346079552098113,0.215244599475656,0.379843410839393,0.240567493531615,0.346079552098113,,6.33072351398988E-02,7.38584409965486E-02,2.32126528846296E-02,6.33072351398988E-03,,1.89921705419696E-02,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,2.10473497685373E-03,1.26284098611224E-02,,,,,,,,,4.20946995370746E-03,3.36757596296596E-02,0.092608338981564,1.89426147916836E-02,5.47231093981969E-02,7.99799291204417E-02,0.069456254236173,7.99799291204417E-02,0.134703038518639,0.311500776574352,0.23152084745391,0.328338656389182,0.319919716481767,5.05136394444895E-02,4.20946995370746E-03,,8.62941340510028E-02,0.420946995370746,0.092608338981564,2.23943801537237,1.03763434358889,0.250463462245594,0.151540918333468,0.229416112477056,0.383061765787378,3.36757596296596E-02,1.89426147916836E-02,4.41994345139283E-02,1.26284098611224E-02,8.20846640972954E-02,0.113655688750101,0.105236748842686,,,2.10473497685373E-02,4.84089044676357E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,4.19857446634665E-03,6.29786169951998E-03,,,,,,2.09928723317333E-03,5.87800425288531E-02,8.18722020937597E-02,0.151148680788479,3.35885957307732E-02,3.56878829639465E-02,3.98864574302932E-02,0.104964361658666,0.371573840271679,0.140652244622613,0.117560085057706,0.304396648810132,0.172141553120213,2.51914467980799E-02,0.163744404187519,0.327488808375039,0.138552957389439,6.29786169951998E-03,2.30921595649066E-02,0.201531574384639,2.30921595649066E-02,0.354779542406292,0.272907340312532,0.329588095608212,0.188935850985599,3.35885957307732E-02,4.40850318966398E-02,0.224623733949546,0.083971489326933,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,3.14084599974333E-02,,,,,,,,0.123539942656571,6.90986119943532E-02,0.213577527982546,0.096319277325462,8.79436879928131E-02,8.16619959933265E-02,0.140291121321869,0.127727737322895,0.048159638662731,0.13191553198922,0.048159638662731,,9.21314826591376E-02,0.364338135970226,0.161230094653491,0.11307045599076,0.274300550644251,0.22614091198152,1.46572813321355E-02,0.303615113308522,0.280582242643737,0.077474201327002,1.25633839989733E-02,8.37558933264887E-03,3.97840493300821E-02,3.35023573305955E-02,1.25633839989733E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,4.17712935925664E-03,,,,2.71513408351681E-02,0.304930443225735,0.486635570353398,0.142022398214726,4.80369876314513E-02,8.56311518647611E-02,0.139933833535097,0.240184938157257,7.72768931462478E-02,3.13284701944248E-02,0.18588225648692,8.14540225055044E-02,0.162908045011009,0.104428233981416,7.10111991073629E-02,2.29742114759115E-02,0.045948422951823,4.38598582721947E-02,0.100251104622159,0.169173739049894,,0.167085174370266,6.89226344277345E-02,8.35425871851328E-03,6.26569403888496E-03,3.55055995536814E-02,6.89226344277345E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,3.33326189620469E-02,2.08328868512793E-03,,4.37490623876865E-02,0.329159612250213,0.564571233669669,0.324993034879957,,4.16657737025586E-03,5.62487944984541E-02,,2.08328868512793E-02,,2.08328868512793E-03,0.177079538235874,7.29151039794776E-02,,,4.16657737025586E-03,8.33315474051172E-03,,8.33315474051172E-03,2.70827529066631E-02,2.08328868512793E-02,,2.08328868512793E-03,0.127080609792804,4.99989284430703E-02,6.24986605538379E-03,0.108331011626652,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,8.31227508713599E-03,0.004156137543568,0.132996401394176,0.147542882796664,0.583937324871303,0.536141743120271,0.274305077875488,0.039483306663896,0.243134046298728,0.253524390157648,0.16624550174272,0.004156137543568,,6.23420631535199E-03,0.147542882796664,6.44201319253039E-02,0.012468412630704,0.002078068771784,4.36394442074639E-02,0.14546481402488,0.02078068771784,5.19517192945999E-02,0.012468412630704,0.014546481402488,,,,0.002078068771784,0.014546481402488,0.027014894033192,0.01039034385892,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,1.45103305977601E-02,4.14580874221717E-03,0.049749704906606,9.74265054421035E-02,0.122301357895406,0.27776918572855,0.737953956114656,0.493351240323843,0.124374262266515,0.114009740410972,7.66974617310176E-02,0.153394923462035,0.223873672079727,2.69477568244116E-02,2.07290437110858E-03,2.07290437110858E-03,0.140957497235384,4.56038961643889E-02,8.29161748443434E-03,6.21871311332575E-03,1.86561393399773E-02,,,8.29161748443434E-03,3.31664699377374E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,2.27457441621238E-02,4.13558984765887E-03,,0.113728720810619,6.61694375625418E-02,0.248135390859532,0.163355798982525,0.479728422328428,0.128203285277425,2.27457441621238E-02,1.24067695429766E-02,7.44406172578596E-02,7.85762071055184E-02,0.10752533603913,1.03389746191472E-02,,2.48135390859532E-02,4.13558984765887E-03,3.10169238574415E-02,2.06779492382943E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.03389746191472E-02,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,2.06273987972052E-03,2.06273987972052E-03,1.23764392783231E-02,,,1.03136993986026E-02,8.25095951888208E-02,0.109325213625188,6.60076761510567E-02,0.136140832061554,0.360979478951091,3.30038380755283E-02,4.33175374741309E-02,7.83841154293798E-02,2.06273987972052E-02,4.95057571132925E-02,1.03136993986026E-02,,2.06273987972052E-02,4.53802773538515E-02,1.85646589174847E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,6.17321609230951E-03,4.11547739487301E-02,,,,8.23095478974602E-03,0.160503618400047,2.88083417641111E-02,3.90970352512936E-02,4.52702513436031E-02,0.228408995415452,2.67506030666746E-02,2.26351256718015E-02,6.17321609230951E-03,8.84827639897697E-02,8.23095478974602E-03,,,,,2.0577386974365E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,0.100586751373196,2.66862809765621E-02,0.166276058392426,1.64223267548075E-02,,,2.05279084435093E-03,5.74781436418262E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,3.27663327423708E-02,3.07184369459726E-02,2.86705411495744E-02,6.34847696883434E-02,4.30058117243616E-02,,2.04789579639817E-02,3.27663327423708E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,2.45166364550266E-02,2.45166364550266E-02,3.06457955687832E-02,1.63444243033511E-02,2.45166364550266E-02,1.22583182275133E-02,0.116454023161376,2.04305303791888E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,4.07652412301805E-03,2.03826206150903E-03,5.29948135992347E-02,2.03826206150903E-02,2.85356688611264E-02,3.87269791686715E-02,1.83443585535812E-02,3.05739309226354E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,4.06704473574453E-03,,,0.030502835518084,8.33744170827628E-02,1.62681789429781E-02,1.62681789429781E-02,1.83017013108504E-02,4.06704473574453E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,4.05766693135136E-03,0.056807337038919,2.23171681224325E-02,2.63748350537838E-02,8.11533386270271E-03,8.11533386270271E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.61935589712698E-02,1.61935589712698E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.014105466976364,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.03172864662474E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,3.93652918053998E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,1.95645299200927E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,7.75050212040696E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,1.93398562085494E-02,5.80195686256481E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,4.43988958422274E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,9.54818937423838E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +1.14182140267032E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +``` + +### Container.svg {#container-svg} + +- The theme layer displaying GeoJSON and the background map (OpenStreetMap) are loaded using the animation element. +- As in [Tutorial 6](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%AB6#Container.svg), the layer is set to be clickable. + - As described later, the clickable class attribute is specified to visualize the mesh data as vector data and enable interactivity. + +```svg + + + + + + + + + + +``` + +### ArrayMesh.svg {#array-mesh-svg} + +- The data-controller attribute of the document root element (the svg element) specifies the [web app that will control this layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI). + - ```data-controller="ArrayMesh.html#exec=appearOnLayerLoad``` + - The ```exec=appearOnLayerLoad``` setting causes the web app window to appear when the layer is displayed. (For more details, [click here](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0)) + +```svg + + + + + +``` + +### ArrayMesh.html, ArrayMesh.js {#array-mesh} + +Load the mesh data and visualize each individual mesh as an SVG `rect` element. + +- ```addEventListener(“load”, async function(){..``` : Load mesh data via the fetch API after the web app loads + - The mesh data is stored in `csvLines[]` as strings separated by line breaks +- ```getCsvProps(headerLine)```: Load the header row +- ```getRange()```: Calculate the minimum and maximum values of the visualization data (for heatmap color mapping) +- ```drawMesh()```: Load the mesh data line by line, split it by column, and visualize each mesh individually + - ```setMesh(...)```: Function that visualizes each individual mesh + - ```xd, yd```: Calculate the geographic coordinates of the mesh (xd: longitude, yd: latitude) + - Note: Be careful with the y-coordinate: The orientation of the SVG content coordinates and the geographic coordinates (latitude axis) are reversed. Therefore, north (the side with larger latitude values) becomes the origin in SVG coordinates (the side with smaller SVG y-coordinate values). + - ```cl = document.createElement(“rect”);```: Visualizes the mesh as a rect element + - ```cl.setAttribute - x,y,width,height```: Converts the geographic coordinate values to SVG coordinate values and sets them to the SVG rect element + - In ArrayMesh.svg, the ```globalCoordinateSystem``` element is hardcoded based on the specified transformation coefficients (100, 0, 0, -100, 0, 0). + - ```getColor(val, minVal, maxVal)```: Converts the value to be visualized into a color code. + - ```HSVtoRGB(h, s, v)```: A function that converts HSV values into RGB values (color information that can be set in SVG, etc.). + - In this tutorial, we perform a [heatmap-style](https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97) visualization by mapping values to the [hue (H value) of the HSV (Hue, Saturation, Value)](https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93) color space. (S and V are set to their maximum values (the most vivid colors).) + - ```svgMap.refreshScreen()``` If DOM redrawing is required at times other than when zooming or scrolling, you must explicitly trigger the [redraw](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen). + - [Reference Information](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```html + + + +CSV Mesh Data Visualizer Controller + + + + + + +

Mesh Data Controller

+ +
+
+ min + + max + + +
+ + + +
+ +
+ min + + mid + + max +
+ + +``` + +```js +var csvPath = "mesh.csv"; + +var csvLines, csvProps; + +addEventListener("load",async function(){ + csvLines = await getText(csvPath); + csvLines = csvLines.split("\n"); + csvProps=getCsvProps(csvLines[0]); + vminI.value=csvProps.minVal; + vmaxI.value=csvProps.maxVal; + getRange(); + drawMesh(csvLines, csvProps); +}); + +function drawMesh(csvLines, csvProps, minVal, maxVal){ + if (!minVal){ + minVal = csvProps.minVal; + } + if (!maxVal){ + maxVal = csvProps.maxVal; + } + for ( var i = 1 ; i < csvProps.partY + 1 ; i++ ){ + var strTxt = csvLines[i].split(","); + for ( var j = 0 ; j < csvProps.partX ; j++ ){ + if ( strTxt[j].replace(/\s+/g, "") !=""){ + var val = Number(strTxt[j]); + setMesh( j , i-1 , val, csvProps, minVal, maxVal ); + } + } + } + svgMap.refreshScreen(); +} + +function setMesh( xp , yp , value, csvProps, minVal, maxVal ){ +// console.log("call getMesh:"); + var color = getColor(value, minVal, maxVal); + var cl = svgImage.getElementById(xp+":"+yp); + if ( cl ){ + cl.setAttribute("fill" , color); + } else { + var xd = csvProps.minX + xp * csvProps.twd; // rectの西 + var yd = csvProps.maxY - yp * csvProps.thd; // rectの北 + + cl = document.createElement("rect"); // Should be used NS ( for Firefox!!) + cl.setAttribute("x" , 100 * xd ); + cl.setAttribute("y" , -100 * yd ); + cl.setAttribute("width" , 100 * csvProps.twd ); + cl.setAttribute("height" , 100 * csvProps.thd ); + cl.setAttribute("content" , value); + cl.setAttribute("fill" , color); + cl.setAttribute("id", xp+":"+yp); + svgImage.getElementsByTagName("svg")[0].appendChild(cl); + } +} + +function getCsvProps(headerLine){ + var hp = getHeaderParams( headerLine ); + console.log("sc_param:",hp); + svgImage.documentElement.setAttribute("property", hp.valName); + + csvProps={ + minX: Number(hp.minX), + maxX: Number(hp.maxX), + minY: Number(hp.minY), + maxY: Number(hp.maxY), + minVal: Number(hp.minVal), + maxVal: Number(hp.maxVal), + partX: Number(hp.partX), + partY: Number(hp.partY), + } + + csvProps.twd = ( csvProps.maxX - csvProps.minX ) / csvProps.partX; + csvProps.thd = ( csvProps.maxY - csvProps.minY ) / csvProps.partY; + + return ( csvProps ); + updateTile(); +} + +function getHeaderParams( hash ){ + hash = hash.split(","); + for ( var i = 0 ; i < hash.length ; i++ ){ + hash[i] = hash[i].split(":"); + if ( hash[i][1] ){ + hash[hash[i][0]] = hash[i][1]; + } else { + hash[hash[i][0]] = true; + } + } + return ( hash ); +} + +async function getText(path){ + var response = await fetch(path); + var txt = await response.text(); + return ( txt ); +} + +function getColor( val, minVal, maxVal ){ + + // value clip + if ( val > maxVal ){ + val = maxVal; + } + if ( val < minVal ){ + val = minVal; + } + + // Hue値の算出(最大値:H=0(赤) , 最小値:H=270(青紫) 逆周り) + var h = 270 - 270 * (val - minVal) / (maxVal - minVal); + + var ans = HSVtoRGB (h, 255, 255); + + return ("#"+ pad16(ans.r) + pad16(ans.g) + pad16(ans.b)); +} + +function pad16( val ){ + var bv = "00" + val.toString(16); + bv = bv.substr(bv.length - 2, 2); + return ( bv ); +} + +function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341 + var r, g, b; // 0..255 + while (h < 0) { + h += 360; + } + h = h % 360; + + // 特別な場合 saturation = 0 + if (s == 0) { + // → RGB は V に等しい + v = Math.round(v); + return {'r': v, 'g': v, 'b': v}; + } + s = s / 255; + + var i = Math.floor(h / 60) % 6, + f = (h / 60) - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i) { + case 0 : + r = v; g = t; b = p; break; + case 1 : + r = q; g = v; b = p; break; + case 2 : + r = p; g = v; b = t; break; + case 3 : + r = p; g = q; b = v; break; + case 4 : + r = t; g = p; b = v; break; + case 5 : + r = v; g = p; b = q; break; + } + return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)}; +} + + +function getRange(){ + if ( isNaN(vminI.value) || isNaN(vmaxI.value) ){return} + var minVal = Number(vminI.value); + var maxVal = Number(vmaxI.value); + if ( minVal > maxVal){[minVal, maxVal] = [maxVal, minVal]} + + document.getElementById("scalemin").innerHTML = minVal.toPrecision(5); + document.getElementById("scalemax").innerHTML = maxVal.toPrecision(5); + document.getElementById("scalemid").innerHTML = ((maxVal + minVal)/2.0).toPrecision(5); + return{minVal,maxVal} +} + +function setRange(){ + var range=getRange(); + drawMesh(csvLines, csvProps, range.minVal, range.maxVal); +} +``` \ No newline at end of file diff --git a/docs/2-webapp-layer-edition/tutorial-9/index.md b/docs/2-webapp-layer-edition/tutorial-9/index.md new file mode 100644 index 0000000..f27e0e6 --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-9/index.md @@ -0,0 +1,584 @@ +--- +sidebar_position: 9 +--- + +# Tutorial 9: WebApp Layer Mesh Tiles (Tiled Mesh Data) + +## Introduction {#introduction} + +This tutorial demonstrates how to display tiled mesh data using asynchronous loading in a web application. The loaded mesh data is [Gridded XYZ data](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%AB8#Gridded_XYZ) based on a regional standard mesh, and a simple tile pyramid is constructed using small-scale and large-scale data to implement [Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics)). + +The sample data used for visualization is [the municipal code data for the third-level mesh system](https://www.stat.go.jp/data/mesh/m_itiran.html), published by the Statistics Bureau . + +To actually use it, click on [mesh2.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2.html). + +### Source Code {#source-code} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/) +- The mesh data format used in this tutorial +- Container.svg: Specifies a clickable layer. +- meshTileViewer.svg: A layer to which webApps are linked; webApps are launched in a hidden state. +- meshTileViewer.html: +- meshTileViewer.js: Reads mesh data and visualizes each individual mesh as an SVG rect element. + +## Tutorial {#tutorial} + +This tutorial displays tiled mesh data. [Tutorial 8](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%AB8), we will be using [Gridded XYZ type mesh data](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%AB8#Gridded_XYZ). + +Furthermore, we will be dealing with larger data (more mesh count, finer detail) than in [Tutorial 8](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%AB8).Therefore, in addition to tiling, we will also construct a simple tile pyramid and implement a function ([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) that changes the data displayed at small and large scales. + +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2.zip). + +## Data to Display {#data-to-display} + +### Grid rules to use {#grid-rules-to-use} + +- [We will use data where regional standard meshes](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5) are used as the gridning rule. + +### Data Contents {#data-contents} + +- We will use the data published in the [Statistics Bureau's](https://www.stat.go.jp/data/mesh/m_itiran.html) list of municipal-level mesh codes. +- We will visualize which municipality each mesh belongs to. +- At a small scale, we will visualize at the prefectural level using a secondary mesh (a mesh of approximately 10 km square), and at a large scale, we will visualize at the municipal level using a tertiary mesh (a mesh of approximately 1 km square). + +## Data preparation {#data-preparation} + +### Preparing the original data {#preparing-the-original-data} + +- We will retrieve the data using [this WebApp](https://www.svgmap.org/devinfo/devkddi/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html). +- This web application automatically retrieves all CSV files from [the Statistics Bureau's list of municipal mesh codes](https://www.stat.go.jp/data/mesh/m_itiran.html) and allows you to save CSV data at a specified mesh level. (All operations are performed within a browser.) +- How to operate + - Access [japanMesh_r3.html](https://www.svgmap.org/devinfo/devkddi/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html) + - Please wait a while until the CSV data collection is complete. + - ```市区町村``` Menu + - ```３次メッシュ``` Menu + - ```集計実行``` Press + - Selecting "Download CSV ```mesh.csv```" will save the CSV file. + +### Construction of a tile pyramid {#construction-of-a-tile-pyramid} + +This tutorial uses a [Jamstack](https://en.wikipedia.org/wiki/Jamstack) configuration that does not deploy a database or dynamic web services in the backend . + +Static tile pyramid data (a set of CSV files) will be generated from the acquired raw data. The tool used for generation is [mesh2tileBasic.py](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2tileBasic.py), which is provided here . + +- Save [mesh2tileBasic.py](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2tileBasic.py) to your local PC +- ```tiles``` Prepare a directory in the working directory. +- ```python mesh2tileBasic.py mesh.csv```　Execute (mesh.csv is the file path of the downloaded original data) +- ```tiles``` The directory contains the tiled mesh data. + +### Explanation of tile pyramid data {#explination-of-tile-pyramid-data} + +#### [top.csv](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2/meshTiles/top.csv) + +Data for small scale (data for the vertices of the tile pyramid) + +- 1st line: Blank line +- From the second line onwards: + - First digit: Local government code (prefecture code, 2 digits) + - Second digit and beyond: Secondary mesh code, variable length +- Excerpt from actual data + +``` +01,634150,654560,664632,634260,... +02,604070,614010,614033,604054,... +03,594116,594163,594110,604115,... +... +... +``` + +#### [4-digit number].csv Example: [5339.csv](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2/meshTiles/5339.csv) + +Tile-divided data for large scale (divided at the primary mesh level). + +- [Four-digit number] in the filename: Primary mesh code +- Line 1: Primary mesh code +- From the second line onwards: + - First digit: Local government code (city/ward/town/village code, 5 digits) + - Second digit and beyond: The last four characters of the tertiary mesh code (variable length) + - By adding the primary mesh code from the first line to the beginning, the tertiary mesh code can be obtained (simple data compression). + - The reason the first line of top.csv is blank is so that it can be processed using the same rules. +- Excerpts from actual data + +``` +5339 +08211,7763,7764,7766,7767,7773,7774,... +08217,6799,7709 +08224,6798,6799,7707,7708,7709,7716,... +... +... +``` + +#### Note + +- The two types of files mentioned above correspond to [Gridded XYZ](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%AB8#Gridded_XYZ) data. Although it may appear that there is no XY data, this is because the mesh code is information encoded from the gridded XY coordinates. +- Furthermore, the most common type of gridded XYZ data has one XYZ data point per row. However, the data presented here is　 ```Z,XY1,XY2,XY3.....XYn```　slightly unconventional, as it encodes multiple XY values ​​​​with a common Z value onto a single row using a variable-length encoding method (to reduce the data size). + +#### code_name.csv + +- [Data for Tutorial 9b](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%AB9b). This is dictionary data between city/town/village codes and municipality names. +- First digit: City/ward/town/village code (5-digit number) + - The prefectural government code can be obtained by taking the first two characters. +- Second digit: Country name +- Third digit: Prefecture name +- Second digit: City/ward/town/village name +- Excerpts from actual data + +``` +01101, Japan, Hokkaido, Sapporo City, Chuo Ward +01102, Japan, Hokkaido, Kita Ward, Sapporo City +01103, Japan, Hokkaido, Sapporo City, Higashi Ward +... +... +``` + +### Container.svg {#container-svg} + +- The theme layer, which displays mesh data, and the background map (OpenStreetMap) are loaded using the animation element. +- Similar to [Tutorial 6](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%AB6#Container.svg), a clickable layer is specified. + - As described later, the `clickable` attribute is specified in the `class` attribute to visualize the mesh data as vector data and enable interactivity. + +```svg + + + + + + + + + + +``` + +### meshTileViewer.svg {#mesh-tile-viewer-svg} + +- The `data-controller` attribute of the document root element (the `svg` element) specifies the [webApp that will operate this layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI). + - ```data-controller="meshTileViewer.html#exec=hiddenOnLayerLoad``` + - ```exec=hiddenOnLayerLoad``` This setting causes the webApp window to hide when a layer is displayed. ([See here for details](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0)) +- This is empty content with no data; the web app that manipulates the mentioned layer dynamically manipulates the DOM of this SVG content to make it visible. + +```svg + + + + + +``` + +### meshTileViewer.html, meshTileViewer.js {#mesh-tile-viewer} + +The mesh data, which has been divided and layered as a tile pyramid, is loaded according to the scale and display area, and the DOM of the above SVG content is manipulated to visualize each individual mesh as an SVG rect element. + +- onload + - ```document.addEventListener("zoomPanMap", updateLayer,false);``` Set up a handler for the event that SVGMap.js emits when scrolling to resize (to change the displayed content according to the resize scrolling). + - ```updateLayer();``` Immediately after loading, the above handler is executed directly to create the initial display state. +- ```updateLayer()``` Download data and draw maps according to the scale and area. + - ```svgMap.getGeoViewBox();``` The SVGMap.js API retrieves the geographic coordinates of the displayed area. + - ```svgImageProps.scale``` SVGMap.js API: The current display scale of the SVGMap content associated with this WebApp. + - ```getTileURLs()``` A function to list the filenames of tiles that should be displayed in the case of large-scale display (based on the displayed area). + - ```maintainImages``` An associative array listing the filenames of tiles that were displayed one step before the scaling scroll and that should be retained in the current step. + - The elements are grouped into tile units (SVG gelements), and management is performed on a tile-by-tile basis. + - The `data-src` attribute of the corresponding tile is set to the filename of the tile, and this is used for identification. +- ```showTileMap()``` New data is loaded, the data for one tile to be displayed is constructed, and it is passed to the drawing routine (asynchronously). + - ```meshData```: Variables used to temporarily construct mesh data (structured associative array) + - meshData[mesh code][0..n]: Municipality code (Note that one mesh municipalities may contain within Fukusu) +- ```buildMeshTileSvg()``` + - ```svgImage``` The DOM object of the SVG content (meshTileViewer.svg) associated with this webApp. + - ```g``` Group mesh data of tile content using SVG elements. + - ```rect``` Visualize each mesh data using SVG elements. + - ```data-src``` Set the source filename of the tile content in the attribute (for determining reuse in the next step). + - ```getHue()``` A function that uses a suitable hash function to assign a suitable color (hue H value) to a local government code. + - ```HSVtoRGB()```A function to calculate RGB values ​​​​from HSV values ​​​​(S and V are fixed at their maximum values). + - ```blendColor()``` Additive color mixing function (because multiple municipalities (and their colors) may be assigned to a single mesh, color mixing is performed.) + - ```svgMap.refreshScreen()``` Once DOM generation is complete, instruct the system to render. + - Each time a tile is read, a redraw will occur (displayed progressively). + - [reference](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```html + + + +Tiled UTM Grid Data visualizer + + + + +

Displays regional standard mesh data

+ + +``` + +```js +var meshCsvHd = "meshTiles/"; +var topCsv = meshCsvHd+"top.csv"; + +var tileThScale = 8; + +onload=function() { + document.addEventListener("zoomPanMap", updateLayer,false); + updateLayer(); +} + +function updateLayer(){ + // Download data and draw the map according to the scale and area. + + var tileURLs; + var geoViewBox = svgMap.getGeoViewBox(); + + // List the tiles to display based on scale and area. + if ( svgImageProps.scale > tileThScale ){ + // Displays large-scale subdivided tile data + tileURLs= getTileURLs(geoViewBox); + else { + // Display topCsv data at a small scale + tileURLs=[topCsv]; + } + + var maintainImages={}; // Array to hold the tiles to be retained + var prevImages = svgImage.getElementsByTagName("g"); // Tiles that have been drawn up to the previous step + for ( var i = prevImages.length-1 ; i >=0 ; i-- ){ // Select what to keep and what to delete from the content of the previous step + var dataSrc = prevImages[i].getAttribute("data-src"); + if (tileURLs.indexOf(dataSrc)>=0) { // Keep the content that is one step ahead in the content to be read. + maintainImages[dataSrc]=true; + } else { // Delete everything else + prevImages[i].remove(); + } + } + + // Load any tiles that were not loaded in the previous step, which should be loaded. + for ( var i = 0 ; i < tileURLs.length ; i++ ){ + var durl = tileURLs[i]; + if (maintainImages[durl]) { + // Skip loading + else { + showTileMap(durl); + } + } +} + +function getTileURLs(geoViewBox){ + // Check the mesh within the display area and list the files. + var tileURLs= getMeshArray(geoViewBox, 1); + for ( var i = 0 ; i < tileURLs.length ; i++ ){ + tileURLs[i]=meshCsvHd + tileURLs[i] + ".csv"; + } + return (tileURLs); +} + +async function showTileMap(url){ + // Read and parse the tile data and pass it to the image generation routine. + var txtData = await loadText(url); + + var rowData = txtData.split(/[\r\n]+/); + // The first line is the tile mesh number + var meshData = {}; // Construct mesh data as an associative array with mesh number as Key. Val is an array of municipality codes (an array because some belong to multiple municipalities). + for ( var i = 1 ; i < rowData.length ; i++ ){ + var colData = rowData[i].split(","); + // The first column is the municipality code, and from the second column onwards are fragments of the mesh number (the mesh number is obtained by adding the tile's mesh number). + for ( var j = 1 ; j 3){ + m1Lat = Number(meshStr.substring(0,2)); + m1Lng = Number(meshStr.substring(2,4)); + latitude = m1Lat / 1.5; + longitude = 100 + m1Lng; + latSpan = m1LatSpan; + lngSpan = m1LngSpan; + if ( !latitude || !longitude ){ + return { + latitude: null, + longitude: null + } + } + if (meshStr.length > 5) { + m2Lat = Number(meshStr.substring(4,5)); + m2Lng = Number(meshStr.substring(5,6)); + latitude += m2Lat * m2LatSpan; + longitude += m2Lng * m2LngSpan; + latSpan = m2LatSpan; + lngSpan = m2LngSpan; + if (meshStr.length > 7) { + m3Lat = Number(meshStr.substring(6,7)); + m3Lng = Number(meshStr.substring(7,8)); + latitude += m3Lat * m3LatSpan; + longitude += m3Lng * m3LngSpan; + latSpan = m3LatSpan; + lngSpan = m3LngSpan; + if (meshStr.length == 9) { + m4 = meshStr.substring(8); + switch(m4){ + Case "1": + // do nothing + break; + Case "2": + longitude += m4LngSpan; + break; + Case "3": + latitude += m4LatSpan; + break; + case "4": + latitude += m4LatSpan; + longitude += m4LngSpan; + break; + } + latSpan = m4LatSpan; + lngSpan = m4LngSpan; + } + } + } + } + return { + latitude: latitude, + longitude: longitude, + latSpan : latSpan, + lngSpan : lngSpan + } +} + +function latLng2Mesh(lat,lng,meshLevel){ + lat = lat * 1.5; + lng = lng - 100; + var m1Lat = Math.floor(lat); + var m1Lng = Math.floor(lng); + + if (meshLevel==1){ + return ( m1Lat.toString() + m1Lng.toString() ); + } + + lat = lat - m1Lat; + lng = lng - m1Lng; + + lat = lat * 8; + lng = lng * 8; + + var m2Lat = Math.floor(lat); + var m2Lng = Math.floor(lng); + + if (meshLevel==2){ + return ( m1Lat.toString() + m1Lng.toString() + m2Lat.toString() + m2Lng.toString() ); + } + + lat = lat - m2Lat; + lng = lng - m2Lng; + + lat = lat * 10; + lng = lng * 10; + + var m3Lat = Math.floor(lat); + var m3Lng = Math.floor(lng); + + if (meshLevel==3){ + return ( m1Lat.toString() + m1Lng.toString() + m2Lat.toString() + m2Lng.toString() + m3Lat.toString() + m3Lng.toString() ); + } + + lat = lat - m3Lat; + lng = lng - m3Lng; + + lat = lat * 2; + lng = lng * 2; + + var m4Lat = Math.floor(lat); + var m4Lng = Math.floor(lng); + var m4Num = 1; + if ( m4Lat==1 ){ + m4Num += 2; + } + if ( m4Lng==1 ){ + m4Num += 1; + } + + if (meshLevel==4){ + return ( m1Lat.toString() + m1Lng.toString() + m2Lat.toString() + m2Lng.toString() + m3Lat.toString() + m3Lng.toString() + m4Num.toString() ); + } + + return (null); +} + + + +function getMeshArray(geoBbox, meshLevel){ + var latStep, lngStep; + if (meshLevel == 1 ){ + latStep = m1LatSpan; + lngStep = m1LngSpan; + } else if (meshLevel == 2 ){ + latStep = m2LatSpan; + lngStep = m2LngSpan; + } else if ( meshLevel == 3 ){ + latStep = m3LatSpan; + lngStep = m3LngSpan; + } else if ( meshLevel == 4 ){ + latStep = m4LatSpan; + lngStep = m4LngSpan; + else { + return ( null ); + } + + var ans = []; + for ( var mx = geoBbox.x ; mx < geoBbox.x + geoBbox.width + lngStep ; mx += lngStep){ + if ( mx > geoBbox.x + geoBbox.width ){ + mx = geoBbox.x + geoBbox.width; + } + // Returns a list of the smallest mesh codes that contain geoBbox(.x,.y,.wjdth,.height). + for ( var my = geoBbox.y ; my < geoBbox.y + geoBbox.height + latStep ; my += latStep){ + if ( my > geoBbox.y + geoBbox.height ){ + my = geoBbox.y + geoBbox.height; + } +// console.log(mx,my); + ans[latLng2Mesh(my,mx,meshLevel)]=true; + } + } + + var ans2=[]; + for ( mesh in ans ){ + ans2.push(mesh); + } + + return ( ans2 ); +} + +// =================================================================================== + + +function getHue(str){ // Get an appropriate HUE value (0..359) from the string using the hash function (jenkinsOneAtATimeHash) + return(jenkinsOneAtATimeHash(str)%360); +} + +//https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript +//Credits (modified code): Bob Jenkins (http://www.burtleburtle.net/bob/hash/doobs.html) +//See also: https://en.wikipedia.org/wiki/Jenkins_hash_function +//Takes a string of any size and returns an avalanching hash string of 8 hex characters. +function jenkinsOneAtATimeHash(keyString){ + let hash = 0; + for (charIndex = 0; charIndex < keyString.length; ++charIndex){ + hash += keyString.charCodeAt(charIndex); + hash += hash << 10; + hash ^= hash >> 6; + } + hash += hash << 3; + hash ^= hash >> 11; + //4,294,967,295 is FFFFFFFF, the maximum 32 bit unsigned integer value, used here as a mask. + return (((hash + (hash << 15)) & 4294967295) >>> 0); +}; + +function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341 + var r, g, b; // 0..255 + while (h < 0) { + h += 360; + } + h = h % 360; + + // Special case: saturation = 0 + if (s == 0) { + // → RGB is equal to V + v = Math.round(v); + return {'r': v, 'g': v, 'b': v}; + } + s = s / 255; + + var i = Math.floor(h / 60) % 6, + f = (h / 60) - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i) { + case 0: + r = v; g = t; b = p; break; + Case 1: + r = q; g = v; b = p; break; + Case 2: + r = p; g = v; b = t; break; + Case 3: + r = p; g = q; b = v; break; + Case 4: + r = t; g = p; b = v; break; + Case 5: + r = v; g = p; b = q; break; + } + return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)}; +} + +function getColorString(rgb){ + return ("#"+ pad16(rgb.r) + pad16(rgb.g) + pad16(rgb.b)); +} + +function pad16( val ){ + var bv = "00" + val.toString(16); + bv = bv.substr(bv.length - 2, 2); + return ( bv ); +} +``` \ No newline at end of file diff --git a/docs/2-webapp-layer-edition/tutorial-9b/index.md b/docs/2-webapp-layer-edition/tutorial-9b/index.md new file mode 100644 index 0000000..2d785a1 --- /dev/null +++ b/docs/2-webapp-layer-edition/tutorial-9b/index.md @@ -0,0 +1,111 @@ +--- +sidebar_position: 9.5 +--- + +# Tutorial 9b WebApp Layer Mesh Tile (Custom Dialog) + +## Introduction {#introduction} + +In addition to the content of [Tutorial 9](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%AB9), we have customized the dialog box that appears when you click on a mesh. + +To see the actual operation, click on [mesh2b.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html). + +### Source Code {#source-code} + +- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/) +- meshTileViewerB.html: A web app linked to a layer. In addition to the content of Tutorial 9, it customizes the dialog by setting a callback function that is triggered when an object is clicked. + +## Tutorial {#tutorial} + +In addition to [Tutorial 9](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%AB9), we will customize the dialog box that appears when you click on a mesh (specifically, a rect element). + +The customized dialog searches for and displays the name of the local government based on the mesh code listed in the mesh's metada. At smaller scales, it displays the prefecture name; at larger scales, it displays the city/town/village name. + +- [Click here] to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2b.zip). + +The difference lies in the web app associated with the layer. + +### [meshTileViewerB.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/meshTileViewerB.html) , [meshTileViewerB.js](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/meshTileViewerB.js) {#mesh-tile-viewr-b} + +This explains the additions made to [meshTileViewer.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/meshTileViewer.html) , the WebApp from [Tutorial 9](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%AB9#meshTileViewer.html). + +The added parts are the loading of data to create an associative array of city/town names using the city/town code as the key, and the setting of a callback function to display a custom dialog using that data. + + + +- onload=async function() + - [svgMap.setShowPoiProperty](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#setShowPoiProperty)( customShowPoiProperty, layerID); + - Specify a custom callback function (customShowPoiProperty) for the process that occurs when an object in the associated layer is hit. + - Custom ShowPoiProperty + - The name of the municipality is obtained by using the city/town code in the content attribute of the hit object as the key to look up the lgDictionary in the dictionary. + - Note that in some cases, multiple municipalities may belong to a single grid. + - svgMap.showModal(html,400,180); Passes the prepared HTML to the modal dialog of the SVGMap framework. +- async function loadLGdictionary() // Create a dictionary of local government names + - lgDictionary={}; // Dictionary of municipality names using city/ward/town/village codes as keys +- function buildMeshTileSvg(meshs, sourceID) + - rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" ")); + - meshes[meshNumb] Municipal code + +meshTileViewerB.js + +```js +... +... +var lgDictCsv = meshCsvHd + "code_name.csv"; + +onload=async function(){ + document.addEventListener("zoomPanMap", updateLayer,false); + svgMap.setShowPoiProperty( customShowPoiProperty, layerID); + await loadLGdictionary(); + //console.log("lgDictionary:",lgDictionary); + updateLayer(); +} + +... +... + +function buildMeshTileSvg(meshs, sourceID){ + var tileGroup = svgImage.createElement("g"); + tileGroup.setAttribute("data-src",sourceID); + + for (var meshNumb in meshes){ + ... + rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" ")); + ... + } + ... +} + +async function loadLGdictionary(){ // Create a dictionary of local government names + var lgCsv = await loadText(lgDictCsv); + lgCsv = lgCsv.split(/[\r\n]+/); + for ( var line of lgCsv){ + if (line.length > 1) { + line = line.split(","); + lgDictionary[line[0]]=line[2]+" "+line[3]; + lgDictionary[line[0].substring(0,2)]=line[2]; // Let's also create a prefecture code dictionary at the same time. + } + } +} + +function customShowPoiProperty(target){ + var metaSchema = null; + // metaSchema = target.ownerDocument.firstChild.getAttribute("property").split(","); // debug 2013.8.27 + console.log("POI target:",target); + var content = (target.getAttribute("content")).split(","); + + var meshCode=content[0]; + var lgCodes=content[1].split(" "); + var lgNames=[]; + for (var lgCode of lgCodes){ + lgNames.push(lgDictionary[lgCode]); + } + var html = "
  • Name of municipality:
    • "+lgNames.join("
    • ")+"
  • Mesh code:"+meshCode+"
"; + svgMap.showModal(html,400,180); + +} + +... +... +``` \ No newline at end of file diff --git a/docs/intro.md b/docs/intro.md index 8c2c398..0443c86 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -1,5 +1,5 @@ --- -sidebar_position: 1 +sidebar_position: 0 --- # Tutorial Intro diff --git a/src/images/800px-Raster.png b/src/images/800px-Raster.png new file mode 100644 index 0000000000000000000000000000000000000000..136cd748f376e52daf290594ef72dedaf8f60258 GIT binary patch literal 35959 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 H;?@5HLIdVT literal 0 HcmV?d00001 From bdee2fa6786670dc58e35287e6a6fe6323a2b6be Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Wed, 25 Mar 2026 23:15:13 -0400 Subject: [PATCH 5/9] finished translations --- docs/1-basic/tutorial-1/index.md | 20 +- docs/1-basic/tutorial-2a/index.md | 12 +- docs/1-basic/tutorial-2b/index.md | 16 +- docs/1-basic/tutorial-2c/index.md | 10 +- docs/1-basic/tutorial-3/index.md | 44 +- docs/1-basic/tutorial-3b/index.md | 8 +- docs/1-basic/tutorial-4/index.md | 16 +- .../tutorial-10/index.md | 20 +- .../tutorial-11/index.md | 18 +- .../tutorial-5/index.md | 436 +++++++------ .../tutorial-6/index.md | 12 +- .../tutorial-7/index.md | 10 +- .../tutorial-8/index.md | 10 +- .../tutorial-9/index.md | 20 +- .../tutorial-9b/index.md | 12 +- .../cross-origin-access/index.md | 2 +- docs/3-web-service-integration/index.md | 6 +- .../tutorial-12/index.md | 16 +- .../tutorial-13/index.md | 18 +- .../tutorial-14/index.md | 22 +- .../tutorial-15/index.md | 20 +- .../index.md | 2 +- .../index.md | 10 +- .../index.md | 20 +- .../current/1-basic/tutorial-1/index.md | 10 +- .../current/1-basic/tutorial-2a/index.md | 12 +- .../current/1-basic/tutorial-2b/index.md | 16 +- .../current/1-basic/tutorial-2c/index.md | 10 +- .../current/1-basic/tutorial-3/index.md | 44 +- .../current/1-basic/tutorial-3b/index.md | 8 +- .../current/1-basic/tutorial-4/index.md | 18 +- .../current/2-webapp-layer-edition/index.md | 10 + .../tutorial-10/index.md | 266 ++++++++ .../tutorial-11/index.md | 157 +++++ .../tutorial-5/index.md | 409 ++++++++++++ .../tutorial-6/index.md | 225 +++++++ .../tutorial-7/index.md | 366 +++++++++++ .../tutorial-8/index.md | 495 +++++++++++++++ .../tutorial-9/index.md | 584 ++++++++++++++++++ .../tutorial-9b/index.md | 111 ++++ .../cross-origin-access/index.md | 119 ++++ .../3-web-service-integration/index.md | 7 + .../tutorial-12/index.md | 114 ++++ .../tutorial-13/index.md | 128 ++++ .../tutorial-14/index.md | 219 +++++++ .../tutorial-15/index.md | 213 +++++++ .../index.md | 3 + .../index.md | 114 ++++ .../index.md | 239 +++++++ .../current/intro.md | 2 +- 50 files changed, 4226 insertions(+), 453 deletions(-) create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-10/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-11/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-5/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-6/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-7/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-8/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9b/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/cross-origin-access/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-12/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-13/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-14/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-15/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md create mode 100644 i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md diff --git a/docs/1-basic/tutorial-1/index.md b/docs/1-basic/tutorial-1/index.md index a6cbfb8..01794a1 100644 --- a/docs/1-basic/tutorial-1/index.md +++ b/docs/1-basic/tutorial-1/index.md @@ -2,13 +2,13 @@ ## Introduction {#introduction} -This is a tutorial for displaying Japan's coastline. [Click here to see it in action](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html). +This is a tutorial for displaying Japan's coastline. [Click here to see it in action](https://svgmap.org/examples/tutorials/tutorial1/tutorial1.html). ### File Structure {#file-structure} The following files are present in the tutorial1 directory. This section explains how to download the files used in the tutorial. -- [tutorial1.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html) +- [tutorial1.html](https://www.svgmap.org/examples/tutorials/tutorial1/tutorial1.html) - Loads the SVGMap core program files (SVGMapLv0.1_r17.js and SVGMapLv0.1_LayerUI2_r4.js) to enable the use of SVGMap's various APIs. - Defines the map display area (using a DIV element) and loads the SVG file (Containers.svg) that groups the layers to be displayed (the layers automatically set to Visible by the SVGMap core program above will be displayed). - Zoom up, zoom down, and GPS buttons are displayed and clicked (calling the respective API of the SVGMap core program). @@ -17,9 +17,9 @@ The following files are present in the tutorial1 directory. This section explain - GPS button: svgMap.gps() By calling the API, zoom up and display around the current location (only if the position of the PC or smartphone can be identified). - Displays a cross mark representing the center. - Latitude and longitude display on the map shown by the cross mark above (actually, the latitude and longitude of the center of the map are displayed when the map is moved). -- [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Container.svg) +- [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial1/Container.svg) - Loads the SVG files for each layer to be displayed (only Coastline.svg is loaded) -- [Coastline.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1/Coastline.svg) +- [Coastline.svg](https://www.svgmap.org/examples/tutorials/tutorial1/Coastline.svg) - Defines Japan's coastline data using numerous lines. ## Tutorial {#tutorial} @@ -28,10 +28,10 @@ The following files are present in the tutorial1 directory. This section explain The files used in this tutorial can be obtained from the following locations: -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1.zip) -- [https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/) : HTML page for displaying the map and map content - - [img directory](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/img/) : Images and icons - - [js directory](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/js) : SVGMap framework library and stylesheets (SVGMap.js) +- [ZIP archive file](https://www.svgmap.org/examples/tutorials/tutorial1.zip) +- [https://svgmap.org/examples/tutorials/tutorial1/](https://svgmap.org/examples/tutorials/tutorial1/) : HTML page for displaying the map and map content + - [img directory](https://svgmap.org/examples/tutorials/tutorial1/img/) : Images and icons + - [js directory](https://svgmap.org/examples/tutorials/tutorial1/js) : SVGMap framework library and stylesheets (SVGMap.js) - Note: The SVGMap.js open-source repository is here ([GitHub](https://github.com/svgmap/svgMapLv0.1)) #### Content Structure {#content-structure} @@ -53,8 +53,8 @@ tutorial1.html - Download the ZIP archive file mentioned above, or - Download directly from the sample source directory - Use the wget (wget2) command with the -r option - - `wget -r https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/` - - `wget2 --http2=off -timeout=60 --max-threads=1 -r https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/` + - `wget -r https://svgmap.org/examples/tutorials/tutorial1/` + - `wget2 --http2=off -timeout=60 --max-threads=1 -r https://svgmap.org/examples/tutorials/tutorial1/` - `index.html*` There is no need to create a directory for each download. ##### Windows (using wget2) {#wget2} diff --git a/docs/1-basic/tutorial-2a/index.md b/docs/1-basic/tutorial-2a/index.md index e6eb71e..dca864e 100644 --- a/docs/1-basic/tutorial-2a/index.md +++ b/docs/1-basic/tutorial-2a/index.md @@ -4,17 +4,17 @@ This is a tutorial that adds airport POIs [(Points of Interest)](https://ja.wikipedia.org/wiki/Point_of_interest) to the content of [Tutorial 1](../tutorial-1/). -[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html) to see it in action. +[Click here](https://svgmap.org/examples/tutorials/tutorial2/tutorial2.html) to see it in action. ### File Structure -The [tutorial2 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2) contains the following files. The file structure is as follows: +The [tutorial2 directory](https://www.svgmap.org/examples/tutorials/tutorial2) contains the following files. The file structure is as follows: -- [tutorial2.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html) +- [tutorial2.html](https://www.svgmap.org/examples/tutorials/tutorial2/tutorial2.html) - HTML for Tutorial 2. Same content as tutorial1.html. - Container.svg - Load an SVG file for each layer you want to display (only Coastline_Airport.svg is loaded) -- [Coastline_Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/Coastline_Airport.svg) +- [Coastline_Airport.svg](https://www.svgmap.org/examples/tutorials/tutorial2/Coastline_Airport.svg) - Adds airport information to Coastline.svg in Tutorial 1. - Defines the airport display image and describes the actual airport information (latitude/longitude, image used, title, information displayed upon clicking). - HTTP links can also be described alongside airport information. In this case, the following actions become possible: @@ -26,7 +26,7 @@ The [tutorial2 directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutor ### Files Used -[ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2.zip) of the files used in this tutorial. +[ZIP archive file](https://www.svgmap.org/examples/tutorials/tutorial2.zip) of the files used in this tutorial. ### Content Structure @@ -430,7 +430,7 @@ Load an SVG file for each layer you want to display (only Coastline_Airport.svg - + diff --git a/docs/1-basic/tutorial-2b/index.md b/docs/1-basic/tutorial-2b/index.md index 1a7fd26..857f21f 100644 --- a/docs/1-basic/tutorial-2b/index.md +++ b/docs/1-basic/tutorial-2b/index.md @@ -4,19 +4,19 @@ This tutorial demonstrates how to separate POI (airport) and coastline maps into distinct files and display them using layering. -[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html) to see it in action. +[Click here](https://svgmap.org/examples/tutorials/tutorial2b/tutorial2b.html) to see it in action. ### File Structure -The [tutorial2b directory](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/) contains the following files. The file structure is as follows: +The [tutorial2b directory](https://www.svgmap.org/examples/tutorials/tutorial2b/) contains the following files. The file structure is as follows: -- [tutorial2b.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html) +- [tutorial2b.html](https://www.svgmap.org/examples/tutorials/tutorial2b/tutorial2b.html) - HTML for Tutorial 2b. Compared to tutorial1.html, it incorporates a layer list and On/Off UI (the div element with id="layerList"). -- [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Container.svg) +- [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial2b/Container.svg) - Loads the SVG files for each layer to be displayed (loads two files/layers: Airport.svg and Coastline.svg). -- [Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Airport.svg) +- [Airport.svg](https://www.svgmap.org/examples/tutorials/tutorial2b/Airport.svg) - Airport information added as a separate file. -- [Coastline.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Coastline.svg) +- [Coastline.svg](https://www.svgmap.org/examples/tutorials/tutorial2b/Coastline.svg) - Coastline.svg from Tutorial 1 ## Tutorial @@ -25,7 +25,7 @@ Implementing layering enables users to toggle the visibility of each layer as re ### Files Used -[ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b.zip) of used files. +[ZIP archive file](https://www.svgmap.org/examples/tutorials/tutorial2b.zip) of used files. ### Content Structure @@ -383,7 +383,7 @@ This SVG file was created by extracting only the airport point section from the - + diff --git a/docs/1-basic/tutorial-2c/index.md b/docs/1-basic/tutorial-2c/index.md index 784f159..4ee7fb1 100644 --- a/docs/1-basic/tutorial-2c/index.md +++ b/docs/1-basic/tutorial-2c/index.md @@ -2,14 +2,14 @@ ## 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. +In this tutorial, we will use OpenStreetMap as the background map to create a more practical page. [Click here](https://svgmap.org/examples/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} 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) + - [tutorial2c.html](https://www.svgmap.org/examples/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). @@ -18,7 +18,7 @@ The file structure is as follows: ### Files Used {#files-used} -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c.zip) of used files +- [ZIP archive file](https://www.svgmap.org/examples/tutorials/tutorial2c.zip) of used files ### Content Structure {#content-structure} @@ -86,9 +86,9 @@ In the previous chapter, we replaced Coastline.svg with dynamicOSM_r11.svg, but You can also use the same method to set up multiple add-on information items and switch between them. -- Click [here](http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/tutorial2c_add.html) to see it in action . +- Click [here](http://svg2.mbsrv.net/examples/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](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/) +- The file used is [here](https://svg2.mbsrv.net/examples/tutorials/tutorial2c/) The difference is the contents of Container.svg diff --git a/docs/1-basic/tutorial-3/index.md b/docs/1-basic/tutorial-3/index.md index 59bb2b6..88e98a3 100644 --- a/docs/1-basic/tutorial-3/index.md +++ b/docs/1-basic/tutorial-3/index.md @@ -2,41 +2,41 @@ ## 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. +This tutorial splits the content of Tutorial 1 into multiple tiles and displays them. [Click here](https://svgmap.org/examples/tutorials/tutorial3/tutorial3.html) to see it in action. ### File Structure {#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) +- [The tutorial3 directory](https://www.svgmap.org/examples/tutorials/tutorial3/) contains the following files. + - [tutorial3.html](https://www.svgmap.org/examples/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) + - [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial3/Container.svg) + - [Coastline.svg](https://www.svgmap.org//examples/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) + - [0_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_0.svg) + - [0_1.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_1.svg) + - [0_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_2.svg) + - [0_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_3.svg) + - [1_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_0.svg) + - [1_1.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_1.svg) + - [1_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_2.svg) + - [1_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_3.svg) + - [2_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/2_0.svg) + - [2_1.svg](https://www.svgmap.org//examples/tutorials/tutorial3/2_1.svg) + - [2_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/2_2.svg) + - [2_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/2_3.svg) + - [3_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_0.svg) + - [3_1.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_1.svg) + - [3_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_2.svg) + - [3_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_3.svg) ## Tutorial {#tutorial} ### Files Used {#files-used} -- [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip) file of used files +- [ZIP archive](https://www.svgmap.org/examples/tutorials/tutorial3.zip) file of used files ### Essential differences from existing frameworks {#essential-differences} diff --git a/docs/1-basic/tutorial-3b/index.md b/docs/1-basic/tutorial-3b/index.md index f10dafe..36ca361 100644 --- a/docs/1-basic/tutorial-3b/index.md +++ b/docs/1-basic/tutorial-3b/index.md @@ -3,14 +3,14 @@ ## Introduction {#introduction} In the previous chapter, we used tiles that had already been created, but here we will use [svgMapTools](https://github.com/svgmap/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. +[Click here](https://svgmap.org/examples/tutorials/tutorial3b/tutorial3b.html) to see it in action. ### File Structure {#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/ +- The [tutorial3b](https://www.svgmap.org/examples/tutorials/tutorial3b/) directory contains the following files: + - https://www.svgmap.org/examples/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 @@ -19,7 +19,7 @@ The file structure is as follows: ### Files Used {#files-used} -- [ZIP archive](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) file of used files +- [ZIP archive](https://www.svgmap.org/examples/tutorials/tutorial3b.zip) file of used files ### Preparing tiled content {#preparing-tiled-content} diff --git a/docs/1-basic/tutorial-4/index.md b/docs/1-basic/tutorial-4/index.md index 5379e3a..a23cf32 100644 --- a/docs/1-basic/tutorial-4/index.md +++ b/docs/1-basic/tutorial-4/index.md @@ -3,27 +3,27 @@ ## 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 . +[Click here](https://svgmap.org/examples/tutorials/tutorial4/tutorial4.html) to see it in action . ### File Structure {#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) +- [The tutrial4 directory](https://www.svgmap.org/examples/tutorials/tutorial4/tutorial4.html) contains the following files. + - [tutorial4.html](https://www.svgmap.org/examples/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) + - [Container.svg](https://www.svgmap.org/examples/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) + - [dynamicOSM_r11.svg](https://www.svgmap.org/examples/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/). + - This was created using this tool: [a tool that layers bitmap map images onto SVGMap](https://svgmap.org/examples/lvl0.1/bitimage2geoInfo/mapPage/). ## Tutorial {#tutorial} ### Files Used {#files-used} -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4.zip) of used files +- [ZIP archive file](https://www.svgmap.org/examples/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} @@ -109,7 +109,7 @@ Basically the same as [tutorial2b.html](https://www.svgmap.org/wiki/index.php?ti ### 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. + - Created using a [tool](https://svgmap.org/examples/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-lon-lat-xy-coord} diff --git a/docs/2-webapp-layer-edition/tutorial-10/index.md b/docs/2-webapp-layer-edition/tutorial-10/index.md index af0267e..8edca54 100644 --- a/docs/2-webapp-layer-edition/tutorial-10/index.md +++ b/docs/2-webapp-layer-edition/tutorial-10/index.md @@ -8,11 +8,11 @@ sidebar_position: 10 Mesh data (grid data), also known as [raster data](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%AB8#Raster), is almost equivalent to bit image data used as web content. Therefore, we will build a web application that dynamically converts mesh data into bit image content (PNG format) and displays it on a map screen. This offers performance advantages. -To actually do it, click on [mesh3.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html). +To actually do it, click on [mesh3.html](https://svgmap.org/examples/tutorials/mesh3/mesh3.html). ### Source Code {#source-code} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/) +- [Source code directory](https://svgmap.org/examples/tutorials/mesh3/) - [The geoid height data](https://fgd.gsi.go.jp/download/geoid.php) (TEXT data) published by the Geospatial Information Authority of Japan is read using the fetch API and stored in a variable (Object). - Construct a bit image using the canvas element API. - Convert it to a dataURI, turn it into an SVG image element, and place it on the map. @@ -23,14 +23,14 @@ Mesh data (Grid data),also known as [raster data](https://www.svgmap.org/wiki/in The distinctive code is found in the webApp linked to the layer. -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html) to see how it works. -- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh3.zip). +- [Click here](https://svgmap.org/examples/tutorials/mesh3/mesh3.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/mesh3.zip). ### Data to Use {#data-to-use} We will use the geoid height data (TEXT data) published by the Geospatial Information Authority of Japan on [this page](https://fgd.gsi.go.jp/download/geoid.php). -[Actual data to be used](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/gsigeo2011_ver2_1.asc) +[Actual data to be used](https://svgmap.org/examples/tutorials/mesh3/gsigeo2011_ver2_1.asc) The detailed specifications of this data are described in the package documentation (**asc_instruction_sheet.pdf**) distributed on the above website , but it is basically in text [Raster format](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%AB8#Raster). @@ -43,17 +43,17 @@ Regarding the data itself, it's important to note the difference between the def ![Explination Diagram](../../../src/images/800px-Raster.png) -[Explination Diagram](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3_raster_exp.svg) +[Explination Diagram](https://svgmap.org/examples/tutorials/mesh3/mesh3_raster_exp.svg) -### [mesh3.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html) {#mesh3-html} +### [mesh3.html](https://svgmap.org/examples/tutorials/mesh3/mesh3.html) {#mesh3-html} Nothing has changed from before. -### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/Container.svg) {#container-svg} +### [Container.svg](https://svgmap.org/examples/tutorials/mesh3/Container.svg) {#container-svg} Nothing has changed from before. -### [rasterMesh.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.svg) {#raster-mesh-svg} +### [rasterMesh.svg](https://svgmap.org/examples/tutorials/mesh3/rasterMesh.svg) {#raster-mesh-svg} - The WebApp is blank content linked to (rasterMesh.html below). - This specifies that the webApp window should appear along with the display. @@ -67,7 +67,7 @@ Nothing has changed from before. ``` -### [rasterMesh.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.html), [rasterMesh.js](https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.js) {#raster-mesh} +### [rasterMesh.html](https://svgmap.org/examples/tutorials/mesh3/rasterMesh.html), [rasterMesh.js](https://svgmap.org/examples/tutorials/mesh3/rasterMesh.js) {#raster-mesh} This process dynamically generates a bit image using the raster data of the loaded text, and then visualizes it by pasting it onto the associated rasterMesh.svg file. diff --git a/docs/2-webapp-layer-edition/tutorial-11/index.md b/docs/2-webapp-layer-edition/tutorial-11/index.md index 6d60924..b5aa15d 100644 --- a/docs/2-webapp-layer-edition/tutorial-11/index.md +++ b/docs/2-webapp-layer-edition/tutorial-11/index.md @@ -8,11 +8,11 @@ sidebar_position: 11 Based on [Tutorial 10](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%AB10), we will build an interactive application that allows you to specify a location on a map and calculates and displays the geoid elevation for that location. -To see the actual operation, click on [mesh3b.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html). +To see the actual operation, click on [mesh3b.html](https://svgmap.org/examples/tutorials/mesh3b/mesh3b.html). ### Source Code {#source-code} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/) +- [Source code directory](https://svgmap.org/examples/tutorials/mesh3b/) - Calculation of values ​​​​at arbitrary positions using mesh data via bilinear interpolation - Select any point on the map to display the geoid elevation at that location. @@ -20,10 +20,10 @@ To see the actual operation, click on [mesh3b.html](https://svgmap.org/devinfo/d Based on [Tutorial 10](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%AB10), we will build an interactive application that calculates and displays the geoid elevation at a specified location on a map. The distinctive code is located in the webApp linked to the layer. -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html) to see how it works. -- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh3b.zip). +- [Click here](https://svgmap.org/examples/tutorials/mesh3b/mesh3b.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/mesh3b.zip). -### [mesh3b.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html) {#mesh3b-html} +### [mesh3b.html](https://svgmap.org/examples/tutorials/mesh3b/mesh3b.html) {#mesh3b-html} There aren't any major differences from before. @@ -72,15 +72,15 @@ There aren't any major differences from before. ``` -### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/Container.svg) {#container-svg} +### [Container.svg](https://svgmap.org/examples/tutorials/mesh3b/Container.svg) {#container-svg} There are no significant differences from before. -### [rasterMeshI.svg](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/rasterMeshI.svg) {#raster-meshi-svg} +### [rasterMeshI.svg](https://svgmap.org/examples/tutorials/mesh3b/rasterMeshI.svg) {#raster-meshi-svg} There aren't any major differences from [Tutorial 10](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%AB10#Container.svg). -### [rasterMeshI.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/rasterMeshI.html), [geoidCalc.js](https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/geoidCalc.js) {#raster-mesh-geoid-calc} +### [rasterMeshI.html](https://svgmap.org/examples/tutorials/mesh3b/rasterMeshI.html), [geoidCalc.js](https://svgmap.org/examples/tutorials/mesh3b/geoidCalc.js) {#raster-mesh-geoid-calc} The code from [Tutorial 10](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%AB10#rasterMesh.html) now includes a UI for specifying a location on a map and a function to calculate the geoid height at that location. @@ -91,7 +91,7 @@ The code from [Tutorial 10](https://www.svgmap.org/wiki/index.php?title=%E3%83%8 - ```svgMapAuthoringTool.initPOIregistTool``` - ```id="pointInputUI"``` In the div element, - This tool registers a UI element for placing point information on a map, which can be used with [svgMapAuthoringTool](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMapAuthoringTool). ([initPOIregistTool](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#initPOIregistTool)) - - ```POIUIcbFunc``` This is a callback function that is called when the operation to set a point is performed. It obtains latitude and longitude information from the UI, getGeoidHeightpasses it to a function that calculates geoid height, and displays the answer. + - ```POIUIcbFunc``` This is a callback function that is called when the operation to set a point is performed. It obtains latitude and longitude information from the UI, (```getGeoidHeightpasses```) it to a function that calculates geoid height, and displays the answer. - ```getGeoidHeight``` A function to calculate geoid height from grid data. - Bilinear interpolation is used to calculate the geoid height at any given latitude and longitude (within the range of grid data). diff --git a/docs/2-webapp-layer-edition/tutorial-5/index.md b/docs/2-webapp-layer-edition/tutorial-5/index.md index 7bc2daa..510b3d4 100644 --- a/docs/2-webapp-layer-edition/tutorial-5/index.md +++ b/docs/2-webapp-layer-edition/tutorial-5/index.md @@ -8,22 +8,22 @@ sidebar_position: 5 This tutorial demonstrates how to create a layer using [OpenStreetMap's tile pyramid](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames) that displays the appropriate map ([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) as it expands and scrolls, utilizing SVGMap's [WebApp Layer mechanism](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0). -[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html) to see how it works . +[Click here](https://svgmap.org/examples/tutorials/tutorial5/tutorial5.html) to see how it works . ### File Structure {#file-structure} The file structure is as follows: -- [the tutorial5](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5) directory contains the following files. - - [Tutorial5.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html) +- [the tutorial5](https://www.svgmap.org/examples/tutorials/tutorial5) directory contains the following files. + - [Tutorial5.html](https://www.svgmap.org/examples/tutorials/tutorial5/tutorial5.html) - HTML for Tutorial 5. Same content as tutorial2b.html. - - [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/Container.svg) + - [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial5/Container.svg) - Load dynamicOSM_r11.svg to display an external OpenStreetMap. - - [dynamicOSM_r11.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.svg) + - [dynamicOSM_r11.svg](https://www.svgmap.org/examples/tutorials/tutorial5/dynamicOSM_r11.svg) - A layer containing SVGMap content that displays an external OpenStreetMap (it's empty inside, and the underlying web application dynamically constructs the DOM). - - [dynamicOSM_r11.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.html) + - [dynamicOSM_r11.html](https://www.svgmap.org/examples/tutorials/tutorial5/dynamicOSM_r11.html) - The HTML of the web application associated with the above dynamicOSM_r11.svg - - [dynamicOSM_r11.js](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/dynamicOSM_r11.js) + - [dynamicOSM_r11.js](https://www.svgmap.org/examples/tutorials/tutorial5/dynamicOSM_r11.js) - The JavaScript code for the web application linked to the above dynamicOSM_r11.svg file. ## Tutorial {#tutorial} @@ -38,8 +38,8 @@ Here, we'll use this feature to build a layer that uses OpenStreetMap's tile pyr Note that Tutorial 5 contains a fair amount of code, so if you want to try out the WebApp Layer's features with less code, [Tutorial 6](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%AB6) might be easier. -[Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5/tutorial5.html) to see how it works . -The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial5.zip). +[Click here](https://www.svgmap.org/examples/tutorials/tutorial5/tutorial5.html) to see how it works . +The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/tutorial5.zip). ### Tutorial5.html {#tutorial5-html} @@ -107,7 +107,7 @@ The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tut ``` -### dynamicOSM_r11.svg +### dynamicOSM_r11.svg {#dynamic-osm-r11-svg} An SVG map content layer file with a web application linked to display an external OpenStreetMap. @@ -177,7 +177,7 @@ dynamicOSM_r11.html - When this function (preRenderFunction) is called again after scrolling, it uses the value of this metadata to ensure that tiles that have already been drawn up to the previous step and should be drawn again after scrolling remain in place. - ```getTile``` Based on the information (ZoomLevel, X, Y) in the tile list's associative array, obtain the image element for the tile to be retrieved. - OSM bit image tiles are pasted as SVG image elements. - - getURLA function that generates the URL of an actual OSM tile from ZoomLevel, X, and Y. + - ```getURL``` A function that generates the URL of an actual OSM tile from ZoomLevel, X, and Y. - ```XY2latLng``` A function that obtains the geographic coordinate region of a tile from ZoomLevel, X, and Y. - ```getTileSet```A function that lists the tiles to be displayed at the current zoom level and display area. - [This function](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Zoom_levels) retrieves the Zoom and [XY coordinates](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#X_and_Y) of an OSM Slippy Map Tile and returns an associative array using these coordinates as keys. @@ -193,222 +193,216 @@ dynamicOSM_r11.html Click see full JS data ```js -// Dynamic OpenStreetMap Layer for SVGMap Sample for SVGMapLevel0 > r10 -// Programmed by Satoru Takagi -// Copyright (C) 2013 by Satoru Takagi @ KDDI CORPORATION -// -// License: -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License version 3 as -// published by the Free Software Foundation. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. -// -// You should have received a copy of the GNU General Public License -// along with this program. If not, see (http://www.gnu.org/licenses/). - -// Prototype of a dynamic layer intended for iframe implementation -// (Allows you to place JavaScript imports in the SVG content.) -// OpenStreetMap is used as the map data (it can be replaced with other data relatively easily) -// -// -// In the environment in which this code operates, the following are set by default: -// document: This document itself -// svgImage: The SVGMap content associated with this document -// svgMap.getGeoViewBox(): Geographic viewbox -// svgImageProps: Various properties of the SVGMap content associated with this document -// svgImageProps.scale: Scale (scale of the coordinates of this svg content relative to the screen coordinates) -// -// 2013/01/24: 1st ver. -// 2022/01/31: Ported to WebApp layer // -Onload = function () - -to be executed when this file is loaded { - // Immediately after this script is loaded, refreshScreen() is called, - // The following preRenderFunction is executed for the first time - svgMap.refreshScreen(); -}; -function preRenderFunction() { // Callback function - var level - that is executed just before redrawing = 8; - // Calculate zoom level (3 to 18) - var level = Math.floor(Math.LOG2E * Math.log(svgImageProps.scale) + 7.5); - if (level > 18) { - level = 18; - } else if (level < 3) { - level = 3; - } - // Get the XY coordinates and HashKey of the tile to be displayed in the viewBox in the geographic coordinates of this map - var tileSet = getTileSet(svgMap.getGeoViewBox(), level); - // Get the element with the tag name "image" (image for each map tile) that is currently loaded - console.log("tileSet:", tileSet); - var currentTiles = svgImage.getElementsByTagName("image"); - // Repeat the following for each tile obtained, reusing those that have already been loaded and deleting those that are outside the display range - for (var i = currentTiles.length - 1; i >= 0; i--) { - var oneTile = currentTiles[i]; - var qkey = oneTile.getAttribute("metadata"); - if (tileSet[qkey]) { - // Set a flag to skip as it already exists. - tileSet[qkey].exist = true; - } else { - // Since it doesn't exist, remove it - oneTile.parentNode.removeChild(oneTile); +// Dynamic OpemStreetMap Layer for SVGMap Sample for SVGMapLevel0 > r10 +// +// Programmed by Satoru Takagi +// +// License: (MPL v2) +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at https://mozilla.org/MPL/2.0/. +// Prototype of a dynamic intended layer for use as an iframe +// (JavaScript can be imported and placed within the SVG content.) +// OpenStreetMap is used as the map data (this can be easily replaced with other sources). +// +// +// The following are pre-configured in the environment in which this code operates. +// document:This document itself +// svgImage: The SVGMap content associated with this document +// svgMap.getGeoViewBox(): geographical viewbox +// svgImageProps: Various properties of the SVGMap content associated with this document +// svgImageProps.scale: Scale (the scale of the coordinates of this SVG content relative to the screen coordinates) +// +// 2013/01/24 : 1st ver. +// 2022/01/31: Ported to WebApp layer + +// Execute when this file is loaded. +onload = function () { + // Immediately after this script is loaded, call refreshScreen() to: + //The following preRenderFunction is executed the first time. + svgMap.refreshScreen(); +}; + +function preRenderFunction() { + // Callback function executed immediately before redrawing + var level = 8; + // Calculate zoom level (3 to 18) + var level = Math.floor(Math.LOG2E * Math.log(svgImageProps.scale) + 7.5); + if (level > 18) { + level = 18; + } else if (level < 3) { + level = 3; + } + + // Get the XY coordinates and HashKey of the tile to be displayed in the viewBox in the geographic coordinates of this map. + var tileSet = getTileSet(svgMap.getGeoViewBox(), level); + + // Get the currently loaded element with the tag name "image" (the image for each map tile). + console.log("tileSet:", tileSet); + var currentTiles = svgImage.getElementsByTagName("image"); + + // Repeat the following for each tile obtained, reusing those already loaded and deleting those outside the display range. + for (var i = currentTiles.length - 1; i >= 0; i--) { + var oneTile = currentTiles[i]; + var qkey = oneTile.getAttribute("metadata"); + if (tileSet[qkey]) { + // Set a flag to skip as it already exists. + tileSet[qkey].exist = true; + else { + // It doesn't exist, so delete it. + oneTile.parentNode.removeChild(oneTile); } + } + // Repeat the following steps for the number of tiles to be displayed, adding any unloaded files to the load elements. + for (var tkey in tileSet) { + if (!tileSet[tkey].exist) { + var addTile = getTile(tileSet[tkey].x, tileSet[tkey].y, level, this.CRS); + svgImage.getElementsByTagName("svg")[0].appendChild(addTile); + } + } +} + +// Get tiles (divided map image) for the specified location +function getTile(tileX, tileY, level, crs) { + // Get the URL of the tile with coordinates tileX, tileY, and zoom level. + var tileURL = getURL(tileX, tileY, level); + + // Get the bbox in the SVG of the tile + var tLatLng = XY2latLng(tileX * tilePix, tileY * tilePix, level); + var tSvg = svgMap.transform(tLatLng.lng, tLatLng.lat, crs); + var tLatLngBR = XY2latLng( + tileX * tilePix + tilePix, + tileY * tilePix + tilePix, + level + ); + var tSvgBR = svgMap.transform(tLatLngBR.lng, tLatLngBR.lat, crs); + tSvg.width = tSvgBR.x - tSvg.x; // Inefficient... Improvement to be postponed + tSvg.height = tSvgBR.y - tSvg.y; + + // Create the tile elements to be retrieved and set their respective attributes. + var cl = svgImage.createElement("image"); + cl.setAttribute("x", tSvg.x); + cl.setAttribute("y", tSvg.y); + cl.setAttribute("width", tSvg.width); + cl.setAttribute("height", tSvg.height); + cl.setAttribute("xlink:href", tileURL.URL); + cl.setAttribute("metadata", tileURL.Key); + + return cl; +} + +// Returns the required XY set of tiles when displaying a map at the specified map coordinates in a geoViewBox with a zoom level of level. +function getTileSet(geoViewBox, level) { + var TileSet = new Object(); + if (geoViewBox.y + geoViewBox.height > 85.05113) { + geoViewBox.height = 85.05113 - geoViewBox.y; + } + + if (geoViewBox.y < -85.05113) { + geoViewBox.y = -85.05113; + } + + // Returns the XY coordinates of a tile in the specified area and its HashKey. + var tlxy = latLng2XY(geoViewBox.y + geoViewBox.height, geoViewBox.x, level); + var tileTLxy = XY2TileXY(tlxy); + var brxy = latLng2XY(geoViewBox.y, geoViewBox.x + geoViewBox.width, level); + var tileBRxy = XY2TileXY(brxy); + + // Repeat the following for the number of tiles required for the desired height and width. + for (var i = tileTLxy.y; i <= tileBRxy.y; i++) { + for (var j = tileTLxy.x; j <= tileBRxy.x; j++) { + // Get the HashKey from the tile's XY coordinates and zoom level + var qkey = getKey(j, i, level); + // Set the necessary tile information for each HashKey obtained above. + TileSet[qkey] = new Object(); + TileSet[qkey].x = j; + TileSet[qkey].y = i; + } + } + return TileSet; +} + +// Convert latitude and longitude to X and Y coordinates +function latLng2XY(lat, lng, lvl) { + var size = lvl2Res(lvl); + var sinLat = Math.sin((lat * Math.PI) / 180.0); + var pixelX = ((lng + 180.0) / 360.0) * size; + var pixelY = + (0.5 - Math.log((1 + sinLat) / (1.0 - sinLat)) / (4 * Math.PI)) * size; + return { + x: pixelX, + y: pixelY, + }; +} +// Convert from XY to tile XY +function XY2TileXY(xy) { + var tileX = Math.floor(xy.x / tilePix); + var tileY = Math.floor(xy.y / tilePix); + return { + x: tileX, + y: tileY, + }; +} +var tilePix = 256; +// Returns the size of a tile piece from the zoom level. +function lvl2Res(lvl) { + var j = 1; + for (var i = 0; i < lvl; i++) { + j = j * 2; + } + return j * tilePix; +} - } - - // Repeat the following for the number of tiles to be displayed, and add any unloaded files to the loaded element - for (var tkey in tileSet) { - if (!tileSet[tkey].exist) { - var addTile = getTile(tileSet[tkey].x, tileSet[tkey].y, level, this.CRS); - svgImage.getElementsByTagName("svg")[0].appendChild(addTile); - } - } -} - -// Get the tile (divided map image) at the specified location -function getTile(tileX, tileY, level, crs) { - // Get the URL of the tile with coordinates tileX, tileY and zoom level. - var tileURL = getURL(tileX, tileY, level); - - // Get bbox in SVG of tile - var tLatLng = XY2latLng(tileX * tilePix, tileY * tilePix, level); - var tSvg = svgMap.transform(tLatLng.lng, tLatLng.lat, crs); - var tLatLngBR = // - ​ - ​ - ​ - ​ - ​ - ​Inefficient...improvement postponed - tSvg.height = tSvgBR.y - tSvg.y; - - // Create the tile element to be retrieved and set its attributes. - var cl = svgImage.createElement("image"); - cl.setAttribute("x", tSvg.x); - cl.setAttribute("y", tSvg.y); - cl.setAttribute("width", tSvg.width); - cl.setAttribute("height", tSvg.height); - cl.setAttribute("xlink:href", tileURL.URL); - cl.setAttribute("metadata", tileURL.Key); - - return cl; -} - -// A function that returns the XY set of tiles required when displaying a map at level zoom level in a geoViewBox with the specified map coordinates. -getTileSet(geoViewBox, level) { - var TileSet = new Object(); - if (geoViewBox.y + geoViewBox.height > 85.05113) { - geoViewBox.height = 85.05113 - geoViewBox.y; - } - - if (geoViewBox.y < -85.05113) { - } - // - - Returns the XY coordinates and HashKey of the tile in the specified area - var tlxy = latLng2XY(geoViewBox.y + geoViewBox.height, geoViewBox.x, level); - var tileTLxy = XY2TileXY(tlxy); - var brxy = latLng2XY(geoViewBox.y, geoViewBox.x + geoViewBox.width, level); - var tileBRxy = XY2TileXY(brxy); - - // Repeat the following for the number of tiles equal to the required height and width - for (var i = tileTLxy.y; i <= tileBRxy.y; i++) { - for (var j = tileTLxy.x; j <= tileBRxy.x; j++) { - // Get the HashKey from the tile's XY coordinates and zoom level - var qkey = getKey(j, i, level); - // Set the necessary tile information for each HashKey obtained above. - TileSet[qkey] = new Object(); - TileSet[qkey].x = j; - TileSet[qkey].y = i; - } - } - return TileSet; -} - -// Convert latitude and longitude to XY -function latLng2XY(lat, lng, lvl) { +// Convert from XY to latitude and longitude +function XY2latLng(px, py, lvl) { var size = lvl2Res(lvl); - var sinLat = Math.sin((lat * Math.PI) / 180.0); - var pixelX = ((lng + 180.0) / 360.0) * size; - var pixelY = - (0.5 - Math.log((1 + sinLat) / (1.0 - sinLat)) / (4 * Math.PI)) * size; - return { - x: pixelX, - y: pixelY, - }; -} - -// Convert from XY to tile's XY -function XY2TileXY(xy) { - var tileX = Math.floor(xy.x / tilePix); - var tileY = Math.floor(xy.y / tilePix); - return { - x: tileX, - y: tileY, - }; -} - -var tilePix = 256; -// Return the size of a tile piece from the zoom level -function lvl2Res(lvl) { - var j = 1; - for (var i = 0; i < lvl; i++) { - j = j * 2; - } - return - j * tilePix; -} // Convert - from - -XY to latitude/ - longitude -function - var lat = 90 - (360 * Math.atan(Math.exp(-y * 2 * Math.PI))) / Math.PI; - var lng = 360 * x; - return { - lat: lat, - lng: lng, - }; -} -var sva = new Array("a", "b", "c"); -var svNumb = 0; -var culture = "en-US"; -var bingRoadSearchPart = ".jpeg?g=849&mkt=" + culture + "&shading=hill"; // -function getURL(tx, ty, lvl) that -returns a URL from the tile's XY and zoom level { - // Get a HashKey from the XY and zoom level - var tile_ans = getKey(tx, ty, lvl); - // Assemble an OpenStreetMap URL - var mapServerURL = - "http://" + - sva[svNumb] + - ".tile.openstreetmap.org/" + - lvl + - "/" + - tx + - "/" + - ty + - ".png"; - // Load balancing is performed when acquiring map images by sequentially switching between multiple similar servers. - ++svNumb; - if (svNumb > 2) { - svNumb = 0; - } - return { - URL: mapServerURL, - Key: tile_ans, - }; -} // -function getKey(tx, ty, lvl) -that generates and returns a HashKey { - return tx + "_" + ty + "_" + lvl; + var x = px / size - 0.5; + var y = 0.5 - py / size; + var lat = 90 - (360 * Math.atan(Math.exp(-y * 2 * Math.PI))) / Math.PI; + var lng = 360 * x; + return { + lat: lat, + lng: lng, + }; +} + +var sva = new Array("a", "b", "c"); +var svNumb = 0; +var culture = "en-US"; +var bingRoadSearchPart = ".jpeg?g=849&mkt=" + culture + "&shading=hill"; + +// Returns a URL based on the tile's XY coordinates and zoom level. +function getURL(tx, ty, lvl) { + // Get a HashKey from XY and zoom level + var tile_ans = getKey(tx, ty, lvl); + // Assemble the OpenStreetMap URL + var mapServerURL = + "http://" + + sva[svNumb] + + ".tile.openstreetmap.org/" + + lvl + + "/" + + tx + + "/" + + ty + + ".png"; + // Load balancing is performed when acquiring map images by sequentially switching between multiple similar servers. + ++svNumb; + if (svNumb > 2) { + svNumb = 0; + } + return { + URL: mapServerURL, + Key: tile_ans, + }; +} + +// Generate and return a HashKey +function getKey(tx, ty, lvl) { + return tx + "_" + ty + "_" + lvl; } ``` diff --git a/docs/2-webapp-layer-edition/tutorial-6/index.md b/docs/2-webapp-layer-edition/tutorial-6/index.md index c42fec3..7c736bd 100644 --- a/docs/2-webapp-layer-edition/tutorial-6/index.md +++ b/docs/2-webapp-layer-edition/tutorial-6/index.md @@ -8,11 +8,11 @@ sidebar_position: 6 This tutorial shows how to load [GeoJSON](https://ja.wikipedia.org/wiki/GeoJSON) data asynchronously in a web application , convert it into an SVGMap DOM using the SVGMap framework library, and then display it. -To see the actual operation, click on [geojson1.html](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html). +To see the actual operation, click on [geojson1.html](https://svgmap.org/examples/tutorials/geojson1/geojson1.html). ### File Structure {#file-structure} -- [Tutorial 6 directories](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/) +- [Tutorial 6 directories](https://svgmap.org/examples/tutorials/geojson1/) - geojson1.html: Loading of related libraries (SVGMapGIS) - Container.svg: Clickable layering settings - geoJsonExample1.svg: How to specify a web app that manipulates a layer with a UI. @@ -21,12 +21,12 @@ To see the actual operation, click on [geojson1.html](https://svgmap.org/devinfo ## Tutorial {#tutorial} -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html) to see how it works. -The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/geojson1.zip). +- [Click here](https://svgmap.org/examples/tutorials/geojson1/geojson1.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/geojson1.zip). ### geojson1.html {#geojson1-html} -The only difference from the HTML 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) is the [SVG content](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/Container.svg) that is loaded. +The only difference from the HTML 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) is the [SVG content](https://svgmap.org/examples/tutorials/geojson1/Container.svg) that is loaded. ```html @@ -75,7 +75,7 @@ The only difference from the HTML in [Tutorial 2b](https://www.svgmap.org/wiki/i ### Container.svg {#container-svg} -- The [theme layer displaying GeoJSON](https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geoJsonExample1.svg) and the background map (OpenStreetMap) are loaded using the animation element. +- The [theme layer displaying GeoJSON](https://svgmap.org/examples/tutorials/geojson1/geoJsonExample1.svg) and the background map (OpenStreetMap) are loaded using the animation element. - Since GeoJSON data is vector data, the [`clickable`](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B) attribute is specified in the `class` attribute. - For everything else, I'm using layering techniques based on [these key points](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). diff --git a/docs/2-webapp-layer-edition/tutorial-7/index.md b/docs/2-webapp-layer-edition/tutorial-7/index.md index ca21076..873b136 100644 --- a/docs/2-webapp-layer-edition/tutorial-7/index.md +++ b/docs/2-webapp-layer-edition/tutorial-7/index.md @@ -8,11 +8,11 @@ sidebar_position: 7 This tutorial demonstrates how to load a tiled CSV Point geometry file into a web application using asynchronous loading, convert it to an SVGMap DOM using the SVGMap framework library, and then display it. -- To see the actual operation, click on [tiling1.html](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/tiling1.html). +- To see the actual operation, click on [tiling1.html](https://svgmap.org/examples/tutorials/tiling1/tiling1.html). ### Source Code {#source-code} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/) +- [Source code directory](https://svgmap.org/examples/tutorials/tiling1/) - tiling1.html: Loading of related libraries (SVGMapGIS) - Container.svg: Setting up clickable layering ( almost the same as [Tutorial 6](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%AB6)) - simpleTiling.svg: Almost identical to webApp [tutorial 6](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%AB6), which manipulates layers with a UI. @@ -26,8 +26,8 @@ This tutorial demonstrates how to load a tiled CSV Point geometry file into a we This approach avoids using dynamic mechanisms like a DBMS in the backend, instead tiling relatively large vector data (in this case, point geometry data) to create content that can be comfortably used as a WebMap/GIS. This type of design is called [vector tiling](https://en.wikipedia.org/wiki/Vector_tiles) in the GIS world, but it's more commonly known as a [Jamstack pattern](https://en.wikipedia.org/wiki/Jamstack). -[Click here](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/tiling1.html) to see how it works . -The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/tiling1.zip). +- [Click here](https://svgmap.org/examples/tutorials/tiling1/tiling1.html) to see how it works . +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/tiling1.zip). #### Note @@ -106,7 +106,7 @@ Sarahama Sports Center, 248-1,3,3,9999 #### CSV Tiling -- [I've prepared a file called simpleTiling.py](https://svgmap.org/devinfo/devkddi/tutorials/tiling1/simpleTiling.py), so we'll use that. +- [I've prepared a file called simpleTiling.py](https://svgmap.org/examples/tutorials/tiling1/simpleTiling.py), so we'll use that. - tilesCreate a directory in the working directory. - command:　```python simpleTiling.py P27-13.csv 0 1``` - Reference: [Installing Python for Windows](https://www.python.jp/install/windows/install.html) diff --git a/docs/2-webapp-layer-edition/tutorial-8/index.md b/docs/2-webapp-layer-edition/tutorial-8/index.md index 424ea5a..27482e1 100644 --- a/docs/2-webapp-layer-edition/tutorial-8/index.md +++ b/docs/2-webapp-layer-edition/tutorial-8/index.md @@ -8,11 +8,11 @@ sidebar_position: 8 This tutorial demonstrates how to asynchronously load a CSV file containing mesh data in a 2D array format (also known as grid data or raster data) into a web application, convert it to an SVGMap DOM element, and display it. -To actually do it, click on [mesh1.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html). +To actually do it, click on [mesh1.html](https://svgmap.org/examples/tutorials/mesh1/mesh1.html). ### Source Code {#source-code} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh1/) +- [Source code directory](https://svgmap.org/examples/tutorials/mesh1/) - Determine the format of the mesh data you will be using in this tutorial. - Container.svg: Specifies a clickable layer. - ArrayMesh.svg: Layer associated with webApp @@ -21,8 +21,8 @@ To actually do it, click on [mesh1.html](https://svgmap.org/devinfo/devkddi/tuto ## Tutorial {#tutorial} -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html) to see how it works. -- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh1.zip). +- [Click here](https://svgmap.org/examples/tutorials/mesh1/mesh1.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/mesh1.zip). ### What is mesh data? {#what-is-mesh-data} @@ -115,7 +115,7 @@ We will use a text-encoded raster format. #### Sample data for practical use -[Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh.csv) for the sample data (density of shrines and temples in Japan) +[Click here](https://www.svgmap.org/examples/tutorials/mesh1/mesh.csv) for the sample data (density of shrines and temples in Japan) ``` minX:124.1539312,maxX:145.7870748,minY:24.33444293,maxY:45.51431213,partX:100,partY:98,valName:count/km2,minVal:1.95645299200927E-03,maxVal:2.86870067881484 diff --git a/docs/2-webapp-layer-edition/tutorial-9/index.md b/docs/2-webapp-layer-edition/tutorial-9/index.md index f27e0e6..1aae436 100644 --- a/docs/2-webapp-layer-edition/tutorial-9/index.md +++ b/docs/2-webapp-layer-edition/tutorial-9/index.md @@ -10,11 +10,11 @@ This tutorial demonstrates how to display tiled mesh data using asynchronous loa The sample data used for visualization is [the municipal code data for the third-level mesh system](https://www.stat.go.jp/data/mesh/m_itiran.html), published by the Statistics Bureau . -To actually use it, click on [mesh2.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2.html). +To actually use it, click on [mesh2.html](https://svgmap.org/examples/tutorials/mesh2/mesh2.html). ### Source Code {#source-code} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/) +- [Source code directory](https://svgmap.org/examples/tutorials/mesh2/) - The mesh data format used in this tutorial - Container.svg: Specifies a clickable layer. - meshTileViewer.svg: A layer to which webApps are linked; webApps are launched in a hidden state. @@ -27,8 +27,8 @@ This tutorial displays tiled mesh data. [Tutorial 8](https://www.svgmap.org/wiki Furthermore, we will be dealing with larger data (more mesh count, finer detail) than in [Tutorial 8](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%AB8).Therefore, in addition to tiling, we will also construct a simple tile pyramid and implement a function ([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) that changes the data displayed at small and large scales. -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2.html) to see how it works. -- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2.zip). +- [Click here](https://svgmap.org/examples/tutorials/mesh2/mesh2.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/mesh2.zip). ## Data to Display {#data-to-display} @@ -46,10 +46,10 @@ Furthermore, we will be dealing with larger data (more mesh count, finer detail) ### Preparing the original data {#preparing-the-original-data} -- We will retrieve the data using [this WebApp](https://www.svgmap.org/devinfo/devkddi/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html). +- We will retrieve the data using [this WebApp](https://www.svgmap.org/examples/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html). - This web application automatically retrieves all CSV files from [the Statistics Bureau's list of municipal mesh codes](https://www.stat.go.jp/data/mesh/m_itiran.html) and allows you to save CSV data at a specified mesh level. (All operations are performed within a browser.) - How to operate - - Access [japanMesh_r3.html](https://www.svgmap.org/devinfo/devkddi/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html) + - Access [japanMesh_r3.html](https://www.svgmap.org/examples/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html) - Please wait a while until the CSV data collection is complete. - ```市区町村``` Menu - ```３次メッシュ``` Menu @@ -60,16 +60,16 @@ Furthermore, we will be dealing with larger data (more mesh count, finer detail) This tutorial uses a [Jamstack](https://en.wikipedia.org/wiki/Jamstack) configuration that does not deploy a database or dynamic web services in the backend . -Static tile pyramid data (a set of CSV files) will be generated from the acquired raw data. The tool used for generation is [mesh2tileBasic.py](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2tileBasic.py), which is provided here . +Static tile pyramid data (a set of CSV files) will be generated from the acquired raw data. The tool used for generation is [mesh2tileBasic.py](https://svgmap.org/examples/tutorials/mesh2/mesh2tileBasic.py), which is provided here . -- Save [mesh2tileBasic.py](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/mesh2tileBasic.py) to your local PC +- Save [mesh2tileBasic.py](https://svgmap.org/examples/tutorials/mesh2/mesh2tileBasic.py) to your local PC - ```tiles``` Prepare a directory in the working directory. - ```python mesh2tileBasic.py mesh.csv```　Execute (mesh.csv is the file path of the downloaded original data) - ```tiles``` The directory contains the tiled mesh data. ### Explanation of tile pyramid data {#explination-of-tile-pyramid-data} -#### [top.csv](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2/meshTiles/top.csv) +#### [top.csv](https://www.svgmap.org/examples/tutorials/mesh2/meshTiles/top.csv) Data for small scale (data for the vertices of the tile pyramid) @@ -87,7 +87,7 @@ Data for small scale (data for the vertices of the tile pyramid) ... ``` -#### [4-digit number].csv Example: [5339.csv](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2/meshTiles/5339.csv) +#### [4-digit number].csv Example: [5339.csv](https://www.svgmap.org/examples/tutorials/mesh2/meshTiles/5339.csv) Tile-divided data for large scale (divided at the primary mesh level). diff --git a/docs/2-webapp-layer-edition/tutorial-9b/index.md b/docs/2-webapp-layer-edition/tutorial-9b/index.md index 2d785a1..8eca43f 100644 --- a/docs/2-webapp-layer-edition/tutorial-9b/index.md +++ b/docs/2-webapp-layer-edition/tutorial-9b/index.md @@ -8,11 +8,11 @@ sidebar_position: 9.5 In addition to the content of [Tutorial 9](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%AB9), we have customized the dialog box that appears when you click on a mesh. -To see the actual operation, click on [mesh2b.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html). +To see the actual operation, click on [mesh2b.html](https://svgmap.org/examples/tutorials/mesh2b/mesh2b.html). ### Source Code {#source-code} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/) +- [Source code directory](https://svgmap.org/examples/tutorials/mesh2b/) - meshTileViewerB.html: A web app linked to a layer. In addition to the content of Tutorial 9, it customizes the dialog by setting a callback function that is triggered when an object is clicked. ## Tutorial {#tutorial} @@ -21,14 +21,14 @@ In addition to [Tutorial 9](https://www.svgmap.org/wiki/index.php?title=%E3%83%8 The customized dialog searches for and displays the name of the local government based on the mesh code listed in the mesh's metada. At smaller scales, it displays the prefecture name; at larger scales, it displays the city/town/village name. -- [Click here] to see how it works. -- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/mesh2b.zip). +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html) to see how it works. +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/mesh2b.zip). The difference lies in the web app associated with the layer. -### [meshTileViewerB.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/meshTileViewerB.html) , [meshTileViewerB.js](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/meshTileViewerB.js) {#mesh-tile-viewr-b} +### [meshTileViewerB.html](https://svgmap.org/examples/tutorials/mesh2b/meshTileViewerB.html) , [meshTileViewerB.js](https://svgmap.org/examples/tutorials/mesh2b/meshTileViewerB.js) {#mesh-tile-viewr-b} -This explains the additions made to [meshTileViewer.html](https://svgmap.org/devinfo/devkddi/tutorials/mesh2/meshTileViewer.html) , the WebApp from [Tutorial 9](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%AB9#meshTileViewer.html). +This explains the additions made to [meshTileViewer.html](https://svgmap.org/examples/tutorials/mesh2/meshTileViewer.html) , the WebApp from [Tutorial 9](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%AB9#meshTileViewer.html). The added parts are the loading of data to create an associative array of city/town names using the city/town code as the key, and the setting of a callback function to display a custom dialog using that data. diff --git a/docs/3-web-service-integration/cross-origin-access/index.md b/docs/3-web-service-integration/cross-origin-access/index.md index dba0a80..ebda1fb 100644 --- a/docs/3-web-service-integration/cross-origin-access/index.md +++ b/docs/3-web-service-integration/cross-origin-access/index.md @@ -2,7 +2,7 @@ When integrating with external web services, you need to understand and handle cross-origin access depending on the external service. -If a bit image map layer requires projection conversion, or if you access a web service (webapi) on a different domain from the site where the webapp is located using XMLHttpRequest or fetch, an error may occur due to cross-origin access restrictions. This error cannot be resolved on the WebApp side alone, and requires adjustment of the server-side settings. +When a map layer in a bit image requires a projection transformation, or when accessing a web service (web API) on a different domain than the site where the web application resides using XMLHttpRequest or fetch, [cross-origin access](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS) restrictions may cause errors. These errors cannot be resolved solely on the web application side; server-side configuration adjustments are necessary. ## Overview {#overview} diff --git a/docs/3-web-service-integration/index.md b/docs/3-web-service-integration/index.md index ae83033..d838e23 100644 --- a/docs/3-web-service-integration/index.md +++ b/docs/3-web-service-integration/index.md @@ -1,7 +1,7 @@ # Part 3: Web Service Integration -SVGMap.js's advanced and flexible tiling mechanism allows for a wide range of Jamstack patterns , significantly reducing the need for dynamic web services with high server overhead compared to traditional frameworks. (References: Tutorial using SVGMapTools , Quad Tree Composite Tiling and the standardization of tiling ) +SVGMap.js leverages a wide range [Jamstack patterns](https://en.wikipedia.org/wiki/Jamstack) through its [advanced and flexible tiling mechanism](https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html), significantly reducing the need for dynamic web services with high server overhead compared to traditional frameworks. (References: [Tutorial using SVGMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials) , [Quad Tree Composite Tiling and the standardization of tiling](https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html)) -However, there are still many cases where dynamic service integration is required, so here we will implement a method to do this as a webApp layer that uses existing public web services. (Therefore, this tutorial will only cover using dynamic services and will not go into building the dynamic service itself. GeoServer , MapServer , PostgREST + PostGIS, etc. can be used for this implementation. SVGMap.org also publishes code for building a high-performance dynamic service called redisSvgMap. ) +However, dynamic service integration is often necessary, so here we will implement this method as a webApp layer using existing public web services. (Therefore, this tutorial will only cover the use of dynamic services and will not delve into building the dynamic service itself. [GeoServer](https://ja.wikipedia.org/wiki/GeoServer) , [MapServer](https://ja.wikipedia.org/wiki/MapServer) , [PostgREST + PostGIS](https://gis-ops.com/postgrest-postgis-api-tutorial-geospatial-api-in-5-minutes/), etc., can be used for this implementation. SVGMap.org also publishes code for building a high-performance dynamic service called [redisSvgMap.](https://github.com/svgmap/redisSvgMap)) -Because services are connected as individual layers, and the individual layers are composed (loosely coupled) into encapsulated applications ( Layers as WebApps ), this pattern can be considered a kind of micro-frontend (or composite UI ) type of microservices applied to maps. +Because services are connected as individual layers, and each layer is configured as an encapsulated application ( [Layers as WebApps](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) ) (i.e., loosely coupled), this pattern can be described as a type of [microservice](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9), specifically a [microfrontend](https://en.wikipedia.org/wiki/Micro_frontend) (or [composite UI](https://learn.microsoft.com/ja-jp/dotnet/architecture/microservices/architect-microservice-container-applications/microservice-based-composite-ui-shape-layout)), applied to [maps](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9). diff --git a/docs/3-web-service-integration/tutorial-12/index.md b/docs/3-web-service-integration/tutorial-12/index.md index 85a93c7..27c17e6 100644 --- a/docs/3-web-service-integration/tutorial-12/index.md +++ b/docs/3-web-service-integration/tutorial-12/index.md @@ -8,12 +8,12 @@ Let's try using the [GEBCO Web Service](https://www.gebco.net/data_and_products/ First, let's simply display the map content, regardless of the elastic scrolling. This is basically the same as what we did in [Tutorial 4](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%AB4). We just set the query part of the URL according to the WMS specifications. -- Click [wms1.html](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html) to see it in action . +- Click [wms1.html](https://svgmap.org/examples/tutorials/wms1/wms1.html) to see it in action . - (Note: It may take some time for the WMS to generate and distribute the map.) ## Source Code Directory {#source-code-directory} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/wms1/) +- [Source code directory](https://svgmap.org/examples/tutorials/wms1/) - Understand the relationship between WMS parameters and SVGMap content bit image alignment parameters - The image element places the data retrieved from the WMS. @@ -23,18 +23,18 @@ This section explains the most basic method of connecting to [the GEBCO Web Serv On the client side, there is no dynamic code implemented, such as JavaScript, and it simply displays a static bit image. Therefore, there is almost no difference from [Tutorial 4](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%AB4). -- Click [here](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html) to see it in action. -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/wms1.zip) of used files +- Click [here](https://svgmap.org/examples/tutorials/wms1/wms1.html) to see it in action. +- [ZIP archive file](https://www.svgmap.org/examples/tutorials/wms1.zip) of used files -### [wms1.html](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms1.html) {#wms1-html} +### [wms1.html](https://svgmap.org/examples/tutorials/wms1/wms1.html) {#wms1-html} There's nothing particularly different from before. -### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms1/Container.svg) {#container-svg} +### [Container.svg](https://svgmap.org/examples/tutorials/wms1/Container.svg) {#container-svg} There's nothing particularly different from before. -### [wms_static.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms1/wms_static.svg) {#wms-static-svg} +### [wms_static.svg](https://svgmap.org/examples/tutorials/wms1/wms_static.svg) {#wms-static-svg} As in [Tutorial 4](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%AB4) , we use the image element to place a bit image in the SVGMap content . @@ -86,7 +86,7 @@ With that in mind, let's look at the properties of the image element. - ```preserveAspectRatio="none"``` In accordance with the WMS bit image generation policy, the aspect ratio is not maintained when placing bit images. - ```opacity="0.5"``` The transparency is set to 50% to allow some of the background map to be seen. -#### Sauce +#### Source ```svg diff --git a/docs/3-web-service-integration/tutorial-13/index.md b/docs/3-web-service-integration/tutorial-13/index.md index 2308e30..beb6def 100644 --- a/docs/3-web-service-integration/tutorial-13/index.md +++ b/docs/3-web-service-integration/tutorial-13/index.md @@ -4,12 +4,12 @@ [Using the WebApp Layer mechanism](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0), you can connect to a web service and dynamically display map content according to the display area. We will use the same [GEBCO Web Service as in Tutorial 12](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/). -- Click on [wms2.html](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html) to see it in action . +- Click on [wms2.html](https://svgmap.org/examples/tutorials/wms2/wms2.html) to see it in action . - (Note: It may take some time for the WMS to generate and distribute the map.) ## Source Code Directory {#source-code-directory} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/wms2/) +- [Source code directory](https://svgmap.org/examples/tutorials/wms2/) - Gets the display area parameters each time you scroll. - Use this parameter to construct a query URL to the WMS. - The image element places the data retrieved from the WMS. @@ -19,18 +19,18 @@ We will use a [WMS (Web Map Service)](https://en.wikipedia.org/wiki/Web_Map_Service) to implement a layer as a [WebApp Layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) that can display a map of the displayed area in response to elastic scrolling . As a WMS, we will continue to use [the GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/) from [Tutorial 12](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%AB12). -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html) to see it in action. -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/wms2.zip) of used files +- [Click here](https://svgmap.org/examples/tutorials/wms2/wms2.html) to see it in action. +- [ZIP archive file](https://www.svgmap.org/examples/tutorials/wms2.zip) of used files -### [wms2.html](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html) {#wms2-html} +### [wms2.html](https://svgmap.org/examples/tutorials/wms2/wms2.html) {#wms2-html} There's nothing particularly different from before. -### [Container.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms2/Container.svg) {#container-svg} +### [Container.svg](https://svgmap.org/examples/tutorials/wms2/Container.svg) {#container-svg} There's nothing particularly different from before. -### [wms_dynamic.svg](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms_dynamic.svg) {#wms-dynamic-svg} +### [wms_dynamic.svg](https://svgmap.org/examples/tutorials/wms2/wms_dynamic.svg) {#wms-dynamic-svg} - ```data-controller="wmsController.html"``` This layer is linked to the WebApp ("wmsController.html"). - The WebApp performs DOM manipulation to display WMS content every time you scroll. @@ -44,10 +44,10 @@ There's nothing particularly different from before. ``` -### [wmsController.html](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html), [wmsController.js](https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.js) {#wms-controller} +### [wmsController.html](https://svgmap.org/examples/tutorials/wms2/wmsController.html), [wmsController.js](https://svgmap.org/examples/tutorials/wms2/wmsController.js) {#wms-controller} - ```onload``` A function called immediately after the webApp is loaded. - - ```svgMap.refreshScreen()``` preRenderFunctionThis will cause the map to be refreshed immediately after the webapp is loaded . + - ```svgMap.refreshScreen()``` ```preRenderFunction``` This will cause the map to be refreshed immediately after the webapp is loaded . - ```preRenderFunction``` [This is a callback function that is executed when redrawing occurs](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#preRenderFunction). It is also called when redrawing occurs during elastic scrolling. - ```prevImageElement.remove()``` Delete the image from WMS one step before (just before the telescopic scroll occurs) - ```svgMap.getGeoViewBox()``` [Get the display area in geographic coordinates](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getGeoViewBox) diff --git a/docs/3-web-service-integration/tutorial-14/index.md b/docs/3-web-service-integration/tutorial-14/index.md index cafa889..8510b78 100644 --- a/docs/3-web-service-integration/tutorial-14/index.md +++ b/docs/3-web-service-integration/tutorial-14/index.md @@ -6,13 +6,13 @@ We will integrate a service that dynamically generates and distributes vector da Although it connects to dynamic services, there is no fundamental difference from [Tutorial 6](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#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON). -- To see it in action, click [geojson2.html](https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html). +- To see it in action, click [geojson2.html](https://svgmap.org/examples/tutorials/geojson2/geojson2.html). ## Source Code {#source-code} [Compared to Tutorial 6](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#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON), the following differences apply: -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/geojson2/) +- [Source code directory](https://svgmap.org/examples/tutorials/geojson2/) - geoJsonExample2.html: - Generates a URL for GeoJson requests based on [the USGS Earthquake Hazards Program Feed specification and provides a UI for doing so](https://earthquake.usgs.gov/earthquakes/feed/). - Metadata display settings based on the same specifications @@ -22,8 +22,8 @@ Although it connects to dynamic services, there is no fundamental difference fro We will integrate a service that dynamically generates and distributes vector data into SVGMap.js. Here, we will integrate [real-time global earthquake occurrence data (GeoJSON Real-time Feeds)](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) (GeoJSON version) distributed by the USGS Hazards Program. There are basically no differences from [Tutorial 6](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%AB14#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON). -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html) to see it in action . -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/geojson2.zip) of used files +- [Click here](https://svgmap.org/examples/tutorials/geojson2/geojson2.html) to see it in action . +- [ZIP archive file](https://www.svgmap.org/examples/tutorials/geojson2.zip) of used files ### geojson1.html {#geojson-html} @@ -64,21 +64,21 @@ This service delivers real-time updates of earthquake occurrences around the wor #### Code -- A webApp that is linked to geoJsonExample2.svg and can control its DOM -- The following are the differences from Tutorial 6#geoJsonExample1.html +- A webApp that is linked to geoJsonExample2.svg and can [control its DOM](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) +- The following are the differences from [Tutorial 6#geoJsonExample1.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%AB6#geoJsonExample1.html) - ```addEventListener("load", function(){..})``` - ```changeData()``` A function to request and visualize earthquake data based on UI settings. - ```getUSGSURL()``` Generate a GET request to retrieve earthquake data from the USGS. - - We are making a request that performs cross-origin access. The USGS Earthquake GeoJSON Real-time Feeds is access-control-allow-origin: *accessible because it has a response header. + - We are making a request that performs cross-origin access. [The USGS Earthquake GeoJSON Real-time Feeds](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) is ```access-control-allow-origin: *``` accessible because it has a response header. - ```loadAndDrawGeoJson()``` A function that asynchronously retrieves and renders JSON data - - ```loadJSON()``` To prevent browser caching, we add a query part that is constantly changing ( there are getTime() better ways to do this , but this is a classic bad tip). + - ```loadJSON()``` To prevent browser caching, we add a query part that is constantly changing ( there are ```getTime()``` [better ways to do this](https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/) , but this is a classic bad tip). - ```buildSchema()``` - - When visualizing with the svgMapGIStool.drawGeoJson function, schema data is constructed to adapt to the metadata display framework of SVGMap.js , and is set as the document root element of the SVGMap content. + - When visualizing with the [svgMapGIStool.drawGeoJson](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#drawGeoJson) function, schema data is constructed to adapt to the [metadata display framework of SVGMap.js](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF) , and is set as the document root element of the SVGMap content. - Generates the final argument (metaSchema) passed to the svgMapGIStool.drawGeoJson function. - ```setMagColors()``` - - Use the svgMapGIStool.drawGeoJson function's ability to set styles using the properties of each feature to color point features based on their magnitude values. + - Use the [svgMapGIStool.drawGeoJson](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#drawGeoJson) function's ability to set styles using the properties of each feature to color point features based on their magnitude values. - ```svgMapGIStool.drawGeoJson()``` - - ```buildSchema()``` The generated schema ( metaSchema) is given, and the metadata can be displayed properly using the SVGMap.js metadata display framework. + - ```buildSchema()``` The generated schema ( ```metaSchema``` ) is given, and the metadata can be displayed properly using the [SVGMap.js metadata display framework](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF). - ```setInterval(function(){..}..)``` A function that updates periodically at specified intervals (since earthquake data is updated in real time) geoJsonExample2.html diff --git a/docs/3-web-service-integration/tutorial-15/index.md b/docs/3-web-service-integration/tutorial-15/index.md index 3bb33af..8ce4e1a 100644 --- a/docs/3-web-service-integration/tutorial-15/index.md +++ b/docs/3-web-service-integration/tutorial-15/index.md @@ -6,12 +6,12 @@ We will connect a service that dynamically generates and distributes vector data Here we will integrate [the Geoname Service API](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) (Canadian place name data service) provided by Natural Resources Canada . -- To see it in action, click on [vectorService1.html](https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html). +- To see it in action, click on [vectorService1.html](https://svgmap.org/examples/tutorials/vectorService1/vectorService1.html). - (Note: It may take some time for the service to generate and distribute the data.) ## Source Code {#source-code} -- [Source code directory](https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/) +- [Source code directory](https://svgmap.org/examples/tutorials/vectorService1/) - Gets the display area parameters each time you scroll. - Use these parameters to construct a query URL to the service based on [your specifications](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) and retrieve the CSV. - Visualize point data as an SVG use element. @@ -23,8 +23,8 @@ This example integrates a service that dynamically generates and distributes vec [The service to be combined is the Geoname Service API](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) (Canadian geographic name data service) provided by Natural Resources Canada . -- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html) to see it in action . -- [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/vectorService1.zip) of used files +- [Click here](https://svgmap.org/examples/tutorials/vectorService1/vectorService1.html) to see it in action . +- [ZIP archive file](https://www.svgmap.org/examples/tutorials/vectorService1.zip) of used files ### vectorService1.html {#vector-service-1} @@ -101,18 +101,18 @@ CSV data based on the query parameters will be returned. The first line is the s - ```svgMap.getGeoViewBox()``` : Get the geographical display area - ```getCanadianGeoNamesReq()``` : Construct a query to the service based on the display area - ```await getCsv()``` : Asynchronously retrieve and parse CSV using a query - - ```line.split(...)``` : Parsing with double quotation escape based on this article + - ```line.split(...)``` : Parsing with double quotation escape [based on this article](https://www.ipentec.com/document/csharp-read-csv-file-by-regex) - ```drawPoints()``` : Visualize the retrieved data. In this example, we create an SVG use element directly from the CSV and visualize it. - ```svgImage``` : The SVGMap document object for the layer embedded in the webApp associated with the layer - - Reference: Manual#svgImage + - Reference: [Manual #svgImage](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF) - ```schema``` : Place a schema in the property of the document element of the associated layer's SVGMap content - - Reference: SVGMap.js metadata framework - - ```"transform", `ref(svg,${lng},${-lat})` ```: Using TransformRef in svg1.2 , we have placed an icon that does not change size. - - Reference: Supported attributes + - Reference: [SVGMap.js metadata framework](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF) + - ```"transform", `ref(svg,${lng},${-lat})` ```: Using [TransformRef](https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref) in svg1.2 , we have placed an icon that does not change size. + - Reference: [Supported attributes](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.B1.9E.E6.80.A7) - ```"content"``` : Metadata is set in CSV format - ```"xlink:href", "#p0"``` : Refer to the symbol (red circle) with id:p0 in the defs element - ```svgMap.refreshScreen();``` : Redraw the SVGMap content once the DOM is created - - Reference: Redraw Limit + - Reference: [Redraw Limit](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) CanadianGeoNames.html diff --git a/docs/4-utilizing-existing-webapp-layers/index.md b/docs/4-utilizing-existing-webapp-layers/index.md index 1d194a2..4c2ccdb 100644 --- a/docs/4-utilizing-existing-webapp-layers/index.md +++ b/docs/4-utilizing-existing-webapp-layers/index.md @@ -1,3 +1,3 @@ # Part 4: Utilizing Existing WebApp Layers -This document explains how to use the various pre-developed [WebApp Layers](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) available for SVGMap.js, which are open source in the svgmapAppLayers repository on GitHub . +This document explains how to use the various pre-developed [WebApp Layers](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) available for SVGMap.js, which are open source in the [svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) repository on GitHub . diff --git a/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md index b4d3f36..8a9b136 100644 --- a/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md +++ b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md @@ -4,25 +4,25 @@ Download the contents of [svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) and copy (clone) them to a host you have prepared yourself for use. The limitations that existed when referencing GitHub Pages in the previous chapter do not apply. -- [Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayersClone/ghAppLayers_clone.html) to see the actual operation. +- [Click here](https://www.svgmap.org/examples/tutorials/ghAppLayersClone/ghAppLayers_clone.html) to see the actual operation. - (This sample uses only the Ministry of Land, Infrastructure, Transport and Tourism's road traffic information layers, the CSV authoring tool layer, and basemaps.) In this chapter, we will copy [the svgmapAppLayers repository](https://github.com/svgmap/svgmapAppLayers) to your own host and use it. There are no [limitations](https://www.svgmap.org/wiki/index.php?title=SvgmapAppLayers_GitHub_Pages%E3%81%AE%E5%88%A9%E7%94%A8#.E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85) as in the previous chapter, but you will need to be responsible for reflecting updates to the svgmapAppLayers repository yourself. -- [Click here](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayersClone/ghAppLayers_clone.html) to see the actual operation. +- [Click here](https://www.svgmap.org/examples/tutorials/ghAppLayersClone/ghAppLayers_clone.html) to see the actual operation. - This sample uses only the Ministry of Land, Infrastructure, Transport and Tourism's road traffic information layers, the CSV authoring tool layer, and basemaps. -- The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayersClone.zip). +- The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/ghAppLayersClone.zip). ### Synopsis {#synopsis} - Download (or clone) [https://github.com/svgmap/svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers). - [Download](https://github.com/svgmap/svgmapAppLayers/archive/refs/heads/main.zip) as a zip file (requires extraction). - - For git clone:　git clone git@github.com:svgmap/svgmapAppLayers.git + - For git clone:　```git clone git@github.com:svgmap/svgmapAppLayers.git``` - Copy the content to the host you operate. - Edit Container.svg and select the layers you want to include. - Build a proxy if necessary. -### Procedire {#procedure} +### Procedure {#procedure} - Duplicate the contents of [svgmapAppLayer](https://github.com/svgmap/svgmapAppLayers). - You can download it from the UI at [https://github.com/svgmap/svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) (```<>```Code button ⇒ [Download ZIP](https://github.com/svgmap/svgmapAppLayers/archive/refs/heads/main.zip)) (unzipping should be done in an environment where symbolic links are enabled (such as Linux)), or Clone using the git command　```git clone git@github.com:svgmap/svgmapAppLayers``` diff --git a/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md index fcde03e..c61b930 100644 --- a/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md +++ b/docs/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md @@ -4,7 +4,7 @@ [The svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) GitHub repository has a [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages) setup. Therefore, some layers can be used simply by linking to the URL published on GitHub Pages. -To see the actual operation, click on [ghAppLayers_wpxy.html](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html). +To see the actual operation, click on [ghAppLayers_wpxy.html](https://svgmap.org/examples/tutorials/ghAppLayers/ghAppLayers_wpxy.html). [The svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) repository on GitHub is a collection of [WebApp Layers](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) that provide various features and content usable with SVGMap.js . All are released as open source. (The license is [MPL2](https://www.mozilla.org/en-US/MPL/2.0/) ( [Japanese reference translation](https://www.mozilla.jp/documents/mpl/2.0/) ) (same as SVGMap.js)) @@ -12,8 +12,8 @@ This repository is also set up as a [GitHub Pages](https://docs.github.com/ja/pa Therefore, in this chapter, we will try to build a map page by directly referencing the layers of svgmapAppLayers, which are published as GitHub Pages. -[Click here](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html) for actual operation (with proxy set up) -The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tutorials/ghAppLayers.zip). +[Click here](https://svgmap.org/examples/tutorials/ghAppLayers/ghAppLayers_wpxy.html) for actual operation (with proxy set up) +The file used is a [ZIP archive file](https://www.svgmap.org/examples/tutorials/ghAppLayers.zip). ### Synopsis {#synopsis} @@ -21,7 +21,7 @@ The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tut - You can check the list of layers registered in svgmapAppLayers in [the source code of Container.svg](https://github.com/svgmap/svgmapAppLayers/blame/main/Container.svg). - Layers in svgmapAppLayers that cannot directly reference a GitHub Pages webApp have the data-cross-origin-restricted attribute. - Layers that require cross-origin access proxy configuration have the `data-cross-origin-proxy-required` attribute. - - Using the [Container SVG Generation Support WebApp](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html), you can easily generate Container.svg. + - Using the [Container SVG Generation Support WebApp](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html), you can easily generate Container.svg. - Build a proxy if necessary. ### Restrictions {#restrictions} @@ -31,7 +31,7 @@ The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tut ### List of Available Layers {#list-of-available-layers} -- Please refer to [this page](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html). +- Please refer to [this page](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html). - This page was generated based on [https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg](https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg). - Layers with `corsRestricted` set to true cannot be used with direct references to GitHub Pages. - Layers where corsProxyRequired is true require a proxy to be provided. @@ -40,11 +40,11 @@ The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tut - Let's try creating a page that only uses layers that don't require proxies. It's easy because there are no proxy settings. - It can be operated entirely with static hosting. (It can also be published using a GitHub Pages instance that you have built yourself.) -- Click [here](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers.html) to see the actual operation. +- Click [here](https://svgmap.org/examples/tutorials/ghAppLayers/ghAppLayers.html) to see the actual operation. ### Preparing the container (conainer.svg) {#preparing-container-svg} -- Show [this page](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html#withoutProxy) +- Show [this page](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html#withoutProxy) - Layers that require a proxy are automatically unchecked. (This includes layers that cannot directly reference GitHub Pages.) - You can obtain Container.svg by checking the layers you want to display and pressing the Save (or Display) button for Container.svg. This will retrieve a Container with embedded links for direct reference. @@ -101,17 +101,17 @@ The file used is a [ZIP archive file](https://www.svgmap.org/devinfo/devkddi/tut - Let's try creating a page that uses layers that require proxies. - A proxy service needs to be prepared (it can also be run using PHP; this tutorial provides an example using PHP). -- Click here to see the actual operation. +- [Click here](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html) to see the actual operation. ### Preparing the container (Container_wpxy.svg) {#preparing-the-container-wpxy-svg} -- Show [this page](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/ghAppLayers/containerGenerator.html) +- Show [this page](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html) - Layers that require a proxy are also checked. (Layers that cannot be directly referenced from GitHub Pages are unchecked.) - Check the layers you want to display, and then press the Save (or Display) button for Container_wpxy.svg to obtain Container.svg. You will get a Container with links that directly reference it. ### The HTML file for the map page (ghAppLayers_wpxy.html) {#the-html-file-for-the-map-page} -- The difference is that SVGMap.js is set up to allow the use of a proxy. Please refer to this information for more details. +- The difference is that SVGMap.js is set up to allow the use of a proxy. Please refer to [this information](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9) for more details. - The library for handling proxies is imported with `import { CorsProxy } from ' https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js' ;`. - Set it up with corsProxy.setService - (In this example, a PHP proxy (./simpleCORSproxy.php) located in the same directory is specified.) diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md index 4b8d559..215aad7 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md @@ -4,7 +4,7 @@ 最初に日本の海岸線を表示するチュートリアルです。 -実際の動作は、[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/tutorial1.html)をクリック。 +実際の動作は、[こちら](https://svgmap.org/examples/tutorials/tutorial1/tutorial1.html)をクリック。 ### ファイル構造 {#file-structure} @@ -30,10 +30,10 @@ tutorial1ディレクトリに以下のファイルがあります。** チュ 本チュートリアルで使用しているファイルは以下から取得できます。 -- [ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial1.zip) -- [https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/) : 地図を表示するhtmlページや地図コンテンツ - - [imgディレクトリ](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/img/) : アイコン等のイメージ - - [jsディレクトリ](https://svgmap.org/devinfo/devkddi/tutorials/tutorial1/js) : SVGMapを表示するフレームワーク(SVGMap.js)のライブラリ・スタイルシート +- [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tutorial1.zip) +- [https://svgmap.org/examples/tutorials/tutorial1/](https://svgmap.org/examples/tutorials/tutorial1/) : 地図を表示するhtmlページや地図コンテンツ + - [imgディレクトリ](https://svgmap.org/examples/tutorials/tutorial1/img/) : アイコン等のイメージ + - [jsディレクトリ](https://svgmap.org/examples/tutorials/tutorial1/js) : SVGMapを表示するフレームワーク(SVGMap.js)のライブラリ・スタイルシート - なお、SVGMap.jsのオープンソースリポジトリはこちら([https://github.com/svgmap/svgMapLv0.1](https://github.com/svgmap/svgMapLv0.1])) ### コンテンツの構造 {#content-structure} diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2a/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2a/index.md index f3b2b76..70b2360 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2a/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2a/index.md @@ -4,17 +4,17 @@ チュートリアル1の内容に空港のPOI([Point of interest](https://ja.wikipedia.org/wiki/Point_of_interest))を表示するチュートリアルです。 -実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html)をクリック。 +実際の動作は[こちら](https://svgmap.org/examples/tutorials/tutorial2/tutorial2.html)をクリック。 ### ファイル構造 {#file-structure} -ファイル構成は[tutorial2ディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2)に以下のファイルがあります。 +ファイル構成は[tutorial2ディレクトリ](https://www.svgmap.org/examples/tutorials/tutorial2)に以下のファイルがあります。 -- [tutorial2.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/tutorial2.html) +- [tutorial2.html](https://www.svgmap.org/examples/tutorials/tutorial2/tutorial2.html) - チュートリアル2用のhtml。tutrial1.htmlと同様の内容。 - Container.svg - 表示する各レイヤ用のSVGファイルを読み込む(Coastline_Airport.svgのみを読み込んでいる) -- [Coastline_Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2/Coastline_Airport.svg) +- [Coastline_Airport.svg](https://www.svgmap.org/examples/tutorials/tutorial2/Coastline_Airport.svg) - チュートリアル1のCoastline.svgに空港情報を追加。 - 空港の表示イメージの定義・実際の空港情報(緯度・経度、使用するイメージ、タイトル、クリック時の表示情報)を記述。 - 空港情報以外にhttpリンクも記述できる。この場合、以下の内容が実行可能になる。 @@ -26,7 +26,7 @@ ### 使用ファイル {#files-used} -使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2.zip) +使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tutorial2.zip) ### コンテンツの構造 {#content-structure} @@ -436,7 +436,7 @@ tutorial2.html - + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2b/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2b/index.md index 45a005c..4cab802 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2b/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2b/index.md @@ -4,19 +4,19 @@ チュートリアル2aの内容に対して、POI(空港)と海岸線地図を別ファイルに分け、レイヤリング表示するチュートリアルです。 -実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html)をクリック。 +実際の動作は[こちら](https://svgmap.org/examples/tutorials/tutorial2b/tutorial2b.html)をクリック。 ### ファイル構造 {#file-structure} -ファイル構成は[tutorial2bディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/)に以下のファイルがあります。 +ファイル構成は[tutorial2bディレクトリ](https://www.svgmap.org/examples/tutorials/tutorial2b/)に以下のファイルがあります。 -- [tutorial2b.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html) +- [tutorial2b.html](https://www.svgmap.org/examples/tutorials/tutorial2b/tutorial2b.html) - チュートリアル2b用のhtml。tutrial1.htmlに対して、レイヤーリスト・On/Off UIを設置している。(id="layerList"のdiv要素) -- [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Container.svg) +- [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial2b/Container.svg) - 表示する各レイヤ用のSVGファイルを読み込む（Airport.svgと、Coastline.svgの２個のファイル(レイヤ)を読み込んでいる） -- [Airport.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Airport.svg) +- [Airport.svg](https://www.svgmap.org/examples/tutorials/tutorial2b/Airport.svg) - 空港情報を別ファイルとして追加。 -- [Coastline.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/Coastline.svg) +- [Coastline.svg](https://www.svgmap.org/examples/tutorials/tutorial2b/Coastline.svg) - チュートリアル1のCoastline.svg ## チュートリアル {#tutorial} @@ -25,7 +25,7 @@ ### 使用ファイル {#files-used} -使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b.zip) +使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tutorial2b.zip) ### コンテンツの構造 {#content-structure} @@ -436,7 +436,7 @@ Coastline.svgは[チュートリアル1#Coastline.svg](../tutorial-1/#coastline- - + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2c/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2c/index.md index a9589bc..bac2dcd 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2c/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-2c/index.md @@ -2,14 +2,14 @@ ## はじめに {#introduction} -チュートリアル2bの内容に対して、背景地図にOpenStreetMapを使用し、より実用的なページを作ってみます。実際の動作は [こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html) をクリック。 このチュートリアルはチュートリアル2bと同じですが、背景地図としてOpenStreetMap.svgを使用する点が異なります。 +チュートリアル2bの内容に対して、背景地図にOpenStreetMapを使用し、より実用的なページを作ってみます。実際の動作は [こちら](https://svgmap.org/examples/tutorials/tutorial2c/tutorial2c.html) をクリック。 このチュートリアルはチュートリアル2bと同じですが、背景地図としてOpenStreetMap.svgを使用する点が異なります。 ### ファイル構造 {#file-structure} ファイル構造は以下の通りです： - tutorial2cディレクトリには以下のファイルが含まれています。 - - [tutorial2c.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c/tutorial2c.html) + - [tutorial2c.html](https://www.svgmap.org/examples/tutorials/tutorial2c/tutorial2c.html) - Container.svgで参照している背景地図を、Coastline.svgからdynamicOSM_r11.svgに置き換えています。 - dynamicOSM_r11.svgはjavascriptコードが紐付けられた動的なコンテンツ(WebAppLayer)になっています。本章ではその内容は割愛し、実用的なレイヤリングを実践してみます。 - Note: 動的なコンテンツの詳細は[WebApp Layer編](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)で解説されています。 @@ -18,7 +18,7 @@ ### 使用ファイル {#files-used} -- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2c.zip) +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tutorial2c.zip) ### コンテンツの構造 {#content-structure} @@ -86,9 +86,9 @@ This is the same as [Tutorial 2B](https://www.svgmap.org/wiki/index.php?title=%E また、同じ方法で、上乗せ情報を複数設置し、切り替えて利用できるようにすることもできます。 -- 実際の動作は[こちら](http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/tutorial2c_add.html)をクリック。 +- 実際の動作は[こちら](http://svg2.mbsrv.net/examples/tutorials/tutorial2c/tutorial2c_add.html)をクリック。 - 画面左上のレイヤーリストUIをクリックすると、2個の背景地図が選べるようになっています。 -- 使用ファイルは[こちら](https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2c/) +- 使用ファイルは[こちら](https://svg2.mbsrv.net/examples/tutorials/tutorial2c/) 異なるのはContainer.svgの内容になります。 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3/index.md index 1dc82eb..dfd2495 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3/index.md @@ -2,41 +2,41 @@ ## はじめに {#introduction} -チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html)をクリック。 +チュートリアル1の内容を複数のタイルに分割して表示するチュートリアルです。実際の動作は[こちら](https://svgmap.org/examples/tutorials/tutorial3/tutorial3.html)をクリック。 ### ファイル構造 {#file-structure} ファイル構造は以下の通りです： -- [tutorial3 ディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/) には以下のファイルが含まれています。 - - [tutorial3.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html) +- [tutorial3 ディレクトリ](https://www.svgmap.org/examples/tutorials/tutorial3/) には以下のファイルが含まれています。 + - [tutorial3.html](https://www.svgmap.org/examples/tutorials/tutorial3/tutorial3.html) - チュートリアル3用のhtml。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) + - [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial3/Container.svg) + - [Coastline.svg](https://www.svgmap.org//examples/tutorials/tutorial3/Coastline.svg) - 以下の4×4(全16)分割したファイルを束ねるsvg。 - タイリングについては、[SVGMapのタイリングアーキテクチャ](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) + - [0_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_0.svg) + - [0_1.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_1.svg) + - [0_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_2.svg) + - [0_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/0_3.svg) + - [1_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_0.svg) + - [1_1.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_1.svg) + - [1_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_2.svg) + - [1_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/1_3.svg) + - [2_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/2_0.svg) + - [2_1.svg](https://www.svgmap.org//examples/tutorials/tutorial3/2_1.svg) + - [2_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/2_2.svg) + - [2_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/2_3.svg) + - [3_0.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_0.svg) + - [3_1.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_1.svg) + - [3_2.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_2.svg) + - [3_3.svg](https://www.svgmap.org/examples/tutorials/tutorial3/3_3.svg) ## チュートリアル {#tutorial} ### 使用ファイル {#files-used} -- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip) +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tutorial3.zip) ### 既存のフレームワークとの本質的違い {#essential-differences} diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3b/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3b/index.md index 00c204d..377c1ef 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3b/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-3b/index.md @@ -2,14 +2,14 @@ ## はじめに {#introduction} -前章ではすでに作成済みのタイルを用いていましたが、ここでは [svgMapTools](https://github.com/svgmap/svgMapTools)を用いて、shapefileからタイルデータを作成し表示してみます。実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial3b/tutorial3b.html)をクリック。 +前章ではすでに作成済みのタイルを用いていましたが、ここでは [svgMapTools](https://github.com/svgmap/svgMapTools)を用いて、shapefileからタイルデータを作成し表示してみます。実際の動作は[こちら](https://svgmap.org/examples/tutorials/tutorial3b/tutorial3b.html)をクリック。 ### ファイル構造 {#file-structure} ファイル構造は以下の通りです： -- ファイル構成は[tutorial3bディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/)ディレクトリに以下のファイルがあります。 - - https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b/ +- ファイル構成は[tutorial3bディレクトリ](https://www.svgmap.org/examples/tutorials/tutorial3b/)ディレクトリに以下のファイルがあります。 + - https://www.svgmap.org/examples/tutorials/tutorial3b/ - svgMapToolsを使って、地球地図 日本のデータのうちいくつかをタイリングされたSVGMapコンテンツに変換。 - svgMapToolsが行うタイリング(Quad Tree Composite Tiling)については、[こちらの資料](https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese)を参照。 - 変換したコンテンツを、レイヤーとして表示 @@ -18,7 +18,7 @@ ### 使用ファイル {#files-used} -- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3b.zip) +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tutorial3b.zip) ### タイリングされたコンテンツの準備 {#preparing-tiled-content} diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-4/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-4/index.md index e58b59b..7b60fb3 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-4/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-4/index.md @@ -2,27 +2,27 @@ ## はじめに {#introduction} -チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html)をクリック。 +チュートリアル1の内容に一部のBitmapイメージ地図を重ねて表示するチュートリアルです。実際の動作は[こちら](https://svgmap.org/examples/tutorials/tutorial4/tutorial4.html)をクリック。 ### ファイル構造 {#file-structure} -The file structure is as follows: +ファイル構造は以下の通りです： -- ファイル構成は[tutrial4ディレクトリ](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html)ディレクトリに以下のファイルがあります。 - - [tutorial4.html](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html) +- ファイル構成は[tutrial4ディレクトリ](https://www.svgmap.org/examples/tutorials/tutorial4/tutorial4.html)ディレクトリに以下のファイルがあります。 + - [tutorial4.html](https://www.svgmap.org/examples/tutorials/tutorial4/tutorial4.html) - チュートリアル4用のhtml。tutrial1.htmlと同様の内容。 - - [Container.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/Container.svg) + - [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial4/Container.svg) - チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む - - [dynamicOSM_r11.svg](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/dynamicOSM_r11.svg) + - [dynamicOSM_r11.svg](https://www.svgmap.org/examples/tutorials/tutorial4/dynamicOSM_r11.svg) - チュートリアル2cと同様のOpenStreetMapレイヤー - 重ね合わせるビットマップイメージSVGファイル。 - - こちらのツールを使用して作成したもの。[ビットイメージの地図画像をSVGMapのレイヤー化するツール](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/). + - こちらのツールを使用して作成したもの。[ビットイメージの地図画像をSVGMapのレイヤー化するツール](https://svgmap.org/examples/lvl0.1/bitimage2geoInfo/mapPage/). ## チュートリアル {#tutorial} ### 使用ファイル {#files-used} -- 実際の動作は[こちら](https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4.zip)をクリック。 +- 実際の動作は[こちら](https://www.svgmap.org/examples/tutorials/tutorial4.zip)をクリック。 - 出典：[首都直下地震の被害想定 7ページ](https://www.bousai.go.jp/kyoiku/bousai-vol/drill/h26/tokyo/tokyo03_kato.pdf#page=4) ### tutorial4.html {#tutorial4-html} @@ -108,7 +108,7 @@ The file structure is as follows: ### bitmapImage.svg {#bitmapimage-svg} - 重ね合わせるビットマップイメージSVGファイル。 - - ビットイメージの地図画像をSVGMapのレイヤー化するツールを使用して作成。[こちらのツール](https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/) + - ビットイメージの地図画像をSVGMapのレイヤー化するツールを使用して作成。[こちらのツール](https://svgmap.org/examples/lvl0.1/bitimage2geoInfo/mapPage/) - オリジナルのビットイメージは本章冒頭記載の文書から抽出 #### 経度緯度とSVGコンテンツのXY座標との関係 {#relationship-between-lon-lat-xy-coord} diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/index.md new file mode 100644 index 0000000..fd2751d --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/index.md @@ -0,0 +1,10 @@ +# Part 2: WebApp Layer編 + +SVGMapでは、レイヤーとして 単純な静的SVGMapコンテンツだけでなく、レイヤーにウェブアプリケーションを紐付けることでレイヤーのSVGMapコンテンツ(のDOM)をjavaScriptコードで動的に制御・変更できる[WebApp Layer機構 (Layers as Web Apps : LaWA)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0)を用いることができるという特徴があります。([Web Applicationとは](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3)) + +この機構は他のレイヤーには基本的に影響を与えないため ([カプセル化](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%82%BB%E3%83%AB%E5%8C%96))、アプリケーションの[スパゲッティ化](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%91%E3%82%B2%E3%83%86%E3%82%A3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0)を抑制できます。 + +WebApp Layer編はこの機能を使うWebAppをコーディングします。　ただし、サーバ側には基本編と同様に動的な仕組みの構築は不要です。(依然としてサーバには静的なコンテンツ・WebAppのファイル(htmlやjs)を設置するだけで、DBMSや動的な機構 ([ウェブサービス](https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9)) をサーバ上に構築しません。) + +なお、SVGMap.jsはWMSやWFSのような動的に地図・地理情報を配信する仕組みやDBMSを用いた動的なサーバ([ウェブサービス](https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9)) を接続して動作させることも可能です。 [ウェブサービス結合編](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#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.B5.E3.83.BC.E3.83.93.E3.82.B9.E7.B5.90.E5.90.88.E7.B7.A8)を参照ください。 + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-10/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-10/index.md new file mode 100644 index 0000000..76f6ea6 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-10/index.md @@ -0,0 +1,266 @@ +--- +sidebar_position: 10 +--- + +# チュートリアル10 WebApp Layer メッシュデータのビットイメージ化 + +## はじめに {#introduction} + +メッシュデータ（グリッドデータ）は[ラスターデータとも呼ばれる](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%AB8#Raster)ように、Webコンテンツとして使われるビットイメージデータとほぼ同等です。そこでメッシュデータを動的にビットイメージコンテンツ(PNG形式)化し地図画面上に表示するWebAppを構築してみます。性能面でのメリットがあります。 + +実際の動作は、[mesh3.html](https://svgmap.org/examples/tutorials/mesh3/mesh3.html) をクリック。 + +### ソースコード {#source-code} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/mesh3/) +- 地理院が公開する[ジオイド高データ](https://fgd.gsi.go.jp/download/geoid.php) (TEXTデータ)をfetchAPIで読み込み変数(Object)に保持する +- canvas要素のAPIを用いてビットイメージを構築 +- dataURI化してSVGのimage要素にし、地図上に配置 + +## チュートリアル {#tutorial} + +メッシュデータ（グリッドデータ）は [ラスターデータとも呼ばれる](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%AB8#Raster)ように、Webコンテンツとして一般的に使われるビットイメージデータ形式(PNGやJPEGなど)とほぼ同等の形式です。そこでメッシュデータを動的にビットイメージコンテンツ(PNG形式)化し、地図画面上に表示するWebAppを構築してみます。性能面でのメリットがあります。 + +特徴的なコードはレイヤーに紐付いたwebAppにあります。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/mesh3/mesh3.html) をクリック。 +- 使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/mesh3.zip) + +### 使用するデータ {#data-to-use} + +地理院が [こちらのページで公開するジオイド高データ](https://fgd.gsi.go.jp/download/geoid.php) (TEXTデータ)を使用します。 + +[実際に使用するデータ](https://svgmap.org/examples/tutorials/mesh3/gsigeo2011_ver2_1.asc) + +このデータの詳細な仕様は上記サイトで配布されているパッケージ同梱文書(**asc取扱説明書.pdf**)に記載されていますが、基本的にはテキストの[Raster形式](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%AB8#Raster)です。 + +データ形式としては、カンマ区切りでなく空白文字区切り 一つのRaw（桁）が１行で終結せず、２５５文字で改行される点が注意点です + +データの内容としては、グリッドデータの原点の定義と、それをビットイメージ画像として可視化したときの原点との違いに注意が必要です。（下記２点） + +- Y(緯度)軸の向きが逆のため、元のラスターデータの原点は南端、ビットイメージの原点は上端、 +- ラスターデータの原点は、それをビットイメージとして可視化したときのピクセルの中心位置なのに対し、ビットイメージを配置するときの原点はピクセルの左上隅 + +![Explination Diagram](../../../../../../src/images/800px-Raster.png) + +[Explination Diagram](https://svgmap.org/examples/tutorials/mesh3/mesh3_raster_exp.svg) + +### [mesh3.html](https://svgmap.org/examples/tutorials/mesh3/mesh3.html) {#mesh3-html} + +これまでと特に変わったところはありません。 + +### [Container.svg](https://svgmap.org/examples/tutorials/mesh3/Container.svg) {#container-svg} + +これまでと特に変わったところはありません。 + +### [rasterMesh.svg](https://svgmap.org/examples/tutorials/mesh3/rasterMesh.svg) {#raster-mesh-svg} + +- WebAppが(下記rasterMesh.html)が紐付けられた空白のコンテンツです。 +- 表示とともにwebAppのウィンドが出現するように指定しています。 +- これまでと特に変わったところはありません。 + +```svg + + + + + +``` + +### [rasterMesh.html](https://svgmap.org/examples/tutorials/mesh3/rasterMesh.html), [rasterMesh.js](https://svgmap.org/examples/tutorials/mesh3/rasterMesh.js) {#raster-mesh} + +読み込んだテキストのラスターデータを用いてビットイメージを動的に生成、これを紐付けられたrasterMesh.svgに張り付けて可視化します。 + +- ```onload=async function()``` + - ```await buildData()``` メッシュデータを読み込みグローバル変数に保存する非同期関数 + - ```var duri = buildImage()``` + - 指定されたCanvas要素を作業用に使用し、読み込んだデータからビットイメージを生成、[dataURI](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)として出力する + - ```canvas.toDataURL()``` [canvasオブジェクトのtoDataURL](https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL)でPNGビットイメージをDataURLとして生成しています + - ```imageGeoArea``` [ データの注意点](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%AB10#.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B.E3.83.87.E3.83.BC.E3.82.BF)での指摘の通り、ビットイメージをSVG座標に張り付けるための領域情報を計算しています + - ```buildSvgImage()``` 生成したビットイメージ(dataURI)およびその領域情報を使って、webAppに紐付いたSVG DOMの中に、ビットイメージを張り付ける + - ```svgImage``` このwebAppに紐付いたSVGコンテンツのDOM(Documentオブジェクト)があらかじめ定義されている + - ```svgMap.refreshScreen()``` 非同期での読み込みとデータ生成・SVGMapのDOM編集が完了したら再描画を明示し画面に反映する([参考](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90)) + +rasterMesh.js + +```js +// Description: +// MeshData Visualizer. +// +// History: +// 2022/02/14 : 1st rev. + +// 読み込んだASCIIデータを保持するグローバル変数 +var geoidGrid=[]; +var dataProps; + +onload = async function(){ + // メッシュデータを読み込みグローバル変数に保存 + await buildData(); + // 読み込んだデータからdataURIとしてビットイメージを生成 + var duri = buildImage(geoidGrid,document.getElementById("geoidCanvas")); + // 生成した画像の地理的な範囲 + // 画像になると、グリッドの点は画像のピクセルの中心となることに注意！ + var imageGeoArea={ + lng0: dataProps.glomn - dataProps.dglo/2, + lat0: dataProps.glamn - dataProps.dgla/2, + lngSpan: dataProps.nlo * dataProps.dglo, + latSpan: dataProps.nla * dataProps.dgla + } + if ( typeof(svgMap)=="object" ){ + buildSvgImage(duri,imageGeoArea); // SVGコンテンツを生成 + svgMap.refreshScreen(); + } +} + +async function buildData(){ + var gtxt = await loadText("gsigeo2011_ver2_1.asc"); + + gtxt = gtxt.split("\n"); + + dataProps = getHeader(gtxt[0]); + var gx=0, gy=0; + var geoidGridLine=[]; + for ( var i = 1 ; i < gtxt.length ; i++){ + var na = getNumberArray(gtxt[i]); + gx += na.length; + geoidGridLine = geoidGridLine.concat(na); + if ( gx >= dataProps.nlo ){ + geoidGrid.push(geoidGridLine); + geoidGridLine=[]; + gx=0; + } + } +} + +function buildImage(geoidGrid, canvas){ + // + canvas.width=dataProps.nlo; + canvas.height=dataProps.nla; + var context = canvas.getContext('2d'); + var imageData = context.getImageData(0, 0, canvas.width, canvas.height); + var pixels = imageData.data; + for ( var py = 0 ; py < dataProps.nla ; py++ ){ + var dy = dataProps.nla - 1 - py + for ( var px = 0 ; px < dataProps.nlo ; px++ ){ + var base = (dy * dataProps.nlo + px) * 4; + if ( geoidGrid[py][px]!=999){ + + var hue = (1-(geoidGrid[py][px]-dataProps.minVal)/(dataProps.maxVal-dataProps.minVal))*270; + var rgb = HSVtoRGB(hue,255,255); + + pixels[base + 0] = rgb.r; // Red + pixels[base + 1] = rgb.g; // Green + pixels[base + 2] = rgb.b; // Blue + pixels[base + 3] = 255; // Alpha + } + } + } + context.putImageData(imageData, 0, 0); + + var duri = canvas.toDataURL('image/png'); + return ( duri ); +} + +function getHeader(line){ + var datas = parseLine(line); + return { + glamn:Number(datas[0]), + glomn:Number(datas[1]), + dgla:Number(datas[2]), + dglo:Number(datas[3]), + nla:Number(datas[4]), + nlo:Number(datas[5]), + ikind:Number(datas[6]), + vern:datas[7], + minVal:9e99, + maxVal:-9e99 + } +} + +function getNumberArray(line){ + var ans = []; + var lineArray = parseLine( line ); + for ( var col of lineArray){ + var val = Number(col); + if ( val != 999){ + if ( val > dataProps.maxVal){ + dataProps.maxVal=val; + } + if ( val < dataProps.minVal){ + dataProps.minVal=val; + } + } + ans.push(val); + } + return ( ans ); +} + +function parseLine(line){ + var ans = line.trim().split(/\s+/) + return (ans); +} + + +async function loadText(url){ // テキストデータをfetchで読み込む + messageDiv.innerText="ジオイド高データを読み込み中です"; + var response = await fetch(url); + var txt = await response.text(); + messageDiv.innerText=""; + return ( txt ); +} + +function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341 + var r, g, b; // 0..255 + while (h < 0) { + h += 360; + } + h = h % 360; + + // 特別な場合 saturation = 0 + if (s == 0) { + // → RGB は V に等しい + v = Math.round(v); + return {'r': v, 'g': v, 'b': v}; + } + s = s / 255; + + var i = Math.floor(h / 60) % 6, + f = (h / 60) - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i) { + case 0 : + r = v; g = t; b = p; break; + case 1 : + r = q; g = v; b = p; break; + case 2 : + r = p; g = v; b = t; break; + case 3 : + r = p; g = q; b = v; break; + case 4 : + r = t; g = p; b = v; break; + case 5 : + r = v; g = p; b = q; break; + } + return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)}; +} + + +// 以下はSVGMapレイヤーとして動かしたときに有効になる関数 +var CRSad = 100; // svgmapコンテンツのCRSきめうち・・ +function buildSvgImage(imageDataUri,imageParam){ + // dataURLを受け取って、SVGMapコンテンツに画像を張り付ける + var rct = svgImage.createElement("image"); + rct.setAttribute("x", imageParam.lng0 * CRSad); + rct.setAttribute("y", -(imageParam.lat0 + imageParam.latSpan) * CRSad); + rct.setAttribute("width", imageParam.lngSpan * CRSad); + rct.setAttribute("height", imageParam.latSpan * CRSad); + rct.setAttribute("xlink:href",imageDataUri); + rct.setAttribute("style","image-rendering:pixelated"); // メッシュデータなので拡大次画像のピクセルをくっきりさせる + var root = svgImage.documentElement; + root.appendChild(rct); +} +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-11/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-11/index.md new file mode 100644 index 0000000..9beeba7 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-11/index.md @@ -0,0 +1,157 @@ +--- +sidebar_position: 11 +--- + +# チュートリアル11 WebApp Layer 地図を使った位置指定UI + +## はじめに {#introduction} + +[チュートリアル10](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%AB10)をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。 + +実際の動作は、 [mesh3b.html](https://svgmap.org/examples/tutorials/mesh3b/mesh3b.html)をクリック。 + +### ソースコード {#source-code} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/mesh3b/) +- バイリニア補完によるメッシュデータを利用した任意位置の値の計算 +- 地図上の任意の点を指定して、その位置のジオイド高を表示 + +## チュートリアル {#tutorial} + +[チュートリアル10](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%AB10)をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。 特徴的なコードはレイヤーに紐付いたwebAppにあります。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/mesh3b/mesh3b.html) をクリック。 +- 使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/mesh3b.zip) + +### [mesh3b.html](https://svgmap.org/examples/tutorials/mesh3b/mesh3b.html) {#mesh3b-html} + +特にこれまでと大きな違いはありません。 + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### [Container.svg](https://svgmap.org/examples/tutorials/mesh3b/Container.svg) {#container-svg} + +これまでと特に大きな違いはありません。 + +### [rasterMeshI.svg](https://svgmap.org/examples/tutorials/mesh3b/rasterMeshI.svg) {#raster-meshi-svg} + +[チュートリアル10](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%AB10#Container.svg)と特に大きな違いはありません。 + +### [rasterMeshI.html](https://svgmap.org/examples/tutorials/mesh3b/rasterMeshI.html), [geoidCalc.js](https://svgmap.org/examples/tutorials/mesh3b/geoidCalc.js) {#raster-mesh-geoid-calc} + +[チュートリアル10](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%AB10#rasterMesh.html)のコードに対して、地図上で位置を指定するUIと、その位置のジオイド高を計算する機能が追加されています。 + +- 地図上で位置を指定するUI：SVGMapAuthoring.jsというSVGMap.js用の追加ライブラリを用いています。 +- ジオイド高計算： [バイリニア補間](https://en.wikipedia.org/wiki/Bilinear_interpolation)を用いて、グリッドデータを用いて任意の位置の値を演算します。 + - バイリニア補間については、地理院が[こちらのページで公開するジオイド高データ](https://fgd.gsi.go.jp/download/geoid.php)(TEXTデータ)のパッケージ同梱文書(**asc取扱説明書.pdf**)にも計算式が記載されていますので参考にしてください。(本チュートリアルの ```getGeoidHeight(lng,lat)``` 関数は同文書の式をベースにしています。) +- ```initPOIUI``` 地図上で位置を指定するUIの初期化をload時に実行 + - ```svgMapAuthoringTool.initPOIregistTool``` + - ```id="pointInputUI"``` のdiv要素に、 + - [svgMapAuthoringTool](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMapAuthoringTool) で使える、地図上でポイント情報を設置するUIを登録します。 ([initPOIregistTool](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#initPOIregistTool)) + - ```POIUIcbFunc``` ポイントを設定する操作を実施するすると呼び出されるコールバック関数。緯度、経度の情報をUIから取得し、ジオイド高を計算する関数(```getGeoidHeight```)に渡して、答えを表示します。 +- ```getGeoidHeight``` グリッドデータからジオイド高を計算する関数 + - バイリニア補間を用いて任意の緯度経度（ただしグリッドデータのある範囲）におけるジオイド高を計算します。 + +geoidCalc.js + +```js +... +... +onload = async function(){ + initPOIUI(); + ... + ... +} +... +... +function getGeoidHeight(lng,lat){ + // バイリニア補完によって、任意の緯度経度(実数)でのジオイド高を算出する(世界測地系) + var px = Math.floor((lng-dataProps.glomn)/dataProps.dglo); + var py = Math.floor((lat-dataProps.glamn)/dataProps.dgla); + + if ( px < 0 || px > dataProps.nlo -1 || py < 0 || py > dataProps.nla ){ + return ( null ); + } + + var lng0 = dataProps.glomn + px * dataProps.dglo; + var lat0 = dataProps.glamn + py * dataProps.dgla; + var lng1 = lng0 + dataProps.dglo; + var lat1 = lat0 + dataProps.dgla; + + var Z00 = geoidGrid[py][px]; + var Z10 = geoidGrid[py][px+1]; + var Z01 = geoidGrid[py+1][px]; + var Z11 = geoidGrid[py+1][px+1]; + + + if ( Z00 == 999 || Z10 == 999 || Z01 == 999 || Z11 == 999 ){ + return ( null ); + } + + var u = (lng - lng0)/(lng1 - lng0); + var t = (lat - lat0)/(lat1 - lat0); + var Z = (1 - t) * (1 - u) * Z00 + (1 - t) * u * Z10 + t * (1 - u) * Z01 + t * u * Z11; + + return ( Z ); +} +... +... +var poiUI; +function initPOIUI(){ + poiUI=document.getElementById("pointInputUI"); + var getPointOnly = false; + svgMapAuthoringTool.initPOIregistTool(poiUI,svgImageProps.rootLayer,"targetPoint","p0","targetPoint","",POIUIcbFunc,"cbFuncParam",getPointOnly); +} + +function POIUIcbFunc(){ + var latlngs=(poiUI.getElementsByTagName("input")[2].value).split(","); + console.log(latlngs); + var lat=Number(latlngs[0]); + var lng=Number(latlngs[1]); + var geiodHeight = getGeoidHeight(lng,lat); + messageDiv.innerText=geiodHeight+" m"; +} +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-5/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-5/index.md new file mode 100644 index 0000000..cdd7074 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-5/index.md @@ -0,0 +1,409 @@ +--- +sidebar_position: 5 +--- + +# チュートリアル5 WebApp Layer タイルピラミッド + +## はじめに {#introduction} + +[OpenStreetMapのタイルピラミッド](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames) を用いて、伸縮・スクロールに応じ適切な地図を表示 ([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) するレイヤーを、SVGMapの [WebApp Layer機構](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0)によって構成するチュートリアルです。 + +実際の動作は、[こちら](https://svgmap.org/examples/tutorials/tutorial5/tutorial5.html) をクリック。 + +### ファイル構造 {#file-structure} + +ファイル構造は以下の通りです： + +- ファイル構成は[tutorial5](https://www.svgmap.org/examples/tutorials/tutorial5) ディレクトリに以下のファイルがあります。 + - [Tutorial5.html](https://www.svgmap.org/examples/tutorials/tutorial5/tutorial5.html) + - チュートリアル5用のhtml。tutrial2b.htmlと同様の内容。 + - [Container.svg](https://www.svgmap.org/examples/tutorials/tutorial5/Container.svg) + - 外部のOpenStreetMapを表示するためのdynamicOSM_r11.svgを読み込む。 + - [dynamicOSM_r11.svg](https://www.svgmap.org/examples/tutorials/tutorial5/dynamicOSM_r11.svg) + - 外部のOpenStreetMapを表示するSVGMapコンテンツのレイヤー(中身は空で下のウェブアプリケーションがDOMを動的に構築している) + - [dynamicOSM_r11.html](https://www.svgmap.org/examples/tutorials/tutorial5/dynamicOSM_r11.html) + - 上記dynamicOSM_r11.svgに紐づいたウェブアプリケーションのhtml + - [dynamicOSM_r11.js](https://www.svgmap.org/examples/tutorials/tutorial5/dynamicOSM_r11.js) + - 上記dynamicOSM_r11.svgに紐づいたウェブアプリケーションのjavascriptコード + +## チュートリアル {#tutorial} + +SVGMap.jsでは、レイヤーは単なるコンテンツ(SVGのファイル)だけでなく、javascriptによって動的にSVGMapコンテンツを生成するWebAppを与えることができます。 ([WebAppによる動的なレイヤー (WebApp Layer)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0)) の ([レイヤー固有のUI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI)) + +WebApp Layerの名の通り、レイヤーに紐付けられるのはjavascriptコードだけでなく、HTML+CSSなどによるUI(Windowオブジェクト)も持ちます。 + +チュートリアル５以降は、主にこのWebApp Layer機能を使って様々なデータを表示したり、レイヤーに固有のユーザインターフェースを設ける機能を実装します。 + +ここではこの機能を使って、OpenStreetMapのタイルピラミッドを用いて、伸縮スクロールに応じて適切な地図をスピーディに表示するレイヤーを構築してみます。 + +なお、チュートリアル５は少々コード量が多いので、短いコードでWebApp Layerの機能を試すには [チュートリアル6](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%AB6) の方が簡単かもしれません。 + +実際の動作は、[こちら](https://www.svgmap.org/examples/tutorials/tutorial5/tutorial5.html) をクリック。 +使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tutorial5.zip). + +### Tutorial5.html {#tutorial5-html} + +- SVGMapのコアプログラムファイル(SVGMapLv0.1_r18module.js)を読み込み、SVGMapの各種APIを利用可能にする。 +- 地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。 +- ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。 + - ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。 + - ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。 + - GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。 +- 中心を表す十字マークを表示。 +- 上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。 + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial5 DynamicContents + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial5 DynamicContents + + by SVGMap tech. + + + + Lat,Lng: + + lat ,lng + + +
+``` + +### コンテナ.svg {#container-svg} + +- 表示する各レイヤ用のSVGファイルを読み込む(dynamicOSM_r10.svgのみを読み込んでいる)。 + +```svg + + + + + + + + +``` + +### dynamicOSM_r11.svg {#dynamic-osm-r11-svg} + +外部のOpenStreetMapを表示するためのWebAppが紐付けられたSVG Mapコンテンツレイヤーファイル。 + +SVGMap.jsの持つ [WebApp Layer機構](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) を活用します。 + +- SVGコンテンツのドキュメント要素(svg要素)のdata-controller属性でウェブアプリケーション(javascriptコードが載ったhtmlコンテンツ)を参照することで、SVGMapコンテンツのレイヤーにウェブアプリを紐づけます。 + - #exec=hiddenOnLayerLoad ハッシュは、同ウェブアプリケーションを非表示状態で起動させます。 [解説書#レイヤー固有のUI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) の詳細を参照 +- ウェブアプリでDOMを直接生成するので、コンテンツの中身はほとんど空になっています。 + +```svg + + + + + + +``` + +### dynamicOSM_r11.html, dynamicOSM_r11.js {#dynamicosm-r11} + +dynamicOSM_r11.svgに紐付けられたwebApp [レイヤー固有のUI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) です。レイヤーに紐付けられたwebAppでは、 [独自のAPI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E6.8B.A1.E5.BC.B5API) が利用できます + + +[OpenStreetMap(OSM)](https://www.openstreetmap.org/) は縮尺に応じたピラミッド状の256×256ピクセルのタイルに分割された、[ピラミッド状のイメージ](https://satakagi.github.io/mapsForWebWS2020-docs/imgs/tile_pyramid.png) を配信しています。 ([OSM Slippy map tilenames](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames),[OSM ZoomLevels](https://wiki.openstreetmap.org/wiki/Zoom_levels)) + +これを使用して、表示範囲とズームレベルに適したタイルをOpenStreetMapのサーバから動的に取得・表示する機能([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) を実装します。 + +Note: ここで使用しているOpenStreetMapのタイルはいわゆるウェブメルカトル図法上での均等メッシュタイルとなっています。一方、このチュートリアルで使用しているSVGMapコンテンツは[正距方位図法](https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95) (Plate Caree：経度緯度をそのままX,Y平面に展開した図法、業務や技術系の分野でよく使われる)を用いています。そのため図法変換が必要になりますが、本チュートリアルでは簡単化のためにタイルの1次変換だけで済ませています。日本列島レベルぐらいの小縮尺では少し図法の違いによるずれが見えるかもしれません。（SVGMap.jsでは[より正確な図法変換にも対応](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.A1.E3.83.AB.E3.82.AB.E3.83.88.E3.83.AB.E5.9B.B3.E6.B3.95.E3.82.92.E5.90.AB.E3.82.80.E4.BB.BB.E6.84.8F.E3.81.AE.E5.9B.B3.E6.B3.95.E3.81.AE.E5.AE.9A.E7.BE.A9.E3.81.A8.E3.81.9D.E3.81.AE.E5.90.88.E6.88.90.E6.A9.9F.E8.83.BD.28.EF.BC.9Erev16.29)しています。） + +#### dynamicOSM_r11.html + +htmlは、[レイヤー固有のUIの初期化処理のための共通ライブラリ(svgMapLayerLib.js)の読み込み](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AEhtml.E6.96.87.E6.9B.B8.28webApp.29.E3.81.AE.E6.A7.8B.E9.80.A0.E3.83.BB.E4.BD.9C.E6.B3.95) と、このレイヤー固有の処理内容を記述したscriptコード部```dynamicOSM_r11.js```、及びUI(html,css等)から構成されます。 + +dynamicOSM_r11.html + +```html + + + + +OpenStreetMap ダイナミックレイヤー + + + + + + +

OpenStreetMap ダイナミックレイヤー

+ + +``` + +#### dynamicOSM_r11.js + +- ```onload``` 通常のwebAppと同様、このhtmlに関係するリソースの読み込み完了後実行される関数 + - ```svgMap``` [コアフレームワークインスタンス](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMap) + - ```svgMap.refreshScreen()```伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、 [再描画を明示](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen)する必要があります。 + - [参考情報](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) +- ```preRenderFunction()```この関数を定義すると、 [画面の再描画の度に、その直前にこの関数が実行されます。](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#preRenderFunction) + - ```svgImagesProps``` [webAppに紐づいたSVGコンテンツの各種情報](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgImageProps) + - [解説書参照 ](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgImageProps), [参照2](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.AA.E3.82.B9.E3.83.88) + - ```svgImageProps.scale``` SVGコンテンツの座標系の画面の座標系に対するスケール (注：地理座標系とは異なる) ([参考情報](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.AA.E3.82.B9.E3.83.88)) + - ```svgMap.getGeoViewBox()``` [表示領域を地理座標で取得](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getGeoViewBox). + - ```getTileSet``` 表示すべきタイルのリスト(連想配列)を取得(詳細後述) + - ```svgImage``` [ 紐付けられたSVGMapコンテンツのDOM](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgImage) + - OSMのタイルはsvgのimage要素としてsvg DOMに配置されます。また、getTileSetで得た各タイルのタイル番号(連想配列のKey)をmetadata属性に設定しています。 + - スクロール後、この関数(preRenderFunction)が再度呼び出された時、前ステップまでに既に描画済みのタイルのうち、スクロール後も描画すべきタイルはそのまま残しておくための処理をこのmetadataの値をもとに行います。 + - ```getTile``` タイルリストの連想配列の情報(ZoomLevel,X,Y)をもとに、新たに取得すべきタイルのためのimage要素を得る + - OSMのビットイメージタイルはsvgのimage要素として貼り付けられます。 + - ```getURL``` ZoomLevel,X,Yから、実際のOSMのタイルのURLを生成する関数 + - ```XY2latLng``` ZoomLevel,X,Yから、タイルの地理座標の領域を得る関数 +- ```getTileSet``` 現在のズームレベルと表示領域において、表示すべきタイルをリストアップする関数 + - OSM Slippy Map Tileの、[Zoom](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Zoom_levels) 及び [XY番号](https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#X_and_Y) を求め、それをキーにした連想配列を返却します。 + - OSM Slippy Map Tileは、[ウェブメルカトル](https://en.wikipedia.org/wiki/Mercator_projection#Web_Mercator) 図法上で再帰的に２ｘ２等分したタイルピラミッドになっています。 + - ウェブメルカトル図法は、(経度±180度、緯度±85.05113度)の範囲を正方形の地図として構築します。 + - ```latLng2XY``` ウェブメルカトル図法上の、指定したZoomLevelにおいて、地球全図を一枚の大きな正方形のビットイメージと想定したときの、指定した緯度経度のぞのビットイメージ上での座標値を求める + - ```lvl2Res``` ZoomLevelから対応する地球全体のビットイメージの幅を求める(Level0:256px) + - ```XY2TileXY``` 上記地球全図の一枚の大きな正方形のビットイメージ上のXY座標から、それをタイル分割したときに、その座標が属するタイルの番号（タイルのX番号、Y番号）を得る + + dynamicOSM_r11.js + +
+Click see full JS data + +```js +// Dynamic OpemStreetMap Layer for SVGMap Sample for SVGMapLevel0 > r10 +// +// Programmed by Satoru Takagi +// +// License: (MPL v2) +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at https://mozilla.org/MPL/2.0/. +// iframe化を想定した動的レイヤーのプロトタイプ +// (JavaScriptをインポートSVGコンテンツに置くことができる。) +// 地図データとしては、OpenStreetMapを利用（比較的容易に他にも置き換えられる） +// +// +// このコードの動作環境では、以下があらかじめ設定される +// document:このドキュメント自身 +// svgImage:このドキュメントに紐づいたSVGMapコンテンツ +// svgMap.getGeoViewBox(): 地理的なビューボックス +// svgImageProps:このドキュメントに紐づいたSVGMapコンテンツの各種プロパティ +// svgImageProps.scale: スケール(画面座標に対する、このsvgコンテンツの座標のスケール) +// +// 2013/01/24 : 1st ver. +// 2022/01/31 : WebApp layerに移植 + +// このファイルの読み込み時に実行する +onload = function () { + // このスクリプトが読み込まれた直後、refreshScreen()を呼ぶことで、 + //下記preRenderFunctionが初回実行される + svgMap.refreshScreen(); +}; + +function preRenderFunction() { + // 再描画直前に実行されるコールバック関数 + var level = 8; + // ズームレベルを計算(3から18) + var level = Math.floor(Math.LOG2E * Math.log(svgImageProps.scale) + 7.5); + if (level > 18) { + level = 18; + } else if (level < 3) { + level = 3; + } + + // この地図の地理座標におけるviewBox内表示させる、tileのXYとそのHashKeyを取得する + var tileSet = getTileSet(svgMap.getGeoViewBox(), level); + + // 現在読み込まれているimageというタグ名を持った(地図のタイルごとのイメージ)要素を取得 + console.log("tileSet:", tileSet); + var currentTiles = svgImage.getElementsByTagName("image"); + + // 取得できた各タイル分以下を繰り返し、既に読み込み済みのものは再利用、表示範囲外のものは削除する + for (var i = currentTiles.length - 1; i >= 0; i--) { + var oneTile = currentTiles[i]; + var qkey = oneTile.getAttribute("metadata"); + if (tileSet[qkey]) { + // すでにあるのでスキップさせるフラグ立てる。 + tileSet[qkey].exist = true; + } else { + // ないものなので、消去 + oneTile.parentNode.removeChild(oneTile); + } + } + + // 表示させるタイル分以下を繰り返し、読み込まれていないファイルを読込み要素に加える + for (var tkey in tileSet) { + if (!tileSet[tkey].exist) { + var addTile = getTile(tileSet[tkey].x, tileSet[tkey].y, level, this.CRS); + svgImage.getElementsByTagName("svg")[0].appendChild(addTile); + } + } +} + +// 指定された場所のタイル(分割された地図イメージ)を取得 +function getTile(tileX, tileY, level, crs) { + // tileX、tileYの座標、levelのズームレベルのタイルのURLを取得。 + var tileURL = getURL(tileX, tileY, level); + + // タイルのSVGにおけるbboxを得る + var tLatLng = XY2latLng(tileX * tilePix, tileY * tilePix, level); + var tSvg = svgMap.transform(tLatLng.lng, tLatLng.lat, crs); + var tLatLngBR = XY2latLng( + tileX * tilePix + tilePix, + tileY * tilePix + tilePix, + level + ); + var tSvgBR = svgMap.transform(tLatLngBR.lng, tLatLngBR.lat, crs); + tSvg.width = tSvgBR.x - tSvg.x; // 効率悪い・・改善後回し + tSvg.height = tSvgBR.y - tSvg.y; + + // 取得するタイル要素を作成し、各属性をセットする。 + var cl = svgImage.createElement("image"); + cl.setAttribute("x", tSvg.x); + cl.setAttribute("y", tSvg.y); + cl.setAttribute("width", tSvg.width); + cl.setAttribute("height", tSvg.height); + cl.setAttribute("xlink:href", tileURL.URL); + cl.setAttribute("metadata", tileURL.Key); + + return cl; +} + +// 指定された地図座標geoViewBoxに、levelのズームレベルの地図を表示する場合に、必要なタイルのXYのセットを返却する +function getTileSet(geoViewBox, level) { + var TileSet = new Object(); + if (geoViewBox.y + geoViewBox.height > 85.05113) { + geoViewBox.height = 85.05113 - geoViewBox.y; + } + + if (geoViewBox.y < -85.05113) { + geoViewBox.y = -85.05113; + } + + // 指定エリアの、tileのXYとそのHashKeyを返却する + var tlxy = latLng2XY(geoViewBox.y + geoViewBox.height, geoViewBox.x, level); + var tileTLxy = XY2TileXY(tlxy); + var brxy = latLng2XY(geoViewBox.y, geoViewBox.x + geoViewBox.width, level); + var tileBRxy = XY2TileXY(brxy); + + // 必要な高さ・幅分のタイル個数分以下を繰り返す + for (var i = tileTLxy.y; i <= tileBRxy.y; i++) { + for (var j = tileTLxy.x; j <= tileBRxy.x; j++) { + // タイルのXYとズームレベルからHashKeyを取得する + var qkey = getKey(j, i, level); + // 上記で取得したHashKeyごとに、必要なタイル情報を設定する + TileSet[qkey] = new Object(); + TileSet[qkey].x = j; + TileSet[qkey].y = i; + } + } + return TileSet; +} + +// 緯度・経度からXYに変換 +function latLng2XY(lat, lng, lvl) { + var size = lvl2Res(lvl); + var sinLat = Math.sin((lat * Math.PI) / 180.0); + var pixelX = ((lng + 180.0) / 360.0) * size; + var pixelY = + (0.5 - Math.log((1 + sinLat) / (1.0 - sinLat)) / (4 * Math.PI)) * size; + return { + x: pixelX, + y: pixelY, + }; +} + +// XYからタイルのXYに変換 +function XY2TileXY(xy) { + var tileX = Math.floor(xy.x / tilePix); + var tileY = Math.floor(xy.y / tilePix); + return { + x: tileX, + y: tileY, + }; +} + +var tilePix = 256; +// ズームレベルからタイルの一片のサイズを返却 +function lvl2Res(lvl) { + var j = 1; + for (var i = 0; i < lvl; i++) { + j = j * 2; + } + return j * tilePix; +} + +// XYから緯度・経度に変換 +function XY2latLng(px, py, lvl) { + var size = lvl2Res(lvl); + var x = px / size - 0.5; + var y = 0.5 - py / size; + var lat = 90 - (360 * Math.atan(Math.exp(-y * 2 * Math.PI))) / Math.PI; + var lng = 360 * x; + return { + lat: lat, + lng: lng, + }; +} + +var sva = new Array("a", "b", "c"); +var svNumb = 0; +var culture = "en-US"; +var bingRoadSearchPart = ".jpeg?g=849&mkt=" + culture + "&shading=hill"; + +// タイルのXYとズームレベルからURLを返却する +function getURL(tx, ty, lvl) { + // XYとズームレベルからHashKeyを取得 + var tile_ans = getKey(tx, ty, lvl); + // OpenStreetMapのURLを組み立てる + var mapServerURL = + "http://" + + sva[svNumb] + + ".tile.openstreetmap.org/" + + lvl + + "/" + + tx + + "/" + + ty + + ".png"; + // 複数の同様のサーバを順次切り替えながら使用することで、地図イメージ取得時の負荷分散を行う。 + ++svNumb; + if (svNumb > 2) { + svNumb = 0; + } + return { + URL: mapServerURL, + Key: tile_ans, + }; +} + +// HashKeyを生成し返却する +function getKey(tx, ty, lvl) { + return tx + "_" + ty + "_" + lvl; +} +``` + +
\ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-6/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-6/index.md new file mode 100644 index 0000000..27368af --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-6/index.md @@ -0,0 +1,225 @@ +--- +sidebar_position: 6 +--- + +# チュートリアル6 WebApp Layer geoJSON + +## はじめに {#introduction} + +webAppで非同期読み込みにより[GeoJSONデータ](https://ja.wikipedia.org/wiki/GeoJSON) を読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。 + +実際の動作は、 [geojson1.html](https://svgmap.org/examples/tutorials/geojson1/geojson1.html)をクリック。 + +### ファイル構造 {#file-structure} + +- [tutorial6ディレクトリ](https://svgmap.org/examples/tutorials/geojson1/) +- geojson1.html: 周辺ライブラリ(SVGMapGIS)の読み込み +- Container.svg: クリッカブルなレイヤリングの設定 +- geoJsonExample1.svg: UIを持ったレイヤーを操作するwebAppを指定する方法 +- geoJsonExample1.html: +- geoJsonExample1.js: svgMapGIStoolによるGeoJsonデータのSVGMapコンテンツ化 + +## チュートリアル {#tutorial} + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/geojson1/geojson1.html)をクリック。 +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/geojson1.zip) + +### geojson1.html {#geojson1-html} + +[チュートリアル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) のhtmlに対して、読み込む [SVGコンテンツ](https://svgmap.org/examples/tutorials/geojson1/Container.svg) が異なるだけです。 + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### Container.svg {#container-svg} + +- [GeoJsonを表示する主題レイヤ](https://svgmap.org/examples/tutorials/geojson1/geoJsonExample1.svg) と、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。 +- GeoJsonデータはベクトルデータのため、class属性で [`clickable`](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B) を指定しています。 +- それ以外は [こちらの要点](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)を参考にしたレイヤリングを行っています。 + +```svg + + + + + + + + + + +``` + +### geoJsonExample1.svg {#geo-json-example1-svg} + +- ドキュメントルート要素(svg要素)の、data-controller属性で、この [レイヤーを操作するwebApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI)を指定しています。 + - ```data-controller="geoJsonExample1.html#exec=appearOnLayerLoad``` + - ```exec=appearOnLayerLoad``` は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。 ([詳しくはこちら](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0)) +- defs要素でgeoJsonのポイントフィーチャーを可視化するときに使うマーカー(アイコン)を定義しています + +```svg + + + + + + + + + + + + +``` + +### geoJsonExample1.html, geoJsonExample1.js {#geo-json-example1} + +geoJsonExample1.svgに紐付けられたwebApp([レイヤー固有のUI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI)) です。レイヤーに紐付けられたwebAppでは、[独自のAPI](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E6.8B.A1.E5.BC.B5API)が利用できます。 + +#### geoJsonexample1.html + +htmlは、[レイヤー固有のUIの初期化処理のための共通ライブラリ(svgMapLayerLib.js)の読み込み](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AEhtml.E6.96.87.E6.9B.B8.28webApp.29.E3.81.AE.E6.A7.8B.E9.80.A0.E3.83.BB.E4.BD.9C.E6.B3.95)と、このレイヤー固有の処理内容を記述したscriptコード部(```geoJsonExample1.js```)、及びUI(html,css等)から構成されます。 + +```html + + + + + SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル + + + + +

area layer

+

geoJsonの可視化

+ + + +``` + +#### geoJsonExample1.js + +- [レイヤー固有のUI:拡張AP](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E6.8B.A1.E5.BC.B5API)記載の通りsvgImage, svgMapGIStoolオブジェクトが自動的にwindowに組み込まれています。 +- geoJsonExample1.svgに紐付けられ、 [そのDOMをコントロールできるwebApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI). +- このアプリでは簡単なUIを持ち、 ```dataPaths``` で設定した　いくつかのgeoJsonデータを選択できるようになっています。 +- ```loadJSON(url)``` : [await](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function[) [fetch](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch) を使って [GeoJSON](https://ja.wikipedia.org/wiki/GeoJSON) を非同期読み込み +- [SVGMap GISライブラリ(svgMapGIStool)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI)の ```drawGeoJson``` 関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。 + - 変数 layerID 組み込み変数 ([the documentation #layerID](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#layerID)参照) + - なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。 + - ```drawGeoJson``` 関数については [解説書#drawGeoJson](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#drawGeoJson)を参照 +- ```svgMap.refreshScreen()``` 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、 [再描画を明示](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen)する必要があります。 + - [参考情報](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```js +var dataPaths = { + "A34b-180316.geojson": "世界遺産構成資産範囲ポリゴン（代表点）", + "A34a-180316.geojson": "世界遺産構成資産範囲ポリゴンデータ", + "A34d-180316.geojson": "世界遺産構成資産範囲ライン（代表点）", + "A34c-180316.geojson": "世界遺産構成資産範囲ラインデータ", + "A34e-180316.geojson":"世界遺産構成資産", + "A34f-180316.geojson": "世界遺産緩衝地帯ポリゴンデータ", + "A34g-180316.geojson":"世界遺産緩衝地帯ポリゴン（代表点）", + "C28-20_Airport.geojson":"空港データ空港", + "C28-20_AirportReferencePoint.geojson":"空港データ標点", + "C28-20_SurveyContent.geojson": "空港データ調査内容", + "C28-20_TerminalBuilding.geojson":"空港データターミナルビル", + "N02-20_RailroadSection.geojson":"鉄道データ鉄道", + "N02-20_Station.geojson":"鉄道データ駅" +}; + +addEventListener("load", function(){ + buildDataSelect(); + changeData(); +}); + +function changeData(){ + var path = dataSelect.options[dataSelect.selectedIndex].value; + loadAndDrawGeoJson(path); +} + +async function loadAndDrawGeoJson(dataPath){ + var gjs = await loadJSON(dataPath); + var parentElm = svgImage.getElementById("mapContents"); + removeChildren(parentElm); + svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm); + svgMap.refreshScreen(); +} + +function buildDataSelect(){ + var first = true; + for ( var dataPath in dataPaths){ + dataSelect.insertAdjacentHTML('beforeend', ''); + } +} + +async function loadJSON(url){ + var dt = getDateStr(new Date(),10); + var response = await fetch(url+"?time="+dt); // Add some dummy query part to always get the latest data. Bad Tips... + // https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice + // https://stackoverflow.com/questions/9692665/cache-busting-via-params + var json = await response.json(); + return ( json ); +} + +function getDateStr(dateData , tStep){ + var mind = tStep * Math.floor( dateData.getUTCMinutes() / tStep ); + var ans = dateData.getUTCFullYear()+ pad(dateData.getUTCMonth() + 1) + pad(dateData.getUTCDate()) + pad(dateData.getUTCHours()) + pad(mind); + return ( ans ); +} +function pad( inp ){ + return (("0"+inp).slice(-2)); +} + +function removeChildren(element){ + while (element.firstChild) element.removeChild(element.firstChild); +} +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-7/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-7/index.md new file mode 100644 index 0000000..4d7dce5 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-7/index.md @@ -0,0 +1,366 @@ +--- +sidebar_position: 7 +--- + +# チュートリアル7 WebApp Layer ベクトルタイル + +## はじめに {#introduction} + +webAppで非同期読み込みによりタイル分割されたCSVのPointジオメトリファイルを読み込み、SVGMapフレームワークのライブラリを使ってSVGMapコンテンツのDOMに変換し表示するチュートリアルです。 + +- 実際の動作は、[tiling1.html](https://svgmap.org/examples/tutorials/tiling1/tiling1.html)をクリック。 + +### ソースコード {#source-code} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/tiling1/) +- tiling1.html: 周辺ライブラリ(SVGMapGIS)の読み込み +- Container.svg: クリッカブルなレイヤリングの設定 ([Tutorial 6](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%AB6)とほぼ同じ) +- simpleTiling.svg: UIを持ったレイヤーを操作するwebApp [tutorial 6](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%AB6)とほぼ同じ +- simpleTiling.html: +- simpleTiling.js: + - GeoJsonを読む点は[Tutorial 6](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%AB6)と同様 + - 表示領域に応じてGeoJsonを動的に読み込む + - 小縮尺(広いエリア)表示のとき、読み込むタイルが多くなりすぎる場合は読み込みをやめ表示させない + +## チュートリアル {#tutorial} + +バックエンドにDBMSなどの動的な機構を持たせず、比較的大きなサイズのベクトルデータ（ここではポイントジオメトリデータを扱います）をタイル分割しWebMap/GISとして快適に利用できるコンテンツにします。このようなデザインはGISの世界では[ベクトルタイル](https://en.wikipedia.org/wiki/Vector_tiles)と呼ばれますが、より一般には[Jamstack pattern](https://en.wikipedia.org/wiki/Jamstack)と呼ばれるパターンの一種でしょう。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/tiling1/tiling1.html)をクリック。 +- 使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/tiling1.zip). + +#### Note + +なお、他のフレームワークでは実現できないような、ふつうはDBMSを接続するなどしないと実装できないような、より大規模なデータセットを[さらに効率的に配信するタイリング](https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html)もSVGMap.jsでは実装できます。たとえば [SVGMapTools](https://github.com/svgmap/svgMapTools/tree/master/tutorials)を使うと簡単に実現できます。SVGMapは、[Jamstack pattern](https://en.wikipedia.org/wiki/Jamstack)パターンをより広く適用できる特性を備えているといえるでしょう。 + +### Format of Tiled CSV Data {#format-of-tiled-csv-data} + +- 緯度経度とも、１度×１度ごとにタイル分割。 + - tile_[経度]_[緯度].csv + +#### データの例(tile_125_24.csv) + +``` +X,Y,P27_001,P27_002,P27_003,P27_004,P27_005,P27_006,P27_007,P27_008,P27_009 +125.317688,24.796933,47214,3,03002,03002,宮古島市総合博物館,平良字東仲宗根添1166-287,3,-99,1989 +125.282787,24.806925,47214,3,03003,03003,宮古島市立平良図書館北分館,平良字東仲宗根42,3,-99,9999 +125.393222,24.753839,47214,3,03003,03003,宮古島市立城辺図書館,城辺字福里377-1,3,-99,9999 +125.281532,24.805915,47214,3,03003,03003,宮古島市立平良図書館,平良字西里187,3,-99,9999 +125.213555,24.8377,47214,3,99999,03109,佐良浜スポーツセンター,伊良部字池間添248-1,3,3,9999 +125.195077,24.83307,47214,3,99999,03104,伊良部運動公園,伊良部字前里添945,4,3,9999 +125.325478,24.740085,47214,3,99999,03109,上野体育館,上野字宮国1746-2,4,3,9999 +125.387054,24.756012,47214,3,99999,03129,城辺トレーニングセンター,城辺字福里579,4,3,9999 +125.299712,24.803737,47214,3,99999,03109,宮古島市総合体育館,平良字東仲宗根676-1,4,3,9999 +125.328061,24.758818,47214,3,99999,03104,大嶽城跡公園多目的広場,上野字野原1190-134,4,3,9999 +125.405059,24.764564,47214,3,99999,03104,城辺運動公園多目的広場,城辺字福里245-1,4,3,9999 +125.407091,24.764468,47214,3,99999,03102,城辺運動公園多目的広場,城辺字福里245-1,4,3,9999 +125.404346,24.76409,47214,3,99999,03115,城辺運動公園多目的広場,城辺字福里245-1,4,3,9999 +125.281412,24.729776,47214,3,99999,03102,下地公園（多目的広場）,下地字与那覇1590,4,3,9999 +125.280271,24.730391,47214,3,99999,03104,下地公園（多目的広場）,下地字与那覇1590,4,3,9999 +125.263557,24.735081,47214,3,99999,03104,ふれあいの前浜広場,下地与那覇1199-1,4,3,9999 +125.299657,24.801104,47214,3,99999,03101,宮古島市陸上競技場,平良字東仲宗根935-1,3,3,9999 +125.301632,24.805759,47214,3,99999,03102,宮古島市市民球場,平良字西仲宗根1574-1,3,3,9999 +125.301437,24.804417,47214,3,99999,03104,前福多目的屋内運動場,平良字西仲宗根1574-7,3,3,9999 +125.302217,24.804102,47214,3,99999,03102,多目的前福運動場,平良字西仲宗根,3,3,9999 +125.302178,24.803613,47214,3,99999,03104,多目的前福運動場,平良字西仲宗根,3,3,9999 +125.389757,24.75579,47214,3,99999,03101,城辺陸上競技場,城辺字福里616,3,3,9999 +125.283694,24.729841,47214,3,99999,03101,下地陸上競技場,下地字与那覇1590,3,3,9999 +125.282256,24.729096,47214,3,99999,03109,下地体育館,下地字与那覇1590,3,3,9999 +125.326167,24.740636,47214,3,99999,03101,上野陸上競技場,上野字宮国1746-2,3,3,9999 +125.162675,24.835657,47214,3,99999,03109,伊良部勤労者体育センター,伊良部字長浜1542-5,3,3,9999 +125.161233,24.835137,47214,3,99999,03109,伊良部Ｂ＆Ｇ海洋センター,伊良部字長浜1822-5,3,3,9999 +125.161328,24.834684,47214,3,99999,03106,伊良部Ｂ＆Ｇ海洋センター,伊良部字長浜1822-5,3,3,9999 +125.262975,24.734973,47214,3,99999,03148,与那覇前浜,下地与那覇1199-1,3,3,9999 +125.271057,24.802628,47214,3,99999,03148,パイナガマ,平良下里338-3,3,3,9999 +125.443114,24.74628,47214,3,99999,03148,新城海岸,城辺字新城,3,3,9999 +125.447629,24.741724,47214,3,99999,03148,吉野海岸,城辺保良,3,3,9999 +125.432329,24.729739,47214,3,99999,03148,保良川ビーチ,城辺保良591-1,3,3,9999 +125.257704,24.797368,47214,3,99999,03148,サンセットビーチ,平良久貝643-3,3,3,9999 +125.156941,24.857008,47214,3,99999,03148,佐和田の浜,伊良部佐和田,3,3,9999 +125.181135,24.81205,47214,3,99999,03148,渡口の浜,伊良部町伊良部,3,3,9999 +``` + +### 元データと、分割プログラム {#original-data-and-splitting-program} + +#### 元データのDL先 + +- [国土数値情報文化施設 ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P27.html#prefecture00)の 全国　をダウンロード 解凍 + +#### Shapefile->CSV変換 + +- OGR2OGRで変換 + - コマンド：　```ogr2ogr -lco GEOMETRY=AS_XY P27-13.csv P27-13.shp``` + - [オプションの参考情報](https://qiita.com/tohka383/items/d3d1bf80db2cfb416330#csv) + +#### Notes + +- OGR2OGR: + - ogr2ogrは[GDAL](https://gdal.org/)と呼ばれるよく知られたOSSのGISツール集に同梱されているベクトルデータの変換ツール。 + - Windows版は[こちら](https://gdal.org/download.html#windows)に紹介されているように [gisinternals.com](https://www.gisinternals.com/)でコンパイル済みのバイナリが配布されています。 + - インストール/Windows + - [Stable Releases](https://www.gisinternals.com/release.php)　　⇒　MSVC 2017 x64 (他コンパイル環境も可)　⇒　Generic installer for the GDAL core components (gdal-*-core.msi) + - ogr2ogrの実行方法/Windows + - Windowsメニュー　⇒　すべてのアプリ　⇒　GDAL　⇒　GDAL * Command Prompt で起動したコマンドプロンプト上で動かす +- CSVのヘッダ行： + - 国土数値情報のヘッダ行は機械的に割り振られた番号(P27_001など)になっている。[国土数値情報の属性情報の説明](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P27.html) を見て、タイル分割前にCSVのヘッダ行を地物名に書き換えるとわかりやすくなります。 + +#### CSVのタイル分割 + +- [simpleTiling.py](https://svgmap.org/examples/tutorials/tiling1/simpleTiling.py)を用意したのでこれを使います +- 作業ディレクトリにtilesディレクトリを作成 +- コマンド：　```python simpleTiling.py P27-13.csv 0 1``` + - 参考 : [Windows版Pythonのインストール](https://www.python.jp/install/windows/install.html) + +### tiling1.html {#tiling1-html} + +- [チュートリアル6](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%AB6)のhtmlと特に違いはありません + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### Container.svg {#container-svg} + +- [チュートリアル6](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%AB6)のhtmlと特に違いはありません。 + - GeoJsonデータはベクトルタイルデータのため、class属性で[clickable](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B)を指定しています。 + +```svg + + + + + + + + + + +``` + +### simpleTiling.svg {#simple-tiling-svg} + +- defs要素でアイコンを定義しています。 +- データの実体はここにはありません。webAppで動的に生成されます。 +- id="mapTiles"のグループ内に、タイルごとにサブグループが作られ、そこにアイコン(Point)が配置されます。 + +```svg + + + + + + + + + + + +``` + +### simpleTiling.html, simpleTiling.js {#simple-tiling} + +- simpleTiling.svgに紐付けられ、[そのDOMをコントロールできるwebApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) +- 表示領域に応じてタイル分割されたGeoJsonデータを動的に読み込みます。この点は [チュートリアル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)と類似しています。 +- 縮尺に応じたピラミッド構造は持っていないので、このチュートリアルのほうが単純です。 +- その代わり、小縮尺(縮小表示)では読み込むデータが大量になりすぎるので、読み込みを行わず、描画を消去し(```removeAllTiles()```)、webAppのウィンド上に拡大を促すメッセージを出します。 +- ```addEventListener("zoomPanMap",zpmFunc)``` : 伸縮スクロールが発生したときに、 zpmFunc()を呼び出す。 +- ```zpmFunc()``` : 表示領域に応じて読み込むべきタイルを選別して表示する +- ```svgMap.getGeoViewBox()``` : 地理的な表示領域を取得 +- ```getTileList(geoViewBox)``` : 表示すべきタイルをリストアップする +- ```delete tiles[tileKey]``` : 表示領域から外れたタイルのグループを消去 +- ```await loadCSV()``` : 既に読み込み済みのものを除き、表示すべきタイルデータ(CSV)を読み込み +- ```drawTiles()```：読み込んだCSVデータを表示する +- タイルを表示するためのグループを作成 +- ```csv2geojson``` : 読み込んだCSVからgeoJsonを生成する +- ```svgMapGIStool.drawGeoJson()``` : geoJsonからSVGのDOMを生成 +- ```svgMap.refreshScreen()``` 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、 [再描画を明示](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen)する必要があります。 +- [参考情報](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```html + + + +Simple Tiling Tutorial + + + + + +

Displaying CSV Tile Data

+
-
+ + +``` + +```js +addEventListener("load",init); +addEventListener("zoomPanMap",zpmFunc); + +var latCol=10; +var lngCol=9; +var tilesTh=8; // 画面の中に入るタイルの枚数の閾値（縮小すると読み込むタイルが多くなりすぎ重くなるのを防ぐ） + +function init(){ + zpmFunc(); +} + +function getTileList(geoViewBox){ + var tileNames={}; + for ( var ty = Math.floor(geoViewBox.y) ; ty<= Math.floor(geoViewBox.y+geoViewBox.height) ; ty++){ + for ( var tx = Math.floor(geoViewBox.x) ; tx <= Math.floor(geoViewBox.x+geoViewBox.width) ; tx++){ + var tile="tile_" + tx + "_" + ty; + tileNames[tile]=true; + } + } + return ( tileNames); +} + +var tiles={}; // データ(CSVを配列化したもの)をタイルごとに格納する変数 + +async function zpmFunc(){ + var geoViewBox = svgMap.getGeoViewBox(); + var tileList=getTileList(geoViewBox); + + if (Object.keys(tileList).length < tilesTh ){ + for ( var tileKey in tiles ){ // 必要ないデータを消す + if ( !tileList[tileKey]){ + delete tiles[tileKey]; + } + } + for ( var tileKey in tileList ){ // 不足しているデータを読み込む + if ( !tiles[tileKey] ){ + tiles[tileKey]=await loadCSV(`tiles/${tileKey}.csv`); // テンプレートリテラル + } + } + message.innerText="-"; + drawTiles(tileList); + } else { + message.innerText="Too many tiles, please zoom in."; + removeAllTiles(); + } +} + +function removeAllTiles(){ + tiles={}; + var groups = svgImage.getElementById("mapTiles").children; + for ( var i = groups.length -1 ; i >= 0 ; i-- ){ + groups[i].remove(); + } + svgMap.refreshScreen(); +} + +function drawTiles(tileList){ + // tileList:表示すべきタイルのキー(ID)の連想配列 + var tileGroup = svgImage.getElementById("mapTiles"); + var groups = tileGroup.children; + for ( var i = groups.length -1 ; i >= 0 ; i-- ){ + var groupKey = groups[i].getAttribute("id"); + if ( !tileList[groupKey]){ + groups[i].remove(); // 表示する必要のないグループは消す + } else { + delete tileList[groupKey]; // すでに描画済みのタイルなのでtileListから消す + } + } + // tileListは、新たに描画すべきタイルのリストとなった + for ( var tileKey in tileList){ + var grp = svgImage.createElement("g"); + grp.setAttribute("id",tileKey); + tileGroup.appendChild(grp); + if ( tiles[tileKey] ){ + var geoJson = csv2geojson(tiles[tileKey], lngCol, latCol); + svgMapGIStool.drawGeoJson(geoJson, layerID, "", 0, "", "p0", "poi", "", grp); + } + + } + svgMap.refreshScreen(); +} + +var schema; + +async function loadCSV(url){ + var response = await fetch(url); + if ( response.ok ){ + var txt = await response.text(); + txt=txt.split("\n"); + var csv=[]; + var schemaLine = true; + for ( line of txt){ + line = line.trim(); + if ( schemaLine ){ + schema = line; + svgImage.documentElement.setAttribute("property",schema); + } else { + if ( line !=""){ + line=line.split(","); + csv.push(line); + } + } + schemaLine = false; + } + return ( csv ); + } else { + return ( null ); + } +} + +function csv2geojson(csvArray, lngCol, latCol){ + var geoJson = {type: "FeatureCollection", features: []} + for ( var csvRecord of csvArray ){ + var lng = Number(csvRecord[lngCol]); + var lat = Number(csvRecord[latCol]); + var feature = { type: "Feature", + geometry: { + type: "Point", + "coordinates": [lng, lat] + }, + "properties": { + "csvMetadata": csvRecord.toString() // この処理は非常に雑です。 + } + } + geoJson.features.push(feature); + } + return(geoJson); +} + +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-8/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-8/index.md new file mode 100644 index 0000000..9211de3 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-8/index.md @@ -0,0 +1,495 @@ +--- +sidebar_position: 8 +--- + +# チュートリアル8 WebApp Layer メッシュデータ + +## はじめに {#introduction} + +webAppで非同期読み込みにより、2次元配列形式のメッシュデータ（グリッドデータ、ラスターデータなどとも呼ばれます）のCSVファイルを読み込み、SVGMapコンテンツのDOMに変換し表示するチュートリアルです。 + +実際の動作は、 [mesh1.html](https://svgmap.org/examples/tutorials/mesh1/mesh1.html)をクリック。 + +### ソースコード {#source-code} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/mesh1/) +- このチュートリアルで扱うメッシュデータの形式を決める +- Container.svg: クリッカブルなレイヤーを指定 +- ArrayMesh.svg: webAppが紐付けられたレイヤー +- ArrayMesh.html: +- ArrayMesh.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。 + +## チュートリアル {#tutorial} + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/mesh1/mesh1.html) をクリック。 +- 使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/mesh1.zip). + + +### メッシュデータとは {#what-is-mesh-data} + +メッシュデータは、等間隔のグリッド上にデータが並んだデータの構造を持っており、グリッドデータとも呼ばれます。 プログラム上では、二次元配列データとそのメタデータ（原点とグリッド間隔の情報など）として扱えます。 + +日本では、メッシュ間隔と原点、および各メッシュへの附番規則として、地域基準メッシュがよく用いられています。 [参考１](https://www.biodic.go.jp/kiso/col_mesh.html) , [参考２](https://www.stat.go.jp/data/mesh/m_tuite.html) , [参考３](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)（なお、地域基準メッシュはメッシュデータのデータ形式ではない） + +**10x8 meshData (X0=xx,Y0=yy,interval=ii)** +|---|---|---|---|---|---|---|---|---|---| +|---|---|---|---|---|---|---|---|---|---| +| Val0,0 | Val1,0 | Val2,0 | Val3,0 | Val4,0 | Val5,0 | Val6,0 | Val7,0 | Val8,0 | Val9,0| +| Val0,1 | Val1,1 | Val2,1 | Val3,1 | Val4,1 | Val5,1 | Val6,1 | Val7,1 | Val8,1 | Val9,1| +| Val0,2 | Val1,2 | Val2,2 | Val3,2 | Val4,2 | Val5,2 | Val6,2 | Val7,2 | Val8,2 | Val9,2| +| Val0,3 | Val1,3 | Val2,3 | Val3,3 | Val4,3 | Val5,3 | Val6,3 | Val7,3 | Val8,3 | Val9,3| +| Val0,4 | Val1,4 | Val2,4 | Val3,4 | Val4,4 | Val5,4 | Val6,4 | Val7,4 | Val8,4 | Val9,4| +| Val0,5 | Val1,5 | Val2,5 | Val3,5 | Val4,5 | Val5,5 | Val6,5 | Val7,5 | Val8,5 | Val9.5| +| Val0,6 | Val1,6 | Val2,6 | Val3,6 | Val4,6 | Val5,6 | Val6,6 | Val7,6 | Val8,6 | Val9,6| +| Val0,7 | Val1,7 | Val2,7 | Val3,7 | Val4,7 | Val5,7 | Val6,7 | Val7,7 | Val8,7 | Val9,7| + +上の図で、個々の升目が一個のメッシュ、升目の中の数字はメッシュの番号(二次元配列の番号)、それぞれの升目の中に値が入ります。また括弧の中のメタデータX0,Y0,intervalが原点の座標値、メッシュ間隔です。（メタデータとしてはさらにデータの単位や座標系・説明などが記述されることがある） + +#### メッシュデータ形式の種類 + +データ形式の構造としては、主に以下の二種類が知られています。 + +#### Raster + +- 上図メッシュデータの構造をそのままデータ化したものです。 +- よく使用されるASCII(テキスト)符号化形式:[AAIGrid (Wikipedia](https://en.wikipedia.org/wiki/Esri_grid) ([GDAL explanation)](https://gdal.org/en/stable/drivers/raster/aaigrid.html)) +- 圧縮が効きやすいデータのため、差分符号化、バイナリ符号化も よく行われます。ビットイメージデータ形式（ただしロスレス形式）をそのまま利用することもあります。 + - [GeoTIFF](https://ja.wikipedia.org/wiki/GeoTIFF) + - [地理院の標高タイル](https://maps.gsi.go.jp/development/demtile.html)の例(PNGで符号化) + - [GDALのラスタードライバ一覧](https://gdal.org/drivers/raster/index.html) + +#### [Gridded XYZ](https://gdal.org/drivers/raster/xyz.html) +- Pointフィーチャの形式を用いてデータを符号化します。ただしPointの座標が必ずグリッド上にしか存在しないように制約をかけます。 +- Rasterとの違いは、各レコードに座標値(X,Y)が入る点です。 + +``` +X0,Y0,interval +Value00,Value10,Value20 +Value01,Value11,Value21 +Value02,Value12,Value22 +``` + +このようなRasterデータは、 Gridded XYZで記述すると以下のようになります。 + +``` +X0,Y0,Value00 +X1,Y0,Value10 +X2,Y0,Value20 +X0,Y1,Value01 +.... +X2,Y2,Value22 + +``` + +ここで、Gridded XYZではレコードの並びの順番は問いません。また、格子点にデータが無い場合はそのレコードは省略をできます。データによってはX,Y値が重複するデータ（正規化されていないデータ）が交換されることもあります。このように正規化されていなくても記述できることが特徴的と言えます。 + +- [こちらも参考にしてください。](https://gdal.org/drivers/raster/xyz.html): + +データ形式構造間の変換ツールの例： [https://gdal.org/programs/gdal_grid.html](https://gdal.org/programs/gdal_grid.html) + +#### 本チュートリアルのデータ形式 + +テキスト符号化したRaster形式を用いることにします。 + +- ヘッダ行（最初の1行） +- カンマ区切り、2次元配列データ（2行目以降） + - 一個のメッシュに対して一個の値が入る[実数](温度と湿度など複数の値は許容されない) + - カラム（桁）方向：X方向 + - 桁が増える方向が、Xのグリッド座標も増える方向 + - ロー（行）方向：Y方向 + - 行が増える方向は、Yのグリッド座標が減る方向 + +#### ヘッダ行 + +- [属性名]:[属性値]の組をカンマ区切りで並べる。 +- 属性名 + - minX : メッシュ領域のX(経度)の最小値[実数]（上の図の全体を囲む四角形の左端の座標） + - maxX : メッシュ領域のX(経度)の最大値[実数]（同、右端の座標） + - minY : メッシュ領域のY(緯度)の最小値[実数]（同、下端の座標） + - maxY : メッシュ領域のY(緯度)の最大値[実数]（同、上端の座標） + - partX : メッシュ領域X(経度)方向のメッシュ個数[自然数] + - partY : メッシュ領域Y(緯度)方向のメッシュ個数[自然数] + - valName : メッシュの値の単位[文字列] + - minVal : メッシュの値の最小値[実数] + - maxVal : メッシュの値の最大値[実数] + +#### 実際に使うサンプルデータ + +[使用するサンプルデータはこちら](https://www.svgmap.org/examples/tutorials/mesh1/mesh.csv)（日本の神社仏閣の密度） + +``` +minX:124.1539312,maxX:145.7870748,minY:24.33444293,maxY:45.51431213,partX:100,partY:98,valName:count/km2,minVal:1.95645299200927E-03,maxVal:2.86870067881484 +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.97412404320488E-02,2.4676550540061E-03,2.4676550540061E-03,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.37480244978236E-03,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.89797155921526E-03,,4.89797155921526E-03,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.43980848573941E-03,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7.29220251762907E-03,,,1.21536708627151E-02,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.68704575374383E-03,9.68704575374383E-03,,,2.17958529459236E-02,4.84352287687192E-03,,,2.17958529459236E-02,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.41288890872148E-03,2.65417779959363E-02,,,1.44773334523289E-02,,7.23866672616444E-03,,,1.68902223610504E-02,9.65155563488592E-03,,,,4.82577781744296E-03,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.40411523496203E-02,4.80823046992406E-03,1.44246914097722E-02,2.40411523496203E-03,9.37604941635191E-02,1.92329218796962E-02,1.20205761748101E-02,,,1.20205761748101E-02,7.21234570488609E-03,3.12534980545064E-02,1.20205761748101E-02,4.80823046992406E-03,1.68288066447342E-02,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.39543909437019E-03,,2.39543909437019E-03,5.74905382648847E-02,0.011977195471851,0.150912662945322,4.79087818874039E-03,2.39543909437019E-03,,,7.18631728311058E-03,7.18631728311058E-03,4.79087818874039E-03,2.39543909437019E-03,,,,4.79087818874039E-03,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.38685918921668E-03,,,,2.38685918921668E-03,,9.54743675686673E-03,7.87663532441505E-02,4.05766062166836E-02,1.67080143245168E-02,,,,,,,,,9.54743675686673E-03,,7.16057756765004E-03,7.16057756765004E-03,2.38685918921668E-03,,2.38685918921668E-03 +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37837424625475E-03,2.37837424625475E-03,4.28107364325854E-02,0.152215951760304,0.019026993970038,3.56756136938212E-02,1.66486197237832E-02,7.84863501264066E-02,3.32972394475665E-02,,1.66486197237832E-02,,,4.75674849250949E-03,2.37837424625475E-03,2.37837424625475E-03,,,,2.37837424625475E-03,2.37837424625475E-03,,,2.37837424625475E-03,,2.61621167088022E-02 +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.021329847145445,4.7399660323211E-03,4.7399660323211E-03,2.36998301616055E-02,0.350757486391762,8.76893715979404E-02,7.10994904848165E-02,5.68795923878532E-02,,,,1.65898811131239E-02,1.42198980969633E-02,3.79197282585688E-02,2.84397961939266E-02,,,1.18499150808028E-02,8.53193885817798E-02,,0.021329847145445,1.42198980969633E-02,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.59785270028783E-02,9.44673709195576E-03,4.25103169138009E-02,1.88934741839115E-02,,,3.54252640948341E-02,2.36168427298894E-02,2.36168427298894E-03,7.08505281896682E-03,,,,2.83402112758673E-02,4.25103169138009E-02,7.08505281896682E-03,4.72336854597788E-03,2.36168427298894E-03,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.64743376955089E-02,2.35347681364414E-03,2.82417217637296E-02,7.06043044093241E-03,9.41390725457654E-03,7.06043044093241E-03,0.035302152204662,,2.11812913227972E-02,4.70695362728827E-03,,,,4.70695362728827E-03,1.17673840682207E-02,,4.70695362728827E-03,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.40721567441894E-02,4.69071891472979E-03,2.34535945736489E-03,,,9.85050972093256E-02,3.98711107752032E-02,,,,2.34535945736489E-03,9.38143782945958E-03,4.69071891472979E-03,,,,4.69071891472979E-03,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.33733104522365E-03,2.33733104522365E-03,1.40239862713419E-02,1.16866552261183E-02,2.10359794070129E-02,2.57106414974602E-02,4.6746620904473E-03,,,,,,,,,1.16866552261183E-02,2.10359794070129E-02,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.56232948360314E-02,1.16469521981961E-02,,5.12465896720628E-02,1.39763426378353E-02,,,,,,,,,,1.16469521981961E-02,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.64307304780522E-03,,6.96460957170783E-03,0.176436775816598,1.62507556673183E-02,1.85722921912209E-02,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.85101456137249E-02,9.25507280686246E-03,4.62753640343123E-03,,2.08239138154405E-02,2.31376820171562E-03,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.30608439674165E-03,,1.15304219837082E-02,3.68973503478663E-02,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.60893883651801E-02,6.89545215650575E-03,1.14924202608429E-02,2.29848405216858E-03,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.20735258239644E-02,0.107675408123309,8.70567129507605E-02,1.83277290422654E-02,6.87289839084951E-03,4.58193226056634E-03,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,9.13411844822654E-03,2.28352961205663E-03,6.8505888361699E-03,0.2580388461624,3.19694145687929E-02,,4.11035330170194E-02,4.11035330170194E-02,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.27617349674119E-03,,9.10469398696478E-03,4.55234699348239E-03,,0.011380867483706,6.14566844120122E-02,0.106980154346836,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.80669040443137E-02,3.85712456251111E-02,7.94113880516994E-02,6.57980072428366E-02,2.26889680147712E-03,2.26889680147712E-03,5.89913168384052E-02,4.53779360295425E-03,4.08401424265882E-02,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84488755354706E-02,8.36828467536713E-02,4.52339712182007E-03,9.04679424364014E-03,2.26169856091003E-03,,1.35701913654602E-02,2.26169856091003E-03,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.80366226145447E-02,0.24800356094999,1.12728891340905E-02,2.25457782681809E-03,,,0.137529247435904,,,4.50915565363619E-03,2.25457782681809E-03,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.04556060194795E-02,5.16932743582237E-02,8.31587457067078E-02,6.74260100324658E-03,,7.64161447034612E-02,6.74260100324658E-03,,2.24753366774886E-03,0.047198207022726,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.96226067466189E-03,0.116509388770605,6.72169550599642E-03,0.255424429227864,6.72169550599642E-03,6.72169550599642E-03,0.177004648324572,1.79245213493238E-02,5.37735640479714E-02,3.58490426986476E-02,1.79245213493238E-02,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.35050714590285E-02,1.78693714448152E-02,4.46734286120379E-03,0.125085600113706,2.2336714306019E-03,,0.154123328711531,0.022336714306019,0.022336714306019,3.35050714590285E-02,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.273902743150215,3.11759219845773E-02,1.33611094219617E-02,,,2.00416641329426E-02,0.104662023805367,4.45370314065391E-02,8.46203596724242E-02,8.90740628130781E-03,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5.32825132804057E-02,0.419599792083195,3.10814660802366E-02,9.54645029607268E-02,3.55216755202704E-02,1.11005236000845E-02,9.32443982407099E-02,0.104344921840794,5.55026180004226E-02,1.77608377601352E-02,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.4268600538726E-03,3.32014504040445E-02,6.64029008080891E-03,4.4268600538726E-03,0.159366961939414,9.96043512121336E-02,1.10671501346815E-02,0.150513241831669,0.11952522145456,0.152726671858605,8.85372010774521E-03,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.41365330625383E-03,4.41365330625383E-03,,,,0.139030079146996,0.024275093184396,,5.51706663281728E-02,0.518604263484825,5.51706663281728E-02,7.50321062063151E-02,0.470054077116033,0.024275093184396,4.41365330625383E-03,8.82730661250765E-03,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.171622914458144,4.62061692771927E-02,,,2.42032315261486E-02,9.24123385543855E-02,1.32017626506265E-02,1.32017626506265E-02,0.215628789960233,0.132017626506265,6.60088132531325E-03,0.134217920281369,0.101213513654803,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.38766116712541E-03,2.19383058356271E-03,,,,,,3.29074587534406E-02,8.77532233425083E-03,1.75506446685017E-02,0.482642728383795,0.361982046287847,0.118466851512386,,2.19383058356271E-03,0.23473987244121,8.77532233425083E-03,0.263259670027525,6.58149175068812E-02,6.36210869233185E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.209993883176214,0.441862129183284,0.120308995569706,1.74994902646845E-02,3.06241079631979E-02,0.109371814154278,1.53120539815989E-02,4.37487256617113E-03,0.201244138043872,2.84366716801123E-02,5.46859070771391E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.07010733990224E-02,8.07010733990224E-02,0.148315486246852,,,,,,0.185394357808565,0.377332045892726,0.170126587165507,,6.54333027559641E-03,1.52677706430583E-02,0.174488807349238,1.30866605511928E-02,8.72444036746188E-02,0.141772155971256,0.037078871561713,3.92599816535785E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.52239586900056E-02,0.154414438141486,0.121791669520045,,,,8.6994049657175E-03,3.69724711042994E-02,0.45019420697588,8.91689008986043E-02,7.17700909671694E-02,8.26443471743162E-02,,2.17485124142937E-03,1.30491074485762E-02,0.017398809931435,8.6994049657175E-03,0.143540181934339,7.39449422085987E-02,2.17485124142937E-02,8.48191984157456E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.279757007951887,0.201685284802523,,0.134456856535016,2.38552487400834E-02,0.117107584724046,2.16865897637122E-02,0.17783003606244,3.68672025983107E-02,3.90358615746819E-02,1.30119538582273E-02,,,2.16865897637122E-03,6.50597692911366E-03,8.24090411021063E-02,2.16865897637122E-02,3.68672025983107E-02,4.77104974801668E-02,0.210359920708008,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37878580950012E-02,0.363305469087291,0.899613542501863,0.635784570902759,0.183815267097736,,1.08126627704551E-02,0.155702343894553,0.348167741208654,2.16253255409102E-03,,5.62258464063664E-02,1.73002604327281E-02,2.16253255409102E-03,0.116776757920915,5.40633138522754E-02,0.118939290475006,2.81129232031832E-02,1.29751953245461E-02,5.19007812981844E-02,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.37211836899434E-02,1.02216736991211,0.295436560502023,0.204864768231329,0.183300055785926,2.15647124454031E-03,,4.52858961353465E-02,0.338565985392829,0.090571792270693,1.29388274672419E-02,0.028034126179024,0.174674170807765,3.01905974235643E-02,0.034503539912645,5.39117811135078E-02,0.232898894410354,0.116449447205177,4.31294248908062E-02,9.91976772488543E-02,0.034503539912645,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.15047432997382E-03,,,,,,,,,,,,,7.74170758790576E-02,0.217197907327356,2.79561662896597E-02,1.29028459798429E-02,2.15047432997382E-02,6.66647042291885E-02,2.15047432997382E-03,,0.154834151758115,4.08590122695026E-02,0.217197907327356,0.103222767838743,9.03199218589006E-02,0.462351980944372,0.408590122695026,0.550521428473299,0.339774944135864,0.249455022276963,0.165586523407984,0.111824665158639,0.133329408458377,4.30094865994765E-03,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,4.28908220941427E-03,6.4336233141214E-03,4.28908220941427E-03,,,,,,,,,,,,0.032168116570607,0.604760591527412,0.177996911690692,9.00707263976997E-02,,4.28908220941427E-03,0.137250630701257,6.4336233141214E-03,2.14454110470713E-03,9.22152675024068E-02,0.111516137444771,1.07227055235357E-02,3.64571987800213E-02,0.032168116570607,7.07698564553354E-02,0.300235754658999,0.482521748559105,0.529701652862662,0.216598651575421,0.195153240528349,0.167274206167156,8.57816441882854E-02,4.28908220941427E-03,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3.84960757478439E-02,0.650155945963586,0.10265620199425,0.115488227243532,5.77441136217658E-02,3.84960757478439E-02,2.56640504985626E-02,,2.13867087488022E-02,9.19628476198493E-02,8.55468349952087E-02,8.12694932454482E-02,1.92480378739219E-02,2.13867087488022E-03,3.63574048729637E-02,0.160400315616016,0.530390376970294,0.780614869331279,0.970956577195618,0.303691264232991,0.134736265117454,0.160400315616016,6.62987971212867E-02,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.5314518329066E-03,2.13286295822665E-03,,,,2.13286295822665E-03,4.47901221227596E-02,3.83915332480797E-02,7.25173405797061E-02,0.138636092284732,6.18530257885728E-02,,,6.61187517050261E-02,0.191957666240398,1.49300407075865E-02,8.5314518329066E-03,0.042657259164533,7.46502035379327E-02,2.13286295822665E-02,1.49300407075865E-02,2.13286295822665E-02,6.18530257885728E-02,2.13286295822665E-03,1.91957666240398E-02,0.531082876598436,0.279405047527691,9.81116960784258E-02,0.296467951193504,0.897935305413419,2.26296759867847,2.86870067881484,0.499089932225036,0.245279240196065,0.219684884697345,7.03844776214794E-02,4.47901221227596E-02,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.189313384862506,0.176550684759416,0.295669219054925,0.176550684759416,4.89236837285128E-02,0.136135467766297,7.65762006185418E-02,0.195694734914051,4.25423336769677E-02,0.082957550670087,0.246745535326413,0.110610067560116,0.229728601855626,0.104228717508571,0.242491301958716,0.163787984656326,0.336084436048045,0.323321735944954,0.431804686821222,0.60622825489679,0.357355602886529,0.102101600824722,0.125499884347055,1.48898167869387E-02,0.112737184243964,2.12711668384838E-03,0.027652516890029,0.14464393450169,0.114864300927813,0.104228717508571,0.193567618230203,0.687058688883028,1.2528717267867,0.146771051185539,0.238237068591019,0.2637624687972,5.10508004123612E-02,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.152743060223704,0.120921589343766,0.146378766047716,4.03071964479218E-02,5.51572161918931E-02,1.69714511359671E-02,1.27285883519753E-02,2.33357453119548E-02,3.60643336639301E-02,3.60643336639301E-02,4.24286278399177E-02,0.171835942751667,0.273664649567469,0.163350217183683,9.12215498558231E-02,3.18214708799383E-02,0.112435863775782,0.642793711774754,0.286393237919445,0.352157611071317,1.77139521231657,0.948279832222161,0.116678726559774,5.30357847998972E-02,1.06071569599794E-02,0.019092882527963,,1.48500197439712E-02,0.239721747295535,0.214264570591585,0.1548644916157,0.473079200415083,0.267300355391482,0.56217931887891,0.163350217183683,8.27358242878396E-02,0.201535982239609,0.038185765055926,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,8.46322573541403E-03,0.131179998898918,0.118485160295796,7.40532251848728E-02,1.90422579046816E-02,2.32738707723886E-02,4.65477415447772E-02,0.112137740994236,8.88638702218474E-02,0.184075159745255,6.98216123171658E-02,8.88638702218474E-02,9.09796766557009E-02,0.192538385480669,0.139643224634332,0.190422579046816,0.296212900739491,2.13273288532434,0.768037735488824,0.693984510303951,9.94429023911149E-02,0.389308383829046,0.421045480336848,0.738416445414875,0.44643515754309,6.55899994494588E-02,5.28951608463377E-02,4.02003222432167E-02,1.69264514708281E-02,0.39777160956446,0.32583419081344,0.141759031068185,0.514140963426403,8.04006444864333E-02,,6.34741930156053E-03,0.181959353311402,0.148106450369746,2.53896772062421E-02,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,2.11024117132996E-03,,,2.95433763986194E-02,0.168819293706397,4.43150645979291E-02,6.75277174825587E-02,4.43150645979291E-02,0.149827123164427,5.90867527972389E-02,8.01891645105385E-02,0.111842782080488,6.11969939685688E-02,6.75277174825587E-02,6.75277174825587E-02,0.253228940559595,0.316536175699494,0.314425934528164,0.179370499563047,0.576095839773079,1.51937364335757,0.835655503846664,8.22994056818684E-02,0.293323522814864,0.208913875961666,0.225795805332306,0.151937364335757,0.51278860463318,0.183590981905706,0.346079552098113,0.215244599475656,0.379843410839393,0.240567493531615,0.346079552098113,,6.33072351398988E-02,7.38584409965486E-02,2.32126528846296E-02,6.33072351398988E-03,,1.89921705419696E-02,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,2.10473497685373E-03,1.26284098611224E-02,,,,,,,,,4.20946995370746E-03,3.36757596296596E-02,0.092608338981564,1.89426147916836E-02,5.47231093981969E-02,7.99799291204417E-02,0.069456254236173,7.99799291204417E-02,0.134703038518639,0.311500776574352,0.23152084745391,0.328338656389182,0.319919716481767,5.05136394444895E-02,4.20946995370746E-03,,8.62941340510028E-02,0.420946995370746,0.092608338981564,2.23943801537237,1.03763434358889,0.250463462245594,0.151540918333468,0.229416112477056,0.383061765787378,3.36757596296596E-02,1.89426147916836E-02,4.41994345139283E-02,1.26284098611224E-02,8.20846640972954E-02,0.113655688750101,0.105236748842686,,,2.10473497685373E-02,4.84089044676357E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,4.19857446634665E-03,6.29786169951998E-03,,,,,,2.09928723317333E-03,5.87800425288531E-02,8.18722020937597E-02,0.151148680788479,3.35885957307732E-02,3.56878829639465E-02,3.98864574302932E-02,0.104964361658666,0.371573840271679,0.140652244622613,0.117560085057706,0.304396648810132,0.172141553120213,2.51914467980799E-02,0.163744404187519,0.327488808375039,0.138552957389439,6.29786169951998E-03,2.30921595649066E-02,0.201531574384639,2.30921595649066E-02,0.354779542406292,0.272907340312532,0.329588095608212,0.188935850985599,3.35885957307732E-02,4.40850318966398E-02,0.224623733949546,0.083971489326933,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,3.14084599974333E-02,,,,,,,,0.123539942656571,6.90986119943532E-02,0.213577527982546,0.096319277325462,8.79436879928131E-02,8.16619959933265E-02,0.140291121321869,0.127727737322895,0.048159638662731,0.13191553198922,0.048159638662731,,9.21314826591376E-02,0.364338135970226,0.161230094653491,0.11307045599076,0.274300550644251,0.22614091198152,1.46572813321355E-02,0.303615113308522,0.280582242643737,0.077474201327002,1.25633839989733E-02,8.37558933264887E-03,3.97840493300821E-02,3.35023573305955E-02,1.25633839989733E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,4.17712935925664E-03,,,,2.71513408351681E-02,0.304930443225735,0.486635570353398,0.142022398214726,4.80369876314513E-02,8.56311518647611E-02,0.139933833535097,0.240184938157257,7.72768931462478E-02,3.13284701944248E-02,0.18588225648692,8.14540225055044E-02,0.162908045011009,0.104428233981416,7.10111991073629E-02,2.29742114759115E-02,0.045948422951823,4.38598582721947E-02,0.100251104622159,0.169173739049894,,0.167085174370266,6.89226344277345E-02,8.35425871851328E-03,6.26569403888496E-03,3.55055995536814E-02,6.89226344277345E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,3.33326189620469E-02,2.08328868512793E-03,,4.37490623876865E-02,0.329159612250213,0.564571233669669,0.324993034879957,,4.16657737025586E-03,5.62487944984541E-02,,2.08328868512793E-02,,2.08328868512793E-03,0.177079538235874,7.29151039794776E-02,,,4.16657737025586E-03,8.33315474051172E-03,,8.33315474051172E-03,2.70827529066631E-02,2.08328868512793E-02,,2.08328868512793E-03,0.127080609792804,4.99989284430703E-02,6.24986605538379E-03,0.108331011626652,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,8.31227508713599E-03,0.004156137543568,0.132996401394176,0.147542882796664,0.583937324871303,0.536141743120271,0.274305077875488,0.039483306663896,0.243134046298728,0.253524390157648,0.16624550174272,0.004156137543568,,6.23420631535199E-03,0.147542882796664,6.44201319253039E-02,0.012468412630704,0.002078068771784,4.36394442074639E-02,0.14546481402488,0.02078068771784,5.19517192945999E-02,0.012468412630704,0.014546481402488,,,,0.002078068771784,0.014546481402488,0.027014894033192,0.01039034385892,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,1.45103305977601E-02,4.14580874221717E-03,0.049749704906606,9.74265054421035E-02,0.122301357895406,0.27776918572855,0.737953956114656,0.493351240323843,0.124374262266515,0.114009740410972,7.66974617310176E-02,0.153394923462035,0.223873672079727,2.69477568244116E-02,2.07290437110858E-03,2.07290437110858E-03,0.140957497235384,4.56038961643889E-02,8.29161748443434E-03,6.21871311332575E-03,1.86561393399773E-02,,,8.29161748443434E-03,3.31664699377374E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,2.27457441621238E-02,4.13558984765887E-03,,0.113728720810619,6.61694375625418E-02,0.248135390859532,0.163355798982525,0.479728422328428,0.128203285277425,2.27457441621238E-02,1.24067695429766E-02,7.44406172578596E-02,7.85762071055184E-02,0.10752533603913,1.03389746191472E-02,,2.48135390859532E-02,4.13558984765887E-03,3.10169238574415E-02,2.06779492382943E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.03389746191472E-02,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,2.06273987972052E-03,2.06273987972052E-03,1.23764392783231E-02,,,1.03136993986026E-02,8.25095951888208E-02,0.109325213625188,6.60076761510567E-02,0.136140832061554,0.360979478951091,3.30038380755283E-02,4.33175374741309E-02,7.83841154293798E-02,2.06273987972052E-02,4.95057571132925E-02,1.03136993986026E-02,,2.06273987972052E-02,4.53802773538515E-02,1.85646589174847E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,6.17321609230951E-03,4.11547739487301E-02,,,,8.23095478974602E-03,0.160503618400047,2.88083417641111E-02,3.90970352512936E-02,4.52702513436031E-02,0.228408995415452,2.67506030666746E-02,2.26351256718015E-02,6.17321609230951E-03,8.84827639897697E-02,8.23095478974602E-03,,,,,2.0577386974365E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,0.100586751373196,2.66862809765621E-02,0.166276058392426,1.64223267548075E-02,,,2.05279084435093E-03,5.74781436418262E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,3.27663327423708E-02,3.07184369459726E-02,2.86705411495744E-02,6.34847696883434E-02,4.30058117243616E-02,,2.04789579639817E-02,3.27663327423708E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,2.45166364550266E-02,2.45166364550266E-02,3.06457955687832E-02,1.63444243033511E-02,2.45166364550266E-02,1.22583182275133E-02,0.116454023161376,2.04305303791888E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,4.07652412301805E-03,2.03826206150903E-03,5.29948135992347E-02,2.03826206150903E-02,2.85356688611264E-02,3.87269791686715E-02,1.83443585535812E-02,3.05739309226354E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,4.06704473574453E-03,,,0.030502835518084,8.33744170827628E-02,1.62681789429781E-02,1.62681789429781E-02,1.83017013108504E-02,4.06704473574453E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,4.05766693135136E-03,0.056807337038919,2.23171681224325E-02,2.63748350537838E-02,8.11533386270271E-03,8.11533386270271E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,1.61935589712698E-02,1.61935589712698E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,0.014105466976364,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6.03172864662474E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,3.93652918053998E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,1.95645299200927E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,7.75050212040696E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,1.93398562085494E-02,5.80195686256481E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,4.43988958422274E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,9.54818937423838E-03,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +1.14182140267032E-02,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, +``` + +### Container.svg {#container-svg} + +- GeoJsonを表示する主題レイヤと、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。 +- [チュートリアル6](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%AB6#Container.svg)同様にクリッカブルなレイヤーを指定しています。 + - 後述のように、メッシュデータをベクトルデータとして可視化し対話性を実現するため、class属性でclickableを指定しています。 + +```svg + + + + + + + + + + +``` + +### ArrayMesh.svg {#array-mesh-svg} + +- ドキュメントルート要素(svg要素)の、data-controller属性で、この[レイヤーを操作するwebApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI)を指定しています。 + - ```data-controller="ArrayMesh.html#exec=appearOnLayerLoad``` + - The ```exec=appearOnLayerLoad``` レイヤが表示状態になるとwebAppのウィンドが出現する設定です。([詳しくはこちら](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0)) + +```svg + + + + + +``` + +### ArrayMesh.html, ArrayMesh.js {#array-mesh} + +メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化します。 + +- ```addEventListener(“load”, async function(){..``` : webAppロード後 fetchAPIでメッシュデータを読み込み + - メッシュデータは１行ごとに切り分けられた文字列として、csvLines[]に格納 +- ```getCsvProps(headerLine)```: ヘッダ行を読み込み +- ```getRange()```: （ヒートマップの色分けのための）可視化値の最大最小値を算出 +- ```drawMesh()```: メッシュデータを１行ずつ読み込み、さらにカラムで分割し、メッシュデータを一個づつ可視化している + - ```setMesh(...)```: 一個一個のメッシュを可視化している関数 + - ```xd, yd```: メッシュの地理座標値(xd:経度, yd:緯度)を算出している + - y座標に注意：SVGコンテンツの座標と地理的な座標(緯度の座標軸)の向きが逆。そのため北（緯度の値が大きい側）がSVG座標での原点（SVGのY座標の値が小さい側）になる。 + - ```cl = document.createElement(“rect”);```: rect要素としてメッシュを可視化 + - ```cl.setAttribute - x,y,width,height```: 地理座標値をSVGコンテンツの座標値に変換し、SVGのrect要素に設定 + - ArrayMesh.svgの、 ```globalCoordinateSystem``` 要素で、指定した変換係数(100,0,0,-100,0,0)を前提に決め打ちしている + - ```getColor(val, minVal, maxVal)```: 可視化する値を色コードに変換 + - ```HSVtoRGB(h, s, v)```: HSV値をRGB値(SVGなどで設定できる色情報)に変換する関数。 + - このチュートリアルでは、 [HSV(Hue(色相), Satulation(彩度), Value(明度))色空間](https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93) の色相(H値)に、値を関連付けて、 [ヒートマップ](https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97) 的な可視化を行っています。(S,Vは最大値に設定（一番くっきりした色）) + - ```svgMap.refreshScreen()``` 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、 [再描画](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#refreshScreen)を明示する必要があります。 + - [参考情報](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```html + + + +CSV Mesh Data Visualizer Controller + + + + + + +

Mesh Data Controller

+ +
+
+ min + + max + + +
+ + + +
+ +
+ min + + mid + + max +
+ + +``` + +```js +var csvPath = "mesh.csv"; + +var csvLines, csvProps; + +addEventListener("load",async function(){ + csvLines = await getText(csvPath); + csvLines = csvLines.split("\n"); + csvProps=getCsvProps(csvLines[0]); + vminI.value=csvProps.minVal; + vmaxI.value=csvProps.maxVal; + getRange(); + drawMesh(csvLines, csvProps); +}); + +function drawMesh(csvLines, csvProps, minVal, maxVal){ + if (!minVal){ + minVal = csvProps.minVal; + } + if (!maxVal){ + maxVal = csvProps.maxVal; + } + for ( var i = 1 ; i < csvProps.partY + 1 ; i++ ){ + var strTxt = csvLines[i].split(","); + for ( var j = 0 ; j < csvProps.partX ; j++ ){ + if ( strTxt[j].replace(/\s+/g, "") !=""){ + var val = Number(strTxt[j]); + setMesh( j , i-1 , val, csvProps, minVal, maxVal ); + } + } + } + svgMap.refreshScreen(); +} + +function setMesh( xp , yp , value, csvProps, minVal, maxVal ){ +// console.log("call getMesh:"); + var color = getColor(value, minVal, maxVal); + var cl = svgImage.getElementById(xp+":"+yp); + if ( cl ){ + cl.setAttribute("fill" , color); + } else { + var xd = csvProps.minX + xp * csvProps.twd; // rectの西 + var yd = csvProps.maxY - yp * csvProps.thd; // rectの北 + + cl = document.createElement("rect"); // Should be used NS ( for Firefox!!) + cl.setAttribute("x" , 100 * xd ); + cl.setAttribute("y" , -100 * yd ); + cl.setAttribute("width" , 100 * csvProps.twd ); + cl.setAttribute("height" , 100 * csvProps.thd ); + cl.setAttribute("content" , value); + cl.setAttribute("fill" , color); + cl.setAttribute("id", xp+":"+yp); + svgImage.getElementsByTagName("svg")[0].appendChild(cl); + } +} + +function getCsvProps(headerLine){ + var hp = getHeaderParams( headerLine ); + console.log("sc_param:",hp); + svgImage.documentElement.setAttribute("property", hp.valName); + + csvProps={ + minX: Number(hp.minX), + maxX: Number(hp.maxX), + minY: Number(hp.minY), + maxY: Number(hp.maxY), + minVal: Number(hp.minVal), + maxVal: Number(hp.maxVal), + partX: Number(hp.partX), + partY: Number(hp.partY), + } + + csvProps.twd = ( csvProps.maxX - csvProps.minX ) / csvProps.partX; + csvProps.thd = ( csvProps.maxY - csvProps.minY ) / csvProps.partY; + + return ( csvProps ); + updateTile(); +} + +function getHeaderParams( hash ){ + hash = hash.split(","); + for ( var i = 0 ; i < hash.length ; i++ ){ + hash[i] = hash[i].split(":"); + if ( hash[i][1] ){ + hash[hash[i][0]] = hash[i][1]; + } else { + hash[hash[i][0]] = true; + } + } + return ( hash ); +} + +async function getText(path){ + var response = await fetch(path); + var txt = await response.text(); + return ( txt ); +} + +function getColor( val, minVal, maxVal ){ + + // value clip + if ( val > maxVal ){ + val = maxVal; + } + if ( val < minVal ){ + val = minVal; + } + + // Hue値の算出(最大値:H=0(赤) , 最小値:H=270(青紫) 逆周り) + var h = 270 - 270 * (val - minVal) / (maxVal - minVal); + + var ans = HSVtoRGB (h, 255, 255); + + return ("#"+ pad16(ans.r) + pad16(ans.g) + pad16(ans.b)); +} + +function pad16( val ){ + var bv = "00" + val.toString(16); + bv = bv.substr(bv.length - 2, 2); + return ( bv ); +} + +function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341 + var r, g, b; // 0..255 + while (h < 0) { + h += 360; + } + h = h % 360; + + // 特別な場合 saturation = 0 + if (s == 0) { + // → RGB は V に等しい + v = Math.round(v); + return {'r': v, 'g': v, 'b': v}; + } + s = s / 255; + + var i = Math.floor(h / 60) % 6, + f = (h / 60) - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i) { + case 0 : + r = v; g = t; b = p; break; + case 1 : + r = q; g = v; b = p; break; + case 2 : + r = p; g = v; b = t; break; + case 3 : + r = p; g = q; b = v; break; + case 4 : + r = t; g = p; b = v; break; + case 5 : + r = v; g = p; b = q; break; + } + return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)}; +} + + +function getRange(){ + if ( isNaN(vminI.value) || isNaN(vmaxI.value) ){return} + var minVal = Number(vminI.value); + var maxVal = Number(vmaxI.value); + if ( minVal > maxVal){[minVal, maxVal] = [maxVal, minVal]} + + document.getElementById("scalemin").innerHTML = minVal.toPrecision(5); + document.getElementById("scalemax").innerHTML = maxVal.toPrecision(5); + document.getElementById("scalemid").innerHTML = ((maxVal + minVal)/2.0).toPrecision(5); + return{minVal,maxVal} +} + +function setRange(){ + var range=getRange(); + drawMesh(csvLines, csvProps, range.minVal, range.maxVal); +} +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9/index.md new file mode 100644 index 0000000..20cce71 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9/index.md @@ -0,0 +1,584 @@ +--- +sidebar_position: 9 +--- + +# チュートリアル9 WebApp Layer メッシュタイル (タイル分割されたメッシュデータ) + +## はじめに {#introduction} + +webAppで非同期読み込みにより、タイル分割されたメッシュデータを表示するチュートリアルです。読み込むメッシュデータは地域基準メッシュをベースとした [Gridded XYZ](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%AB8#Gridded_XYZ)データとし、小縮尺データおよび大縮尺データを用意して簡単なタイルピラミッドを構成し、[Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))を実装しています。 + +可視化に用いるサンプルデータは統計局が公開する[3次メッシュの自治体コード](https://www.stat.go.jp/data/mesh/m_itiran.html)データです。 + +実際の動作は、 [mesh2.html](https://svgmap.org/examples/tutorials/mesh2/mesh2.html) をクリック。 + +### ソースコード {#source-code} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/mesh2/) +- このチュートリアルで扱うメッシュデータの形式 +- Container.svg: クリッカブルなレイヤーを指定 +- meshTileViewer.svg: webAppが紐付けられたレイヤー、webAppsは隠れた状態で起動 +- meshTileViewer.html: +- meshTileViewer.js: メッシュデータを読み込み、一個一個のメッシュをsvgのrect要素として可視化。 + +## チュートリアル {#tutorial} + +イル分割されたメッシュデータを表示するチュートリアルです。読み込むメッシュデータは[チュートリアル8](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%AB8)と異なり、 [Gridded XYZ](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%AB8#Gridded_XYZ)タイプのデータを扱ってみます。 + +また、[チュートリアル8](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%AB8)よりも大きいデータ（メッシュ数が多い、細かい）を扱います。そのためタイリングに加えて簡単なタイルピラミッドを構築し、小縮尺と大縮尺で表示するデータを変化させる機能([Level of Detail](https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics))) も実装します。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/mesh2/mesh2.html)をクリック。 +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/mesh2.zip) + +## 表示するデータ {#data-to-display} + +### 使用するグリッド化ルール {#grid-rules-to-use} + +- [地域基準メッシュ](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5) をグリッド化のルールとしたデータを使用します。 + +### データの内容 {#data-contents} + +- [統計局の市区町村別メッシュ・コード一覧](https://www.stat.go.jp/data/mesh/m_itiran.html)で公開されているデータを使います +- 各メッシュがどの自治体に属しているのかを可視化することにします +- 小縮尺では２次メッシュ（約10Km四方のメッシュ）で県レベル、　大縮尺では３次メッシュ（約1Km四方）で市区町村レベルの可視化をしてみます。 + +## データの準備 {#data-preparation} + +### 元データの準備 {#preparing-the-original-data} + +- [こちらのWebApp](https://www.svgmap.org/examples/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html)でデータを取得します。 +- このwebAppは[統計局の市区町村別メッシュ・コード一覧](https://www.stat.go.jp/data/mesh/m_itiran.html) からすべてのCSVを自動的に取得し、指定したメッシュレベルのCSVデータが保存できます。（すべてブラウザ上で実行） +- 操作方法 + - [japanMesh_r3.html](https://www.svgmap.org/examples/lvl0.1/etcLayers/meshCoder/japanMesh_r3.html)にアクセス + - CSVデータの収集が完了するまでしばらく待ちます。 + - ```市区町村``` を選択 + - ```３次メッシュ``` を選択 + - ```集計実行``` を押す + - CSVをダウンロード　を選択するとCSVが保存できる (```mesh.csv```で保存) + +### タイルピラミッドの構築 {#construction-of-a-tile-pyramid} + +本チュートリアルはバックエンドにDBや動的なwebサービスを配置しない、[Jamstack](https://en.wikipedia.org/wiki/Jamstack)な構成とします。 + +取得した元データから静的なタイルぴピラミッドデータ（CSVファイル群）を生成します。生成のためのツールは[こちらに用意したmesh2tileBasic.py](https://svgmap.org/examples/tutorials/mesh2/mesh2tileBasic.py)を使います。 + +- [mesh2tileBasic.py](https://svgmap.org/examples/tutorials/mesh2/mesh2tileBasic.py)をローカルPCに保存 +- 作業ディレクトリに```tiles``` ディレクトリを用意 +- ```python mesh2tileBasic.py mesh.csv```　で実行(mesh.csvはDLした元データのファイルパス) +- ```tiles``` ディレクトリにタイル分割されたメッシュデータが保存されています。 + +### タイルピラミッドデータの説明 {#explination-of-tile-pyramid-data} + +#### [top.csv](https://www.svgmap.org/examples/tutorials/mesh2/meshTiles/top.csv) + +小縮尺用のデータ（タイルピラミッドの頂点のデータ） + +- １行目：空白行 +- ２行目以降： + - １桁目：自治体コード（県コード　数字２文字） + - ２桁目以降：２次メッシュコード　可変長 +- 実際のデータの抜粋 + +``` +01,634150,654560,664632,634260,... +02,604070,614010,614033,604054,... +03,594116,594163,594110,604115,... +... +... +``` + +#### [４桁の数字].csv　例: [5339.csv](https://www.svgmap.org/examples/tutorials/mesh2/meshTiles/5339.csv) + +大縮尺用のタイル分割されたデータ（１次メッシュ単位で分割しています） + +- ファイル名の[４桁の数字]：１次メッシュコード +- １行目：１次メッシュコード +- ２行目以降： + - １桁目：自治体コード（市区町村コード　数字５文字） + - ２桁目以降：３次メッシュコードの下４文字　可変長 + - １行目の１次メッシュコードを先頭に付与することで３次メッシュコードが得られる(簡易的なデータ圧縮) + - top.csvの1行目が空白行なのは同じルールで処理できるようにするためです +- 実データの抜粋 + +``` +5339 +08211,7763,7764,7766,7767,7773,7774,... +08217,6799,7709 +08224,6798,6799,7707,7708,7709,7716,... +... +... +``` + +#### Note + +- 上記２種類のファイルが[Gridded XYZ](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%AB8#Gridded_XYZ)データに相当します。XYデータが一見ないように見えますが、メッシュコードはグリッド化されたXY座標を符号化した情報であるためです。 +- また、本来のもっとも一般的なGridded XYZデータは、１行に１個ずつのXYZデータがあります。　一方、今回のデータは１行に　 Z,XY1,XY2,XY3.....XYn　という形で、共通のZ値を持った複数のXY値を１行に可変長で符号化した少し変則的なデータになっています。（データサイズが小さくなるため） + +#### code_name.csv + +- [チュートリアル9b](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%AB9b)のためのデータ。市区町村コードと自治体名称との間の辞書データです。 +- １桁目：市区町村コード（数字５文字） + - 県の自治体コードは先頭２文字を取ることで得られる +- ２桁目：国名 +- ３桁目：県名 +- ２桁目：市区町村名 +- 実データの抜粋 + +``` +01101,日本,北海道,札幌市中央区 +01102,日本,北海道,札幌市北区 +01103,日本,北海道,札幌市東区 +... +... +``` + +### Container.svg {#container-svg} + +- メッシュデータを表示する主題レイヤと、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。 +- [チュートリアル6](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%AB6#Container.svg)同様にクリッカブルなレイヤーを指定しています。 + - 後述のように、メッシュデータをベクトルデータとして可視化し対話性を実現するため、class属性でclickableを指定しています。 + +```svg + + + + + + + + + + +``` + +### meshTileViewer.svg {#mesh-tile-viewer-svg} + +- ドキュメントルート要素(svg要素)の、data-controller属性で、この [レイヤーを操作するwebApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI)を指定しています。 + - ```data-controller="meshTileViewer.html#exec=hiddenOnLayerLoad``` + - ```exec=hiddenOnLayerLoad``` は、レイヤが表示状態になるとwebAppのウィンドが隠れた状態で動作する設定です。 ([詳しくはこちら](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0)) +- ここにはデータは何もない空のコンテンツ、先述のレイヤーを操作するwebAppがこのSVGコンテンツのDOMを動的に操作して可視化が行われます。 + +```svg + + + + + +``` + +### meshTileViewer.html, meshTileViewer.js {#mesh-tile-viewer} + +タイルピラミッドとして分割・階層化されたメッシュデータを縮尺と表示領域に応じて読み込み、上記SVGコンテンツのDOMを操作して一個一個のメッシュをsvgのrect要素として可視化します。 + +- onload + - ```document.addEventListener("zoomPanMap", updateLayer,false);``` SVGMap.jsが伸縮スクロール時に発行する}イベントに対するハンドラを設定（伸縮スクロールに応じて表示内容を変化させるため） + - ```updateLayer();``` ロード直後には上記のハンドラを直接動作させ初期表示状態をつくる +- ```updateLayer()``` 縮尺と領域に応じてデータDL・地図を描画 + - ```svgMap.getGeoViewBox();``` SVGMap.jsのAPI 表示している領域を地理座標で得る + - ```svgImageProps.scale``` SVGMap.jsのAPI このWebAppが紐付いているSVGMapコンテンツの、現在の表示スケール + - ```getTileURLs()``` 大縮尺表示のケースで表示するべきタイルのファイル名をリストアップする関数（表示している領域をもとに） + - ```maintainImages``` 伸縮スクロールの１ステップ前に表示していたコンテンツ(SVGの図形要素)のうち、今ステップでもそのまま維持しておくタイルのファイル名をリストした連想配列。 + - タイル単位でグループ(svgのg要素)となっており、タイル単位での管理を行っている。 + - 同g要素のdata-src属性に、該当するタイルのファイル名が設定されており、これで判別している +- ```showTileMap()``` 新たにデータを読み込んで表示すべきタイル1個のデータを構築し、描画ルーチンに渡す（非同期） + - ```meshData```: 一時的にメッシュデータ構築する変数(構造化された連想配列) + - meshData[メッシュコード][0..n]:自治体コード (一つのメッシュに福栖の自治体が含まれることがあることに注意) +- ```buildMeshTileSvg()``` + - ```svgImage``` このwebAppに紐付られたSVGコンテンツ(meshTileViewer.svg)のDOMのオブジェクト + - svgの```g``` 要素でタイルコンテンツのメッシュデータをグループ化 + - svgの```rect``` 要素で各メッシュデータを可視化 + - ```data-src```属性に、そのタイルコンテンツのソースファイル名を設定（次ステップでの再利用判別用） + - ```getHue()``` 適当なハッシュ関数を使い、自治体コードに適当な色（色相 H値）を割り当てる関数 + - ```HSVtoRGB()```HSV値(S,Vは最大値固定)からRGB値を算出する関数 + - ```blendColor()``` 加色混合関数（一つのメッシュに複数の自治体（の色）が割り付けられることがあるため色混合する） + - ```svgMap.refreshScreen()``` DOM生成が完了したら描画を指示する + - タイルが１個読まれる毎に再描画が起きることになります（プログレッシブに表示） + - [参考](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +```html + + + +Tiled UTM Grid Data visualizer + + + + +

地域基準メッシュデータを表示します

+ + +``` + +```js +var meshCsvHd = "meshTiles/"; +var topCsv = meshCsvHd+"top.csv"; + +var tileThScale = 8; + +onload=function(){ + document.addEventListener("zoomPanMap", updateLayer,false); + updateLayer(); +} + +function updateLayer(){ + // 縮尺と領域に応じてデータDL・地図を描画する。 + + var tileURLs; + var geoViewBox = svgMap.getGeoViewBox(); + + // 表示すべきタイルを縮尺と領域に基づいてリストアップする + if ( svgImageProps.scale > tileThScale ){ + // 大縮尺の分割タイルデータを表示する + tileURLs= getTileURLs(geoViewBox); + } else { + // 小縮尺のtopCsvデータを表示する + tileURLs=[topCsv]; + } + + var maintainImages={}; // 保持すべきタイルを保持する配列 + var prevImages=svgImage.getElementsByTagName("g"); // 1ステップ前までに描画完了しているタイルたち + for ( var i = prevImages.length-1 ; i >=0 ; i-- ){ // 1ステップ前のコンテンツで維持すべきものと消すべきものを選別する + var dataSrc = prevImages[i].getAttribute("data-src"); + if ( tileURLs.indexOf(dataSrc)>=0 ){ // 読むべきコンテンツで1ステップ前にあるものは維持 + maintainImages[dataSrc]=true; + } else { // それ以外は消去 + prevImages[i].remove(); + } + } + + // 読み込むべきタイルで1ステップ前に読み込まれていないタイルを読み込ませる + for ( var i = 0 ; i < tileURLs.length ; i++ ){ + var durl = tileURLs[i]; + if ( maintainImages[durl] ){ + // skip loading + } else { + showTileMap( durl ); + } + } +} + +function getTileURLs(geoViewBox){ + // 表示領域の中にあるメッシュ調べ、そのファイルをリストアップ + var tileURLs= getMeshArray(geoViewBox, 1); + for ( var i = 0 ; i < tileURLs.length ; i++ ){ + tileURLs[i]=meshCsvHd + tileURLs[i] + ".csv"; + } + return (tileURLs); +} + +async function showTileMap(url){ + // タイルデータを読み込んでパースし、画像生成ルーチンに渡す + var txtData = await loadText(url); + + var rowData = txtData.split(/[\r\n]+/); + // 1行目はタイルのメッシュ番号 + var meshData ={}; // メッシュ番号をKeyとした連想配列としてメッシュデータを構築　Valは自治体コードの配列(複数の自治体に属するものがあるため配列) + for ( var i = 1 ; i < rowData.length ; i++ ){ + var colData = rowData[i].split(","); + // 1カラム目は自治体コード、2カラム目からがメッシュ番号の断片（タイルのメッシュ番号を加えてメッシュ番号になる） + for ( var j = 1 ; j 3){ + m1Lat = Number(meshStr.substring(0,2)); + m1Lng = Number(meshStr.substring(2,4)); + latitude = m1Lat / 1.5; + longitude = 100 + m1Lng; + latSpan = m1LatSpan; + lngSpan = m1LngSpan; + if ( !latitude || !longitude ){ + return { + latitude : null, + longitude : null + } + } + if ( meshStr.length > 5 ){ + m2Lat = Number(meshStr.substring(4,5)); + m2Lng = Number(meshStr.substring(5,6)); + latitude += m2Lat * m2LatSpan; + longitude += m2Lng * m2LngSpan; + latSpan = m2LatSpan; + lngSpan = m2LngSpan; + if ( meshStr.length > 7 ){ + m3Lat = Number(meshStr.substring(6,7)); + m3Lng = Number(meshStr.substring(7,8)); + latitude += m3Lat * m3LatSpan; + longitude += m3Lng * m3LngSpan; + latSpan = m3LatSpan; + lngSpan = m3LngSpan; + if ( meshStr.length == 9 ){ + m4 = meshStr.substring(8); + switch(m4){ + case "1": + // do nothing + break; + case "2": + longitude += m4LngSpan; + break; + case "3": + latitude += m4LatSpan; + break; + case "4": + latitude += m4LatSpan; + longitude += m4LngSpan; + break; + } + latSpan = m4LatSpan; + lngSpan = m4LngSpan; + } + } + } + } + return { + latitude: latitude, + longitude: longitude, + latSpan : latSpan, + lngSpan : lngSpan + } +} + +function latLng2Mesh(lat,lng,meshLevel){ + lat = lat*1.5; + lng = lng - 100; + var m1Lat = Math.floor(lat); + var m1Lng = Math.floor(lng); + + if ( meshLevel==1){ + return ( m1Lat.toString() + m1Lng.toString() ); + } + + lat = lat - m1Lat; + lng = lng - m1Lng; + + lat = lat * 8; + lng = lng * 8; + + var m2Lat = Math.floor(lat); + var m2Lng = Math.floor(lng); + + if ( meshLevel==2){ + return ( m1Lat.toString() + m1Lng.toString() + m2Lat.toString() + m2Lng.toString() ); + } + + lat = lat - m2Lat; + lng = lng - m2Lng; + + lat = lat * 10; + lng = lng * 10; + + var m3Lat = Math.floor(lat); + var m3Lng = Math.floor(lng); + + if ( meshLevel==3){ + return ( m1Lat.toString() + m1Lng.toString() + m2Lat.toString() + m2Lng.toString() + m3Lat.toString() + m3Lng.toString() ); + } + + lat = lat - m3Lat; + lng = lng - m3Lng; + + lat = lat * 2; + lng = lng * 2; + + var m4Lat = Math.floor(lat); + var m4Lng = Math.floor(lng); + var m4Num = 1; + if ( m4Lat==1 ){ + m4Num += 2; + } + if ( m4Lng==1 ){ + m4Num += 1; + } + + if ( meshLevel==4){ + return ( m1Lat.toString() + m1Lng.toString() + m2Lat.toString() + m2Lng.toString() + m3Lat.toString() + m3Lng.toString() + m4Num.toString() ); + } + + return (null); +} + + + +function getMeshArray(geoBbox, meshLevel){ + var latStep, lngStep; + if ( meshLevel == 1 ){ + latStep = m1LatSpan; + lngStep = m1LngSpan; + } else if ( meshLevel == 2 ){ + latStep = m2LatSpan; + lngStep = m2LngSpan; + } else if ( meshLevel == 3 ){ + latStep = m3LatSpan; + lngStep = m3LngSpan; + } else if ( meshLevel == 4 ){ + latStep = m4LatSpan; + lngStep = m4LngSpan; + } else { + return ( null ); + } + + var ans = []; + for ( var mx = geoBbox.x ; mx < geoBbox.x + geoBbox.width + lngStep ; mx += lngStep){ + if ( mx > geoBbox.x + geoBbox.width ){ + mx = geoBbox.x + geoBbox.width; + } + // geoBbox(.x,.y,.wjdth,.height)を包含する最小のメッシュコードのリストを返す + for ( var my = geoBbox.y ; my < geoBbox.y + geoBbox.height + latStep ; my += latStep){ + if ( my > geoBbox.y + geoBbox.height ){ + my = geoBbox.y + geoBbox.height; + } +// console.log(mx,my); + ans[latLng2Mesh(my,mx,meshLevel)]=true; + } + } + + var ans2=[]; + for ( mesh in ans ){ + ans2.push(mesh); + } + + return ( ans2 ); +} + +// =================================================================================== + + +function getHue(str){ // 文字列からハッシュ関数(jenkinsOneAtATimeHash)を使って適当なHUE値(0..359)を得る + return(jenkinsOneAtATimeHash(str)%360); +} + +//https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript +//Credits (modified code): Bob Jenkins (http://www.burtleburtle.net/bob/hash/doobs.html) +//See also: https://en.wikipedia.org/wiki/Jenkins_hash_function +//Takes a string of any size and returns an avalanching hash string of 8 hex characters. +function jenkinsOneAtATimeHash(keyString){ + let hash = 0; + for (charIndex = 0; charIndex < keyString.length; ++charIndex){ + hash += keyString.charCodeAt(charIndex); + hash += hash << 10; + hash ^= hash >> 6; + } + hash += hash << 3; + hash ^= hash >> 11; + //4,294,967,295 is FFFFFFFF, the maximum 32 bit unsigned integer value, used here as a mask. + return (((hash + (hash << 15)) & 4294967295) >>> 0); +}; + +function HSVtoRGB (h, s, v) { // from http://d.hatena.ne.jp/ja9/20100903/1283504341 + var r, g, b; // 0..255 + while (h < 0) { + h += 360; + } + h = h % 360; + + // 特別な場合 saturation = 0 + if (s == 0) { + // → RGB は V に等しい + v = Math.round(v); + return {'r': v, 'g': v, 'b': v}; + } + s = s / 255; + + var i = Math.floor(h / 60) % 6, + f = (h / 60) - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i) { + case 0 : + r = v; g = t; b = p; break; + case 1 : + r = q; g = v; b = p; break; + case 2 : + r = p; g = v; b = t; break; + case 3 : + r = p; g = q; b = v; break; + case 4 : + r = t; g = p; b = v; break; + case 5 : + r = v; g = p; b = q; break; + } + return {'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)}; +} + +function getColorString(rgb){ + return ("#"+ pad16(rgb.r) + pad16(rgb.g) + pad16(rgb.b)); +} + +function pad16( val ){ + var bv = "00" + val.toString(16); + bv = bv.substr(bv.length - 2, 2); + return ( bv ); +} +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9b/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9b/index.md new file mode 100644 index 0000000..6253a30 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/2-webapp-layer-edition/tutorial-9b/index.md @@ -0,0 +1,111 @@ +--- +sidebar_position: 9.5 +--- + +# チュートリアル9b WebApp Layer メッシュタイル カスタムダイアログ + +## はじめに {#introduction} + +[チュートリアル9](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%AB9)の内容に加えて、メッシュをクリックしたときに出現するダイアログをカスタマイズしています。 + +実際の動作は、[mesh2b.html](https://svgmap.org/examples/tutorials/mesh2b/mesh2b.html)をクリック。 + +### ソースコード {#source-code} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/mesh2b/) +- meshTileViewerB.html: レイヤーに紐付けられたwebApp。チュートリアル９の内容に加え、オブジェクトをクリックしたときに起動するコールバック関数を設定し、ダイアログをカスタマイズしています。 + +## チュートリアル {#tutorial} + +[チュートリアル9](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%AB9)に加えて、メッシュ(の図形：rect要素)をクリックしたときに出現するダイアログをカスタマイズしてみます。 + +カスタマイズされたダイアログでは、メッシュのmetadaに記載されたメッシュコードをもとに自治体名称を検索して表示しています。 小縮尺では県名、大縮尺では市区町村名を表示します。 + +- 実際の動作は、[こちら](https://svgmap.org/devinfo/devkddi/tutorials/mesh2b/mesh2b.html)をクリック。 +- 使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/mesh2b.zip) + +異なるのはレイヤーに紐付いたwebAppです。 + +### [meshTileViewerB.html](https://svgmap.org/examples/tutorials/mesh2b/meshTileViewerB.html) , [meshTileViewerB.js](https://svgmap.org/examples/tutorials/mesh2b/meshTileViewerB.js) {#mesh-tile-viewr-b} + +[チュートリアル9](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%AB9#meshTileViewer.html) のWebApp、 [meshTileViewer.html](https://svgmap.org/examples/tutorials/mesh2/meshTileViewer.html)に対して追加されている部分を解説します。 + +市区町村コードをキーにした市区町村名の連想配列を作るためのデータを読み込んでいる点と、それを用いたカスタムダイアログを出現させるためのコールバック関数を設定している点が追加部分になります。 + + + +- onload=async function() + - [svgMap.setShowPoiProperty](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#setShowPoiProperty)( customShowPoiProperty, layerID); + - 紐付いたレイヤーのオブジェクトをヒットしたときに出現する処理に独自のコールバック関数(customShowPoiProperty)に指定する + - Custom ShowPoiProperty + - ヒットしたオブジェクトのcontent属性にある市区町村コードをKeyにしてlgDictionaryを辞書引き、自治体名を求める + - 一つのメッシュに複数の自治体が属しているケースがある点に注意 + - svgMap.showModal(html,400,180); 用意したhtmlをSVGMapフレームワークのモーダルダイアログに渡す +- async function loadLGdictionary()`{` // 自治体名辞書を作る + - lgDictionary={};//市区町村コードをKeyとした自治体名辞書 +- function buildMeshTileSvg(meshs, sourceID) + - rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" ")); + - meshs[meshNumb] 市区町村コード + +meshTileViewerB.js + +```js +... +... +var lgDictCsv = meshCsvHd + "code_name.csv"; + +onload=async function(){ + document.addEventListener("zoomPanMap", updateLayer,false); + svgMap.setShowPoiProperty( customShowPoiProperty, layerID); + await loadLGdictionary(); + //console.log("lgDictionary:",lgDictionary); + updateLayer(); +} + +... +... + +function buildMeshTileSvg(meshs, sourceID){ + var tileGroup = svgImage.createElement("g"); + tileGroup.setAttribute("data-src",sourceID); + + for (var meshNumb in meshes){ + ... + rect.setAttribute("content",meshNumb+","+meshs[meshNumb].join(" ")); + ... + } + ... +} + +async function loadLGdictionary(){ // Create a dictionary of local government names + var lgCsv = await loadText(lgDictCsv); + lgCsv = lgCsv.split(/[\r\n]+/); + for ( var line of lgCsv){ + if (line.length > 1) { + line = line.split(","); + lgDictionary[line[0]]=line[2]+" "+line[3]; + lgDictionary[line[0].substring(0,2)]=line[2]; // Let's also create a prefecture code dictionary at the same time. + } + } +} + +function customShowPoiProperty(target){ + var metaSchema = null; + // metaSchema = target.ownerDocument.firstChild.getAttribute("property").split(","); // debug 2013.8.27 + console.log("POI target:",target); + var content = (target.getAttribute("content")).split(","); + + var meshCode=content[0]; + var lgCodes=content[1].split(" "); + var lgNames=[]; + for (var lgCode of lgCodes){ + lgNames.push(lgDictionary[lgCode]); + } + var html = "
  • Name of municipality:
    • "+lgNames.join("
    • ")+"
  • Mesh code:"+meshCode+"
"; + svgMap.showModal(html,400,180); + +} + +... +... +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/cross-origin-access/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/cross-origin-access/index.md new file mode 100644 index 0000000..9399475 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/cross-origin-access/index.md @@ -0,0 +1,119 @@ +# クロスオリジンアクセス + +外部のウェブサービスを結合する場合、外部サービスによってはクロスオリジンアクセスとなることを理解し対処する必要があります。 + +ビットイメージの地図レイヤーに図法変換が必要な場合や、XMLHttpRequestやfetchなどでwebappのあるサイトと異なるドメインにあるウェブサービス(webapi)にアクセスする場合、 [クロスオリジンアクセス](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)制限によるエラーが起きる場合があります。このエラーはWebApp側だけでは解決できず、サーバ側の設定を調整する必要があります。 + +## 概要 {#overview} + +SVGMapはハイパーレイヤリングアーキテクチャを持つため、 [ルートhtml文書](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) で構成されるクライアントのSVGMapフレームワークウェブアプリは、異なるオリジンのサーバにアクセスすることが基本的に必要になります。これは一般的に「 [クロスオリジンリソース共有](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS) (CORS)」と呼ばれる処理が行われる可能性があり、この時 [ウェブブラウザのネイティブな機能によるCORSのエラー](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors) が生じる可能性があることを意味します。 + +クロスオリジンアクセスのケースと、CORSのエラー発生の可能性を下表に示します。 + +**svgmapjsにおけるクロスオリジンアクセスによるエラー** +| クロスオリジンアクセスするコンテンツの種類 | コンテンツの処理 | CORSエラー発生の可能性 | +|---|---|---| +|ビットイメージ(タイルを含む)|重ね合わせ|発生しない| +|ビットイメージ(タイルを含む)|[非線形図法変換](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#.E9.9D.9E.E7.B7.9A.E5.BD.A2.E5.9B.B3.E6.B3.95.E5.A4.89.E6.8F.9B)を伴う重ね合わせ|発生する可能性あり| +|ビットイメージ(タイルを含む)|地理空間情報処理等|発生する可能性あり| +|ベクトルデータやjson等ビットイメージ以外のデータ|重ね合わせ|発生する可能性あり| +|ベクトルデータやjson等ビットイメージ以外のデータ|地理空間情報処理等|発生する可能性あり| +|全ての種類のコンテンツ・データ|[Cesium拡張を用いた3D表示](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#svgMapCesiumWrapper..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI)|発生する可能性あり| + +## エラーの確認方法 {#how-to-check-errors} + +ウェブブラウザでSVGMapのページを開き、開発ツールのコンソールもしくはネットワーク画面からエラーが確認できます。(blocked by CORS policyなどといったメッセージが出ます) + +## サーバ(サービス側での対処): CORSレスポンスヘッダを返すように設定する {#server} + +- Access-Control-Allow-Origin *(もしくは指定オリジン)のレスポンスヘッダを返すようにサーバを設定します。 + - [apacheの例](https://phaier.github.io/school/engineering/platform/server/apache/how-to/cors.html) + - [etc](https://enable-cors.org/server.html) +- 外部からのアクセスを想定し 整備されたサービスでは、この設定がされており（例：地理院地図やgitHubPagesのサイト） 下記プロキシの利用は不要です。 + +## プロキシサービスを用意し　これを経由させる {#prepare-proxy} + +- node.jsによる実装 + - [CORS Anywhere](https://github.com/Rob--W/cors-anywhere) ( [セットアップノート](https://www.svgmap.org/wiki/index.php?title=CORS_Anywhere_setup_notes) ) +- phpによる実装 + - [php-cross-domain-proxy](https://github.com/softius/php-cross-domain-proxy) (svgmap.orgの[fork](https://github.com/softius/php-cross-domain-proxy)) + - [単純なプロキシ実装例](https://www.svgmap.org/wiki/index.php?title=%E5%8D%98%E7%B4%94%E3%81%AA%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E5%AE%9F%E8%A3%85%E4%BE%8B) + +#### プロキシ経由のクロスオリジンアクセスを容易にするためのSVGMap.jsの支援機能 + +プロキシ経由のクロスオリジンアクセスの対応を容易にするためのいくつかの機能がSVGMap.jsに備わっています。 + +SVGMap.jsがクロスオリジンアクセスを必要とするケースは主に3つあります。 + +1. ビットイメージ(含タイル)データの図法変換 +2. ラスターGIS +3. webAppレイヤーでの独自の通信 + +(1) と (2) はSVGMap.jsの管理下でクロスオリジンアクセスを行う必要があるもので、SVGMap.jsの初期化時にクロスオリジンアクセスのための設定（クロスオリジンアクセスのためのプロキシの設定）を行うAPIが用意されています。 + +- [解説書#プロキシの設定](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.97.E3.83.AD.E3.82.AD.E3.82.B7.E3.81.AE.E8.A8.AD.E5.AE.9A) +- [解説書#setProxyURLFactory](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#setProxyURLFactory) +- [解説書#setImageProxy](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#setImageProxy) + +これらのAPIを用いた [初期化の例は次章](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#SVGMap.js.E3.81.AE.E5.88.9D.E6.9C.9F.E5.8C.96)で説明します。 + +**WebApp Layerにおけるクロスオリジンアクセス** + +一方、3.は各レイヤーのwebApp ( [webApp Layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) ) が、レイヤーのコンテンツを生成するためのデータ(例えばjson形式の独自データ)を取得するときに(fetchやXMLHttpRequest等を使い)クロスオリジンアクセスするケースで、厳密にはSVGMap.jsが関与しない処理です。このようなクロスオリジンアクセスに対するケアは、基本的に個々のレイヤーwebAppの開発者が行う必要があります。 + +しかしプロキシ経由のアクセスを行う場合、先の1.2.のケース用に使用するプロキシを全レイヤー共通のプロキシとしても利用する場合が考えられ、この時にはSVGMap.jsの初期化で設定したプロキシを共通の関数で呼び出せる関数が用意されています。 + +- [解説書#getCORSURL](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getCORSURL) + +getCORSURLの使用法は [後の章で紹介](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#webApp.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A7.E3.81.AE.E3.82.AF.E3.83.AD.E3.82.B9.E3.82.AA.E3.83.AA.E3.82.B8.E3.83.B3.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9)します。 + +#### SVGMap.jsの初期化 + +- 先述の機能を用いて、容易にクロスオリジンアクセスを可能にするための[ルートHTML文書](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) の初期化手順を紹介します。corsProxy.jsは次章参照 + - ルートHTML文書の完全な実装例 : [GitHub](https://github.com/svgmap/svgMapDemo/blob/main/index.html) + +```html + + +... + +... + +``` + +**corsProxyMoule.js** + +初期化を容易に行うためのライブラリをご紹介します。 [gitHub](https://github.com/svgmap/svgmapjs/blob/main/CorsProxyModule.js) +- 初期化を容易に行うためのライブラリをご紹介します。 + - pxUrl : プロキシのURL + - directURLls : [プロキシを使用しないURLのリスト] + - useAnonProxy : anonymous属性を付与するかどうか + - requireEncoding : プロキシサービスに渡すURLをURLエンコードするかどうか +- corsProxy.getURLfunction : プロキシ経由のURLを得るための関数を得る + +#### webAppレイヤーでのクロスオリジンアクセス + +[クロスオリジンアクセスのためのSVGMap.jsの初期化](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9#SVGMap.js.E3.81.AE.E5.88.9D.E6.9C.9F.E5.8C.96) がなされた状態の [ルートHTML文書(SVGMapページ)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) に登録されている各レイヤーのwebAppsでは、 [getCORSURL API](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getCORSURL)を使用することができます。 + +このAPIは、アクセスしたいサービスのURLに対して、共通で準備されたクロスオリジンアクセス用サーバを経由したアクセスを可能にするURLが得られる機能で、たとえば以下のように利用します。 + +```var dataResponse = await fetch( svgMap.getCORSURL( serviceURL ) );``` + +一方、もしクロスオリジンアクセスの初期化をしていない[ルートHTML文書(SVGMapページ)](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF.E3.81.AE.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.97) では、各レイヤーのwebAppsが独自にクロスオリジンアクセスの解決を行う必要があります。例えば、クロスオリジンアクセス用のプロキシとして ```https://[myproxy.mydomain.com]/proxy/``` というプロキシが用意されており、 ```?targetURL=serviceURL``` というクエリパラメータでアクセス先のサービスにアクセスする場合は、以下のようになるでしょう。 +```var dataResponse = await fetch( "https://[myproxy.mydomain.com]/proxy/?targetURL=" + serviceURL );``` + +#### 非線形図法変換 + +メルカトル図法と正距円筒図法の間の図法変換など、１次アフィン変換(matrix(a,b,c,d,e,f))では変換できない座標変換を伴うもの \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/index.md new file mode 100644 index 0000000..41b2f9c --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/index.md @@ -0,0 +1,7 @@ +# Part 3: ウェブサービス結合編 + +SVGMap.jsは[高度で柔軟なタイリング機構](https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html) により [Jamstackのパターン](https://en.wikipedia.org/wiki/Jamstack)を幅広く活用できるため、サーバのオーバヘッドが大きい動的なウェブサービスが必要なケースを従来のフレームワークと比べて大幅に減らすことができます。（参考:[SVGMapToolsを使ったチュートリアル](https://github.com/svgmap/svgMapTools/tree/master/tutorials)、[Quad Tree Composite Tiling and the standardization of tiling](https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html)) + +それでも動的なサービスの結合が必要なことは多くあるため、ここではその方法を既存の公開ウェブサービスを利用したwebAppレイヤーとして実装してみます。（依ってこのチュートリアルでは動的なサービスの利用に留まり、動的なサービス側を構築することには踏み込みません。[GeoServer](https://ja.wikipedia.org/wiki/GeoServer) , [MapServer](https://ja.wikipedia.org/wiki/MapServer) , [PostgREST + PostGIS](https://gis-ops.com/postgrest-postgis-api-tutorial-geospatial-api-in-5-minutes/)等はその実装に利用できるでしょう。SVGMap.orgでも[redisSvgMap.](https://github.com/svgmap/redisSvgMap)という 高性能な動的サービスを構築するためのコードを公開しています。） + +サービスを個々のレイヤーとして接続すること、そして個々のレイヤーはカプセル化されたアプリケーション( [Layers as WebApps](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0))として構成される（疎結合である）ことから、このパターンは地図に適用した[マイクロフロントエンド](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9), specifically a [microfrontend](https://en.wikipedia.org/wiki/Micro_frontend) (もしくは[コンポジットUI](https://learn.microsoft.com/ja-jp/dotnet/architecture/microservices/architect-microservice-container-applications/microservice-based-composite-ui-shape-layout))タイプの[マイクロサービス](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9)の一種といえるでしょう diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-12/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-12/index.md new file mode 100644 index 0000000..e9af769 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-12/index.md @@ -0,0 +1,114 @@ +# チュートリアル12 WMSの利用 + +## はじめに {#introduction} + +指定したパラーメータに従ってビットイメージの地図データを出力するウェブサービス仕様 [Web Map Service (WMS)](https://ja.wikipedia.org/wiki/Web_Map_Service) のサービスをSVGMapのレイヤーとして表示させてみます。 + +[GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/) ( [海底を含む全球地形図](https://ja.wikipedia.org/wiki/%E5%A4%A7%E6%B4%8B%E6%B0%B4%E6%B7%B1%E7%B7%8F%E5%9B%B3) )を使ってみます。 + +まずは伸縮スクロールとは関係なく、地図コンテンツを単に表示させてみます。これは [チュートリアル4](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%AB4)と行っていることは基本的に同じです。WMSのスペックに従ってURLのクエリパートを設定するだけです。 + +- 実際の動作は、 [wms1.html](https://svgmap.org/examples/tutorials/wms1/wms1.html) をクリック。 + - Note: WMSが地図を生成配信するまでに少々時間がかかります） + +## ソースコードディレクトリ {#source-code-directory} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/wms1/) +- WMSのパラメータとSVGMapコンテンツのビットイメージ配置のパラメータの関係を理解します +- image要素によって、WMSから取得したデータを配置します + +## チュートリアル {#tutorial} + +指定した領域の地図データを動的に生成する仕様 [WMS(Web Map Service)](https://en.wikipedia.org/wiki/Web_Map_Service)に基づいて地図データを配信する [GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/) と接続し、地図データを表示する最も基本的な方法を説明します。 + +クライアント側では特にjavascript等による動的なコードの実装なしに、単に静的なビットイメージを表示するだけのものです。したがって[チュートリアル4](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%AB4)との違いはほぼありません。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/wms1/wms1.html) をクリック。 +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/wms1.zip) + +### [wms1.html](https://svgmap.org/examples/tutorials/wms1/wms1.html) {#wms1-html} + +これまでと特に変わったところはありません。 + +### [Container.svg](https://svgmap.org/examples/tutorials/wms1/Container.svg) {#container-svg} + +これまでと特に変わったところはありません。 + +### [wms_static.svg](https://svgmap.org/examples/tutorials/wms1/wms_static.svg) {#wms-static-svg} + +image要素を使って、ビットイメージをSVGMapコンテンツに配置しているのは[チュートリアル4](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%AB4)と同じです。 + +[チュートリアル4](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%AB4)では画像の領域情報とimage要素のパラメータの関係の説明が簡素でしたが、こちらではWMSのクエリパラメータとの関係を合わせ詳細に説明します。 + +#### WMSのクエリパラメータ + +WMSの詳細は [仕様書を参照](https://www.ogc.org/standards/wms) してください。ここでは要点を述べます。 + +- 決め打ちパラメータ　以下は地図のビットイメージを取得する際に基本的に常時変わらないパラメータです。 + - ```request=GetMap``` + - ```service=WMS``` + - ```version=1.1.1``` + - ```format=image/png``` データ形式はPNGが概ね常時適します。（ロスレス・透明ピクセル（データの無い場所など）） +- ```layers=GEBCO_LATEST``` GEBCO WMSにどのようなレイヤーがあるかは、 [GEBCOのgetcapabilities](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?request=getcapabilities&service=wms&version=1.1.1)で確認できます。 +- ```srs=EPSG:4326``` 空間参照系(地理座標系と図法を一体にした概念)を[EPSG:4326](https://spatialreference.org/ref/epsg/wgs-84/)(WGS84座標系)に指定しています。 + - WGS84座標系（X:経度,Y:緯度の世界測地系）のデータを、その座標系にリニアな平面(すなわち[正距円筒図法](https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%B7%9D%E5%86%86%E7%AD%92%E5%9B%B3%E6%B3%95))に図化します。 +- ```bbox=120,20,150,50``` 上で指定した座標系(経度緯度座標)で図化する領域を指定 + - X1, Y1, X2, Y2の並びで指定します。（対角２点の座標） 注：X,Y,Width,Heightではない + - 経度120°,緯度20°　と150°,50°の対角線領域のデータをリクエストしています。 +- ```width=600&height=600``` 図化するビットイメージのサイズ + - 600 x 600 pxのサイズのPNG画像をリクエストしています。 + - WMSではアスペクト比は維持されず、bboxで指定した領域が指定したサイズにきっちり収まるように出力されるアスペクト比を変化させたビットイメージが出力されます。 + +#### image要素のプロパティ + +SVGのimage要素でWMSで取得したビットイメージを配置します。 + +globalCoordinateSystem要素の記述 + +`````` + +から、SVG座標(Xsvg, Ysvg)と地理座標(WGS84系:Xgeo(経度), Ygeo(緯度))との関係式は以下であることがわかります。 + +``` +Xsvg = 1 * Xgeo + 0 * Ygeo + 0 ⇒ Xsvg = Xgeo +Ysvg = 0 * Xgeo - 1 * Ygeo + 0 ⇒ Ysvg = -Ygeo +``` + +要注意はY軸です。軸が反転していること（コンピュータグラフィックスのY軸は下向きなのに対して、通常のY軸は上向き）です。 これに伴ってグラフィックスをSVGの座標に配置するときに、原点の位置も反対側になります。（地理座標上では南端が原点ですが、SVGの座標では北端が原点） + +以上に留意して、image要素のプロパティを見ていきます。 + +- ```xlink:href="[WMSクエリパラメータが設定されたGEVBCO WMSのURL]"``` +- ```x="120"``` X軸の原点　＝　東端の経度（東端は120°） +- ```y="-50"``` Y軸の原点　＝　北端の緯度をマイナスにした値（北端は50°） +- ```width="30"``` X方向の幅 ＝　（西端-東端 = 150-120 = 30°） +- ```height="30"``` Y方向の高さ ＝　（北端-南端 = 50-20 = 30°） +- ```preserveAspectRatio="none"``` WMSのビットイメージ生成ポリシーに準じて、ビットイメージ配置時にアスペクトを維持しない。 +- ```opacity="0.5"``` 透明度を50%に設定して背景地図を少し見えるようにしている。 + +#### ソース + +```svg + + + + + +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-13/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-13/index.md new file mode 100644 index 0000000..b257343 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-13/index.md @@ -0,0 +1,128 @@ +# チュートリアル13 WebApp Layer WMS 伸縮スクロールに応じた表示 + +## はじめに {#introduction} + +[WebApp Layer機構](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0)を用いれば、ウェブサービスに接続し表示領域に応じた地図コンテンツを動的に表示することができます。チュートリアル12と同じ[GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/)を使ってみます。 + +- 実際の動作は、[wms2.html](https://svgmap.org/examples/tutorials/wms2/wms2.html) をクリック。 + - Note: WMSが地図を生成配信するまでに少々時間がかかります） + +## ソースコードディレクトリ {#source-code-directory} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/wms2/) +- 表示領域のパラメータを伸縮スクロールの度に取得します。 +- このパラメータを用いて、WMSへのクエリURLを構築します。 +- image要素によって、WMSから取得したデータを配置します +- 1ステップ前のimage要素は消去します。 + +## チュートリアル {#tutorial} + +[WMS (Web Map Service)](https://en.wikipedia.org/wiki/Web_Map_Service)を使って、表示している領域の地図を伸縮スクロールに応じて表示する機能を持つレイヤーを[WebApp Layer](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0)として実装します。WMSとしては[Tutorial 12](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%AB12) に引き続き [the GEBCO Web Service](https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/)を使用します。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/wms2/wms2.html) をクリック。 +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/wms2.zip) + +### [wms2.html](https://svgmap.org/examples/tutorials/wms2/wms2.html) {#wms2-html} + +これまでと特に変わったところはありません。 + +### [Container.svg](https://svgmap.org/examples/tutorials/wms2/Container.svg) {#container-svg} + +これまでと特に変わったところはありません。 + +### [wms_dynamic.svg](https://svgmap.org/examples/tutorials/wms2/wms_dynamic.svg) {#wms-dynamic-svg} + +- ```data-controller="wmsController.html"``` このレイヤーにWebApp("wmsController.html)を紐付けています + - WebAppではWMSのコンテンツを表示するためのDOM操作を伸縮スクロールのたびに行っています。 +- image要素はダミーです（xlink:href属性がないので表示されない） + +```svg + + + + + +``` + +### [wmsController.html](https://svgmap.org/examples/tutorials/wms2/wmsController.html), [wmsController.js](https://svgmap.org/examples/tutorials/wms2/wmsController.js) {#wms-controller} + +- ```onload``` webApp読み込み直後に呼ばれる関数 + - ```svgMap.refreshScreen()``` webAppが読み込まれた直後に地図の```[[[解説書#refreshScreen|再描画を明示]]```し、 ```preRenderFunction```が実行されるようにします。 +- ```preRenderFunction``` [再描画に際して実行されるコールバック関数](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#preRenderFunction)です。伸縮スクロール時も再描画されるため呼び出されます。 + - ```prevImageElement.remove()``` １ステップ前（伸縮スクロールが起きる直前）のWMSからの画像を消去 + - ```svgMap.getGeoViewBox()``` [ 表示領域を地理座標で取得](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#getGeoViewBox) + - ```getScreenSize()``` 地図表示画面のサイズを取得 + - ```getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize)``` + - 表示領域、スクリーンサイズなどのパラメータをもとにGEBCO WMSへのリクエストURLを生成する関数 + - クエリパラメータの設定内容については、 [チュートリアル12のWMSに関する説明](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%AB12#WMS.E3.81.AE.E3.82.AF.E3.82.A8.E3.83.AA.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF)を参照 + - ```getSvgImage(req, geoViewBox)``` 上で生成したWMSへのリクエストURIと、その地図データの領域情報をもとに、image要素を生成する関数 + - プロパティの設定内容については、 [チュートリアル12のimage要素の説明](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%AB12#image.E8.A6.81.E7.B4.A0.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3)を参照 + - ```svgImage.documentElement.appendChild(newImage)``` 生成したImage要素をSVGコンテンツに設置 + +wmsController.js + +```js +onload=function(){ + svgMap.refreshScreen(); +} + +var GEBCOurl="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv"; +var GEBCOlayer="GEBCO_LATEST"; + +var crsAD=1; + +function preRenderFunction(){ + var prevImageElement = svgImage.getElementById("wmsImage"); + prevImageElement.remove(); + + var geoViewBox = svgMap.getGeoViewBox(); + var screenSize = getScreenSize(); + var req = getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize); + + var newImage = getSvgImage(req, geoViewBox); + svgImage.documentElement.appendChild(newImage); +} + +function getSvgImage( imageUrl, geoViewBox){ + var imageElement = svgImage.createElement("image"); + imageElement.setAttribute("opacity", 0.5); + imageElement.setAttribute("preserveAspectRatio", "none"); + imageElement.setAttribute("id", "wmsImage"); + imageElement.setAttribute("xlink:href", imageUrl); + imageElement.setAttribute("x", geoViewBox.x * crsAD); + imageElement.setAttribute("y", -(geoViewBox.y+geoViewBox.height) * crsAD); // 軸反転のため北端を設定 + imageElement.setAttribute("width", geoViewBox.width * crsAD); + imageElement.setAttribute("height", geoViewBox.height * crsAD); + return(imageElement); +} + +function getWMSreq(baseUrl, layerName, geoArea, screenSize){ + var wmsArea_x0=geoArea.x; + var wmsArea_y0=geoArea.y; + var wmsArea_x1=geoArea.x+geoArea.width; + var wmsArea_y1=geoArea.y+geoArea.height; + + var ans = `${baseUrl}? + request=GetMap& + service=WMS& + version=1.1.1& + layers=${layerName}& + srs=EPSG:4326& + bbox=${wmsArea_x0},${wmsArea_y0},${wmsArea_x1},${wmsArea_y1}& + width=${screenSize.width}& + height=${screenSize.height}& + format=image%2Fpng`; + + ans = ans.replace(/\s/g,""); // 空白文字(改行含)を除去 + return ( ans ); +} + +function getScreenSize(){ + var gvb = svgMap.getGeoViewBox(); + var scale = svgImageProps.scale; + return { + width : Math.round(gvb.width * scale), + height: Math.round(gvb.height * scale), + } +} + ``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-14/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-14/index.md new file mode 100644 index 0000000..9b57d09 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-14/index.md @@ -0,0 +1,219 @@ +# チュートリアル14 WebApp Layer ベクトル地理情報サービスの結合 + +## はじめに {#introduction} + +動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、 [世界の地震発生状況データ](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php)(GeoJSON版)を結合してみます。 + +動的なサービスと接続してはいますが、基本的には [チュートリアル6](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#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON)との違いはありません。 + +- 実際の動作は、 [geojson2.html](https://svgmap.org/examples/tutorials/geojson2/geojson2.html)をクリック。 + +## ソースコードディレクトリ {#source-code} + +[チュートリアル6](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#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON)に対し、以下が相違点です。 + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/geojson2/) +- geoJsonExample2.html: + - [USGS Earthquake Hazards Program Feed](https://earthquake.usgs.gov/earthquakes/feed/)の仕様に基づいたGeoJsonリクエスト用URLの生成とそのためのUI + - 同仕様に基づいたメタデータ表示設定 + - 10分に一回更新 + +## チュートリアル {#tutorial} + +動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、[リアルタイム世界の地震発生状況データ(GeoJSON Real-time Feeds)](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php)(GeoJSON版)を結合してみます。基本的には[チュートリアル6](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%AB14#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON)との違いはありません。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/geojson2/geojson2.html)をクリック。 +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/geojson2.zip) + +### geojson1.html {#geojson-html} + +- [チュートリアル6](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%AB6)と特に違いはありません。 + +### Container.svg {#container-svg} + +- [チュートリアル6](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%AB6)と特に違いはありません。 + +### geoJsonExample2.svg {#geojsonexample2} + +- ドキュメントルート要素(svg要素)の、data-controller属性で、この [レイヤーを操作するwebApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI)を指定しています。 + - ```data-controller="geoJsonExample2.html#exec=appearOnLayerLoad``` + - ```exec=appearOnLayerLoad``` は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。 ( [詳しくはこちら](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E8.A9.B3.E7.B4.B0) ) +- defs要素でマーカー(POIのアイコン)を定義しています + - マーカーの色はマグニチュードに応じて変化させるためここでは未定義にしてあります + +```svg + + + + + + + + + + + + +``` + +### geoJsonExample2.html, geoJsonExample2.js {#geojsonexample2} + +#### [USGS Earthquake GeoJSON Real-time Feeds](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php)サービスについて + +このサービスは全世界の地震発生状況を更新間隔1分リアルタイム配信しています。出力形式はGeoJson、出力データは時間間隔および地震規模でいくつか選択できるようになっています。リクエストにはクエリパートはなく、更新されたデータが常に同じURLで配信されます。 + +#### Code + +- geoJsonExample2.svgに紐付けられ、[そのDOMをコントロールできるwebApp](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI) +- [チュートリアル6#geoJsonExample1.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%AB6#geoJsonExample1.html)に対して以下が相違点 +- ```addEventListener("load", function(){..})``` + - ```changeData()``` UIの設定に基づき、地震データをリクエストして可視化する関数 + - ```getUSGSURL()``` USGSが配信する地震データを取得するためのGETリクエストを生成 + - クロスオリジンアクセスを行うリクエストを作っています。[USGS Earthquake GeoJSON Real-time Feeds](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php) は ```access-control-allow-origin: *``` レスポンスヘッダを持っているためアクセス可能です。 + - ```loadAndDrawGeoJson()``` 非同期でjsonデータを取得し描画する関数 + - ```loadJSON()``` ブラウザ側キャッシュを効かせないように、常に変化する適当なクエリパートをつけています( ```getTime()``` [より適切な方法](https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/) がありますが、ここでは古典的なBad Tipsを用いています) + - ```buildSchema()``` + - [svgMapGIStool.drawGeoJson](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#drawGeoJson) 関数で可視化する際に、[SVGMap.jsが持つメタデータ表示フレームワーク](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF)に適応させるためのスキーマデータを構築するとともに、SVGMapコンテンツのドキュメントルート要素に設定 + - svgMapGIStool.drawGeoJson関数で渡す末尾の引数(metaSchema)を生成している + - ```setMagColors()``` + - [svgMapGIStool.drawGeoJson](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#drawGeoJson)関数の持つ、各フィーチャーのproperties値を使ってスタイルを設定可能な機能を使い、マグニチュード値をもとにpointフィーチャの色を指定 + - ```svgMapGIStool.drawGeoJson()``` + - ```buildSchema()``` で生成したスキーマ ( ```metaSchema``` )を与え、[SVGMap.jsのメタデータ表示フレームワーク](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF)でメタデータがうまく表示できるようにしています + - ```setInterval(function(){..}..)``` 指定した間隔で定期的に更新する関数（地震データはリアルタイムに更新されるため） + +geoJsonExample2.html + +```html + + + + + Sample of drawing geoJson in an SVGMap webApp layer + + + + +

area layer

+USGS Earthquake Hazards Program Feed

+Period
+Scale +
+ + +``` +geoJsonExample2.js + +```js +var usgsEarthquakeService="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/"; +var timeSpanKeys=["hour","day","week","month"]; // Selection for setting the period of distributed data +var timeSpanDefault=2; // Display data for the past week by default +var levelKeys=["significant","4.5","2.5","1.0","all"]; // Selection for distributed data by magnitude +var levelDefault=2; // Display earthquakes of M2.5 or higher by default +var intervalMinutes=10; // Update every 10 minutes +var metaSchema; // Store the normalized schema for the metadata display UI when selecting geometry, which is provided as standard in SVGMap.js + +addEventListener("load", function(){ + buildDataSelect(); + changeData(); + setInterval(function(){ + changeData(); + messageDiv.innerText=new Date().toLocaleString() + " update"; + } ,intervalMinutes * 60 * 1000); +}); + +function changeData(){ + var param1 = dataSelect1.selectedIndex; + var param2 = dataSelect2.selectedIndex; + var path = getUSGSURL(param1,param2); + loadAndDrawGeoJson(path); +} + +async function loadAndDrawGeoJson(dataPath){ + var gjs = await loadJSON(dataPath); + buildSchema(gjs.features); + setMagColors(gjs.features); + console.log("geoJson:",gjs); + var parentElm = svgImage.getElementById("mapContents"); + removeChildren(parentElm); + svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm, metaSchema); + svgMap.refreshScreen(); +} + +function buildDataSelect(){ + var first=true; + for ( var i = 0 ; i < timeSpanKeys.length; i++){ + var timeSpanKey = timeSpanKeys[i]; + var selectedOpt=""; + if ( timeSpanDefault == i){ + selectedOpt="selected"; + } + dataSelect1.insertAdjacentHTML('beforeend', ``); + } + for ( var i = 0 ; i < levelKeys.length ; i++){ + var levelKey = levelKeys[i]; + var selectedOpt=""; + if ( levelDefault == i){ + selectedOpt="selected"; + } + dataSelect2.insertAdjacentHTML('beforeend', ``); + } +} + +async function loadJSON(url){ + var response = await fetch(url+"?time="+new Date().getTime()); // To always get the latest data, add a dummy query part. Bad Tips... + // https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice + // https://stackoverflow.com/questions/9692665/cache-busting-via-params + var json = await response.json(); + return ( json ); +} + +function removeChildren(element){ + while (element.firstChild) element.removeChild(element.firstChild); +} + +function getUSGSURL(timeSpan, level){ + if (!timeSpanKeys[timeSpan]){return}; + if (!levelKeys[level]){return}; + var ans = `${usgsEarthquakeService}${levelKeys[level]}_${timeSpanKeys[timeSpan]}.geojson`; + console.log("getUSGSURL:",ans); + return (ans); +} + +function buildSchema(features){ // Generate a normalized schema from the property name of the geojson feature + metaSchema={}; + for ( var feature of features){ // Trace all data just in + case for ( var propName in feature.properties){ + if (!metaSchema[propName]){ + metaSchema[propName]=true; + } + } + } + metaSchema=Object.keys(metaSchema); + svgImage.documentElement.setAttribute("property",metaSchema.join()); +} + +function setMagColors(features){ // Use the styling specifications from [[Guide#drawGeoJson]] to assign colors according to magnitude + features.sort(function(a,b){ // Sort by ascending magnitude + return(a.properties.mag - b.properties.mag); + }); + + for ( var feature of features){ + var cmag = feature.properties.mag; + // Clip at magnitude 3...7 + cmag = Math.max(3,cmag); + cmag = Math.min(7,cmag); + // Convert to hue and generate an RGB color from it + var hue = (7-cmag)/(4)*240; + var rgb = svgMapGIStool.hsv2rgb(hue,100,100); + console.log(rgb); + if ( } } + console.log( + features + ) + ; +} +``` + +### appendix:クロスオリジンアクセス + +[クロスオリジンアクセス](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9) については([独立したページ](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9)に移行しました) \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-15/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-15/index.md new file mode 100644 index 0000000..d587ca5 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/3-web-service-integration/tutorial-15/index.md @@ -0,0 +1,213 @@ +# チュートリアル15 WebApp Layer 伸縮スクロールに応じたベクトル地理情報サービス結合 + +## はじめに {#introduction} + +動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。前章と異なり、伸縮スクロールする度にその表示領域に応じたデータをサービスから取得して表示します。 + +ここではNatural Resources Canadaが提供している、[Geoname Service API](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249) (カナダの地名データサービス)を結合してみます。 + +- 実際の動作は、[vectorService1.html](https://svgmap.org/examples/tutorials/vectorService1/vectorService1.html)をクリック。 + - （Note: サービスがデータを生成配信するまでに少々時間がかかります） + +## ソースコードディレクトリ {#source-code} + +- [ソースコードのディレクトリ](https://svgmap.org/examples/tutorials/vectorService1/) +- 表示領域のパラメータを伸縮スクロールの度に取得します。 +- このパラメータを用いて、[仕様に](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249)基づきサービスへのクエリURLを構築、CSVを取得します。 +- ポイントデータをSVGのuse要素として可視化します。 +- 1ステップ前のデータは消去します。 + +## チュートリアル {#tutorial} + +動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。[チュートリアル14](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%AB14)に対して、こちらは伸縮スクロールする度にその表示領域に応じたデータをサービスから取得して表示します。また[チュートリアル14](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%AB14)はgeoJsonデータのサービスでしたがこちらはCSVデータです。 + +結合するサービスはNatural Resources Canadaが提供している、[Geoname Service API](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249)(カナダの地名データサービス)です。 + +- 実際の動作は、[こちら](https://svgmap.org/examples/tutorials/vectorService1/vectorService1.html)をクリック。 +- 使用ファイルの[ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/vectorService1.zip) + +### vectorService1.html {#vector-service-1} + +- [チュートリアル14](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%AB14)と特に違いはありません。 + +### Container.svg {#container-svg} + +- [チュートリアル14](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%AB14)と特に違いはありません。 + +### CanadianGeoNames.svg {#canadian-geo-names-svg} + +- [チュートリアル14](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%AB14)と特に違いはありません。アイコンの色もこちらは赤に固定しています。 + +```svg + + + + + + + + + +``` + +### CanadianGeoNames.html, CanadianGeoNames.js {#canadian-geo-names-js} + +#### REST API + +少し複雑ですので、[Geographical names in Canada: Geoname Service that we will use this time](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249)が提供するAPIのうち今回使用する部分をまとめます。 + +**使用するクエリパラメータ** + +今回は以下の二つを使います。 + +- bbox 西、南、東、北の座標(世界測地系の度の値)をカンマ区切りで指定 +- num 出力する最大数 +- .csv拡張子　厳密にはクエリパラメータではありませんが、パス部の拡張子を設定することで指定したメディアが配信されます。（デフォルトはhtml）今回はCSVを使うことにします。 +- クロスオリジン設定　今回は別ドメインのサービスにアクセスすることになるので、ウェブサービスがクロスオリジンアクセスを許可している必要があります。[Geographical names in Canada: Geoname Service](https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249)は許可されているようです。 + +**配信されるデータ** + +クエリパラメータに基づいたCSVデータが返信されます。1行目がスキーマ行２行目以降にデータ続きます。以下のカラムがあるようです。latitude、longitudeカラムで地図上にPointフィーチャを設置、nameカラムでそのタイトルを設置できそうです。その他のカラムはシンボルをクリックしたときにプロパティとして表示できるでしょう。データを取得してみると、カンマを含むデータがダブルクォーテーションでエスケープされていることがあるようです。 + +- id +- name +- language.code +- language.href +- syllabic +- feature.id +- feature.href +- category +- status.code +- status.href +- concise.code +- concise.href +- generic.code +- generic.href +- location +- province.code +- province.href +- map +- relevance +- accuracy +- Latitude +- longitude +- decision + +#### コード + +- ```addEventListener("zoomPanMap", getGeoNames)``` : 伸縮スクロールの度にサービスに問い合わせ、紐づいたレイヤーのSVGMapコンテンツのDOMを構築し可視化します。 + - １ステップ前（伸縮スクロール前）のデータは、たとえ現ステップでも存在していたとしても単純に全消去してから再配置しています。（タイリングなどの、より高度な仕組みは実装していない） +- ```getGeoNames()``` : サービスにと合わせて可視化する非同期関数 + - ```svgMap.getGeoViewBox()``` : 地理的な表示領域を得る + - ```getCanadianGeoNamesReq()``` : 表示領域をもとにサービスへのクエリを組み立て + - ```await getCsv()``` : クエリを使って非同期でCSVを取得・パース + - ```line.split(...)``` : [こちらの記事](https://www.ipentec.com/document/csharp-read-csv-file-by-regex)をもとにダブルクォーテーションエスケープを加味してパース + - ```drawPoints()``` : 取得したデータを可視化します。 今回はCSVから直接SVGのuse要素を作り、可視化しています。 + - ```svgImage``` : レイヤーに紐づいたwebAppに組み込まれた同レイヤーのSVGMapドキュメントオブジェクト + - 参考: [解説書#svgImage](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF) + - ```schema``` : 紐づいたレイヤーのSVGMapコンテンツのドキュメント要素のpropertyにスキーマを設置 + - 参考: [SVGMap.jsのmetadataフレームワーク](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF) + - ```"transform", `ref(svg,${lng},${-lat})` ```: svg1.2の [TransformRef](https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref)を使い、サイズが変化しないアイコンを設置しています。 + - 参考: [サポートされている属性](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.B1.9E.E6.80.A7) + - ```"content"``` : メタデータをcsvで設置 + - ```"xlink:href", "#p0"``` : defs要素内のid:p0のシンボル(赤い丸)を参照 + - ```svgMap.refreshScreen();``` : SVGMapコンテンツのDOM生成完了したら再描画する + - 参考: [再描画の制限](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90) + +CanadianGeoNames.html + +```html + + + +basic dynamic wms layer controller + + + + +

Canadian GeoNames layer controller

+

Get Canadian GeoNames Features from Canadian GeoNames Search Service

+
-
+ + +``` + +CanadianGeoNames.js + +```js +var canadianGeoNamesService = "https://geogratis.gc.ca/services/geoname/en/geonames.csv"; + +onload=function(){ + addEventListener("zoomPanMap", getGeoNames); + getGeoNames(); +} + + +var crsAD=1; +var maxItems=100; + +async function getGeoNames(){ + var geoViewBox = svgMap.getGeoViewBox(); // 地理的な表示領域を得る + var req = getCanadianGeoNamesReq(geoViewBox); // 表示領域をもとにサービスへのクエリを組み立てる + var csv = await getCsv(req); // クエリを使って非同期でCSVを取得 + if ( csv.length > maxItems){ // 最大数以上の場合メッセージを出す + messageDiv.innerText="Exceeded maximum number. Please zoom in."; + }else{ + messageDiv.innerText=""; + } + drawPoints(csv); // 取得したデータを可視化する +} + +function getCanadianGeoNamesReq(geoArea){ + var area_x0=geoArea.x; + var area_y0=geoArea.y; + var area_x1=geoArea.x+geoArea.width; + var area_y1=geoArea.y+geoArea.height; + var ans = `${canadianGeoNamesService}?bbox=${area_x0},${area_y0},${area_x1},${area_y1}&num=${maxItems}`; + return ( ans ); +} + +async function getCsv(url){ + var response = await fetch(url); + var txt = await response.text(); + txt = txt.split("\n"); + var ans = []; + for ( var line of txt ){ + // https://www.ipentec.com/document/csharp-read-csv-file-by-regex ダブルクォーテーションエスケープを加味したcsvパース + line = line.split(/,(?=(?:[^"]*"[^"]*")*[^"]*$)/); + if (line.length > 1){ + ans.push(line); + } + } + return ( ans ); +} + +function drawPoints(csv){ + removeUses(); + var schema = csv[0].join(); + var latCol=csv[0].indexOf("latitude"); + var lngCol=csv[0].indexOf("longitude"); + svgImage.documentElement.setAttribute("property",schema); + for ( var i = 1 ; i < csv.length ; i++){ + var point = csv[i]; + var meta = point.join(); + var lat = Number(point[latCol]); + var lng = Number(point[lngCol]); + var use=svgImage.createElement("use"); + use.setAttribute("xlink:href","#p0"); + use.setAttribute("content",meta); + use.setAttribute("x",0); + use.setAttribute("y",0); + use.setAttribute("transform",`ref(svg,${lng},${-lat})`); + svgImage.documentElement.appendChild(use); + } + svgMap.refreshScreen(); +} + +function removeUses(){ + var uses = svgImage.getElementsByTagName("use"); + for ( var i = uses.length-1 ; i >=0 ; i--){ + uses[i].remove(); + } +} +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/index.md new file mode 100644 index 0000000..0f45d80 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/index.md @@ -0,0 +1,3 @@ +# Part 4: 既成WebApp Layer活用編 + +githubの [svgmapAppLayers](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) リポジトリでオープンソースとして公開されている、SVGMap.jsで利用できる開発済みの様々な [WebApp Layer](https://github.com/svgmap/svgmapAppLayers) を利用する方法を説明します。 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md new file mode 100644 index 0000000..5039035 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages copy/index.md @@ -0,0 +1,114 @@ +# 独自ホストにsvgmapAppLayersをコピーして利用 + +## はじめに {#introduction} + +[svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) の内容をダウンロードし、独自に用意したホストにコピー（クローン）して利用します。前章のGitHub Pagesの参照であった制限は生じません。 + +- 実際の動作は[こちら](https://www.svgmap.org/examples/tutorials/ghAppLayersClone/ghAppLayers_clone.html) をクリック + - (このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用しています) + +本章では、[svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers)リポジトリを自分のホストにコピーして使用します。 前章の[制限事項](https://www.svgmap.org/wiki/index.php?title=SvgmapAppLayers_GitHub_Pages%E3%81%AE%E5%88%A9%E7%94%A8#.E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85)はありませんが、svgmapAppLayersリポジトリのアップデートの反映は自身で行う必要があります。 + +- 実際の動作は[こちら](https://www.svgmap.org/examples/tutorials/ghAppLayersClone/ghAppLayers_clone.html) をクリック + - このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用しています +- 使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/ghAppLayersClone.zip) + +### あらすじ {#synopsis} + +- [https://github.com/svgmap/svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) をダウンロード（git cloneでも良い）する + - [zipダウンロードする場合](https://github.com/svgmap/svgmapAppLayers/archive/refs/heads/main.zip) (解凍必要) + - git cloneの場合: ```git clone git@github.com:svgmap/svgmapAppLayers.git``` +- 自身が運営しているホストに内容をコピーする +- Container.svgを編集し、掲載したいレイヤーを選択する +- 必要に応じてプロキシーを構築する + +### 手順 {#procedure} + +- [svgmapAppLayer](https://github.com/svgmap/svgmapAppLayers)の内容を複製します + - [https://github.com/svgmap/svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) の UI(`<>`Codeボタン⇒ [Download ZIP](https://github.com/svgmap/svgmapAppLayers/archive/refs/heads/main.zip)) でダウンロードする(解凍はシンボリックリンクが有効な環境(linux等)で実施) か、gitコマンドでクローンする　```git clone git@github.com:svgmap/svgmapAppLayers``` +- 使いたいレイヤー以外のディレクトリは消去して構いません + - ただしcommonLib（共通ライブラリ）は、各ディレクトリの中からシンボリックリンクが張られているファイル群のため、基本的には削除できません。(使用するレイヤーのディレクトリから参照されていないファイルを消すことは可能） +- authoringLayers内のbbsディレクトリ(authoringLayers/bbs)はphpを使って、オーサリングしたものをサーバに保存する機能に関する実装です、このチュートリアルでは扱いませんので不用意なサーバ動作を防ぐため必ず削除してください。 +- 地図ページのhtmlを用意（前章と同じです） +- img, jsディレクトリとその内容を配置 +- プロキシーサービスを構築（前章と同じです） +- Container.svgは編集して必要なレイヤーのみを残します。 + +### ディレクトリの構造 {#directory-structure} + +このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用 + +```svg +|--Container.svg +|--appLayers +| |--mlitRoad +| |--... +| +|--authoringLayers +| |--local +| | |--csvLayer +| | |--... +| +| +| +--mappin.png +| +|--basemaps +| +|--... +| +| +--commonLib +| |--... +| +|--js +| |--... +| +|--simpleCORSproxy.php +``` + +### Container.svg {#container-svg} + +このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用 + +```svg + + + + + + + + + + + + + + + + + + + + + + + + < + animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=camera" title="Live Camera" data-cross-origin-proxy-required="true" opacity="0.75" class="Ministry of Land, Infrastructure, Transport and Tourism Road Information batch" + +``` + +## 参考情報：svgmap.jsをロードする地図ページの構成 {#reference-information} + +以下のgithubリポジトリの内容をcloneすれば、本チュートリアルで説明したsvgmap.jsによる地図ウェブアプリページを簡単に構成することができます。このリポジトリはsvgmap.orgの公式デモページの一つをgithubpagesとして公開しているもので、３次元可視化機能や、カスタムレイヤーマネージメント機能等、svgmapjsが持つ拡張機能も設定済みです。 + +[https://github.com/svgmap/svgMapDemo](https://github.com/svgmap/svgMapDemo) + +ただし、CORSプロキシについては、上記githubリポジトリのソースではsvgmap.orgの公式デモシステム専用に用意されたものが設定されていますので、ご自身のサイトで別途用意したCORSプロキシ用にhtmlの中のソースの該当部分を編集してください。[CORSプロキシの設定については、こちらを参照](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#.E3.82.AF.E3.83.AD.E3.82.B9.E3.82.AA.E3.83.AA.E3.82.B8.E3.83.B3.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9). + +参考：[上記githubリポジトリによるSVGMap公式デモページ](https://svgmap.github.io/svgMapDemo/) \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md new file mode 100644 index 0000000..6906dfd --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/4-utilizing-existing-webapp-layers/using-svgmapapplayers-on-github-pages/index.md @@ -0,0 +1,239 @@ +# svgmapAppLayers GitHub Pagesの利用 + +## はじめに {#introduction} + +[svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) GitHubリポジトリは、 [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages) のセットアップがなされています。そのためいくつかのレイヤーはGitHub Pagesで公開されたURLをリンクするだけで利用することができます。 + +実際の動作は、 [ghAppLayers_wpxy.html](https://svgmap.org/examples/tutorials/ghAppLayers/ghAppLayers_wpxy.html)をクリック。 + +[The svgmapAppLayers](https://github.com/svgmap/svgmapAppLayers) リポジトリは、SVGMap.jsで利用できる様々な機能やコンテンツ提供する [WebApp Layers](https://www.svgmap.org/wiki/index.php?title=%E8%A7%A3%E8%AA%AC%E6%9B%B8#.E3.82.A6.E3.82.A7.E3.83.96.E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E3.82.88.E3.82.8B.E5.8B.95.E7.9A.84.E3.81.AA.E5.9C.B0.E5.9B.B3.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.A8.E3.80.81.E3.81.9D.E3.81.AE.E3.83.8F.E3.82.A4.E3.83.91.E3.83.BC.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0) を集めたものです。いずれもオープンソースとして公開されています。(ライセンスは [MPL2](https://www.mozilla.org/en-US/MPL/2.0/) ( [日本語参考訳](https://www.mozilla.jp/documents/mpl/2.0/) ) (SVGMap.jsと同じ)) + +また、このリポジトリは [GitHub Pages](https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages)としてセットアップされています。リポジトリのルートは [https://svgmap.github.io/svgmapAppLayers/](https://svgmap.github.io/svgmapAppLayers/) です。 + +そこで、本章ではGitHub Pagesとして公開されたsvgmapAppLayersのレイヤーを直接参照して地図ページを構築してみたいと思います。 + +実際の動作は[こちら](https://svgmap.org/examples/tutorials/ghAppLayers/ghAppLayers_wpxy.html)をクリック (プロキシをセットアップしたもの) +使用ファイルの [ZIPアーカイブファイル](https://www.svgmap.org/examples/tutorials/ghAppLayers.zip). + +### あらすじ {#synopsis} + +- svgmapAppLayersのルートディレクトリのGitHub PagesのURLは、 [https://svgmap.github.io/svgmapAppLayers/](https://svgmap.github.io/svgmapAppLayers/) +- svgmapAppLayersに登録されているレイヤーの一覧は [Container.svgのソース](https://github.com/svgmap/svgmapAppLayers/blame/main/Container.svg)で確認 + - svgmapAppLayersのGitHub PagesのwebAppを直接参照できないレイヤーは data-cross-origin-restrictedアトリビュートが付いています + - クロスオリジンアクセスプロキシの設定が必要なレイヤーは、data-cross-origin-proxy-requiredアトリビュートが付いています + - [コンテナsvg生成支援webApp](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html)を使うと簡単にContainer.svgを生成できます +- 必要に応じてプロキシーを構築する + +### 制限事項 {#restrictions} + +- データのソースにクロスオリジンアクセスするレイヤーでは、プロキシーを用意する必要があるものがあります（本省後半で解説） +- いくつかのレイヤーはGitHub Pagesの直接参照では使えません（次章　クローンを作成して使用することで使用可能になります） + +### 使えるレイヤーの一覧 {#list-of-available-layers} + +- [こちらのページ](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html) を参照してください + - このページは [https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg](https://github.com/svgmap/svgmapAppLayers/blob/main/Container.svg) をもとに生成されています。 +- corsRestricted がtrueのレイヤーはGitHub Pagesの直接参照では使えません +- corsProxyRequired がtrueのレイヤーはプロキシーを用意する必要があります + +## プロキシーが必要ないレイヤーだけを使ってみる {#try-using-only-the-layers-that-dont-require-proxies} + +- プロキシーが不要なレイヤーだけを使うページを作成してみます。プロキシの設定がないので簡単です。 + - 完全に静的なホスティングで運用可能です。( ご自身で構築したGitHub Pagesで公開することも可能です） +- 実際の動作は [こちら](https://svgmap.org/examples/tutorials/ghAppLayers/ghAppLayers.html) をクリック + +### コンテナ（Conainer.svg）の準備 {#preparing-container-svg} + +- [こちらのページ](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html#withoutProxy) を表示 + - プロキシが必要なレイヤーはあらかじめチェックが外れています。(GitHub Pagesの直接参照ができないレイヤー含) +- 表示したいレイヤーにチェックして、Container.svgを保存する（もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれたContainerが取得できます。 + +### 地図ページのhtml (ghAppLayers.html) {#html-for-map-page} + +- これまでの章と特に内容に違いはありません。 + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +## プロキシーが必要なレイヤーも使えるようにセットアップする {#set-up-so-that-layers-requiring-proxies-can-also-be-used} + +- プロキシーが必要なレイヤーも使うページを作成してみます。 + - プロキシーサービスの準備が必要です(PHPでも運用は可能(本チュートリアルではPHPを使用した例を提示)) +- 実際の動作は[こちら](https://svgmap.org/devinfo/devkddi/tutorials/ghAppLayers/ghAppLayers_wpxy.html)をクリック + +### コンテナ（Container_wpxy.svg）の準備 {#preparing-the-container-wpxy-svg} + +- [こちらのページ](https://svg2.mbsrv.net/examples/tutorials/ghAppLayers/containerGenerator.html)を表示 +- プロキシが必要なレイヤーもチェックさています。(GitHub Pagesの直接参照ができないレイヤーはチェック外れています) +- 表示したいレイヤーにチェックして、Container_wpxy.svgを保存する(もしくは表示する)ボタンを押すと、Container.svgを取得できます。直接参照するリンクが組み込まれたContainerが取得できます。 + +### 地図ページのhtml (ghAppLayers_wpxy.html) {#the-html-file-for-the-map-page} + +- 違いはProxyを使用できるようにSVGMap.jsをセットアップしている点です。詳しくは [こちらの情報](https://www.svgmap.org/wiki/index.php?title=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9) を参照ください。 + - import `{ CorsProxy }` from [https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js'](https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/CorsProxyModule.js') ;でプロキシーを扱うライブラリを読み込み、 + - corsProxy.setServiceでセットアップし + - (この例では同じディレクトリに設置したPHPによるプロキシ(./simpleCORSproxy.php)を指定) + - svgMap.setProxyURLFactoryで、SVGMap.jsに組み込んでいます。 +- 使用するコンテナsvgは"Container.svg"としています。 + +```html + + +SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG + + + + + + + + + + + + + + +
+
+ + + + + + + + SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG + + by SVGMap tech. + + + + Lat,Lng: + + lat , lng + +
+
+ + +``` + +### プロキシーの準備 {#preparing-a-proxy} + +今回はPHPが使えるホスティング上でPHPによる簡易プロキシーを設定することにします + +- // Set acceptable referer criteria　の行は、このhtmlのあるドメイン(svgmap.org)からのアクセスみに受け付ける簡単な制限を設定しています。 +- 詳しくは [単純なプロキシ実装例](https://www.svgmap.org/wiki/index.php?title=%E5%8D%98%E7%B4%94%E3%81%AA%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E5%AE%9F%E8%A3%85%E4%BE%8B)を参照ください。 + +```php + $value) { + echo "$name: $value
"; + } + foreach ($_GET as $key => $value) { + echo "GET Key:".$key.", Value:".$value."
"; + } + echo "referrer: ".$_SERVER['HTTP_REFERER']; +} +?> +``` \ No newline at end of file diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/intro.md b/i18n/ja/docusaurus-plugin-content-docs/current/intro.md index 0550e6a..1b39191 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/intro.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/intro.md @@ -1,5 +1,5 @@ --- -sidebar_position: 1 +sidebar_position: 0 --- # チュートリアル {#tutorial} From d3014dd5c1be5a605894125a23cb623905d28ac6 Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Wed, 25 Mar 2026 23:23:51 -0400 Subject: [PATCH 6/9] fixed links attempt 1 --- docs/1-basic/tutorial-1/index.md | 4 ++-- .../current/1-basic/tutorial-1/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/1-basic/tutorial-1/index.md b/docs/1-basic/tutorial-1/index.md index 01794a1..f96c46b 100644 --- a/docs/1-basic/tutorial-1/index.md +++ b/docs/1-basic/tutorial-1/index.md @@ -41,7 +41,7 @@ tutorial1.html | | +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png | | - +-js/layerListStyle.css (default style sheet for map display page) (Note: The javascript library for displaying SVGMap is registered in jedelivr (CDN that publishes open source javascript library on the Internet). + +-js/layerListStyle.css (default style sheet for map display page) Note: The javascript library for displaying SVGMap is registered in jedelivr (CDN that publishes open source javascript library on the Internet). | | +-Container.svg (one SVG file with a role to bind various data (layers) is loaded) | | @@ -191,7 +191,7 @@ Standalone execution is also possible on the terminal PC (though an internet con The single SVG content loaded first by SVGMap.js. This content does not contain actual map data itself; its role is to reference various map contents (called layers) and bundle them together into a single map. -It loads the SVG files (in SVGMap content format) for each layer to be displayed using the [animation element](#animation) (here, only Coastline.svg is loaded). +It loads the SVG files (in SVGMap content format) for each layer to be displayed 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) (here, only Coastline.svg is loaded). ```svg diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md index 215aad7..f71625e 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md @@ -134,7 +134,7 @@ tutorial1.html ### Container.svg {#container-svg} - SVGMap.jsが最初に読み込む一個のSVGコンテンツ。　このコンテンツには実際の地図データを入れることはなく、様々な地図コンテンツ（レイヤーと言う）を参照し、それらを束ねて一枚の地図にする役割を持っています。 -- [animation要素](#animation-element)によって表示する各レイヤ用のSVGファイル(SVGMapコンテンツ形式)を読み込む(ここではCoastline.svgのみを読み込んでいます)。 +- [animation要素](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)によって表示する各レイヤ用のSVGファイル(SVGMapコンテンツ形式)を読み込む(ここではCoastline.svgのみを読み込んでいます)。 ```svg From 5ac12f64b4669c02290f6eeb44da866a4654366a Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Wed, 25 Mar 2026 23:30:53 -0400 Subject: [PATCH 7/9] fix attempt 2 --- docs/1-basic/tutorial-1/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/1-basic/tutorial-1/index.md b/docs/1-basic/tutorial-1/index.md index f96c46b..39ff256 100644 --- a/docs/1-basic/tutorial-1/index.md +++ b/docs/1-basic/tutorial-1/index.md @@ -254,7 +254,7 @@ Explained in [Tutorial 3](../tutorial-3/index.md). ##### Other enhancements {#other-enhancements} -- Non-scaling object (representation of Point Geometry) explained in [Tutorial 2](../tutorial-2a/index.md/#) +- Non-scaling object (representation of Point Geometry) explained in [Tutorial 2](../tutorial-2a/index.md/#non-scaling-object) ### Coastline.svg {#coastline-svg} From 2d9301a969d88c85621c70fad7d5ab6ef96c8ea8 Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Wed, 25 Mar 2026 23:36:53 -0400 Subject: [PATCH 8/9] fix attempt 3 --- docs/1-basic/tutorial-1/index.md | 2 +- .../current/1-basic/tutorial-1/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/1-basic/tutorial-1/index.md b/docs/1-basic/tutorial-1/index.md index 39ff256..6b31806 100644 --- a/docs/1-basic/tutorial-1/index.md +++ b/docs/1-basic/tutorial-1/index.md @@ -254,7 +254,7 @@ Explained in [Tutorial 3](../tutorial-3/index.md). ##### Other enhancements {#other-enhancements} -- Non-scaling object (representation of Point Geometry) explained in [Tutorial 2](../tutorial-2a/index.md/#non-scaling-object) +- Non-scaling object (representation of Point Geometry) explained in [Tutorial 2](../tutorial-2a/index.md) ### Coastline.svg {#coastline-svg} diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md index f71625e..012892c 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md +++ b/i18n/ja/docusaurus-plugin-content-docs/current/1-basic/tutorial-1/index.md @@ -197,7 +197,7 @@ svgY = b * geoX + d * geoY + f ##### その他の拡張 {#other-enhancements} -- Non-scaling object (Point Geometryの表現)　[チュートリアル2#Non-scaling_Object|チュートリアル2](../tutorial-2a/#non-scaling-object)で説明 +- Non-scaling object (Point Geometryの表現)　[チュートリアル2#Non-scaling_Object|チュートリアル2](../tutorial-2a)で説明 ### Coastline.svg {#coastline-svg} From 8832c5073683ef8d0ce9a85a8b0129345ed11e91 Mon Sep 17 00:00:00 2001 From: Jacob Lapish Date: Wed, 25 Mar 2026 23:48:35 -0400 Subject: [PATCH 9/9] temp fix --- docusaurus.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 592fc6b..1c1a412 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -25,7 +25,7 @@ const config: Config = { projectName: 'tutorials', deploymentBranch: 'main', - onBrokenLinks: 'throw', + onBrokenLinks: 'warn', // Even if you don't use internationalization, you can use this field to set // useful metadata like html lang. For example, if your site is Chinese, you