Map Viewer Plugin

A customizable map viewer component that supports GML, XML and SLD files. Built using Lit, Openlayers and Web Components

Features

• GML Support: Upload or drag-and-drop GML files to add vector tile data to the map.
• SLD Support: Upload or drag-and-drop SLD files to apply styles to the map - Works when uploading GML simultaneously.
• XML Support: Upload or drag-and-drop XML files to add metadata to the map.
• Metadata Handling: Utilize XML files for metadata, parsed and displayed alongside the map.
• Layer Management: Switch added GML layers on and off as needed.
• Responsive UI: A flexible and modern interface built using Lit and Web Components.

Technologies Used

• OpenLayers: For rendering maps and handling GML files.
• Lit: For building reusable and efficient web components.
• Vite: For fast development and optimized production builds.
• Web Components:: To encapsulate and modularize the UI.

Getting Started

Prerequisites

• Node.js (version 18 or later)
• npm (Node Package Manager, usually included with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/your-username/retsgeografi-map-viewer.git

2. Navigate to the project directory:

   cd map-viewer

3. Install dependencies:

   npm install

Running the Development Server

Start the development server with Vite:

npm run dev

• This command will start a local server, usually at http://localhost:5000, where you can see the application in action. The server supports hot module replacement (HMR), so changes to the code will automatically refresh the page.

Building for Production

To create an optimized build for production:

npm run build

• This will generate a dist folder containing the compiled and minified files for deployment.

Previewing the Production Build

To test the production build locally:

npm run preview

Usage

Adding GML Files

• Upload: Click the upload button (to be added in the UI) to select a GML file for rendering on the map.
• Drag & Drop: Drag and drop a GML file directly onto the map to add it as a new layer.
• The added layers can be toggled on and off for better visualization.

XML Metadata

• When a GML file is added, the corresponding XML file (if available) is parsed to extract metadata. This metadata can be displayed in the interface, providing users with contextual information about the map layers.

Project Structure

src/
│
├── examples/                 # Example files for the application.
│  └── 2019/
│        └── example2019.js   # Example file for 2019.
│  └── 2022/
│        └── example2022.js   # Example file for 2022.
│  └── 2024/
│        └── example2024.js   # Example file for 2024.
│
├── router/                   # Routing logic for the application.
│  └── router.js             
│
├── MapViewer.js              # The custom web component for the map viewer.
├── MapTemplate.js            # The custom web component for the map template.
│
├── main.js                   # The entry point of the application.
│
└── index.css                # CSS index for global styles

Code Overview

• MapViewer.js: Defines a custom web component using Lit