diff --git a/docs/basic/tutorial-2a/index.md b/docs/basic/tutorial-2a/index.md new file mode 100644 index 0000000..e6eb71e --- /dev/null +++ b/docs/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/basic/tutorial-2b/index.md b/docs/basic/tutorial-2b/index.md new file mode 100644 index 0000000..1a7fd26 --- /dev/null +++ b/docs/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