Geoportal Philippines: Map Composer V2 (GPMapCompV2)

A modern web-based Geographic Information System (GIS) application developed as part of the Geoportal Philippines initiative to help users create professional, publication-ready map compositions directly from a web browser.

GPMapCompV2 combines local geospatial datasets, online map services, feature styling, annotations, drawing tools, measurements, and export capabilities into a single interactive workspace. The application is designed to provide a lightweight, browser-based alternative for common mapping workflows without requiring traditional desktop GIS software.

Project Status: Active Development

---

Live Demo

🌐 GitHub Pages

https://bcballesteros.github.io/GPMapCompV2/

---

About the Project

Geoportal Philippines: Map Composer V2 is the next-generation implementation of the Map Composer application under the Geoportal Philippines initiative.

The project aims to provide an intuitive and efficient web-based environment for visualizing, styling, annotating, and exporting geospatial data. It supports both locally uploaded datasets and online mapping services, enabling users to create customized map compositions suitable for presentations, reports, and general GIS workflows.

The application is built using modern web technologies with an emphasis on maintainability, modular architecture, usability, and long-term scalability.

---

Key Features

Geospatial Data

• Upload multiple geospatial datasets
• Shapefile (.shp)
• GeoJSON
• KML
• CSV
• GeoTIFF (limited support)
• Web Map Service (WMS)
• Geoportal Layer integration

Layer Management

• Multiple layer support
• Layer visibility
• Layer transparency
• Feature labeling
• Attribute table
• Zoom to layer
• Custom feature symbology
• SVG and custom image markers

Annotation & Drawing

• Text annotations
• Annotation management
• Drawing tools
• Distance measurement
• Area measurement
• North arrow
• Scale bar

Export & Sharing

• Export to PNG
• Export to JPEG
• Export to PDF
• Shareable map links

---

Technology Stack

GPMapCompV2 is built using modern web technologies for performance, maintainability, and scalability.

Technology	Purpose
OpenLayers	Interactive web mapping
JavaScript (ES Modules)	Application logic
HTML5	Application structure
CSS3	User interface styling
Vite	Development server and production build
shpjs	Shapefile parsing

---

Supported Data Formats

Vector Data

• Shapefile (.shp)
• GeoJSON (.geojson)
• Keyhole Markup Language (KML)
• Comma-Separated Values (CSV)

Raster Data

• GeoTIFF (.tif / .tiff) (limited support)

Online Services

• Web Map Service (WMS)
• Geoportal Layers

---

Getting Started

Prerequisites

Before running the project locally, ensure you have the following installed:

• Node.js
• npm

---

Installation

Clone the repository.

git clone https://github.com/bcballesteros/GPMapCompV2.git

Navigate to the project folder.

cd GPMapCompV2

Install project dependencies.

npm install

---

Run the Development Server

npm run dev

The application will be available at:

http://localhost:5173

---

Build for Production

npm run build

---

Preview the Production Build

npm run preview

---

Project Structure

The project is organized into modular components to improve maintainability and support future enhancements.

GPMapCompV2/
├── public/              # Static assets
├── src/                 # Application source code
│   ├── components/      # Reusable UI components
│   ├── controls/        # OpenLayers controls
│   ├── layers/          # Layer management
│   ├── styles/          # Styling and symbology
│   ├── tools/           # Application tools
│   ├── ui/              # User interface modules
│   ├── utils/           # Shared utilities
│   └── ...
├── index.html
├── package.json
├── vite.config.js
└── README.md

The project structure continues to evolve as new features and modules are introduced.

---

Application Workflow

A typical workflow in GPMapCompV2 consists of the following steps:

1. Upload one or more geospatial datasets.
2. Configure layer styles and visibility.
3. Apply feature labels and symbology.
4. Add annotations or drawing graphics.
5. Perform map measurements when needed.
6. Export or share the completed map composition.

---

Roadmap

Future development will continue to focus on improving usability, performance, and mapping capabilities.

Planned areas of enhancement include:

• Additional export customization
• Improved GeoTIFF support
• Enhanced editing capabilities
• Additional map layout elements
• Performance optimizations
• User interface refinements
• Continued codebase modularization

The roadmap will continue to evolve as new requirements and user feedback are incorporated.

---

Acknowledgements

GPMapCompV2 is being developed as part of the Geoportal Philippines initiative.

The project is intended to provide a modern, browser-based GIS application that supports map composition, visualization, annotation, and export while integrating both local geospatial datasets and online mapping services.

Development continues through iterative refinement with an emphasis on maintainability, usability, and practical GIS workflows.

---

Contact

For questions, suggestions, or feature requests, please use the GitHub Issues section of this repository.

---

Geoportal Philippines: Map Composer V2 (GPMapCompV2)

A modern browser-based GIS application for creating professional map compositions.