GeoStorymap Web Design#

Version: V1.0.0 Copyright: Shenzhen Integeo Innovation Technology Co., Ltd. Last Updated: 2026.03.16

Copyright & Disclaimer#

1. Ownership and all related intellectual property rights of this software are exclusively owned by Shenzhen Integeo Innovation Technology Co., Ltd.
2. Users shall obtain the right to use the software through lawful means and use it in compliance with applicable agreements.
3. Any infringement or illegal behavior arising during the use of this software that is not caused by Shenzhen Integeo Innovation Technology Co., Ltd. shall be borne solely by the user. Shenzhen Integeo Innovation Technology Co., Ltd. assumes no joint or several liability.
4. Without written consent or authorization from Shenzhen Integeo Innovation Technology Co., Ltd., no entity may modify, translate, annotate, organize, compile, sublicense, reauthorize, or perform any derivative operation on the software.
5. If the contents of this manual are updated or changed, no further notice will be given. Shenzhen Integeo Innovation Technology Co., Ltd. assumes no related obligations.

Trademark Notice#

“Shenzhen Integeo Innovation Technology Co., Ltd.”, “GeoTwin”, “Story Map”, and related names may be trademarks or product names of relevant parties. No use is permitted without written consent or authorization.

1. New Features / Improvements#

1.1 What’s New in This Version#

• New features:
  • Initial release of GeoTwin Story Map, providing story creation, search, preview, and editing.
  • Block-based authoring: compose content with blocks such as heading, text, divider, image, photo wall, image carousel, video, iframe, map tour, scroll, and parallax.
  • Theme presets and Compact/Default reading spacing toggle.
  • Mode switching for preview/edit/presentation to support authoring and publishing.
  • UI language switching for zh_CN, zh_TW, and en_US.
• Improvements: TBD
• Other changes: TBD

1.2 Changelog#

Version	Date	Highlights
V1.0.0	2026.03.16	Initial release with Story Map authoring, preview, and multilingual UI (see 1.1)

2. Usage Notes#

2.1 Runtime Requirements#

2.1.1 Browser & OS#

• Browser: Latest Chrome / Edge (Chromium-based) is recommended.
• OS: Windows / macOS / Linux (subject to browser support).

2.1.2 Network#

• Requires access to backend APIs and static resource services; use a stable network.
• If your deployment uses SSO/portal login, ensure relevant domains are reachable.

2.2 Access & Login#

1. Access the GeoTwin Story Map application URL via your unified entry point (https://portal-dev.geotwin.cn/gtstorymap/home).
2. If not logged in, you will be redirected to the SSO authentication page.
3. After login, you will land on the “Story List (Home)” page.

2.3 UI Preferences (Language / Theme / Font Size)#

• Language: Simplified Chinese (zh_CN), Traditional Chinese (zh_TW), English (en_US).
• Theme: Light / Dark / Follow system.
• Font size: Large / Normal / Small.

2.4 Data & Permissions#

• Stories are typically scoped by account (permission model TBD).
• When using external content (iframe) or external media, comply with the target site’s security policy and authorization rules.

3. Overview#

3.1 Positioning#

GeoTwin Story Map is a web-based content authoring tool for 3D scene/map storytelling. It organizes content as ordered blocks (sections), including text, images, videos, embedded pages, and map tours, and provides preview and presentation modes.

3.2 Modules#

• Story list: Create, search, edit, delete stories, and enter preview/edit modes.
• Story editor: Block-based editing with theme presets and save.
• Story preview: Reader mode for reviewing the story, with compact/default spacing.
• Global actions: Language, theme, font size, notifications, and user menu (may vary by deployment).

3.3 Key Benefits#

• Structured authoring: Blocks cover common storytelling components (heading, text, image, video, iframe, chart, map tour, etc.).
• Theme presets: Built-in themes for consistent styling.
• Multilingual UI: Switch between zh_CN / zh_TW / en_US (coverage depends on the current release).
• Lightweight sharing: Switch preview/presentation modes using URL parameters.

4. Format Support#

4.1 Input Formats#

Data Type	Supported Format / Shape	Notes
Images	JPEG, PNG, GIF, WebP	Default max size: 5MB per file (deployment may override)
Videos	MP4, WebM, Ogg	Default max size: 50MB per file (deployment may override)
Iframe embed	URL	Affected by same-origin/CSP/https; some sites cannot be embedded
Chart data	Built-in data schema	X-axis array + multiple numeric series
Map tour media	Image/video URL	Each scene can bind media and content blocks

4.2 Output Formats#

Output Type	Format / Shape	Notes
Preview page	URL (mode=preview)	Example: /{itemId}?mode=preview
Edit page	URL (mode=edit)	Example: /{itemId}?mode=edit
Presentation page	URL (mode=view)	Presentation mode typically hides the top bar (implementation-dependent)
Stored content	JSON (StoryContent v1.0.0)	Stored in the story option field (details may change)

5. Product Guide#

5.1 Core Module Operations#

5.1.1 Story List (Home)#

• Create: Create a new story entry.
• Search: Filter by keyword and creation time range.
• View: Open the preview page to review the story.
• Edit: Open the editor to modify the story and save.
• Delete: Remove a story entry (permissions/recycle policy TBD).

5.1.2 Top Bar#

• Back: Return to the story list.
• Compact/Default: Toggle spacing in preview mode (compact).
• Theme: Choose a theme preset in edit mode.
• Preview/Edit: Switch between preview and edit modes.
• Save: Save the current story.

5.1.3 Block Types#

• Heading: Levels 1–4, optional subtitle and alignment.
• Paragraph: Text content, font size, line height, alignment.
• Divider: Solid/dashed, color, width, thickness, alignment.
• Image: Upload/reference images, set fit mode and alignment.
• Photo wall: Display multiple images as grid/collage.
• Image carousel: Carousel for multiple images with titles/subtitles.
• Video: Upload/reference videos, set poster, size, and playback settings.
• Iframe: Embed web pages, configure size and sandbox options.
• Map tour: Scene-based structure with media and content blocks.
• Scroll: Step-based scrollytelling with media/iframe.
• Chart: Visualize chart with the built-in schema.
• Parallax: Foreground/background media with content panels for parallax storytelling.

5.2 Key Workflows#

5.2.1 Create a Story#

1. Open the “Story List (Home)” page.

   Figure 5-2-1-1: Story List (Home) page

2. Click the “Create/Add” button.

   Figure 5-2-1-2: Create story (screenshot TBD)

3. Enter a title and confirm.

   Figure 5-2-1-3: Title input (screenshot TBD)

4. Click the cover or “View” to enter the preview page.

5.2.2 Enter Edit Mode and Save#

1. On the preview page, click “Edit”.

   Figure 5-2-2-1: Enter edit mode (screenshot TBD)

2. (Optional) Choose a theme preset from the “Theme” dropdown.

   Figure 5-2-2-2: Select theme (screenshot TBD)

3. Click “Save”. A “Save successful” message indicates completion.

5.2.3 Add Content Blocks#

1. In the editor, open the “Add block/section” entry (location may vary by layout).

   Figure 5-2-3-1: Add block (screenshot TBD)

2. Select a block type (heading/paragraph/image, etc.).

3. Configure block properties and review the live preview.

4. Adjust block order if the UI provides sorting/dragging (implementation-dependent).

5.2.4 Upload Images/Videos#

1. Add an “Image” or “Video” block.
2. Click the upload area and select a local file.
3. After upload, configure alignment, size, and object-fit.
4. Save and switch to preview to verify the rendering.

5.2.5 Preview & Present (Share Links)#

1. Click “Preview” to switch to reader mode.
2. (Optional) enable compact spacing for tighter layout.
3. Switch modes via URL parameters:
   • Preview: /{itemId}?mode=preview
   • Edit: /{itemId}?mode=edit
   • Presentation: /{itemId}?mode=view

5.2.6 Switch UI Language#

1. Click the “Language” icon in the top actions area.

   Figure 5-2-6-1: Language entry (screenshot TBD)

2. Select zh_CN / zh_TW / English to apply immediately.

5.3 Troubleshooting#

• Cannot access the app or keeps redirecting to login: check SSO status and whether the token is valid (login details TBD).
• Save fails: check network connectivity, API availability, and account permissions.
• Media upload fails: verify file format and size limits (images 5MB, videos 50MB by default) and that upload service is reachable.
• Iframe is blank/error: the target site may block embedding (X-Frame-Options/CSP), or requires https/login session.
• Spacing looks unexpected: check whether the URL includes compact=1, or toggle Compact/Default in preview mode.

6. Glossary#

Term	Definition
Story	A web narrative unit composed of ordered blocks, viewable in preview/presentation modes
Block	The smallest editable unit in a story, such as heading, image, video, iframe, etc.
Theme	A preset visual style configuration for consistent look and feel
Mode	Controlled by URL: edit / preview / view
Compact (compact)	Reduced vertical spacing for preview mode layout

7. Support#

• Website: TBD
• Manual download: TBD
• Email: TBD
• Issue reporting: TBD

Appendix: Information to Confirm#

1. Official product name, trademarks, copyright owner(s), and legal wording for the disclaimer.
2. Application URL, SSO/login flow, permission model, and data retention/recycle policy.
3. Finalized release notes and full changelog.
4. Actual upload endpoints and whether supported formats/size limits match the defaults.
5. Screenshot assets and naming for ./images/en/... (recommended: original-name.{zh_CN|zh_TW|en_US}.png).