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
🌐 GitHub Pages
https://bcballesteros.github.io/GPMapCompV2/
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.
- Upload multiple geospatial datasets
- Shapefile ZIP (.zip)
- GeoJSON
- GeoPackage (.gpkg), vector feature tables with table selection
- KML
- CSV
- GeoTIFF (limited support)
- Web Map Service (WMS)
- Geoportal Layer integration
GeoPackage import supports Point/MultiPoint, LineString/MultiLineString and Polygon/MultiPolygon, including holes. Select GeoPackage (.gpkg) in Add Geospatial Data, choose a file, select feature tables, and click the existing Upload button. Each table becomes a separate managed layer with the existing styling, labels, attribute table, SLD, legends, Export and Share controls.
Imports are vector-only: tile/raster data is ignored. Source coordinates are transformed to WGS84 before map conversion. EPSG:4326, EPSG:3857, WGS84 UTM and supported file CRS definitions with reliable datum parameters are accepted; unknown/unreliable CRS is rejected with reprojection guidance. Explicit supported GeoJSON CRS declarations are also transformed correctly.
Limits per import: 50 MiB file, 50,000 selected features, 1,000,000 coordinate
positions, 32 MiB estimated attribute data, 1 MiB per attribute value. Modern
browsers with module workers and WebAssembly are required. GeoPackage code and
SQLite assets load locally on demand. Large integers are preserved as decimal
strings, binary values as hex: strings, and date-like values as their source
text. See GeoPackage implementation and QA guide for
policies, tested behavior, runtime requirements and limitations.
- Multiple layer support
- Layer visibility
- Layer transparency
- Feature labeling
- Attribute table
- Zoom to layer
- Custom feature symbology
- SVG and custom image markers
- Text annotations
- Annotation management
- Drawing tools
- Distance measurement
- Area measurement
- North arrow
- Scale bar
- Export to PNG
- Export to JPEG
- Export to PDF
- Email-based sharing of static PNG, JPEG, and PDF map outputs
The Export and Share small previews open the same centered inspection viewer. Its desktop window uses about 86% of viewport width and 84% of viewport height, with safe margins on narrow screens. Fit to Window uses the measured image area and refits after resizing; manual zoom keeps its source scale and clamps panning to the new bounds. The 100% control maps one output canvas pixel to one CSS pixel. The viewer reuses the full-resolution output canvas, so detail is limited by the generated output resolution. Its zoom and resize controls do not change the map composition or exported files.
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 |
- Shapefile (.shp)
- GeoJSON (.geojson)
- Keyhole Markup Language (KML)
- Comma-Separated Values (CSV)
- GeoTIFF (.tif / .tiff) (limited support)
- Web Map Service (WMS)
- Geoportal Layers
Before running the project locally, ensure you have the following installed:
- Node.js
- npm
Clone the repository.
git clone https://github.com/bcballesteros/GPMapCompV2.gitNavigate to the project folder.
cd GPMapCompV2Install project dependencies.
npm installnpm run devThe application will be available at:
http://localhost:5173
npm run buildnpm run previewThe 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.
Export and Share automatically include legends for visible supported uploaded vector layers. See Output legends for inclusion rules, layout, resource limits, verification and visual fidelity notes.
A typical workflow in GPMapCompV2 consists of the following steps:
- Upload one or more geospatial datasets.
- Configure layer styles and visibility.
- Apply feature labels and symbology.
- Add annotations or drawing graphics.
- Perform map measurements when needed.
- Export or share the completed map composition.
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.
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.
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.